The Wandering Inn Wiki - User contributions [en]

MediaWiki:Citizen.css

2026-04-10T21:23:56Z

NeonLeitz: Fix "Browse Wiki" icon color in nav dropdown.

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tbody > tr > td {
border: 1px solid var(--border-color-base);
}

.wikitable > tbody td:first-child {
border-inline-start: none;
}

.wikitable > tbody td:last-child {
border-inline-end: none;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.editor.ace_editor {
background-color: var(--code-editor-bg);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

Template:Infobox book/styles.css

2026-04-07T21:44:53Z

NeonLeitz: Copy character infobox stylesheet with new class .book-infobox-container

.book-infobox-container table {
table-layout: fixed;
width: 100%;
}

.book-infobox-container tr {
border-top: 1px solid #F7A71B;
}

.book-infobox-container table, td {
border-collapse: collapse;
font-size: 0.75rem;
}

.book-infobox-container table td:nth-of-type(1) {
text-align: center;
font-weight: 800;
width: 40%;
}

.book-infobox-container td {
vertical-align: middle;
border-top: 1px solid #F7A71B;
padding: 0.25rem;
}

.book-infobox-container td p {
margin: 0;
}

.book-infobox-container td > ul:first-child {
margin-bottom: 0;
}

MediaWiki:Citizen.css

2026-03-11T02:17:06Z

NeonLeitz: Fix table padding and remove extra border

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tbody > tr > td {
border: 1px solid var(--border-color-base);
}

.wikitable > tbody td:first-child {
border-inline-start: none;
}

.wikitable > tbody td:last-child {
border-inline-end: none;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.editor.ace_editor {
background-color: var(--code-editor-bg);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2026-03-11T01:58:44Z

NeonLeitz: Fix wikitable borders

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--border-color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.editor.ace_editor {
background-color: var(--code-editor-bg);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2026-03-11T01:56:10Z

NeonLeitz: Remove old Cargo styles. The Cargo extension was removed a long time ago.

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.editor.ace_editor {
background-color: var(--code-editor-bg);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-11-09T17:44:16Z

NeonLeitz: Make code editor background easier to read

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.editor.ace_editor {
background-color: var(--code-editor-bg);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-11-09T17:42:57Z

NeonLeitz: Made code editor background easier to read

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;

--code-editor-bg: black;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.editor.ace_editor {
background-color: var(--code-editor-bg);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-11-09T17:34:31Z

NeonLeitz: Made code editor background easier to read

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.skin-theme-clientpref-night .editor.ace_editor {
background-color: black;
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-11-09T17:32:23Z

NeonLeitz: Made code editor background easier to read

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Code editor styles */
/*******************************/
.skin-theme-clientpref-night .editor {
background-color: black;
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-19T18:58:52Z

NeonLeitz: Add missing semicolon

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-19T18:58:08Z

NeonLeitz: Fix browse wiki icon

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/* Browse wiki icon */
width: var(--size-icon);
height: var(--size-icon);
display: inline-block;
-webkit-mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
mask: url(/resources/assets/svgrepo_icons/tree-list.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
content: '';
background: var(--color-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Sidebar

2025-10-19T18:33:55Z

NeonLeitz: Undo revision 112417 by NeonLeitz (talk)

MediaWiki:Sidebar

2025-10-19T18:33:18Z

NeonLeitz: Browse wiki icon

MediaWiki:Citizen.css

2025-10-19T18:15:40Z

NeonLeitz: Search bar tag background color

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

.citizen-command-palette-list-item__metadata__item {
background: var(--color-surface-1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-19T18:12:55Z

NeonLeitz:

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-19T18:10:13Z

NeonLeitz: Re-add old searchbar empty image background

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.skin-theme-clientpref-night .citizen-command-palette__results .cdx-thumbnail__placeholder {
/* Empty images background gold */
background: var(--flourish-gold-dark);
border-radius: var(--border-radius-base);
}

.skin-theme-clientpref-night .citizen-command-palette__results .cdx-thumbnail__placeholder svg {
fill: #efd19c;
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

Template:Stub Rewrite/styles.css

2025-10-18T17:19:29Z

NeonLeitz: Fix centering

.stub-rewrite {
font-size:90%;
padding: .5em;
border: 3px solid #08641e;
margin: 12px auto;
width: 60%;
min-width: 400px;
text-align: center;
}

Template:Stub Rewrite

2025-10-18T17:18:02Z

NeonLeitz: Add template styles

<templatestyles src="Stub Rewrite/styles.css"/>
<div class="stub-rewrite">
<big>''This is part of the newly released [[Volume 1|Volume 1 Rewrite]] and there may be a lot of missing or obsolete information. You can help {{SITENAME}} by [{{fullurl:{{FULLPAGENAME}}|action=edit}} expanding it].''</big></div><includeonly>[[Category:Volume 1 Rewrite stubs]]</includeonly><noinclude>
{{documentation}}
[[Category:Maintenance_Templates]]</noinclude>

Template:Stub Rewrite

2025-10-18T17:14:45Z

NeonLeitz: Move styles to styles.css

<div class="stub-rewrite">
<big>''This is part of the newly released [[Volume 1|Volume 1 Rewrite]] and there may be a lot of missing or obsolete information. You can help {{SITENAME}} by [{{fullurl:{{FULLPAGENAME}}|action=edit}} expanding it].''</big></div><includeonly>[[Category:Volume 1 Rewrite stubs]]</includeonly><noinclude>
{{documentation}}
[[Category:Maintenance_Templates]]</noinclude>

Template:Stub Rewrite/styles.css

2025-10-18T17:14:14Z

NeonLeitz: Add styles for Stub Rewrite template

.stub-rewrite {
font-size:90%;
padding: .5em;
border: 3px solid #08641e;
margin: 12px 0;
width: 60%;
text-align: center;
}

MediaWiki:Citizen.css

2025-10-18T16:55:49Z

NeonLeitz: Fix main page top margin

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.page-Main_Page.action-view .citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-18T16:53:56Z

NeonLeitz: Fix main page top margin

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/******************/
/* Home/Main page */
/******************/
.citizen-body-container {
margin-top: 0;
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}
.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-18T16:51:09Z

NeonLeitz: Move main page edit button to top

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Main page header */
.page-Main_Page.action-view .citizen-page-header {
order: -1;
}

.page-Main_Page.action-view .citizen-page-header .citizen-page-header-inner {
border-top: none;
margin-top: none;
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-18T16:04:07Z

NeonLeitz: Fix dark mode (os preference)

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-18T16:02:53Z

NeonLeitz: Fix dark mode (os preference)

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

/* Automatic mode */
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /* footer, edit pages, center of content */
--color-surface-3: #360502; /* overlay color to images in the search bar */
--color-surface-4: #161a24; /* notification box in user notifications */

--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.js

2025-10-18T15:47:53Z

NeonLeitz: Fix navigation button click action

/* All JavaScript here will be loaded for users of the Citizen skin */
mw.loader.using(['mediawiki.util']).done(function() {
/* Navigation Button */
if (mw.config.get('wgPageName') === 'The_Wandering_Inn_Wiki') {
document.getElementById('citizen-nav-trigger').addEventListener('click', function() {
document.querySelector(".citizen-drawer details summary").click();
});
}
});

MediaWiki:Citizen.js

2025-10-18T15:44:48Z

NeonLeitz: Undo revision 112378 by NeonLeitz (talk)

/* All JavaScript here will be loaded for users of the Citizen skin */

mw.loader.using( [ 'mediawiki.util' ] ).done( function() {
/* Navigation Button */
if ( mw.config.get( 'wgPageName' ) === 'The_Wandering_Inn_Wiki' ) {
document.getElementById( 'skin-citizen-nav-trigger' ).addEventListener( 'click', function() {
var event = new Event( 'input', { bubbles: true, composed: true } ),
checkbox = document.getElementById( 'citizen-drawer__checkbox' );
checkbox.checked = true;
checkbox.dispatchEvent( event );
} );
}
} );

MediaWiki:Citizen.js

2025-10-18T15:43:56Z

NeonLeitz: Fix navigation button click action

/* All JavaScript here will be loaded for users of the Citizen skin */

mw.loader.using( [ 'mediawiki.util' ] ).done( function() {
/* Navigation Button */
if ( mw.config.get( 'wgPageName' ) === 'The_Wandering_Inn_Wiki' ) {
document.querySelector(".citizen-drawer details.citizen-dropdown-details summary").click()
}
});

MediaWiki:Citizen.css

2025-10-18T14:52:32Z

NeonLeitz: Fix home and nav button margins

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) var(--space-md) var(--space-md) var(--space-md);
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

Template:Nav Button

2025-10-18T14:50:25Z

NeonLeitz: Fix navigation trigger?

<div id="citizen-nav-trigger" class="mw-parser-output home_search" role="button">[Navigate Wiki]</div>
<noinclude>[[Category:Templates]]</noinclude>

MediaWiki:Citizen.js

2025-10-18T14:29:57Z

NeonLeitz: Remove old (pre 3.8) search button trigger

/* All JavaScript here will be loaded for users of the Citizen skin */

mw.loader.using( [ 'mediawiki.util' ] ).done( function() {
/* Navigation Button */
if ( mw.config.get( 'wgPageName' ) === 'The_Wandering_Inn_Wiki' ) {
document.getElementById( 'skin-citizen-nav-trigger' ).addEventListener( 'click', function() {
var event = new Event( 'input', { bubbles: true, composed: true } ),
checkbox = document.getElementById( 'citizen-drawer__checkbox' );
checkbox.checked = true;
checkbox.dispatchEvent( event );
} );
}
} );

MediaWiki:Citizen.css

2025-10-18T14:23:58Z

NeonLeitz: Clean up search button styles

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin: var(--space-lg) auto var(--space-md) auto;
border: 3px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-18T14:21:58Z

NeonLeitz: Clean up search button styles

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*****************/
/* Search button */
/*****************/
.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin: auto;
border: 2px solid var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

Template:Search Button

2025-10-18T14:20:19Z

NeonLeitz: Update Search button for Citizen 3.8

<div class="citizen-search-trigger home_search" role="button">[Search Wiki] <small>or</small> type /</div>

MediaWiki:Citizen.css

2025-10-17T21:01:22Z

NeonLeitz: Fix user settings popup (apply header style only to main menu)

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
#citizen-main-menu .citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

Template:Chapter List/styles.css

2025-10-17T20:39:09Z

NeonLeitz: Remove old chapter list table book colors

[data-book-id] {
overflow: hidden;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
font-family: monospace;
font-size: 1.25em;
border: 1px solid #626263;
height: 100%;
}

[data-book-id] a {
display: block;
width: 100%;
height: 100%;
}

MediaWiki:Citizen.css

2025-10-17T19:56:16Z

NeonLeitz: Fix overlapping wrapped text in page header

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
line-height: 1em;
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T19:00:51Z

NeonLeitz: Refactor and lint for readability

/* All CSS here will be loaded for users of the Citizen skin */

:root {
--width-layout: 1200px;
}

/***********************************/
/* Citizen variable customizations */
/***********************************/
:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #fac66a;
--color-link--active: #d78c08;
}

:root.skin-theme-clientpref-day {
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold: #f7a71b;
--flourish-gold-light: #fac66a;
--flourish-gold-dark: #d78c08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

/*************************/
/* CSS reset (base tags) */
/*************************/
h1 {
font-family: "Cinzel", sans-serif;
}

/*******************/
/* Utility classes */
/*******************/
.applyFlex {
display: flex;
}

/***********************/
/* Page Forms */
/***********************/
#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul {
display: flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: "";
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image:
linear-gradient(transparent, transparent),
url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base);
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before {
/*Browse the Wiki icon, dark mode*/
filter: invert(1);
}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput {
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions,
#pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview textarea::placeholder,
.skin-theme-clientpref-night #pfForm textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select,
input {
/*color date inputs consistently*/
background: var(--color-surface-2);
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

.skin-theme-clientpref-night .page-heading > div > h1 {
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading > div > h1 {
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5;
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon {
/*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night
.mw-history-compareselectedversions
.cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/************************************/
/* Fix collapsible text readability */
/************************************/
.skin-theme-clientpref-night
.mw-collapsible-toggle-default
.mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default
> p {
text-align: center;
}

/******************/
/* Social Profile */
/******************/
.profile-tab {
margin-bottom: 30px;
}

.profile-tab-on {
background: transparent;
font-size: 1em;
font-family: "Cinzel", sans-serif;
}

/* Social Profile UserPage Avatar */
#profile-image {
text-align: left;
}

#profile-image p {
text-align: left;
}

div.user-gift-container {
/*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display: flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a {
/*Spacing between Awards*/
margin: 1.5px;
}

/* SocialProfile, Profile Toggle Button */
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius: 5px;
}

div#profile-toggle-button:hover {
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}
#profile-toggle-button a {
color: var(--color-base);
}

/* SocialProfile, User Page stuff */
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/* Fix collision of User Profile page. Effectively applies citizen-body-container class to them. */
#profile-top {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-left {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

#user-page-right {
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: "header" "content" "footer";
grid-template-columns: minmax(0, var(--width-layout));
}

div.profile-info-container.bold-fix {
/*SocialProfile, User page Stats box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b {
/* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div {
/* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all {
/*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1) w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item {
/* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small {
/*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item {
/* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small {
/* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em;
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator {
/* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link {
/* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

.citizen-footer {
background: transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about {
visibility: hidden;
}

#footer-places-disclaimers {
display: none;
}

.citizen-footer__content {
display: none !important;
}

.skin-theme-clientpref-night .profile-update-title {
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left {
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* Fixing spells list table coloring*/
table#spellsList {
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td {
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
/*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/********************/
/* Recent Changes */
/********************/
.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
.oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: "Cinzel", sans-serif;
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover);
}

.mw-ui-input:invalid {
/*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent
url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom
left no-repeat;
background-image:
linear-gradient(transparent, transparent),
url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content: "";
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color: var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {
/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color: var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon {
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C" "\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float: right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(
--color-base
); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a {
color: lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover {
color: lightgreen;
}

/*******************************/
/* Abuse Filter */
/*******************************/
table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/*******************************/
/* Cargo Styling */
/*******************************/
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td {
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect,
.node circle,
.node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper {
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"] {
/*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity: 0.9;
}

/*******************************/
/* OO UI */
/*******************************/
span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget {
/*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night
select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image:
linear-gradient(transparent, transparent),
url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E");
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night
#create-new-pages
input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/***********************************/
/* mw-widget Image Inversion fix */
/***********************************/
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage
> .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview {
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/*******************************/
@media screen and (min-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.7em;
}
.pollstyle {
width: 50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size: 1.2em;
}
.citizen-scroll--down .citizen-header {
transform: none;
}
/*Resize SocialProfile to fit mobile*/
#user-page-right {
float: none;
width: 100%;
}
#user-page-left {
float: none;
width: 100%;
}
.pollstyle {
width: 100%;
}
#search-nav-buttons {
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T17:15:08Z

NeonLeitz: Fix underline on page titles

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-first-heading {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base-subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T16:42:14Z

NeonLeitz: Fix page footer selector

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-page-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base-subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T16:41:12Z

NeonLeitz: Fix footer background selector

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.citizen-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base-subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T16:38:31Z

NeonLeitz: Fix Citizen v3.0.0 variable deprecations

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base-subtle: #99a1b3;

--color-success: #00e45d;
--color-destructive: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-xx-small);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base-subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-button-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius-large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T16:12:24Z

NeonLeitz: Increase home search buttons border width

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
border-width: 2px;
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T16:11:07Z

NeonLeitz: Fix button border radius

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius-pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T16:05:05Z

NeonLeitz: Remove old menu help icon

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius--pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T16:03:45Z

NeonLeitz: Undo revision 112341 by NeonLeitz (talk)

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

#n-help-mediawiki > a::before{
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/help-icon.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/help-icon.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-help-mediawiki > a::before{
filter:invert(1);
}

#p-navigation > ul > li#n-help-mediawiki{ /*Place Help at bottom*/
order:6;
}
.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius--pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T15:53:05Z

NeonLeitz: Add background to footer

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

#n-help-mediawiki > a::before{
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/help-icon.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/help-icon.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-help-mediawiki > a::before{
filter:invert(1);
}

#p-navigation > ul > li#n-help-mediawiki{ /*Place Help at bottom*/
order:6;
}
.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background: var(--color-surface-0);
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius--pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T15:39:32Z

NeonLeitz: Fix theme selectors

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-theme-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-theme-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-theme-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-theme-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-theme-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-theme-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-theme-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

#n-help-mediawiki > a::before{
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/help-icon.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/help-icon.svg);
opacity: var(--opacity-icon-base)
}

.skin-theme-clientpref-night #n-help-mediawiki > a::before{
filter:invert(1);
}

#p-navigation > ul > li#n-help-mediawiki{ /*Place Help at bottom*/
order:6;
}
.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-theme-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-theme-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-theme-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius--pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-theme-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-theme-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-theme-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-theme-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-theme-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-theme-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-theme-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-theme-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-theme-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-theme-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-theme-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-theme-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-theme-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-theme-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-theme-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-theme-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-theme-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-theme-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-theme-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-theme-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T15:32:07Z

NeonLeitz: Fix dark/light theme selectors

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-citizen-clientpref-night {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: #f7a71b;
--color-link--hover: #FAC66A;
--color-link--active: #D78C08;
}

:root.skin-citizen-clientpref-day{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-citizen-clientpref-night .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-citizen-clientpref-day .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-citizen-clientpref-night button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-citizen-clientpref-night button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-citizen-clientpref-night h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-citizen-clientpref-night #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-citizen-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-citizen-clientpref-night .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-citizen-clientpref-night .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

#n-help-mediawiki > a::before{
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/help-icon.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/help-icon.svg);
opacity: var(--opacity-icon-base)
}

.skin-citizen-clientpref-night #n-help-mediawiki > a::before{
filter:invert(1);
}

#p-navigation > ul > li#n-help-mediawiki{ /*Place Help at bottom*/
order:6;
}
.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-citizen-clientpref-night .profile-update-title{
color: var(--color-base);
}

.skin-citizen-clientpref-night .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-citizen-clientpref-night .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-citizen-clientpref-night .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-citizen-clientpref-night .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius--pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-citizen-clientpref-night .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-citizen-clientpref-night .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-citizen-clientpref-night .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-citizen-clientpref-night span#chapter-summary > a{
color:lightseagreen;
}

.skin-citizen-clientpref-night span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-citizen-clientpref-night .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-citizen-clientpref-night .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-citizen-clientpref-night .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-citizen-clientpref-night .cargo-table-svg .label {
fill: white;
}

.skin-citizen-clientpref-night .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-citizen-clientpref-night div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-citizen-clientpref-night #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-citizen-clientpref-night select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-citizen-clientpref-night #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-citizen-clientpref-night #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-citizen-clientpref-night .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-citizen-clientpref-night .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-citizen-clientpref-night #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-citizen-clientpref-night .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-citizen-clientpref-night .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-citizen-clientpref-night a.addAboveButton {
filter: invert(1);
}

.skin-citizen-clientpref-night a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-citizen-clientpref-night body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-citizen-clientpref-night body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}

MediaWiki:Citizen.css

2025-10-17T15:16:46Z

NeonLeitz: Link colors important

/* All CSS here will be loaded for users of the Citizen skin */

:root{
--width-layout: 1200px;
}

:root.skin-citizen {
--color-surface-0: #0e0f13; /* background */
--color-surface-1: #242c3d; /* dropdowns, modal pop ups */
--color-surface-2: #161a24; /*footer, edit pages, center of content*/
--color-surface-3: #360502; /*overlay color to images in the search bar*/
--color-surface-4: #161a24; /*notification box in user notifications*/

/*--color-primary: #f7a71b !important;*/
--border-color-dimgrey: #454545;

--flourish-gold: #f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: var(--flourish-gold);
--notification-item-box-color: #222c3f;

--color-base: #f6f1ee;
--color-base-emphasized: #a66c06;
--color-base--subtle: #99a1b3;

--color-text-success: #00e45d;
--color-text-error: #f33a3a;

--color-link: var(--flourish-gold) !important;
--color-link--hover: var(--flourish-gold-light) !important;
--color-link--active: var(--flourish-gold-dark) !important;
}

:root.skin-citizen-light{
/**/
--color-surface-0: white;
--color-surface-1: #f2f2f2;
--color-surface-2: #d9d9d9;

--flourish-gold:#f7a71b;
--flourish-gold-light: #FAC66A;
--flourish-gold-dark: #D78C08;

--h1-underline-color: black;
--color-base: black;

--border-color-dimgrey: #454545;
}

.skin-citizen-dark .page-heading>div>h1{
background: transparent;
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

.skin-citizen-light .page-heading>div>h1{
background: var(--color-surface-0);
padding: 0.3em;
border-radius: 10px 10px 10px 10px;
}

/* Fix media viewer button colors */
.skin-citizen-dark button.mw-mmv-view-expanded.cdx-button {
background-color: var(--color-surface-1);
}

.skin-citizen-dark button.mw-mmv-view-expanded.cdx-button:hover {
background-color: #eee;
}

/* Fix visual editor styles */
.ve-ui-toolbarDialog {
/* Use default background for toolbar dialogs */
background: transparent;
}

/*Underline for H2 section headings in articles*/
h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

.skin-citizen-dark h2.section-heading {
border-bottom: 2.5px solid var(--border-color-dimgrey);
overflow: auto;
line-height: 1.5
}

/*Citizen Searchbar*/
.citizen-typeahead__item-md .citizen-typeahead__thumbnail.citizen-ui-icon { /*Search Results with blank images use gold now*/
background-color: var(--flourish-gold-dark);
}

/*Citizen Navigation Bar, Reordering*/
#p-navigation > ul{
display:flex;
flex-direction: column;
}

#n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon*/
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/tree-list.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/tree-list.svg);
opacity: var(--opacity-icon-base)
}

.skin-citizen-dark #n-Browse-the-Wiki\! > a::before{ /*Browse the Wiki icon, dark mode*/
filter:invert(1);
}

/* Fix Compare selected revisions button background */
.skin-citizen-dark .mw-history-compareselectedversions .cdx-button:enabled {
background-color: var(--color-surface-2);
}
.skin-citizen-dark .mw-history-compareselectedversions .cdx-button:enabled:hover {
color: var(--color-base);
background-color: var(--color-surface-1);
border-color: var(--border-color-dimgrey);
}

/********************************
Fix collapsible text readability
*********************************/
.skin-citizen-dark .mw-collapsible-toggle-default .mw-collapsible-text {
color: #ed4022;
font-weight: bold;
}

#n-help-mediawiki > a::before{
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/svgrepo_icons/help-icon.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/svgrepo_icons/help-icon.svg);
opacity: var(--opacity-icon-base)
}

