Template:NavTables.css: Difference between revisions

← Older edit

Template:NavTables.css (view source)

Revision as of 05:07, 13 October 2025

767 bytes added , 13 October

m

Mobile support test

Lightning266

member

1,308

edits

@@ Line 1: / Line 1: @@
-.mw-parser-output .nav-container {
+__CONTENTMODEL__ Sanitized CSS
+/* Main container */
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    margin: 0px;
+    background-color: #f9f9f9;
+    padding: 10px;
+}
+/* Each table container */
+.table-container {
+    flex: 1 1 22%;
+    padding: 5px;
+    min-width: 200px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+}
+/* Table styling */
+.table {
+    border-spacing: 0;
+    width: 100%;
+}
+/* Table header */
+.table th {
+    border-bottom: 1px solid;
+    text-align: left;
+    padding: 5px;
+}
+/* Table cell */
+.table td {
+    padding: 5px;
+}
+/* Table header icons */
+.table th img {
+    width: 25px;
+}
+/* Specific padding adjustments for elements */
+.table .table-header img {
+    width: 25px;
+}
+.table .item-icon img {
+    width: 25px;
+}
+/* Larger padding for specific links or images */
+.table .large-padding {
+    padding: 10px;
+}
+/* Desktop/tablet default */
+.navtables-container {
    display: flex;
    flex-wrap: wrap;
@@ Line 5: / Line 67: @@
    border: 1px solid #ccc;
    border-radius: 10px;
-  margin: 0;
    background-color: #f9f9f9;
    padding: 10px;
 }
-.mw-parser-output .nav-card {
+/* Each box */
+.navtables-section {
    flex: 1 1 22%;
+  min-width: 200px;
    padding: 5px;
-  min-width: 200px;
    border: 1px solid #ccc;
    border-radius: 10px;
@@ Line 19: / Line 81: @@
 }
-.mw-parser-output .nav-table {
+/* Mobile layout */
-  border-spacing: 0;
+@media screen and (max-width: 768px) {
-  width: 100%;
+   .navtables-container {
-}
+    flex-direction: column;
+   }
-.mw-parser-output .nav-header-left {
-   border-bottom: 1px solid;
-  text-align: left;
-  padding: 5px;
-}
-.mw-parser-output .nav-header-right {
-  border-bottom: 1px solid;
-  text-align: right;
-   padding: 5px;
-}
-.mw-parser-output .nav-cell {
-  padding: 5px;
-}
-.mw-parser-output .nav-cell-tight {
+  .navtables-section {
-  padding: 10px;
+    flex: 1 1 100%;
+    width: 100%;
+  }
 }