More actions
Infobox: remove navy wrapper bg/border (was framing the inner table) |
Footer: hide bottom strip (tagline/poweredby/divider) |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 15: | Line 15: | ||
html.skin-citizen-light, | html.skin-citizen-light, | ||
.skin-citizen { | .skin-citizen { | ||
--color-surface-0: #0d0e12; /* page background */ | color-scheme: dark; /* dark-only: force dark UA controls/scrollbars regardless of OS or toggle */ | ||
--color-surface-1: # | --color-surface-0: #0d0e12; /* page background (near-black) */ | ||
--color-surface-2: # | --color-surface-1: #141418; /* raised panels / sidebar (neutral dark) */ | ||
--color-surface-3: # | --color-surface-2: #1b1b20; /* cards / raised / interactive (neutral dark) */ | ||
--color-surface-4: # | --color-surface-3: #26262c; /* hovers (neutral) */ | ||
--color-surface-4: #26262c; | |||
--color-base: #e5e7eb; /* body text */ | --color-base: #e5e7eb; /* body text */ | ||
| Line 25: | Line 26: | ||
--color-subtle: #9ca3af; /* muted text */ | --color-subtle: #9ca3af; /* muted text */ | ||
--color-progressive: # | --color-progressive: #5e9eff; /* links (blue, default-link style) */ | ||
--color-progressive--hover: #d4af37; /* gold | --color-progressive--hover: #d4af37; /* gold on hover */ | ||
--color-progressive--active: #d4af37; | --color-progressive--active: #d4af37; | ||
--color-progressive--focus: # | --color-progressive--focus: #5e9eff; | ||
--color-link: # | --color-link: #5e9eff; | ||
--color-visited: # | --color-visited: #5e9eff; | ||
--border-color-base: #3a3d44; /* gray outlines (not blue/navy) */ | --border-color-base: #3a3d44; /* gray outlines (not blue/navy) */ | ||
| Line 36: | Line 37: | ||
--background-color-base: #0d0e12; | --background-color-base: #0d0e12; | ||
--background-color-neutral: # | --background-color-neutral: #1b1b20; | ||
--background-color-neutral-subtle: # | --background-color-neutral-subtle: #141418; | ||
--font-family-base: 'Inter', 'Inter Variable', -apple-system, system-ui, sans-serif; | --font-family-base: 'Inter', 'Inter Variable', -apple-system, system-ui, sans-serif; | ||
--font-family-heading: 'Inter', 'Inter Variable', system-ui, sans-serif; | --font-family-heading: 'Inter', 'Inter Variable', system-ui, sans-serif; | ||
--border-radius-medium: 10px; | --border-radius-medium: 10px; | ||
} | |||
/* Dark-only: hide the colour-scheme (theme) switcher in Citizen's preferences panel. | |||
Each client pref is a portlet #skin-client-prefs-<feature>; we hide only the theme one. */ | |||
#skin-client-prefs-skin-theme, | |||
.mw-portlet-skin-client-prefs-skin-theme { | |||
display: none !important; | |||
} | |||
/* Footer cleanup: drop the bottom strip (tagline + Powered by + divider line), | |||
the search dropdown's "Powered by", and the MobileFrontend "Mobile view" toggle. */ | |||
.citizen-footer__bottom, | |||
.citizen-search__footer-start, | |||
#footer-places-mobileview, | |||
a[href*="toggle_view_mobile"] { | |||
display: none !important; | |||
} | } | ||
| Line 64: | Line 81: | ||
} | } | ||
/* ---- links: | /* ---- links: blue like a default link, gold on hover ---- */ | ||
.mw-parser-output a:not(.image):not(.mw-selflink) { | .mw-parser-output a:not(.image):not(.mw-selflink) { | ||
color: # | color: #5e9eff; | ||
} | } | ||
.mw-parser-output a:not(.image):not(.mw-selflink):hover { | .mw-parser-output a:not(.image):not(.mw-selflink):hover { | ||
| Line 76: | Line 93: | ||
/* ---- wikitables: navy panels, gold heads, rounded ---- */ | /* ---- wikitables: navy panels, gold heads, rounded ---- */ | ||
.mw-parser-output .wikitable { | .mw-parser-output .wikitable { | ||
background: # | background: #161616; | ||
color: #d1d5db; | color: #d1d5db; | ||
border: 1px solid # | border: 1px solid #2c2c2c; | ||
border-radius: | border-radius: 8px; | ||
border-collapse: separate; | border-collapse: separate; | ||
border-spacing: 0; | border-spacing: 0; | ||
| Line 85: | Line 102: | ||
} | } | ||
.mw-parser-output .wikitable > * > tr > th { | .mw-parser-output .wikitable > * > tr > th { | ||
background: # | background: #1e1e22; | ||
color: #e8c869; | color: #e8c869; | ||
border: 1px solid # | border: 1px solid #2c2c2c; | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
.mw-parser-output .wikitable > * > tr > td { | .mw-parser-output .wikitable > * > tr > td { | ||
background: transparent; | background: transparent; | ||
border: 1px solid # | border: 1px solid #2c2c2c; | ||
} | } | ||
.mw-parser-output .wikitable > * > tr:hover > td { | .mw-parser-output .wikitable > * > tr:hover > td { | ||
| Line 102: | Line 119: | ||
.mw-parser-output pre, | .mw-parser-output pre, | ||
.mw-parser-output kbd { | .mw-parser-output kbd { | ||
background: # | background: #161616; | ||
border: 1px solid # | border: 1px solid #2c2c2c; | ||
color: #e5e7eb; | color: #e5e7eb; | ||
border-radius: 6px; | border-radius: 6px; | ||
} | |||
/* ---- callout cards ---- | |||
Auto-style any inline left-accent block into a readable card. The inline | |||
`border-left:Npx solid <colour>` wins on the left edge, so each keeps its | |||
colour as an accent stripe; we add the dark bg, gray border and rounding. | |||
`.gs-card` is the same thing for explicit use. */ | |||
.mw-parser-output div[style*="border-left"], | |||
.mw-parser-output .gs-card { | |||
background: #161616; | |||
border: 1px solid #2c2c2c; | |||
border-radius: 8px; | |||
padding: 12px 16px; | |||
margin: 14px 0; | |||
} | |||
/* code inside a card: lift it off the matching background */ | |||
.mw-parser-output div[style*="border-left"] code, | |||
.mw-parser-output .gs-card code { | |||
background: #0f0f12; | |||
} | } | ||