.skin-citizen-dark #n-help-mediawiki > a::before{
filter:invert(1);
}

#p-navigation > ul > li#n-help-mediawiki{ /*Place Help at bottom*/
order:6;
}
.mw-page-title-main {
border-bottom: 2px solid var(--h1-underline-color);
}

/*SocialProfile Profile-Tabs*/
.profile-tab{
display: none;
}

.profile-tab-on{
background:transparent;
font-size: 1em;
font-family: "Cinzel";
}

/* Social Profile UserPage Avatar*/
#profile-image{
text-align:left;
}

#profile-image p {
text-align: left;
}

/*SocialProfile, Profile Toggle Button*/
div#profile-toggle-button {
z-index: 2;
background: var(--color-surface-2);
border: 2px solid var(--h1-underline-color);
border-radius:5px;
}

div#profile-toggle-button:hover{
z-index: 2;
background: var(--color-surface-1);
border: 2px solid var(--h1-underline-color);
}

#profile-toggle-button a{
color: var(--color-base);
}

/*SocialProfile, User Page stuff*/
.user-section-heading {
border-bottom: 1px solid var(--h1-underline-color);
line-height: 22px;
margin: 0;
background: var(--color-surface-2);
padding: 20px;
width: 100%;
border-radius: 10px 10px 0px 0px;
}

