MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 1: / Line 1: @@
-/* === Wikipedia-style mobile infobox (full width) === */
+/* ============================= */
-@media screen and (max-width: 720px) {
+/* Wikipedia-style Infobox Look */
+/* ============================= */
+.infobox {
+  background: #f8f9fa;
+  border: 1px solid #a2a9b1;
+  border-collapse: collapse;
+  color: #202122;
+  font-size: 90%;
+}
+.infobox-above {
+  background: #eaecf0;
+  font-size: 125%;
+  font-weight: bold;
+  text-align: center;
+  padding: 8px;
+}
-  /* Infobox container */
+.infobox th,
-  .infobox {
+.infobox td {
-    float: none !important;
+  padding: 6px 8px;
-    width: 100vw !important;
+  vertical-align: top;
-    max-width: 100vw !important;
+}
-    margin: 0 -16px 16px -16px !important;
-    border-left: none !important;
-    border-right: none !important;
-    box-sizing: border-box;
-  }
-  /* Infobox title */
+.infobox th {
-  .infobox th[colspan="2"] {
+  background: #eaecf0;
-    font-size: 1.3em;
+  text-align: left;
-    padding: 12px 10px !important;
+}
-    text-align: center;
-  }
-  /* Infobox image */
+.infobox img {
-  .infobox img {
+  max-width: 100%;
-    width: 100% !important;
+  height: auto;
-    height: auto !important;
+}
-    max-width: 100% !important;
-    display: block;
-    margin: 0 auto;
-  }
-  /* Image caption */
+/* ============================= */
-  .infobox caption,
+/* Desktop infobox alignment */
-  .infobox .infobox-caption {
+/* ============================= */
-    padding: 8px 10px;
-    font-size: 0.9em;
-  }
-  /* Table cells spacing */
+@media screen and (min-width: 721px) {
-   .infobox td,
+   .infobox {
-  .infobox th {
+    width: 22em;
-     padding: 8px 10px !important;
+    float: right;
+     margin: 0 0 1em 1em;
    }
-}
-.verified-icon {
-  display: inline-block;
-  vertical-align: text-bottom;
-  margin-left: 4px;
-  white-space: nowrap;
-}
-/* Align name and verified badge in infobox title */
-.infobox-above {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
 }
-.infobox-above .verified-icon-inline {
+/* ============================= */
-  margin-left: 0;
+/* Mobile infobox (let Minerva handle width) */
-}
+/* ============================= */
-/* Infobox title alignment fix */
-.infobox-title-wrap {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-}
-.infobox-title-wrap .verified-badge {
+@media screen and (max-width: 720px) {
-  display: inline-flex;
+  .infobox {
-  align-items: center;
+    width: auto;
+    float: none;
+    margin: 0 0 1em 0;
+  }
 }
+/* Remove ugly gaps */
+.infobox tr + tr th, .infobox tr + tr td { border-top: 1px solid #a2a9b1; }