|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
|
| |
| /* =========================================================
| |
| WikiHikmah Global Styling
| |
| Pearl / off-white academic palette
| |
| ========================================================= */
| |
|
| |
| :root {
| |
| --wk-bg: #FDFBF7;
| |
| --wk-surface: #FEFCF8;
| |
| --wk-surface-2: #FFFFFF;
| |
| --wk-text: #262421;
| |
| --wk-muted-text: #5C5750;
| |
|
| |
| --wk-green: #2F4F46;
| |
| --wk-lapis: #355C8C;
| |
| --wk-gold: #B08D57;
| |
| --wk-bronze: #8C6A43;
| |
|
| |
| --wk-link: #2C5D63;
| |
| --wk-link-hover: #1F4448;
| |
| --wk-redlink: #8C4A43;
| |
|
| |
| --wk-border-soft: #E5D8C1;
| |
| --wk-border-medium: #D6C4A3;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| Overall page background and text
| |
| ========================================================= */
| |
|
| |
| html,
| |
| body {
| |
| 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-editsection a {
| |
| color: var(--wk-muted-text);
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 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 {
| |
| background-color: rgba(176, 141, 87, 0.28);
| |
| color: var(--wk-text);
| |
| }
| |