/*Fix collision of User Profile page. Effectively applies citizen-body-container class to them.*/
#profile-top{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: var(--space-md) var(--space-xl);
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-left{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

#user-page-right{
display: grid;
justify-content: center;
padding: 0 var(--padding-page);
margin: var(--space-xl) 0;
gap: 0;;
grid-template-areas: 'header' 'content' 'footer';
grid-template-columns: minmax(0,var(--width-layout))
}

div.user-gift-container { /*SocialProfile, User page Awards box*/
background: var(--color-surface-1);
border-radius: 0px 0px 10px 10px;
margin-bottom: 28.8px;
padding: 10px;
display:flex;
justify-items: center;
justify-content: center;
}

div.user-gift-container a{ /*Spacing between Awards*/
margin:1.5px;

}

div.profile-info-container.bold-fix{ /*SocialProfile, User page Stats box*/
background:var(--color-surface-1);
border-radius:0px 0px 10px 10px;
padding: 10px;
}

.profile-info-container.bold-fix > div > b { /* use skin's color for "Edits" title text*/
color: var(--color-base);
}

.profile-info-container.bold-fix > div { /* use skin's color for # of Edits text*/
color: var(--color-base);
}

#recent-all { /*SocialProfile: Recent Activity items list. */
background: var(--color-surface-1)w;
padding: 0px 10px 10px 10px;
border-radius: 0px 0px 10px 10px;
}

