Fix column layout for Wiktionary

Fixes #429.
kiwix · Jul 21, 2023 · 9b7514f · 9b7514f
1 parent d83585f
commit 9b7514f
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/www/-/s/style-mobile.css b/www/-/s/style-mobile.css
@@ -464,6 +464,61 @@ sub {
     .content .vertical-navbox, .content .navbox {
         display: inherit
     }
+
+    /* Support lists that automatically split into limited-width columns (for translations tables and the like): */
+    .multicolumn-list > ul {
+        -webkit-column-width: 25em;
+        -moz-column-width: 25em;
+        -ms-column-width: 25em;
+        column-width: 25em;
+        column-gap: 20px;
+    }
+    .multicolumn-list-wide > ul {
+        -webkit-column-width: 55em;
+        -moz-column-width: 55em;
+        -ms-column-width: 55em;
+        column-width: 55em;
+        column-gap: 20px;
+    }
+    .multicolumn-list-narrow > ul {
+        -webkit-column-width: 22em;
+        -moz-column-width: 22em;
+        -ms-column-width: 22em;
+        column-width: 22em;
+        column-gap: 20px;
+    }
+
+    /* Used by column templates (see [[Module:columns]]). */
+    .ul-column-count[data-column-count="2"] > ul,
+    .ul-column-count[data-column-count="2"] > ol,
+    .ul-column-count[data-column-count="2"] > dl {
+        -moz-column-count: 2; -webkit-column-count: 2; -ms-column-count: 2; column-count: 2;
+    }
+
+    .ul-column-count[data-column-count="3"] > ul,
+    .ul-column-count[data-column-count="3"] > ol,
+    .ul-column-count[data-column-count="3"] > dl {
+        -moz-column-count: 3; -webkit-column-count: 3; -ms-column-count: 3; column-count: 3;
+    }
+
+    .ul-column-count[data-column-count="4"] > ul,
+    .ul-column-count[data-column-count="4"] > ol,
+    .ul-column-count[data-column-count="4"] > dl {
+        -moz-column-count: 4; -webkit-column-count: 4; -ms-column-count: 4; column-count: 4;
+    }
+
+    .ul-column-count[data-column-count="5"] > ul,
+    .ul-column-count[data-column-count="5"] > ol,
+    .ul-column-count[data-column-count="5"] > dl {
+        -moz-column-count: 5; -webkit-column-count: 5; -ms-column-count: 5; column-count: 5;
+    }
+
+    .ul-column-count[data-column-count="6"] > ul,
+    .ul-column-count[data-column-count="6"] > ol,
+    .ul-column-count[data-column-count="6"] > dl {
+	-moz-column-count: 6; -webkit-column-count: 6; -ms-column-count: 6; column-count: 6;
+}
+
 }
 
 @media all and (max-width:720px) {