Jump to content

MediaWiki:Common.css: Difference between revisions

From Sun Keeperverse Wiki
Forcing light parchment view
Headings now use smooth Verdana (no serif, no excessive bold). Body remains crisp Verdana 13pt. Light background, darker parchment info boxes remain unchanged. No more dark-mode flips or heavy title rendering.
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* ===== Sun Keeperverse — Bright canvas + darker parchment cards ===== */
/* ===== Sun Keeperverse — Vector 2022 parchment theme ===== */


body {
/* Force LIGHT palette */
   background: #f4f1e6;                       /* parchment backdrop */
:root {
   color-scheme: light !important;
  --color-base: #2b2414 !important;
  --color-link: #36c !important;
  --color-link-new: #d33 !important;
}
 
/* Bright page canvas */
html, body {
  background: #ffffff !important;
  color: #2b2414 !important;
}
}


.vector-page, .mw-page-container, .mw-body, .mw-content-container {
/* Main containers: transparent so the page reads bright */
   background: #fffdfa;
.vector-page,
   border: 1px solid #d8caa0;
.mw-page-container,
   box-shadow: 0 1px 3px rgba(0,0,0,.06);
.mw-body,
   border-radius: 8px;
.mw-content-container {
   background: transparent;
   border: none;
   box-shadow: none;
   border-radius: 0;
}
}


.mw-body-content, .vector-body {
.mw-body-content,
.vector-body {
   max-width: 1100px;
   max-width: 1100px;
   margin: 1.5rem auto;
   margin: 1.5rem auto;
Line 19: Line 33:
}
}


/* Typography */
/* Typography: Verdana 13pt */
body, .mw-body-content {
body,
   font-family: "Georgia", "Book Antiqua", serif;
.mw-body-content,
   color: #2f2a1e;
.vector-body,
   line-height: 1.6;
.mw-content-ltr,
.mw-parser-output {
   font-family: Verdana, Geneva, sans-serif !important;
   font-size: 13pt !important;
   line-height: 1.55;
  color: #2b2414;
}
}
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4 {
 
   font-family: "Georgia", "Book Antiqua", serif;
/* --- Headings: Verdana, not over-bold, smooth rendering --- */
.mw-page-title-main,
#firstHeading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h1 .mw-headline,
.mw-body h2 .mw-headline,
.mw-body h3 .mw-headline,
.mw-body h4 .mw-headline {
   font-family: Verdana, Geneva, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.1px;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   color: #2b2414;
   color: #2b2414;
}
}


