MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
+/* === Wikipedia-style mobile infobox (full width) === */
+@media screen and (max-width: 720px) {
+  /* Infobox container */
+  .infobox {
+    float: none !important;
+    width: 100vw !important;
+    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[colspan="2"] {
+    font-size: 1.3em;
+    padding: 12px 10px !important;
+    text-align: center;
+  }
+  /* Infobox image */
+  .infobox img {
+    width: 100% !important;
+    height: auto !important;
+    max-width: 100% !important;
+    display: block;
+    margin: 0 auto;
+  }
+  /* Image caption */
+  .infobox caption,
+  .infobox .infobox-caption {
+    padding: 8px 10px;
+    font-size: 0.9em;
+  }
+  /* Table cells spacing */
+  .infobox td,
+  .infobox th {
+    padding: 8px 10px !important;
+  }
+}
+/* ============================= */
+/* Wikipedia Infobox Styling */
+/* ============================= */
+.infobox {
+  background-color: #f8f9fa;
+  border: 1px solid #a2a9b1;
+  color: #202122;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.infobox th,
+.infobox td {
+  padding: 6px 8px;
+  vertical-align: top;
+  font-size: 90%;
+}
+.infobox th {
+  background-color: #eaecf0;
+  font-weight: bold;
+  text-align: left;
+}
+.infobox-above {
+  background-color: #eaecf0;
+  font-size: 125%;
+  font-weight: bold;
+  text-align: center;
+  padding: 8px;
+}
+.infobox caption {
+  font-size: 90%;
+  text-align: center;
+  color: #54595d;
+}
+.infobox img {
+  max-width: 100%;
+  height: auto;
+}
+/* Remove ugly gaps */
+.infobox tr + tr th,
+.infobox tr + tr td {
+  border-top: 1px solid #a2a9b1;
+}
+/* Mobile infobox full width (Minerva skin) */
+@media screen and (max-width: 720px) {
+  .infobox {
+    width: 100% !important;
+    float: none !important;
+    margin: 0 0 1em 0 !important;
+  }
+}
+/* Desktop infobox (Wikipedia style) */
+@media screen and (min-width: 721px) {
+  .infobox {
+    width: 22em;
+    float: right;
+    margin: 0 0 1em 1em;
+  }
+}
+/* Mobile infobox full width */
+@media screen and (max-width: 720px) {
+  .infobox {
+    width: 100% !important;
+    float: none !important;
+    margin: 0 0 1em 0 !important;
+  }
+}
+/* FORCE infobox full width on mobile (override inline styles) */
+@media screen and (max-width: 720px) {
+  table.infobox {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    float: none !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+/* Minerva mobile full-width infobox */
+@media screen and (max-width: 720px) {
+  .skin-minerva .content table.infobox {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    margin-left: calc(-1 * var(--content-padding, 16px)) !important;
+    margin-right: calc(-1 * var(--content-padding, 16px)) !important;
+    float: none !important;
+  }
+}
+/* Wikipedia infobox core */
+.infobox {
+  float: right;
+  clear: right;
+  margin: 0 0 1em 1em;
+  width: 22em;
+  background: #f8f9fa;
+  border: 1px solid #a2a9b1;
+  border-spacing: 0;
+  color: #202122;
+}
+.infobox-above {
+  background: #eaecf0;
+  text-align: center;
+  font-size: 125%;
+  font-weight: bold;
+}
+.infobox-image,
+.infobox-caption {
+  text-align: center;
+}
+.infobox th,
+.infobox td {
+  padding: 6px 8px;
+  vertical-align: top;
+}
+.infobox th {
+  background: #eaecf0;
+  text-align: left;
+}
+/* Mobile (Minerva) full width */
+@media screen and (max-width: 720px) {
+  .infobox {
+    float: none;
+    width: 100%;
+    margin: 0 0 1em 0;
+  }
+}