#recent-all > .activity-item > .item { /* use correct text color for SocialProfile Activity items */
color: var(--color-base);
}

#recent-all > .activity-item > .item-small { /*Recent Activity items' time of activity, bolding and text color.*/
color: var(--color-base);
font-weight: bold;
}

#recent-all > .activity-item-bottom > .item { /* use correct text color for bottom item */
color: var(--color-base);
}

#recent-all > .activity-item-bottom > .item-small { /* use correct text color for bottom item */
color: var(--color-base);
}

.citizen-body {
background: var(--color-surface-0);
box-shadow: 0 0 1em -0.5em #000000;
border-radius: 10px 10px 10px 10px;
margin-bottom: 2em;
padding: 2em;
}

#mw-panel-toc {
background: var(--color-surface-0);
box-shadow: 0 0 0.5em 0 #000000;
padding: 0.5em
}

.citizen-toc__listItem--active > .citizen-toc__link .citizen-toc__indicator { /* Change color of active TOC indicator*/
background-color: var(--h1-underline-color);
}

.citizen-toc__listItem--active > .citizen-toc__link { /* Change color of active toc section name */
color: var(--h1-underline-color);
}

a.citizen-toc__top.citizen-toc__link {
background: var(--color-surface-2);
}

.citizen-toc__header {
letter-spacing: 0.05em;
background: var(--color-surface-0);
border-bottom: 2px solid var(--h1-underline-color);
padding: 10px;
}

