MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 143: / Line 143: @@
 /* ==============================
-    INFOBOX REDESIGN (v2)
+    INFOBOX
     ============================== */
-/* container */
 .infobox {
-  position: relative;
    float: right;
-   width: 300px;
+  clear: right;
-   margin: -2em 0 1em 1em;
+   width: 280px;
+   margin: 0 0 1em 1em;
+  background: #f9f9f9;
+  border: 1px solid #aaa;
    font-size: 90%;
-   background: #fff;
+   color: #000;
-  border: 1px solid #b8d4f1;
+   border-collapse: collapse;
-  border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  overflow: hidden;
-  clear: none !important;
-   border-collapse: collapse !important;
 }
-@media (max-width: 511px) {
+@media (max-width: 600px) {
    .infobox {
      float: none;
-     margin: 0 0 1em 0;
+     margin: 0 auto 1em auto;
-     width: auto;
+     width: 100%;
-  }
-}
-@media (max-width: 337px) {
-  .infobox {
-    margin-left: -16px;
-    margin-right: -16px;
-    border-left: none;
-    border-right: none;
    }
 }
@@ Line 181: / Line 168: @@
 /* title */
 .infobox-title {
+  background: #b0c4de;
    text-align: center;
    font-weight: bold;
-   font-size: 120%;
+   font-size: 110%;
-  background: #3b82f6;
+   padding: 3px 4px;
-  color: #fff;
+   border-bottom: 1px solid #aaa;
-   padding: 8px;
-   border-radius: 4px 4px 0 0;
 }
@@ Line 193: / Line 179: @@
 .infobox-imagearea {
    text-align: center;
-   padding: 6px;
+   background: #fff;
-   background: #fafcff;
+   padding: 4px;
-   border-bottom: 1px solid #d5e4f6;
+   border-bottom: 1px solid #aaa;
 }
@@ Line 201: / Line 187: @@
    max-width: 100%;
    height: auto;
-  border-radius: 3px;
 }
 /* rows */
-.infobox .infobox-rows {
+.infobox-rows {
-  display: table;
    width: 100%;
-   border-collapse: collapse !important;
+   border-collapse: collapse;
 }
-.infobox-rows tr {
+.infobox-rows th,
-  border-bottom: 1px solid #e6effb;
+.infobox-rows td {
-}
+   padding: 2px 5px; /* tighter spacing */
+  vertical-align: top;
-.infobox-rows tr:last-child {
+   border-bottom: 1px solid #ddd;
-   border-bottom: none;
-}
-.infobox-rows tr:nth-child(2n) {
-   background-color: #f4f8ff;
 }
-/* labels (left column) */
 .infobox-rows th {
    text-align: left;
-   white-space: nowrap;
+   font-weight: bold;
-  color: #0d47a1;
-  background-color: #f1f6ff;
-  padding: 4px 6px;
    width: 35%;
-   font-weight: 600;
+   background: #f2f2f2;
-  border-right: 1px solid #d8e5fb;
-  vertical-align: middle;
 }
-/* values (right column) */
 .infobox-rows td {
-  padding: 4px 6px;
-  line-height: 1.1em;
-  vertical-align: middle;
-  color: #222;
    background: #fff;
 }
-/* eliminate extra whitespace */
+/* footer */
-.infobox td > div,
+.infobox-footer {
-.infobox td > p {
+  text-align: center;
-   margin: 0 !important;
+  font-style: italic;
-   padding: 0 !important;
+  background: #f2f2f2;
-   display: inline !important;
+   border-top: 1px solid #aaa;
+   padding: 3px;
+   font-size: 85%;
 }
-/* optional alternating hover for clarity */
+/* spacing fix */
-.infobox-rows tr:hover {
+.mw-parser-output > .infobox + p {
-   background-color: #e8f1ff;
+   margin-top: 0 !important;
 }
-/* footer / bottom text */
+.infobox td p:empty,
-.infobox-footer {
+.infobox td p:has(br) {
-  text-align: center;
+   display: none !important;
-  color: #0d47a1;
+   margin: 0 !important;
-   background: #e8f2ff;
+   padding: 0 !important;
-   border-top: 1px solid #b8d4f1;
-   padding: 5px;
-  font-style: italic;
-  font-size: 90%;
 }
-/* remove stray p spacing and cleanup */
+.infobox-section th {
-.mw-parser-output > .infobox + p:empty,
+  background: #b0c4de !important;
-.mw-parser-output > .infobox + p:has(> br:only-child) {
+  color: #000;
-   display: none !important;
+  text-align: center;
+  font-weight: bold;
+  border-bottom: 1px solid #aaa;
+   padding: 4px;
 }
-.mw-parser-output > .infobox + p {
+.infobox .infobox-section{
-   margin-top: 0 !important;
+  background: var(--quaternary, #5865f2);
+  color:#fff;
+  text-align:left;
+  padding:.35em .6em;
+   font-weight:600;
 }
-/* debug hiding */
+.infobox .infobox-section{
-.history-json {
+   display:block;
-   display: none;
+  background: var(--quaternary, #5865f2);
+  color:#fff;
+  padding:.4em .6em;
+  font-weight:600;
+  border-radius:4px;
+  margin:.5em 0;
 }