MediaWiki:Citizen.css

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

--width-layout: 1280px; /* Slightly wider content */

/* Light theme specific color variables */ --color-surface-1: #f0f0f0; --color-surface-3: #e0e0e0; --color-surface-4: #e0e0e0; }

.center { width: 100%; text-align: center; }

/* Prevent Imbox images from being crushed */ a.image { max-width: max-content; }

/* Center aligned image thumbnails for galleries */ .citizen-body a.image, .mw-body-content a.image { display: inline; }

/* Disable hover animations for images */ .citizen-body a.image>img { transition: unset; }

.citizen-body a.image:hover:not(.lazy):not(.new)>img { transform: unset; }

.news-box { border-color: var(--color-surface-4); background-color: var(--color-surface-1); }

.tooltip { border-bottom: 2px ridge var(--color-primary); }

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

/* Visible tooltip horizontal rules */ .tooltiptext hr { display: block; border: none; }

.tooltiptext hr::after { background: var(--border-color-base--darker); }

.extiw::after { display:inline-block; width:0.75em; height:0.75em; margin-left:0.25em; background-color:currentcolor; content:''; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E external link %3C/title%3E %3Cpath d=%22M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z%22/%3E %3Cpath d=%22m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z%22/%3E %3C/svg%3E") no-repeat 50% 50%; mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E external link %3C/title%3E %3Cpath d=%22M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z%22/%3E %3Cpath d=%22m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z%22/%3E %3C/svg%3E") no-repeat 50% 50%; -webkit-mask-size:contain; mask-size:contain; }

/* Infoboxes */ .outcell { border: 1px solid var(--color-surface-1); /* #23272f; */ }

.infobox { background: var(--color-surface-1); /* #23272f; */ }

.infobox th { background-color: var(--color-surface-3); }

.infobox.vcard.outcell { /* Prevents character infoboxes from colliding with article text */ margin: 0.5em 0 0.5em 1em; }

.infobox hr { /* Horizontal rules for infoboxes to separate multiple lines */ display: block; margin: 0; border: 1px solid var(--color-surface-4); margin-bottom: 5px; }

.fullImageLink { margin: 0 0px; }

@media screen and (max-width:500px) {

/* Expands to fill screen for mobile */ .infobox.vcard.outcell { width: 100%; display: table; } }

/* Tables */ table.wikitable { background: var(--color-surface-1); /* #23272f; */ border: 1px solid var(--border-color-base); }

table.wikitable tr th { padding: 5px 10px 5px 10px; text-align: center; vertical-align: middle; }

table.wikitable tr td { padding: 5px 10px 5px 10px; text-align: center; vertical-align: middle; }

/* Cargo Tables */ table.cargoTable { background-color: var(--color-surface-2); border: 1px solid var(--border-color-base); }

table.cargoTable.noMerge tr:nth-child(2n+1), table.cargoTable.mergeSimilarCells td.odd { background-color: var(--color-surface-3); }

table.cargoTable.noMerge tr:nth-child(2n), table.cargoTable.mergeSimilarCells td.even { background-color: var(--color-surface-4); }

table.cargoTable td { border: 1px solid var(--border-color-base); }

/* Grids */ .wikigrid { /* match .wikitable styling */ background-color: var(--color-surface-1); }

.wikigrid>div { border-bottom-color: var(--border-color-base); }

.wikigrid>div:hover { background-color: var(--background-color-quiet--active); }

.wikigrid>.wg-hdr { background-color: transparent; color: var(--color-base--subtle); }

/* Fix for displaying gameplay elements for BBDW characters - Too general? */ .mw-body-content a.image { display: inline; }

/* BBDW character art containers */ background-color: var(--color-surface-1); border-left: 1px solid var(--border-color-base); border-right: 1px solid var(--border-color-base); }
 * 1) tabs-bbdw-char {

/* Image message boxes */ table.imbox { border: 3px solid var(--border-color-base); background: var(--color-surface-1); }

table.imbox-notice { border: 3px solid var(--border-color-base); }

/* Forms */ .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--color-surface-4); border: 1px solid var(--border-color-base); }

