|
|
| (3 intermediate revisions by the same user not shown) |
| Line 2: |
Line 2: |
|
| |
|
| /* ========================================================= | | /* ========================================================= |
| WikiHikmah Global Styling | | Mobile fixes |
| Pearl / off-white academic palette | | Prevent infoboxes / series boxes from crushing article text |
| ========================================================= */ | | ========================================================= */ |
|
| |
|
| :root { | | @media screen and (max-width: 768px) { |
| --wk-bg: #FDFBF7;
| |
| --wk-surface: #FEFCF8;
| |
| --wk-surface-2: #FFFFFF;
| |
| --wk-text: #262421;
| |
| --wk-muted-text: #5C5750;
| |
|
| |
|
| --wk-green: #2F4F46; | | .infobox, |
| --wk-lapis: #355C8C;
| | .navbox, |
| --wk-gold: #B08D57;
| | .vertical-navbox, |
| --wk-bronze: #8C6A43;
| | .metadata, |
| | table.infobox, |
| | table.navbox, |
| | table[style*="float:right"], |
| | 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; |
| | } |
|
| |
|
| --wk-link: #2C5D63; | | .infobox img, |
| --wk-link-hover: #1F4448;
| | .navbox img, |
| --wk-redlink: #8C4A43;
| | table.infobox img, |
| | table.navbox img { |
| | max-width: 80% !important; |
| | height: auto !important; |
| | display: block; |
| | margin-left: auto; |
| | margin-right: auto; |
| | } |
|
| |
|
| --wk-border-soft: #E5D8C1; | | .mw-parser-output > p, |
| --wk-border-medium: #D6C4A3; | | .mw-parser-output > ul, |
| } | | .mw-parser-output > ol { |
| | clear: both; |
| | } |
|
| |
|
| | .mw-body, |
| | #content, |
| | .vector-body, |
| | .mw-parser-output { |
| | padding-left: 1rem !important; |
| | padding-right: 1rem !important; |
| | box-sizing: border-box; |
| | } |
|
| |
|
| /* =========================================================
| | .mw-body h1, |
| Overall page background and text
| | .mw-parser-output h1 { |
| ========================================================= */
| | font-size: 2.4rem; |
| | | line-height: 1.12; |
| html,
| | margin-top: 0.6em; |
| body {
| | margin-bottom: 0.55em; |
| background-color: var(--wk-bg);
| | } |
| color: var(--wk-text); | |
| }
| |
| | |
| body,
| |
| .mw-body, | |
| .vector-body,
| |
| .mw-parser-output, | |
| #content,
| |
| #bodyContent {
| |
| color: var(--wk-text);
| |
| }
| |
| | |
| | |
| /* Main page containers */
| |
| | |
| .mw-page-container,
| |
| .mw-body,
| |
| .vector-body,
| |
| #content {
| |
| background-color: var(--wk-bg);
| |
| }
| |
| | |
| | |
| /* Inner content surface */
| |
| | |
| .mw-body,
| |
| #content {
| |
| border-color: var(--wk-border-soft);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Main text
| |
| ========================================================= */
| |
| | |
| .mw-parser-output p,
| |
| .mw-parser-output li,
| |
| .mw-parser-output dd,
| |
| .mw-parser-output td { | |
| color: var(--wk-text);
| |
| line-height: 1.65;
| |
| }
| |
| | |
| .mw-parser-output small,
| |
| .mw-parser-output .mw-small {
| |
| color: var(--wk-muted-text);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Headings
| |
| ========================================================= */
| |
| | |
| .mw-body h1,
| |
| .mw-body h2,
| |
| .mw-body h3,
| |
| .mw-body h4,
| |
| .mw-body h5,
| |
| .mw-body h6,
| |
| .mw-parser-output h1,
| |
| .mw-parser-output h2,
| |
| .mw-parser-output h3,
| |
| .mw-parser-output h4,
| |
| .mw-parser-output h5,
| |
| .mw-parser-output h6 {
| |
| color: var(--wk-green);
| |
| font-weight: 600;
| |
| }
| |
| | |
| .mw-body h1,
| |
| .mw-parser-output h1 {
| |
| border-bottom: 1px solid var(--wk-gold);
| |
| padding-bottom: 0.25em;
| |
| }
| |
| | |
| .mw-body h2,
| |
| .mw-parser-output h2 {
| |
| border-bottom: 1px solid var(--wk-border-medium);
| |
| padding-bottom: 0.2em;
| |
| }
| |
| | |
| .mw-body h3,
| |
| .mw-parser-output h3 {
| |
| color: var(--wk-lapis);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Links
| |
| ========================================================= */
| |
| | |
| a,
| |
| .mw-parser-output a {
| |
| color: var(--wk-link);
| |
| }
| |
| | |
| a:visited,
| |
| .mw-parser-output a:visited {
| |
| color: var(--wk-lapis);
| |
| }
| |
| | |
| a:hover,
| |
| .mw-parser-output a:hover {
| |
| color: var(--wk-link-hover);
| |
| text-decoration: underline;
| |
| }
| |
| | |
| a.new,
| |
| .mw-parser-output a.new {
| |
| color: var(--wk-redlink); | |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Table of contents
| |
| ========================================================= */
| |
| | |
| .toc,
| |
| #toc,
| |
| .vector-toc,
| |
| .vector-toc-landmark {
| |
| background-color: var(--wk-surface);
| |
| border: 1px solid var(--wk-border-medium);
| |
| color: var(--wk-text);
| |
| }
| |
| | |
| .tocnumber {
| |
| color: var(--wk-muted-text);
| |
| }
| |
| | |
| .toctitle h2 {
| |
| color: var(--wk-green);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Tables, infoboxes, navboxes
| |
| ========================================================= */
| |
| | |
| .wikitable,
| |
| .infobox,
| |
| .navbox {
| |
| background-color: var(--wk-surface);
| |
| color: var(--wk-text);
| |
| border: 1px solid var(--wk-border-medium);
| |
| }
| |
| | |
| .wikitable th,
| |
| .infobox th,
| |
| .navbox-title,
| |
| .navbox th {
| |
| background-color: var(--wk-surface-2);
| |
| color: var(--wk-green);
| |
| border: 1px solid var(--wk-border-medium);
| |
| }
| |
| | |
| .wikitable td,
| |
| .infobox td,
| |
| .navbox td {
| |
| background-color: var(--wk-surface);
| |
| color: var(--wk-text);
| |
| border: 1px solid var(--wk-border-soft);
| |
| }
| |
| | |
| .wikitable caption,
| |
| .infobox caption {
| |
| color: var(--wk-green);
| |
| font-weight: 600;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Images and thumbnails
| |
| ========================================================= */
| |
| | |
| .thumbinner {
| |
| background-color: var(--wk-surface);
| |
| border: 1px solid var(--wk-border-medium);
| |
| }
| |
| | |
| .thumbcaption {
| |
| color: var(--wk-muted-text);
| |
| }
| |
| | |
| .mw-parser-output img {
| |
| border-color: var(--wk-border-soft);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Blockquotes and quotations
| |
| ========================================================= */
| |
| | |
| blockquote {
| |
| background-color: var(--wk-surface);
| |
| border-left: 4px solid var(--wk-gold);
| |
| color: var(--wk-text);
| |
| padding: 0.8em 1em;
| |
| }
| |
| | |
| .mw-parser-output blockquote {
| |
| background-color: var(--wk-surface);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Code, preformatted text
| |
| ========================================================= */
| |
| | |
| code,
| |
| pre,
| |
| .mw-code {
| |
| background-color: var(--wk-surface);
| |
| color: var(--wk-text);
| |
| border: 1px solid var(--wk-border-soft);
| |
| }
| |
| | |
| pre {
| |
| padding: 1em;
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Interface / Vector skin areas
| |
| ========================================================= */
| |
| | |
| .vector-header-container,
| |
| .vector-page-toolbar,
| |
| .vector-sticky-header,
| |
| .vector-user-links,
| |
| .vector-column-start,
| |
| .vector-column-end,
| |
| .vector-main-menu,
| |
| .vector-toc,
| |
| .vector-dropdown-content {
| |
| background-color: var(--wk-surface);
| |
| color: var(--wk-text);
| |
| }
| |
| | |
| .vector-menu-heading,
| |
| .vector-toc-heading,
| |
| .vector-pinnable-header-label {
| |
| color: var(--wk-green);
| |
| }
| |
| | |
| .vector-menu-content a,
| |
| .vector-toc a,
| |
| .vector-main-menu a {
| |
| color: var(--wk-link);
| |
| }
| |
| | |
| .vector-menu-content a:hover,
| |
| .vector-toc a:hover,
| |
| .vector-main-menu a:hover {
| |
| color: var(--wk-link-hover);
| |
| }
| |
| | |
| | |
| /* Page tabs */
| |
| | |
| .vector-page-titlebar,
| |
| .vector-page-toolbar-container {
| |
| background-color: var(--wk-bg);
| |
| border-color: var(--wk-border-soft);
| |
| }
| |
| | |
| .vector-page-tools,
| |
| .vector-page-tools-landmark {
| |
| background-color: var(--wk-surface);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Search boxes, inputs, buttons
| |
| ========================================================= */
| |
| | |
| input,
| |
| textarea,
| |
| select,
| |
| .cdx-text-input__input,
| |
| .oo-ui-inputWidget-input {
| |
| background-color: var(--wk-surface-2);
| |
| color: var(--wk-text);
| |
| border: 1px solid var(--wk-border-medium);
| |
| }
| |
| | |
| input:focus,
| |
| textarea:focus,
| |
| select:focus,
| |
| .cdx-text-input__input:focus,
| |
| .oo-ui-inputWidget-input:focus {
| |
| border-color: var(--wk-gold);
| |
| outline: none;
| |
| box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.18);
| |
| }
| |
| | |
| button,
| |
| input[type="submit"],
| |
| .cdx-button,
| |
| .oo-ui-buttonElement-button {
| |
| background-color: var(--wk-surface);
| |
| color: var(--wk-green);
| |
| border: 1px solid var(--wk-border-medium);
| |
| }
| |
| | |
| button:hover,
| |
| input[type="submit"]:hover,
| |
| .cdx-button:hover,
| |
| .oo-ui-buttonElement-button:hover {
| |
| background-color: var(--wk-surface-2);
| |
| color: var(--wk-link-hover);
| |
| border-color: var(--wk-gold);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Notices, warnings, edit messages
| |
| ========================================================= */
| |
| | |
| .mw-message-box,
| |
| .warningbox,
| |
| .errorbox,
| |
| .successbox {
| |
| background-color: var(--wk-surface);
| |
| color: var(--wk-text);
| |
| border: 1px solid var(--wk-border-medium);
| |
| } | |
|
| |
|
| .mw-editsection, | | .mw-body h2, |
| .mw-editsection a { | | .mw-parser-output h2 { |
| color: var(--wk-muted-text);
| | font-size: 1.55rem; |
| }
| | line-height: 1.2; |
| | | } |
| | |
| /* =========================================================
| |
| Horizontal rules and borders
| |
| ========================================================= */
| |
| | |
| hr {
| |
| border: 0;
| |
| border-top: 1px solid var(--wk-border-medium);
| |
| }
| |
| | |
| .catlinks { | |
| background-color: var(--wk-surface);
| |
| border: 1px solid var(--wk-border-medium);
| |
| color: var(--wk-text);
| |
| }
| |
| | |
| | |
| /* =========================================================
| |
| Footer
| |
| ========================================================= */
| |
| | |
| #footer,
| |
| .mw-footer { | |
| background-color: var(--wk-bg);
| |
| color: var(--wk-muted-text);
| |
| border-top: 1px solid var(--wk-border-soft);
| |
| }
| |
| | |
| #footer a,
| |
| .mw-footer a {
| |
| color: var(--wk-link); | |
| } | |
| | |
| | |
| /* =========================================================
| |
| Selection highlight
| |
| ========================================================= */
| |
|
| |
|
| ::selection {
| | .infobox ul, |
| background-color: rgba(176, 141, 87, 0.28);
| | .navbox ul, |
| color: var(--wk-text); | | table.infobox ul, |
| | table.navbox ul { |
| | padding-left: 1.3em; |
| | } |
| } | | } |