Jump to content

MediaWiki:Common.css: Difference between revisions

From Sun Keeperverse Wiki
Page title readability padding
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.
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ===== Sun Keeperverse — Vector 2022 parchment theme (clean) ===== */
/* ===== Sun Keeperverse — Bright canvas + darker parchment cards ===== */


/* --- Force LIGHT palette even if user/browser prefers dark --- */
/* Force LIGHT palette */
html.skin-theme-clientpref-dark,
:root {
html.skin-theme-clientpref-os,
html.skin-theme-clientpref-auto {
   color-scheme: light !important;
   color-scheme: light !important;
  --background-color-base: #f4f1e6 !important;      /* page */
  --background-color-neutral: #fffdfa !important;    /* content */
  --background-color-secondary: #f8f5e9 !important;  /* cards/boxes */
   --color-base: #2b2414 !important;
   --color-base: #2b2414 !important;
   --color-base--subtle: #5b4a22 !important;
   --color-link: #36c !important;
   --border-color-base: #d8caa0 !important;
   --color-link-new: #d33 !important;
}
}


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


/* --- Main containers --- */
/* Main containers: transparent so the page reads bright */
.vector-page, .mw-page-container, .mw-body, .mw-content-container {
.vector-page,
   background: #fffdfa;
.mw-page-container,
   border: 1px solid #d8caa0;
.mw-body,
   box-shadow: 0 1px 3px rgba(0,0,0,.06);
.mw-content-container {
   border-radius: 0;               /* square corners site-wide */
   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;
   padding: 1.25rem 1.5rem;       /* base padding; more below */
   padding: 1.25rem 1.5rem;
}
}


/* --- Typography: Verdana 13pt --- */
/* Typography: Verdana 13pt */
body,
body,
.mw-body-content,
.mw-body-content,
Line 41: Line 44:
   color: #2b2414;
   color: #2b2414;
}
}
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4 {
 
/* --- 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-family: Verdana, Geneva, sans-serif !important;
   font-weight: 700;
   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: default blue, mossy-green hover, keep redlinks --- */
/* Links: default blue, mossy-green hover, real redlinks */
a, a:visited { color: var(--color-link, #36c) !important; }
a,
a:hover { color: #547c4b !important; text-decoration: underline; }
a:visited {
a.new, a.new:visited { color: var(--color-link-new, #d33) !important; }
  color: var(--color-link, #36c) !important;
a.new:hover { color: #b00000 !important; text-decoration: underline; }
}
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 and title bar spacing --- */
/* Section heading rules */
.mw-body h1,
.mw-body h2 {
.mw-body h2 {
   border-bottom: 2px solid #e4d9b0;
   border-bottom: 2px solid #d6c796;
   padding-bottom: .45rem;
   padding-bottom: 0.45rem;
  margin-bottom: 0.6rem;
   margin-top: 1.2em;
   margin-top: 1.2em;
  margin-bottom: .6rem;
}
}
.mw-body h1 {
 
   border-bottom: 2px solid #e4d9b0;
/* Paragraphs, lists, content padding */
  padding-bottom: .45rem;
.mw-body-content {
   margin-bottom: .6rem;
   padding: 0.85rem 1.1rem;
}
.mw-body-content p {
   margin: 0.9em 0;
}
}
.vector-page-titlebar {           /* "Page | Discussion" row */
.mw-body-content ul,
   padding: 6px 0;
.mw-body-content ol {
   margin: 0.55em 0 0.85em 1.6em;
}
}


/* --- Paragraphs, lists, content padding --- */
/* Darker parchment cards (TOC, tables, info/nav boxes) */
.mw-body-content { padding: 0.75rem 1rem; }  /* more breathing room */
:root {
.mw-body-content p { margin: .85em 0; }
  --card-bg: #efe3c1;
.mw-body-content ul, .mw-body-content ol { margin: .5em 0 .8em 1.6em; }
  --card-border: #c9b172;
}


/* --- TOC --- */
#toc,
#toc, .toc {
.toc,
   background: #f7f1de;
.wikitable,
   border: 1px solid #d8caa0;
.infobox,
.navbox,
.metadata,
.worldbox,
.worldnav {
   background: var(--card-bg);
   border: 1px solid var(--card-border);
   border-radius: 0;
   border-radius: 0;
   padding: .5em .75em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
}
#toc .toctitle { color: #5b4a22; }
#toc ul { margin-left: 1.2em; }


/* --- Tables --- */
#toc,
.wikitable {
.toc {
   background: #fffdf7;
   padding: 0.5em 0.75em;
   border: 1px solid #d8caa0;
}
   border-radius: 0;
 
#toc .toctitle {
   color: #5b4a22;
}
 
#toc ul {
   margin-left: 1.2em;
}
 
.wikitable th,
.wikitable td {
  padding: 0.5em 0.75em;
}
}
.wikitable th, .wikitable td { padding: .5em .75em; }
 
.wikitable > tr > th, .wikitable > * > tr > th {
.wikitable > tr > th,
   background: #efe7cc;
.wikitable > * > tr > th {
   border: 1px solid #d8caa0;
   background: #e6d7a8;
   border: 1px solid var(--card-border);
   color: #2b2414;
   color: #2b2414;
}
}
.wikitable > tr > td, .wikitable > * > tr > td {
 
   border: 1px solid #e6d9b1;
.wikitable > tr > td,
.wikitable > * > tr > td {
   border: 1px solid #ddc996;
}
}


/* --- Generic infobox/navbox (and your templates align to this) --- */
/* Generic infobox/navbox layout on the right */
.infobox, .navbox, .metadata, .worldnav {
.infobox,
.navbox,
.metadata,
.worldnav {
   float: right;
   float: right;
   clear: right;
   clear: right;
Line 107: Line 165:
   max-width: 42%;
   max-width: 42%;
   margin: 0 0 12px 18px;
   margin: 0 0 12px 18px;
  background: #f8f5e9;
  border: 1px solid #c6b480;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
   padding: 6px;
   padding: 6px;
}
}
@media (max-width: 900px) {
@media (max-width: 900px) {
   .infobox, .navbox, .metadata, .worldnav {
   .infobox,
  .navbox,
  .metadata,
  .worldnav {
     float: none;
     float: none;
     width: auto;
     width: auto;
Line 122: Line 180:
}
}


/* --- Sidebar + footer polish --- */
/* Titlebar spacing */
.vector-feature-zebra-design-enabled .vector-sidebar-container { background: transparent; }
.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 {
.mw-footer {
   background: transparent;
   background: transparent;
   border-top: 1px solid #e4d9b0;
   border-top: 1px solid #d6c796;
   color: #6e5d33;
   color: #6e5d33;
}
/* Page title readability */
.mw-page-title-main,
#firstHeading {
  letter-spacing: 0.2px;
  word-spacing: 0.3px;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
}

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;
}