max-width: 95%; background-color: var(--color-surface-0); border: 1px solid var(--color-surface-0); }
 * 1) pfForm .createboxInput,
 * 2) pfForm .mandatoryField,
 * 3) pfForm textarea {

.select2-results__option, .select2-results__options, .select2-dropdown { background-color: var(--color-surface-4); }

/* Navbox */ table.navbox { background: var(--color-surface-1); /* #23272f; */ }

.navbox-title, table.navbox th { background: var(--color-surface-4); }

.subpagelist { background: var(--color-surface-3); }

.subpagelist a { color: var(--color-primary--hover); }

/* Infobox Tabs */ .tabs-label { background-color: var(--color-primary--active); border-color: var(--color-primary--active); color: rgba(255, 255, 255, 0.87); /* --color-base--emphasized but not! */ }

.tabs-label:active, .tabs-label:focus { background-color: var(--color-primary); border-color: var(--color-primary); }

.tabs-label:hover { background-color: var(--color-primary--hover); border-color: var(--color-primary--hover); }

.tabs-plain>.tabs-label { border-color: var(--color-primary--active); }

.tabs-tabbox>.tabs-input:checked+.tabs-label { background-color: var(--color-primary); border-color: var(--color-primary); }

.tabs-input-0:checked+.tabs-input-1+.tabs-label { background-color: var(--color-primary); border-color: var(--color-primary); }

.tabs-container { background-color: var(--color-surface-1); border: 1px solid var(--color-surface-4); }

div.tabdiv>ul>li { background-color: var(--color-primary--active); border-color: var(--color-primary--active); }

div.tabdiv>ul>li:hover { background-color: var(--color-primary--hover); border-color: var(--color-primary--hover); }

div.tabdiv>ul>li.active { background-color: var(--color-primary); border-color: var(--color-primary); }

div.tabdiv>ul>li a { color: rgba(255, 255, 255, 0.87); }

li.gallerybox div.thumb { border-color: var(--color-surface-4); background-color: var(--background-color-framed); }

border-color: var(--color-surface-4); background-color: var(--background-color-framed); }
 * 1) content .gallerybox div.thumb {

/* Code Editor */ .codeEditor-status { clear: both; width: 100%; background-color: var(--background-color-framed); border-top: 1px solid var(--border-color-base); display: table; }

.codeEditor-status-message { border-color: var(--border-color-base); }

/* Popups */ .mwe-popups .mwe-popups-container { background-color: var(--color-surface-2); color: var(--color-base); }

.mwe-popups:hover { background-color: var(--color-surface-2); }

.mwe-popups .mwe-popups-extract[dir="ltr"]::after { background-image: linear-gradient(to right, transparent, var(--color-surface-2) 50%); }

/* Popup pointers */ .mwe-popups.mwe-popups-no-image-pointer:after { border-bottom: 11px solid var(--color-surface-4); }

.mwe-popups.mwe-popups-image-pointer:after { border-bottom: 12px solid var(--color-surface-4); }

.mwe-popups.mwe-popups-image-pointer.flipped-x:after { border-bottom: 12px solid var(--color-surface-4); }

.mwe-popups.flipped-x-y:after { border-top: 12px solid var(--color-surface-4); }

.mwe-popups.flipped-x-y.mwe-popups-is-tall:after { border-top: 12px solid var(--color-surface-4); }

.mwe-popups.flipped-y:after { border-top: 11px solid var(--color-surface-4); }

/* Extension:WikiForum */ table.mw-wikiforum-frame, tr.mw-wikiforum-normal, tr.mw-wikiforum-sticky, td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-main { background: var(--color-surface-1); }

tr.mw-wikiforum-title, th.mw-wikiforum-thread-top, td.mw-wikiforum-thread-sub { background: var(--color-surface-4); }

table.mw-wikiforum-frame, td.mw-wikiforum-innerframe, th.mw-wikiforum-title, td.mw-wikiforum-title, th.mw-wikiforum-admin, td.mw-wikiforum-admin, th.mw-wikiforum-value, td.mw-wikiforum-value, th.mw-wikiforum-lastpost, td.mw-wikiforum-lastpost, th.mw-wikiforum-thread-top, td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub { border-color: var(--border-color-base); }

td.mw-wikiforum-thread-main, td.mw-wikiforum-thread-sub { word-wrap: normal; word-break: normal; }

border-color: var(--border-color-base); background: var(--color-surface-3); }
 * 1) mw-wikiforum-searchbox-border {

table.mw-wikiforum-frame, .mw-wikiforum-frame table { border-spacing: 0; margin-top: 0; }