h1 {
font-family: 'Cinzel';
}

.citizen-footer{
background:transparent;
}

.citizen-footer__bottom {
align-items: center;
justify-content: space-between;
margin-right: auto;
margin-left: auto;
border-top: transparent;
}

.mw-body-footer {
background: var(--color-surface-0);
border-radius: 10px 10px 10px 10px;
padding: 3em;
display: flex;
flex-direction: column;
grid-area: footer;
gap: var(--space-xl);
line-height: var(--line-height-sm);
}

#footer-places-privacy {
display: none;
}

#footer-places-about{
visibility: hidden;
}

#footer-places-disclaimers{
display: none;
}

.citizen-footer__content{
display: none !important;
}

.profile-tab{
margin-bottom: 30px;
}

.skin-citizen-dark .profile-update-title{
color: var(--color-base);
}

.skin-citizen-dark .profile-update-unit-left{
color: var(--color-base);
}

/* Citizen:Sidebar*/
.citizen-menu__heading {
display: block;
padding: var(--space-xs) var(--space-md);
margin: 0;
font-size: inherit;
font-weight: var(--font-weight-normal);
color: var(--color-base--subtle);
letter-spacing: 0.05em;
border-bottom: 1px solid var(--h1-underline-color);
width: 70%;
text-align: center;
color: var(--color-base);
}

