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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/* ── Permission visibility helpers ──────────────────────────────────────── */
/* Hidden by default; made visible in Group-sysop.css, Group-accountcreator.css,
Group-templateeditor.css, and Group-autoconfirmed.css. */
.sysop-show,
.accountcreator-show,
.templateeditor-show,
.autoconfirmed-show {
display: none;
}
.user-show,
.anonymous-show {
display: none;
}
/* ── Archon Arcana CSS custom properties ─────────────────────────────────── */
/* Light mode defaults */
:root {
/* Card surfaces */
--aa-surface-card: #fafafa;
--aa-surface-image: #d3d0c5;
--aa-surface-meta: #dedcd3;
--aa-surface-sets: #e9e8e2;
--aa-surface-toggle: #f4f3f0;
--aa-surface-white: #ffffff;
/* Borders */
--aa-border-card: #909090;
--aa-border-meta: #c0c0c0;
/* Text / links */
--aa-text-card: #000000;
--aa-link-card: #000000;
/* Toggle / accordion accent */
--aa-accent-toggle: #535246;
/* Commentary block */
--aa-accent-commentary: #d0cfc8;
/* Source attribution box */
--aa-surface-source: #ffffff;
--aa-border-source: #d0d0d0;
/* FAQ ruling links */
--aa-link-faq: #2A5DB0;
--aa-link-faq-hover: #000000;
/* Gallery labels (art switcher) */
--aa-surface-gallery-label: #dedcd3;
--aa-surface-gallery-label-mobile: #e9e8e2;
--aa-border-gallery-label: #c0c0c0;
/* Outstanding Issues warning box */
--aa-surface-warning: #fff8e1;
--aa-border-warning: #f0c040;
--aa-text-warning: #5a4500;
}
/* Dark mode — manual toggle (Citizen "night" preference) */
.skin-theme-clientpref-night {
/* Card surfaces */
--aa-surface-card: #1e1e1e;
--aa-surface-image: #2a2829;
--aa-surface-meta: #252425;
--aa-surface-sets: #272727;
--aa-surface-toggle: #252525;
--aa-surface-white: #1e1e1e;
/* Borders */
--aa-border-card: #3f3f3f;
--aa-border-meta: #3a3a3a;
/* Text / links */
--aa-text-card: #e0e0e0;
--aa-link-card: #c0c0c0;
/* Toggle / accordion accent */
--aa-accent-toggle: #7a7960;
/* Commentary block */
--aa-accent-commentary: #3a3930;
/* Source attribution box */
--aa-surface-source: #252525;
--aa-border-source: #444444;
/* FAQ ruling links */
--aa-link-faq: #7ab4ff;
--aa-link-faq-hover: #ffffff;
/* Gallery labels (art switcher) */
--aa-surface-gallery-label: #303030;
--aa-surface-gallery-label-mobile: #2a2a2a;
--aa-border-gallery-label: #444444;
/* Outstanding Issues warning box */
--aa-surface-warning: #2a2000;
--aa-border-warning: #7a6000;
--aa-text-warning: #ffe08a;
/* Card Gallery search inputs */
--aa-surface-input: #2a2a2a;
--aa-border-input: #505050;
--aa-text-input: #e0e0e0;
--aa-surface-input-focus: #333333;
}
/* Dark mode — OS preference (Citizen "os" preference setting) */
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os {
/* Card surfaces */
--aa-surface-card: #1e1e1e;
--aa-surface-image: #2a2829;
--aa-surface-meta: #252425;
--aa-surface-sets: #272727;
--aa-surface-toggle: #252525;
--aa-surface-white: #1e1e1e;
/* Borders */
--aa-border-card: #3f3f3f;
--aa-border-meta: #3a3a3a;
/* Text / links */
--aa-text-card: #e0e0e0;
--aa-link-card: #c0c0c0;
/* Toggle / accordion accent */
--aa-accent-toggle: #7a7960;
/* Commentary block */
--aa-accent-commentary: #3a3930;
/* Source attribution box */
--aa-surface-source: #252525;
--aa-border-source: #444444;
/* FAQ ruling links */
--aa-link-faq: #7ab4ff;
--aa-link-faq-hover: #ffffff;
/* Gallery labels (art switcher) */
--aa-surface-gallery-label: #303030;
--aa-surface-gallery-label-mobile: #2a2a2a;
--aa-border-gallery-label: #444444;
/* Outstanding Issues warning box */
--aa-surface-warning: #2a2000;
--aa-border-warning: #7a6000;
--aa-text-warning: #ffe08a;
}
}
/* ── Dark-mode overrides for FAQ/Commentary blocks ───────────────────────── */
/* Template:FAQ_Entry/styles.css uses hardcoded light colors (TemplateStyles
cannot use var() or body selectors). Dark mode overrides live here instead. */
.skin-theme-clientpref-night div.commentaryQ,
.skin-theme-clientpref-night .aa-box {
background-color: #1e1e1e;
color: #e0e0e0;
}
.skin-theme-clientpref-night div.commentaryQ {
border-left-color: #3a3930;
}
.skin-theme-clientpref-night .aa-box {
background-color: #2a2000;
border: 1px solid #7a6000;
color: #ffe08a;
}
.skin-theme-clientpref-night .rule-source {
border-top-color: #3a3a3a;
}
.skin-theme-clientpref-night .rule-source-image {
border-color: #444444;
box-shadow: -1px 0 0 #3f3f3f, 1px 0 0 #3f3f3f, 0 -1px 0 #3f3f3f, 0 1px 0 #3f3f3f;
background-color: #252525;
}
.skin-theme-clientpref-night .faqQuestion a:link,
.skin-theme-clientpref-night .faqQuestion a:visited,
.skin-theme-clientpref-night .faqAnswer a:link,
.skin-theme-clientpref-night .faqAnswer a:visited,
.skin-theme-clientpref-night .accordionFAQ a:link,
.skin-theme-clientpref-night .accordionFAQ a:visited,
.skin-theme-clientpref-night .commentaryQ a:link,
.skin-theme-clientpref-night .commentaryQ a:visited,
.skin-theme-clientpref-night .accordion label a:link,
.skin-theme-clientpref-night .accordion label a:visited {
color: #7ab4ff;
}
.skin-theme-clientpref-night .faqQuestion a:hover,
.skin-theme-clientpref-night .faqAnswer a:hover,
.skin-theme-clientpref-night .accordionFAQ a:hover,
.skin-theme-clientpref-night .commentaryQ a:hover,
.skin-theme-clientpref-night .accordion label a:hover {
color: #ffffff;
}
/* OS dark mode preference */
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os div.commentaryQ,
.skin-theme-clientpref-os .aa-box {
background-color: #1e1e1e;
color: #e0e0e0;
}
.skin-theme-clientpref-os div.commentaryQ {
border-left-color: #3a3930;
}
.skin-theme-clientpref-os .aa-box {
background-color: #2a2000;
border: 1px solid #7a6000;
color: #ffe08a;
}
.skin-theme-clientpref-os .rule-source {
border-top-color: #3a3a3a;
}
.skin-theme-clientpref-os .rule-source-image {
border-color: #444444;
box-shadow: -1px 0 0 #3f3f3f, 1px 0 0 #3f3f3f, 0 -1px 0 #3f3f3f, 0 1px 0 #3f3f3f;
background-color: #252525;
}
.skin-theme-clientpref-os .faqQuestion a:link,
.skin-theme-clientpref-os .faqQuestion a:visited,
.skin-theme-clientpref-os .faqAnswer a:link,
.skin-theme-clientpref-os .faqAnswer a:visited,
.skin-theme-clientpref-os .accordionFAQ a:link,
.skin-theme-clientpref-os .accordionFAQ a:visited,
.skin-theme-clientpref-os .commentaryQ a:link,
.skin-theme-clientpref-os .commentaryQ a:visited,
.skin-theme-clientpref-os .accordion label a:link,
.skin-theme-clientpref-os .accordion label a:visited {
color: #7ab4ff;
}
.skin-theme-clientpref-os .faqQuestion a:hover,
.skin-theme-clientpref-os .faqAnswer a:hover,
.skin-theme-clientpref-os .accordionFAQ a:hover,
.skin-theme-clientpref-os .commentaryQ a:hover,
.skin-theme-clientpref-os .accordion label a:hover {
color: #ffffff;
}
}
/* ── Main Page dark mode overrides ───────────────────────────────────────── */
/* Template:Main_Redesign/styles.css uses hardcoded light colors.
Dark mode overrides for the main page live here. */
.skin-theme-clientpref-night .aa-menu,
.skin-theme-clientpref-night .aa-news-body,
.skin-theme-clientpref-night .aa-about-text,
.skin-theme-clientpref-night .aa-essay-slideshow,
.skin-theme-clientpref-night .aa-news-col-body {
background: #1e1e1e;
color: #ddd;
}
.skin-theme-clientpref-night .aa-menu-col + .aa-menu-col { border-left-color: #333; }
.skin-theme-clientpref-night .aa-news-col + .aa-news-col { border-left-color: #333; }
.skin-theme-clientpref-night .aa-col-title { color: #7ab4ff; border-bottom-color: #333; }
.skin-theme-clientpref-night .aa-menu a:link,
.skin-theme-clientpref-night .aa-menu a:visited { color: #ccc; }
.skin-theme-clientpref-night .aa-menu a:hover { color: #7ab4ff; }
.skin-theme-clientpref-night .aa-welcome { background: #1a2a38; border-bottom-color: #2a3a48; }
.skin-theme-clientpref-night .aa-welcome a:link,
.skin-theme-clientpref-night .aa-welcome a:visited { background: #1e1e1e; color: #7ab4ff; }
.skin-theme-clientpref-night .aa-essays-bar { background: #252525; color: #ddd; }
.skin-theme-clientpref-night .aa-essay-slideshow { border-bottom-color: #333; }
.skin-theme-clientpref-night .aa-essay-prev:hover,
.skin-theme-clientpref-night .aa-essay-next:hover { background: #444; color: #fff; }
.skin-theme-clientpref-night .aa-news-col-title { background: #252525; color: #7ab4ff; }
.skin-theme-clientpref-night .aa-news-col-body h3 { color: #7ab4ff; border-bottom-color: #333; }
.skin-theme-clientpref-night .aa-news-col-body a:link,
.skin-theme-clientpref-night .aa-news-col-body a:visited { color: #7ab4ff; }
.skin-theme-clientpref-night .aa-about-contribute { background: #1a2a38; border-top-color: #2a3a48; }
.skin-theme-clientpref-night .aa-about-contribute a:link,
.skin-theme-clientpref-night .aa-about-contribute a:visited { color: #7ab4ff; }
.skin-theme-clientpref-night .aa-about-text a:link,
.skin-theme-clientpref-night .aa-about-text a:visited { color: #7ab4ff; }
.skin-theme-clientpref-night .aa-contact-row { background: #252525; }
.skin-theme-clientpref-night .aa-contact-row a:link,
.skin-theme-clientpref-night .aa-contact-row a:visited { color: #ddd; }
.skin-theme-clientpref-night .aa-contact-row a:hover { background: #383838; }
.skin-theme-clientpref-night .aa-menu-col.aa-primary li:first-child a { background: #1a3045; color: #ccc; }
.skin-theme-clientpref-night .aa-search-wrap input[type="text"] { background: rgba(30,30,30,0.95); color: #eee; }
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .aa-menu,
.skin-theme-clientpref-os .aa-news-body,
.skin-theme-clientpref-os .aa-about-text,
.skin-theme-clientpref-os .aa-essay-slideshow,
.skin-theme-clientpref-os .aa-news-col-body {
background: #1e1e1e;
color: #ddd;
}
.skin-theme-clientpref-os .aa-menu-col + .aa-menu-col { border-left-color: #333; }
.skin-theme-clientpref-os .aa-news-col + .aa-news-col { border-left-color: #333; }
.skin-theme-clientpref-os .aa-col-title { color: #7ab4ff; border-bottom-color: #333; }
.skin-theme-clientpref-os .aa-menu a:link,
.skin-theme-clientpref-os .aa-menu a:visited { color: #ccc; }
.skin-theme-clientpref-os .aa-menu a:hover { color: #7ab4ff; }
.skin-theme-clientpref-os .aa-welcome { background: #1a2a38; border-bottom-color: #2a3a48; }
.skin-theme-clientpref-os .aa-welcome a:link,
.skin-theme-clientpref-os .aa-welcome a:visited { background: #1e1e1e; color: #7ab4ff; }
.skin-theme-clientpref-os .aa-essays-bar { background: #252525; color: #ddd; }
.skin-theme-clientpref-os .aa-essay-slideshow { border-bottom-color: #333; }
.skin-theme-clientpref-os .aa-news-col-title { background: #252525; color: #7ab4ff; }
.skin-theme-clientpref-os .aa-news-col-body h3 { color: #7ab4ff; border-bottom-color: #333; }
.skin-theme-clientpref-os .aa-news-col-body a:link,
.skin-theme-clientpref-os .aa-news-col-body a:visited { color: #7ab4ff; }
.skin-theme-clientpref-os .aa-about-contribute { background: #1a2a38; border-top-color: #2a3a48; }
.skin-theme-clientpref-os .aa-about-contribute a:link,
.skin-theme-clientpref-os .aa-about-contribute a:visited { color: #7ab4ff; }
.skin-theme-clientpref-os .aa-about-text a:link,
.skin-theme-clientpref-os .aa-about-text a:visited { color: #7ab4ff; }
.skin-theme-clientpref-os .aa-contact-row { background: #252525; }
.skin-theme-clientpref-os .aa-contact-row a:link,
.skin-theme-clientpref-os .aa-contact-row a:visited { color: #ddd; }
.skin-theme-clientpref-os .aa-contact-row a:hover { background: #383838; }
.skin-theme-clientpref-os .aa-menu-col.aa-primary li:first-child a { background: #1a3045; color: #ccc; }
.skin-theme-clientpref-os .aa-search-wrap input[type="text"] { background: rgba(30,30,30,0.95); color: #eee; }
}
/* ── Main Page — hide category links ─────────────────────────────────────── */
/* The {{Main_Redesign}} template adds [[Category:Supplements]] for
organisational purposes; we don't want it displayed on the page itself. */
.page-Main_Page .catlinks {
display: none !important;
}
/* ── Card Gallery dark mode overrides ───────────────────────────────────────
Template:ViewCards/styles.css uses hardcoded light colors (TemplateStyles
cannot use var() or body selectors). Dark mode overrides live here instead. */
.skin-theme-clientpref-night .card-name-row input,
.skin-theme-clientpref-night .card-number-row input,
.skin-theme-clientpref-night .card-text-row input,
.skin-theme-clientpref-night .flavor-text-row input {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #505050 !important;
}
.skin-theme-clientpref-night .card-name-row input[type="text"]:focus,
.skin-theme-clientpref-night .card-number-row input[type="text"]:focus,
.skin-theme-clientpref-night .card-text-row input[type="text"]:focus,
.skin-theme-clientpref-night .flavor-text-row input[type="text"]:focus {
background-color: #333333 !important;
color: #e0e0e0 !important;
}
.skin-theme-clientpref-night .ms-btn {
background: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #505050 !important;
}
.skin-theme-clientpref-night .ms-btn:hover {
border-color: #888 !important;
}
.skin-theme-clientpref-night .ms-panel {
background: #2a2a2a !important;
border-color: #505050 !important;
}
.skin-theme-clientpref-night .ms-option {
color: #e0e0e0 !important;
}
.skin-theme-clientpref-night .ms-option:hover {
background: #1a3a5c !important;
}
.skin-theme-clientpref-night .cg-results,
.skin-theme-clientpref-night .card-gallery-results {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
.skin-theme-clientpref-night .advanced-search {
background-color: #1a3a5c !important;
color: #e0e0e0 !important;
}
.skin-theme-clientpref-night .advanced-search:hover {
background-color: #1e4a70 !important;
}
.skin-theme-clientpref-night .type label::before,
.skin-theme-clientpref-night .set label::before,
.skin-theme-clientpref-night .top-row label::before {
background-color: #505050;
border-color: #888;
}
.skin-theme-clientpref-night .spoilerEntry,
.skin-theme-clientpref-night .spoilerUnknown {
background: #1e1e1e;
border-color: #3f3f3f;
}
.skin-theme-clientpref-night .spoilerEntry.spoilerReprint {
background: #252525;
}
.skin-theme-clientpref-night .spoilerEntry > .text > .bottomRow {
background: #2a2a2a !important;
}
.skin-theme-clientpref-night .mobileUnknown {
color: #a0a0a0 !important;
}
.skin-theme-clientpref-night .rarity-row .rarity-entries,
.skin-theme-clientpref-night .armor-row .armor-entries,
.skin-theme-clientpref-night .armor-row .enhance-entries,
.skin-theme-clientpref-night .power-row .power-entries,
.skin-theme-clientpref-night .aember-row .aember-entries,
.skin-theme-clientpref-night .trait-row .trait-entries,
.skin-theme-clientpref-night .trait-row .keyword-entries,
.skin-theme-clientpref-night .trait-row .artist-entries,
.skin-theme-clientpref-night .armor-row .order-entries {
background-color: #1e1e1e !important;
}
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .card-name-row input,
.skin-theme-clientpref-os .card-number-row input,
.skin-theme-clientpref-os .card-text-row input,
.skin-theme-clientpref-os .flavor-text-row input {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #505050 !important;
}
.skin-theme-clientpref-os .card-name-row input[type="text"]:focus,
.skin-theme-clientpref-os .card-number-row input[type="text"]:focus,
.skin-theme-clientpref-os .card-text-row input[type="text"]:focus,
.skin-theme-clientpref-os .flavor-text-row input[type="text"]:focus {
background-color: #333333 !important;
color: #e0e0e0 !important;
}
.skin-theme-clientpref-os .ms-btn {
background: #2a2a2a !important;
color: #e0e0e0 !important;
border-color: #505050 !important;
}
.skin-theme-clientpref-os .ms-btn:hover {
border-color: #888 !important;
}
.skin-theme-clientpref-os .ms-panel {
background: #2a2a2a !important;
border-color: #505050 !important;
}
.skin-theme-clientpref-os .ms-option {
color: #e0e0e0 !important;
}
.skin-theme-clientpref-os .ms-option:hover {
background: #1a3a5c !important;
}
.skin-theme-clientpref-os .cg-results,
.skin-theme-clientpref-os .card-gallery-results {
background-color: #2a2a2a !important;
color: #e0e0e0 !important;
}
.skin-theme-clientpref-os .advanced-search {
background-color: #1a3a5c !important;
color: #e0e0e0 !important;
}
.skin-theme-clientpref-os .advanced-search:hover {
background-color: #1e4a70 !important;
}
.skin-theme-clientpref-os .type label::before,
.skin-theme-clientpref-os .set label::before,
.skin-theme-clientpref-os .top-row label::before {
background-color: #505050;
border-color: #888;
}
.skin-theme-clientpref-os .spoilerEntry,
.skin-theme-clientpref-os .spoilerUnknown {
background: #1e1e1e;
border-color: #3f3f3f;
}
.skin-theme-clientpref-os .spoilerEntry.spoilerReprint {
background: #252525;
}
.skin-theme-clientpref-os .spoilerEntry > .text > .bottomRow {
background: #2a2a2a !important;
}
.skin-theme-clientpref-os .mobileUnknown {
color: #a0a0a0 !important;
}
.skin-theme-clientpref-os .rarity-row .rarity-entries,
.skin-theme-clientpref-os .armor-row .armor-entries,
.skin-theme-clientpref-os .armor-row .enhance-entries,
.skin-theme-clientpref-os .power-row .power-entries,
.skin-theme-clientpref-os .aember-row .aember-entries,
.skin-theme-clientpref-os .trait-row .trait-entries,
.skin-theme-clientpref-os .trait-row .keyword-entries,
.skin-theme-clientpref-os .trait-row .artist-entries,
.skin-theme-clientpref-os .armor-row .order-entries {
background-color: #1e1e1e !important;
}
}
/* ── Pre-tag suppression inside FAQ wrappers ─────────────────────────────── */
/* Prevents parser-generated <pre> tags from breaking FAQ/ruling blocks */
.faq-wrapper pre,
.faq-main-card pre {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
font-family: sans-serif !important;
font-size: 1em !important;
display: inline !important;
color: inherit !important;
}
.faq-wrapper {
white-space: normal !important;
}