MediaWiki:Common.css: Difference between revisions

Revision as of 01:10, 25 April 2026

/* 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);
}