/* Notifications */
a.oo-ui-widget.oo-ui-widget-enabled.mw-echo-ui-notificationItemWidget {
background: var(--notification-item-box-color);
}

/* Comment Streams */
.cs-head-comment > .cs-comment-header {
border-top: 1px solid var(--h1-underline-color);
}

/* Bibliographic */
.mw-specialCiteThisPage-bibliographic {
background: var(--color-surface-4);
}

/* PortableInfobox Hotfix */
aside.portable-infobox.noexcerpt.pi-background.pi-theme-default.pi-layout-default > p {
text-align: center;
}

/* Fixing spells list table coloring*/
table#spellsList{
background: var(--color-surface-2);
border-collapse: collapse;
}

.article-table td{
border-bottom: 1px solid var(--color-surface-2);
padding: 6px 12px;
}

/* Wikitable th and td colors*/

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { /*make borders accessible*/
border: 1px solid var(--color-base);
padding: 0.2em 0.4em;
}

/* Disable wikitable overflow gradients */
.citizen-table-wrapper.citizen-overflow--left,
.citizen-table-wrapper.citizen-overflow--right {
mask: none;
-webkit-mask-image: none;
}

/* Center table text by default */
div:not(.char-infobox-container) > .citizen-table-wrapper table {
text-align: center;
}

