Jump to content

MediaWiki:Common.css: Difference between revisions

From Sun Keeperverse Wiki
Changed typography to parchment feel
 
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.
 
(15 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 ===== */
body {
 
   font-family: "Georgia", "Book Antiqua", serif;
/* Force LIGHT palette */
   background-color: #f8f5e9;
: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;
}
}

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