MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
-:root {
+/* =========================================================
-  --wk-bg: #FAF7F0;         /* parchment / ivory */
+   Mobile fixes
-  --wk-text: #262421;       /* deep charcoal */
+   Prevent infoboxes / series boxes from crushing article text
-  --wk-green: #2F4F46;      /* dark green */
+   ========================================================= */
-  --wk-lapis: #355C8C;      /* lapis blue */
-  --wk-gold: #B08D57;       /* muted gold */
-  --wk-bronze: #8C6A43;     /* bronze */
-  --wk-link: #2C5D63;       /* dark blue-green */
-  --wk-link-hover: #1F4448; /* darker hover */
-}
+@media screen and (max-width: 768px) {
-/* Overall page background and text */
+  .infobox,
-body,
+  .navbox,
-.mw-page-container,
+  .vertical-navbox,
-.vector-body,
+  .metadata,
-.mw-body,
+  table.infobox,
-#content {
+  table.navbox,
-  background-color: var(--wk-bg);
+  table[style*="float:right"],
-  color: var(--wk-text);
+  table[style*="float: right"],
-}
+  div[style*="float:right"],
+  div[style*="float: right"] {
+    float: none !important;
+    clear: both !important;
+    width: calc(100% - 1.5rem) !important;
+    max-width: 34rem !important;
+    min-width: 0 !important;
+    margin: 1.25em auto !important;
+    box-sizing: border-box !important;
+    border-left: 4px solid var(--wk-green) !important;
+  }
-/* Main content area */
+  .infobox img,
-.mw-parser-output {
+  .navbox img,
-  color: var(--wk-text);
+  table.infobox img,
-}
+  table.navbox img {
+    max-width: 80% !important;
+    height: auto !important;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
-/* Headings */
+  .mw-parser-output > p,
-.mw-body h1,
+  .mw-parser-output > ul,
-.mw-body h2,
+  .mw-parser-output > ol {
-.mw-body h3,
+    clear: both;
-.mw-body h4,
+   }
-.mw-body h5,
-.mw-body h6 {
-  color: var(--wk-green);
-  border-bottom: 1px solid var(--wk-gold);
-   padding-bottom: 0.2em;
-}
-/* Links */
+   #content {
-a,
+    padding-left: 16px !important;
-.mw-parser-output a {
+    padding-right: 16px !important;
-  color: var(--wk-link);
+    box-sizing: border-box !important;
-}
+  }
-a:visited,
+  .mw-body,
-.mw-parser-output a:visited {
+  .vector-body,
-  color: var(--wk-lapis);
+  .mw-body-content,
-}
+  #bodyContent,
+  .mw-parser-output {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    box-sizing: border-box !important;
+  }
-a:hover,
+  .mw-body h1,
-.mw-parser-output a:hover {
+  .mw-parser-output h1 {
-  color: var(--wk-link-hover);
+    font-size: 2rem;
-  text-decoration: underline;
+    line-height: 1.12;
-}
+    margin-top: 0.6em;
+    margin-bottom: 0.55em;
+  }
-/* Table of contents */
+  .mw-body h2,
-.toc,
+  .mw-parser-output h2 {
-#toc {
+    font-size: 1.55rem;
-  background-color: #FBF7EF;
+    line-height: 1.2;
-  border: 1px solid var(--wk-gold);
+   }
-   color: var(--wk-text);
-}
-/* Infoboxes, tables, navboxes */
+  .infobox ul,
-.infobox,
+  .navbox ul,
-.wikitable,
+  table.infobox ul,
-.navbox,
+   table.navbox ul {
-table {
+    padding-left: 1.3em;
-  background-color: #FBF7EF;
+   }
-  color: var(--wk-text);
-  border: 1px solid var(--wk-bronze);
-}
-/* Table headers */
-.wikitable th,
-.infobox th,
-.navbox-title {
-  background-color: #EFE4C8;
-  color: var(--wk-green);
-   border: 1px solid var(--wk-gold);
-}
-/* Standard table cells */
-.wikitable td,
-.infobox td,
-.navbox td {
-  border: 1px solid #D6C4A3;
-}
-/* Top page tabs / interface elements */
-.vector-page-toolbar,
-.vector-sticky-header,
-.vector-user-links,
-.vector-column-start,
-.vector-column-end {
-  background-color: #F3EAD8;
-   color: var(--wk-text);
-}
-/* Search box / inputs */
-input,
-textarea,
-select {
-  background-color: #FFFDF8;
-  color: var(--wk-text);
-  border: 1px solid var(--wk-bronze);
-}
-/* Buttons */
-button,
-input[type="submit"] {
-  background-color: var(--wk-green);
-  color: #ffffff;
-  border: 1px solid var(--wk-gold);
-}
-button:hover,
-input[type="submit"]:hover {
-  background-color: var(--wk-link);
 }