/* turning off, since it messes with Template:Tabs
.wikitable th {
background: var(--color-surface-2);
}

.wikitable tr {
background: var(--color-surface-1);
}*/

.skin-citizen-dark .jquery-tablesorter th.headerSortUp {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_up_darkmode1.svg);
}

.skin-citizen-dark .jquery-tablesorter th.headerSortDown {
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_down_darkmode.svg);
}

.skin-citizen-dark .jquery-tablesorter .headerSort{
background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both_darkmode.svg);
}

/*Recent Changes*/

.updatedmarker {
background-color: var(--color-surface-2);
}

/*
The Update to MediaWiki 1.43.3 overrides the background and border of the "active filters" box on
the Recent Changes page. This rule resets them to their original values.
*/
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background-color: var(--color-surface-2);
border-color: var(--border-color-base);
}

/*flex box*/
.applyFlex {
display:flex;
}

.mw-parser-output .home_search {
padding: var(--space-sm);
margin-top: var(--space-lg);
margin-bottom: var(--space-md);
margin-left: auto;
margin-right: auto;
border: 1px solid;
border-color: var(--h1-underline-color);
border-radius: var(--border-radius--pill);
cursor: pointer;
font-size: 0.875rem;
font-weight: var(--font-weight-medium);
text-align: center;
font-family: 'Cinzel';
}

.mw-parser-output .home_search:hover {
background-color: var(--background-color-quiet--hover)
}

.mw-ui-input:invalid { /*Make background of input boxes contrast more to body color.*/
background: var(--color-surface-1);
}

/*Dark Mode fix for Redirect Page Arrows*/
.skin-citizen-dark .mw-content-ltr .redirectText li {
padding-left: 0px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: none;
}

.skin-citizen-dark .mw-content-ltr .redirectText li:before {
padding-left: 47px;
background: transparent url(/resources/src/mediawiki.action/images/redirect-ltr.png?926f7) bottom left no-repeat;
background-image: linear-gradient(transparent,transparent),url(/resources/src/mediawiki.action/images/redirect-ltr.svg?ff441);
filter: brightness(0) invert(1);
content:'';
}

/*Source Editor colors and sizing*/

.wikiEditor-ui-toolbar {
background-color: var(--color-surface-2);
box-shadow: none;
color:var(--color-base);
border-radius: 2px;
}

.wikiEditor-ui-toolbar .group .tool-select {/*Change color of SE Heading button*/
height: 42px;
border-color: var(--border-color-base);
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror-gutters {
border-color: transparent;
background-color: var(--color-surface-2);
color:var(--color-base);
}

.CodeMirror.cm-s-default.CodeMirror-wrap.ui-resizable {
min-height: 900px !important; /*Min Height of source editor textbox*/
}

.wikiEditor-ui .wikiEditor-ui-top::before {
background-color: var(--color-surface-0);
}

.CodeMirror-linenumber {
color: var(--color-base);
}

.skin-citizen-dark .ui-icon{
filter: brightness(0) invert(1); /*SE Resize handle, dark mode*/
}

/*Quote Box Template Style*/
.quotation {
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
border-radius: 3px;
box-shadow: 5px 5px 5px 5px black;
color: var(--color-base);
display: table;
font-size: 0.9em;
font-style: normal;
margin: 10px 5px !important;
padding: 5px 10px;
quotes: "\201C""\201D";
background: var(--color-surface-2);
}

.quotation:before {
color: var(--color-base);
content: open-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
}

.quotation:after {
color: var(--color-base);
content: close-quote;
font-size: 3em;
line-height: 0;
margin-right: 0.15em;
vertical-align: -0.4em;
float:right;
}

.quotation__source {
font-style: normal;
margin-left: 5px;
}

/*AJAXPoll*/
.pollstyle{
border-top: 1px solid var(--h1-underline-color);
border-left: 5px solid var(--h1-underline-color);
box-shadow: 5px 5px 5px 5px black;
}

.ajaxpoll .ajaxpoll-answer-vote span {
position: initial;
color: var(--color-base); /*Font color changed from --color-base-subtle to --color-base*/
}

/*Template Ref External and Internal Link Styling*/
.skin-citizen-dark span#chapter-summary > a{
color:lightseagreen;
}

.skin-citizen-dark span#chapter-summary > a:hover{
color:lightgreen;
}

/*******************************/
/* Cargo Styling */
/* */
.skin-citizen-dark .cargo-tablelist td {
background-color: var(--color-surface-1);
color:var(--color-base);
}

.skin-citizen-dark .cargo-tablelist th {
background-color: var(--color-surface-2);
color:var(--color-base);
}

.skin-citizen-dark .cargo-tablelist tr:hover td{
background-color: var(--color-surface-3);
}

/*Cargo Table Diagram SVG Styling*/

.skin-citizen-dark .cargo-table-svg .label {
fill: white;
}

.skin-citizen-dark .cargo-table-svg .node rect, .node circle, .node ellipse {
stroke: var(--border-color-dimgrey);
opacity: 0.8;
fill-opacity: 0;
}

