Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */
:root{
--width-layout: 1200px;
}
:root.skin-citizen-dark {
--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
}
: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 a{
--color-link: var(--flourish-gold);
--color-link--hover: var(--flourish-gold-light);
--color-link--active: var(--flourish-gold-dark);
}
.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;
}
/*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);
}
#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;
}
/* 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);
}
/*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);
}
/*******************************/
/* 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);
}
/*******************************/
/* 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;
}
}