/* Links */
/* Links: default blue, mossy-green hover, real redlinks */
a, a:visited { color: #8b6d00; }
a,
a:hover { color: #c09e2b; text-decoration: underline; }
a:visited {
  color: var(--color-link, #36c) !important;
}
a:hover {
  color: #547c4b !important;
  text-decoration: underline;
}
a.new,
a.new:visited {
  color: var(--color-link-new, #d33) !important;
}
a.new:hover {
  color: #b00000 !important;
  text-decoration: underline;
}


/* Headings */
/* Section heading rules */
.mw-body h1,
.mw-body h2 {
.mw-body h2 {
   border-bottom: 2px solid #e4d9b0;
   border-bottom: 2px solid #d6c796;
   padding-bottom: .15rem;
   padding-bottom: 0.45rem;
  margin-bottom: 0.6rem;
   margin-top: 1.2em;
   margin-top: 1.2em;
}
}


/* Tables */
/* Paragraphs, lists, content padding */
.wikitable {
.mw-body-content {
   background: #fffdf7;
  padding: 0.85rem 1.1rem;
   border: 1px solid #d8caa0;
}
.mw-body-content p {
  margin: 0.9em 0;
}
.mw-body-content ul,
.mw-body-content ol {
  margin: 0.55em 0 0.85em 1.6em;
}
 
/* Darker parchment cards (TOC, tables, info/nav boxes) */
:root {
  --card-bg: #efe3c1;
  --card-border: #c9b172;
}
 
#toc,
.toc,
.wikitable,
.infobox,
.navbox,
.metadata,
.worldbox,
.worldnav {
   background: var(--card-bg);
   border: 1px solid var(--card-border);
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
}
.wikitable > tr > th, .wikitable > * > tr > th {
 
   background: #efe7cc;
#toc,
   border: 1px solid #d8caa0;
.toc {
  padding: 0.5em 0.75em;
}
 
#toc .toctitle {
  color: #5b4a22;
}
 
#toc ul {
  margin-left: 1.2em;
}
 
.wikitable th,
.wikitable td {
  padding: 0.5em 0.75em;
}
 
.wikitable > tr > th,
.wikitable > * > tr > th {
   background: #e6d7a8;
   border: 1px solid var(--card-border);
   color: #2b2414;
   color: #2b2414;
}
.wikitable > tr > td, .wikitable > * > tr > td {
  border: 1px solid #e6d9b1;
}
}


/* TOC */
.wikitable > tr > td,
#toc, .toc {
.wikitable > * > tr > td {
  background: #f7f1de;
   border: 1px solid #ddc996;
   border: 1px solid #d8caa0;
  border-radius: 8px;
}
}
#toc .toctitle { color: #5b4a22; }


/* Infobox / navbox */
/* Generic infobox/navbox layout on the right */
.infobox, .navbox, .metadata {
.infobox,
.navbox,
.metadata,
.worldnav {
   float: right;
   float: right;
   clear: right;
   clear: right;
Line 70: Line 165:
   max-width: 42%;
   max-width: 42%;
   margin: 0 0 12px 18px;
   margin: 0 0 12px 18px;
   background: #f8f5e9;
   padding: 6px;
  border: 1px solid #c6b480;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
}
@media (max-width: 900px) {
@media (max-width: 900px) {
   .infobox, .navbox, .metadata {
   .infobox,
     float:none;
  .navbox,
     width:auto;
  .metadata,
     max-width:100%;
  .worldnav {
     margin:8px auto;
     float: none;
     width: auto;
     max-width: 100%;
     margin: 8px auto;
   }
   }
}
}


/* Sidebar */
/* Titlebar spacing */
.vector-page-titlebar {
  padding: 6px 0;
}
 
/* Sidebar and footer stay neutral on bright canvas */
.vector-feature-zebra-design-enabled .vector-sidebar-container {
.vector-feature-zebra-design-enabled .vector-sidebar-container {
   background: transparent;
   background: transparent;
}
}


/* Footer */
.mw-footer {
.mw-footer {
   background: transparent;
   background: transparent;
   border-top: 1px solid #e4d9b0;
   border-top: 1px solid #d6c796;
   color: #6e5d33;
   color: #6e5d33;
}
/* ---- Force light parchment mode for Vector 2022 ---- */
/* Disable dark-mode variables that the skin injects */
html.skin-theme-clientpref-dark,
html.skin-theme-clientpref-os,
html.skin-theme-clientpref-auto {
  color-scheme: light !important;
  --background-color-base: #f4f1e6 !important;
  --background-color-neutral: #fffdfa !important;
  --background-color-secondary: #f8f5e9 !important;
  --color-base: #2b2414 !important;
  --color-base--subtle: #5b4a22 !important;
  --border-color-base: #d8caa0 !important;
}
/* Apply directly in case variables are ignored */
html,
body,
.vector-body,
.mw-body,
.mw-content-container {
  background: #f4f1e6 !important;
  color: #2b2414 !important;
}
}

Latest revision as of 07:51, 30 October 2025

/* ===== Sun Keeperverse — Bright canvas + darker parchment cards ===== */

/* Force LIGHT palette */
:root {
  color-scheme: light !important;
  --color-base: #2b2414 !important;
  --color-link: #36c !important;
  --color-link-new: #d33 !important;
}

/* Bright page canvas */
html, body {
  background: #ffffff !important;
  color: #2b2414 !important;
}

/* Main containers: transparent so the page reads bright */
.vector-page,
.mw-page-container,
.mw-body,
.mw-content-container {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.mw-body-content,
.vector-body {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
}

/* Typography: Verdana 13pt */
body,
.mw-body-content,
.vector-body,
.mw-content-ltr,
.mw-parser-output {
  font-family: Verdana, Geneva, sans-serif !important;
  font-size: 13pt !important;
  line-height: 1.55;
  color: #2b2414;
}

/* --- Headings: Verdana, not over-bold, smooth rendering --- */
.mw-page-title-main,
#firstHeading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h1 .mw-headline,
.mw-body h2 .mw-headline,
.mw-body h3 .mw-headline,
.mw-body h4 .mw-headline {
  font-family: Verdana, Geneva, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.1px;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2b2414;
}

/* Links: default blue, mossy-green hover, real redlinks */
a,
a:visited {
  color: var(--color-link, #36c) !important;
}
a:hover {
  color: #547c4b !important;
  text-decoration: underline;
}
a.new,
a.new:visited {
  color: var(--color-link-new, #d33) !important;
}
a.new:hover {
  color: #b00000 !important;
  text-decoration: underline;
}

/* Section heading rules */
.mw-body h1,
.mw-body h2 {
  border-bottom: 2px solid #d6c796;
  padding-bottom: 0.45rem;
  margin-bottom: 0.6rem;
  margin-top: 1.2em;
}

/* Paragraphs, lists, content padding */
.mw-body-content {
  padding: 0.85rem 1.1rem;
}
.mw-body-content p {
  margin: 0.9em 0;
}
.mw-body-content ul,
.mw-body-content ol {
  margin: 0.55em 0 0.85em 1.6em;
}

/* Darker parchment cards (TOC, tables, info/nav boxes) */
:root {
  --card-bg: #efe3c1;
  --card-border: #c9b172;
}

#toc,
.toc,
.wikitable,
.infobox,
.navbox,
.metadata,
.worldbox,
.worldnav {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#toc,
.toc {
  padding: 0.5em 0.75em;
}

#toc .toctitle {
  color: #5b4a22;
}

#toc ul {
  margin-left: 1.2em;
}

.wikitable th,
.wikitable td {
  padding: 0.5em 0.75em;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  background: #e6d7a8;
  border: 1px solid var(--card-border);
  color: #2b2414;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
  border: 1px solid #ddc996;
}

/* Generic infobox/navbox layout on the right */
.infobox,
.navbox,
.metadata,
.worldnav {
  float: right;
  clear: right;
  width: 340px;
  max-width: 42%;
  margin: 0 0 12px 18px;
  padding: 6px;
}

@media (max-width: 900px) {
  .infobox,
  .navbox,
  .metadata,
  .worldnav {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 8px auto;
  }
}

/* Titlebar spacing */
.vector-page-titlebar {
  padding: 6px 0;
}

/* Sidebar and footer stay neutral on bright canvas */
.vector-feature-zebra-design-enabled .vector-sidebar-container {
  background: transparent;
}

.mw-footer {
  background: transparent;
  border-top: 1px solid #d6c796;
  color: #6e5d33;
}