/*Cargo Drilldown Styling*/
.skin-citizen-dark div.drilldown-filters-wrapper{
background-color: var(--color-surface-2);
color: var(--color-base);
}

.skin-citizen .drilldown-values-toggle{
filter: brightness(0) invert(1);
}

.skin-citizen-dark #drilldown-header [title="Remove this filter"]{ /*Making filtering X's dark-mode friendly*/
filter: brightness(0) invert(1);
opacity:0.9;
}

/*******************************/
/* OO UI */
/* */

span.oo-ui-widget.oo-ui-widget-enabled.oo-ui-inputWidget.oo-ui-checkboxInputWidget { /*checkboxes in span*/
background: var(--color-surface-2);
}

.skin-citizen-dark select.oo-ui-inputWidget-input.oo-ui-indicator-down {
/*use inverted indicator-down icon when using darkmode*/
background-image: url(/load.php?modules=oojs-ui.styles.indicators&image=down&variant=invert&format=rasterized&skin=citizen&version=1j6tu);
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Ctitle%3E down %3C/title%3E%3Cg fill=%22%23fff%22%3E%3Cpath d=%22M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z%22/%3E%3C/g%3E%3C/svg%3E")
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: var(--color-surface-2);
}

select.oo-ui-inputWidget-input{
background-color: var(--color-surface-2);
}

/* Fix create new pages inputs background */
.skin-citizen-dark #create-new-pages input.mw-inputbox-input.mw-inputbox-createbox {
background: var(--color-surface-1);
}

/*******************************/
/* Page Forms */
/* */

#ca-formedit > a::before {
width: var(--size-icon);
height: var(--size-icon);
background-position: center;
background-repeat: no-repeat;
background-size: var(--size-icon);
content: '';
transition: opacity 100ms ease;
background-image: url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
background-image: linear-gradient(transparent,transparent),url(/resources/assets/fontawesome_icons/pen-to-square-solid.svg);
opacity: var(--opacity-icon-base);

}

.skin-citizen-dark #ca-formedit > a::before {
filter: invert(1);
}

.templateForm {
background: var(--color-surface-0);
}

.skin-citizen-dark .pfExpandedFieldset legend {
filter: brightness(0) invert(1);
}

.skin-citizen-dark .pfCollapsedFieldset legend {
filter: brightness(0) invert(1);
}

fieldset {
border: 1px solid var(--border-color-dimgrey);
}

.createboxInput{
background: var(--color-surface-2);
}

#wikiPreview .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem;
}

#wikiPreview .editOptions, #pfForm .editOptions {
padding: var(--space-lg);
border: 0;
border-radius: var(--border-radius--large);
background-color: var(--color-surface-2);
color: var(--color-base);
font-size: 0.875rem
}

.skin-citizen-dark #pfForm textarea::placeholder, #wikiPreview textarea::placeholder {
color: var(--flourish-gold); /*placeholder text to use gold flourish color*/
}

span.dateInput select, input{ /*color date inputs consistently*/
background:var(--color-surface-2)
}

/*For when multiple templates are used in a Form*/
.skin-citizen-dark .multipleTemplateInstance.sortable-chosen {
background-color: var(--color-surface-1);
}

.skin-citizen-dark .multipleTemplateInstance {
background-color: var(--color-surface-0);
}

.skin-citizen-dark a.addAboveButton {
filter: invert(1);
}

.skin-citizen-dark a.removeButton {
filter: invert(1);
}

/*******************************/
/* Abuse Filter */
/* */

table.mw-abuselog-details th {
background: var(--color-surface-0);
}

table.mw-abuselog-details {
background: var(--color-surface-0);
}

.skin-citizen-dark body td.mw-abusefilter-history-changed {
background: #541010;
}

.skin-citizen-dark body td.mw-abusefilter-history-changed:hover {
background: #360b0b;
}

/***********************************/
/* mw-widget Image Inversion fix */
/* */
.mw-widget-titleOptionWidget-hasImage {
filter: none !important;
}

.ve-ui-mwInternalLinkContextItem-withImage > .oo-ui-iconElement.oo-ui-iconElement-icon {
filter: none !important;
}

/*Upload Image VEditor Style*/
.mw-upload-bookletLayout-filePreview{
background-color: var(--color-surface-1);
padding: var(--space-xl);
}

/*******************************/
/* Mobile Viewport Resize */
/* */
@media screen and (min-width: 1370px){
.mw-parser-output .home_search{
font-size:1.7em;
}
.pollstyle{
width:50%;
}
}

@media screen and (max-width: 1370px) {
.mw-parser-output .home_search {
font-size:1.2em
}
.citizen-scroll--down .citizen-header {
transform:none
}
/*Resize SocialProfile to fit mobile*/
#user-page-right{
float:none;
width:100%;
}
#user-page-left{
float:none;
width:100%;
}
.pollstyle{
width:100%;
}
#search-nav-buttons{
flex-direction: column !important;
}
}