Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */
/* Full site CSS */
:root.skin-citizen-dark {
--color-surface-0: #130c01;
--color-surface-1: #2c1b02;
--color-surface-2: #392403;
--color-surface-3: #523203;
--color-surface-4: #784904;
--color-primary__h: 41;
--color-primary__s: 82%;
--color-primary__l: 48%;
}
:root.skin-citizen-light {
--color-surface-0: #f2e6e7;
--color-surface-1: #e5d5d6;
--color-surface-2: #d9c5c7;
--color-surface-3: #ccb6b8;
--color-surface-4: #bfa8aa;
--color-primary__h: 355;
--color-primary__s: 69%;
--color-primary__l: 51%;
}
:root {
--accent-h: 41;
--accent-s: 82%;
--accent-v: 48%;
/* change link colors because they are confusing by default*/
--color-link: hsl(var(--accent-h) var(--accent-s) var(--accent-v)) !important;
--color-link--hover: hsl(var(--accent-h) var(--accent-s) var(--accent-v)) !important;
--color-link--active: hsl(var(--accent-h) var(--accent-s) var(--accent-v)) !important;
--color-progressive: hsl(var(--accent-h) var(--accent-s) var(--accent-v)) !important;
--color-progressive--hover: hsl(var(--accent-h) var(--accent-s) var(--accent-v)) !important;
--color-progressive--active: hsl(var(--accent-h) var(--accent-s) var(--accent-v)) !important;
}
/* --- INFOBOXES --- */
/* infobox background (standard & portable) */
.infobox, .portable-infobox {
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 8px;
padding: 4px;
color: var(--color-base);
}
/* infobox title (standard & portable) */
.infobox .infobox-above, .infobox .infobox-title, .infobox caption, .pi-title {
background: none !important;
font-size: 20px !important;
font-weight: bold;
text-align: center;
padding-top: 4px;
padding-bottom: 8px;
}
/* infobox images (standard & portable) */
.infobox-image a, .pi-image a {
border-radius: 6px;
}
.infobox th {
color: var(--color-emphasized)
}
/* remove border on portable infobox images and other stuff */
.pi-group {
border: none;
}
/* add spacing below images on portable infoboxes */
.pi-group .pi-image {
padding-bottom: 5px;
}