MediaWiki:Common.css: Difference between revisions

Content added Content deleted

Inline

@@ Line 462: / Line 462: @@
 }
- /******************************
+/*********************************************************
+ * Styling for a responsive image gallery with 4 coloumns
- * FLEX FOR HORIZONTAL INFOBOXES
- ******************************/
+ *********************************************************/
+.row {
-/* Create two unequal columns that sits next to each other */
+  display: flex;
-/* left column */
+  flex-wrap: wrap;
-.left-side-infobox {
-  flex: 50%;
+  padding: 0 5px;
-  background-color: #fff;
-  /*padding: 10px;*/
-  margin: 10px;
 }
+/* Create four equal columns that sits next to each other */
-/* right column */
-.right-side-infobox {
-  flex: 50%;
-  background-color: #fff;
-  /*padding: 10px;*/
-  margin: 10px;
-}
-/* Create four equal columns that sits next to each other - useful for galleries
 .column {
-  flex: 25%;
+  flex: 1;
-  max-width: 25%;
+  max-width: 100%;
+  /*background-color:var(--color-surface-1);*/
-  padding: 0 4px;
+  /*border:1px solid var(--border-color-base);*/
+  /*color:var(--color-base-emphasized);*/
+  border-radius: 8px;
+  /*box-shadow: 0 3px 6px rgba(0,0,0,0.04),0 3px 6px rgba(0,0,0,0.0575);*/
+  padding: 5px;
+  margin: 5px;
 }
@@ Line 494: / Line 489: @@
 }
-/* Responsive layout - makes a two column-layout instead of four columns
+/* Responsive layout - makes a two column-layout instead of four columns */
 @media (max-width: 800px) {
   .column {
-    flex: 50%;
+    flex: 48%;
-    max-width: 50%;
+    max-width: 100%;
   }
 }
-/* Responsive layout - makes the two columns stack on top of each other instead of next to each other
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 @media (max-width: 600px) {
   .column {
@@ Line 508: / Line 503: @@
     max-width: 100%;
   }
-} */
+}
+ /******************************
+ * FLEX FOR HORIZONTAL INFOBOXES
+ ******************************/
+/* Create two unequal columns that sits next to each other */
+/* left column */
+.left-side-infobox {
+  flex: 50%;
+  background-color: #fff;
+  /*padding: 10px;*/
+  margin: 10px;
+}
+/* right column */
+.right-side-infobox {
+  flex: 50%;
+  background-color: #fff;
+  /*padding: 10px;*/
+  margin: 10px;
+}