MediaWiki:Citizen.css

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

/* START BASIC STYLES */ @import 'https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap';

/* default full width */
 * root {

--width-layout: 100vw; }

/* colors for dark mode */
 * root.skin-citizen-dark {

--color-surface-0: #121c25; --color-surface-1: #2b3b42; --color-surface-2: #23313c; --color-surface-3: #1b262e; --color-surface-4: #23313c;

--color-base: #c1c5c5; --color-base--emphasized:#edeff0; --color-base--subtle: #ff820d;

--color-primary__h: 202; --color-primary__s: 82%; --color-primary__l: 71%;

--color-destructive: #ee3355; --color-success: #4cb31b; --color-warning: #ff820d;

--color-link-new: #ee3355;

--border-color-base: rgba(255,255,255,0.2);

--shadow-strength: 0.3;

--font-family-base: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; }

.mw-parser-output ul, .mw-parser-output ol{ margin-top: 0; margin-bottom: 0; }


 * root.skin-citizen-dark a {

--color-link: #79c6f2 ; }

/* base header styling */ h2 { border-bottom: 1px solid var(--border-color-base) }

/* base list styling */ ul { list-style-image: url(https://cdn.wikimg.net/en/tcfwiki/images/e/ef/Bullet-icon.png); }

/* base kbd styling */ kbd { padding: 0 5px; border: 1px solid var(--border-color-base); margin: 0 2px; border-radius: 4px; }

/* base img styling */ .mw-parser-output .image img { max-width: calc(100vw - calc(2 * var(--padding-page))); height: auto; } /* END BASIC STYLES */

/* START WIKITABLES */ table.wikitable tr th, table.wikitable th td, table.wikitable tr td { font-size: unset; }


 * root.skin-citizen-dark table.wikitable {

--color-base--subtle: #edeff0; }


 * root.skin-citizen-dark table.wikitable tr th,
 * root.skin-citizen-dark table.wikitable tr td,
 * root.skin-citizen-dark table.wikitable tbody tr th,
 * root.skin-citizen-dark table.wikitable tbody tr td {

padding: .2rem .4rem .2rem .4rem; margin: auto; vertical-align: middle; border: 1px solid var(--border-color-base) }


 * root.skin-citizen-dark table.wikitable.more-padding tr th,
 * root.skin-citizen-dark table.wikitable.more-padding tr td,
 * root.skin-citizen-dark table.wikitable.more-padding tbody tr th,
 * root.skin-citizen-dark table.wikitable.more-padding tbody tr td {

padding: .3rem .5rem .3rem .5rem; }


 * root.skin-citizen-dark table.wikitable tr th,
 * root.skin-citizen-dark table.wikitable tbody tr th {

font-weight: bold; text-align: center; background-color: var(--color-surface-2); }

table.wikitable.left-align tr th, table.wikitable.left-align tbody tr th { text-align: left; }

table.wikitable.center-align tr td, table.wikitable.center-align tbody tr td { text-align: center; }

table.wikitable.cell-hover tr:hover, table.wikitable.cell-hover tbody tr:hover { background-color: transparent; }

table.wikitable.cell-hover tr td:hover, table.wikitable.cell-hover tbody tr td:hover { background-color: var(--background-color-quiet--hover); }


 * root.skin-citizen-light table.wikitable tr th,
 * root.skin-citizen-light table.wikitable tbody tr th {

color: var(--color-base) }

.jquery-tablesorter.jquery-tablesorter th.headerSort.headerSort { background-image: none; position: relative } th.headerSort::after { content: '_'; color: rgba(0, 0, 0, 0); background-image: url(https://cdn.wikimg.net/en/tcfwiki/images/3/38/Dark_Mode_Sort_both.svg); background-position: center ; background-repeat: no-repeat; user-select: none; float: right; margin-left: 1px; }

/* END WIKITABLES */

/* START VARIOUS BUTTONS */
 * root.skin-citizen-dark #p-views #ca-ve-edit > a {

color: var(--color-surface-0) }


 * root.skin-citizen-dark #ca-edit .citizen-ui-icon::before {

filter: invert(0); }


 * root.skin-citizen-dark #ca-ve-edit > a::before {

filter: invert(0); }
 * root.skin-citizen-dark #p-views #ca-ve-edit > a:after {

filter: invert(0) hue-rotate(180deg) }


 * root.skin-citizen-dark #p-views #ca-edit > a {

color: var(--color-surface-0) }


 * root.skin-citizen-dark #p-views #ca-ve-edit:not(.selected) + #ca-edit {

border-left-color: var(--color-surface-0) }


 * root.skin-citizen-dark #p-views #ca-edit a:after {

filter: invert(0) hue-rotate(180deg) }


 * root.skin-citizen-dark .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {

color: var(--color-surface-0) }


 * root.skin-citizen-dark .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {

color: var(--color-surface-0); }

/* END VARIOUS BUTTONS */

/* START INFOBOXES */ .infobox { background:var(--color-surface-2); border: 1px solid var(--border-color-base); padding: var(--space-md); width: fit-content; }

.infobox-title { font-size:1.7em; line-height: 1 !important; text-align:center; font-weight: bold; }

.infobox-image { text-align:center; }

.infobox th { text-align: left; vertical-align:top; width:fit-content; padding: 0 var(--space-sm) }

.infobox td { vertical-align:top; width:fit-content; text-align:right; padding: 0 var(--space-sm) }

.infobox table { width:100%; background:transparent!important; border-spacing:0 }

.infobox tr:nth-child(odd) td,.infobox tr:nth-child(odd) th { background: var(--color-surface-3) }

/* END INFOBOXES */

/* START FRONT PAGE */ /* Hide main page default header */ .page-Main_Page.action-view .mw-body-header { display: none; } @media screen and (hover: none) { .nomobile { display: none; } }

.home-header { text-align: center; background: url(https://www.datocms-assets.com/57394/1646331661-tcf_ws_home_02_gameoverview_slide_06.jpg); background-size: cover; background-position-y: 63%; z-index: 1; text-align: center; position: relative; margin-bottom: 1rem; margin-top: 4rem; border-radius: var(--space-sm); padding-top: 1rem; padding-bottom: .5rem }

.home-header__title.home-header__title { margin-top: 0rem; }

.home-header::after { content: ''; width: 100%; height: 100%; position: absolute; background: rgba(0, 0, 0, 0.2); left: 0; top: 0; z-index: -1; } .home-header__title { margin-top: 0; font-size: 1.5rem; }

.home-header .home-header__subtitle { margin-top: 0.4rem; color: var( --color-base--subtle ); font-size: 0.875rem; }

.home-header__search { max-width: 600px; padding: 0.6rem 0.8rem; margin: 0.8rem auto 0 auto; background: var( --color-surface-1 ); border-radius: 100px; box-shadow: var( --box-shadow-card ); color: var( --color-base--subtle ); cursor: pointer; font-size: 0.875rem; }

.home-header__searchIcon img { margin-right: 0.5rem; opacity: var( --opacity-icon-base ); }

.keyboard-text { padding: 0 5px; border: 1px solid; margin: 0 2px; border-radius: 4px; }

html.skin-citizen-dark .home-header__searchIcon img { filter: invert(1) hue-rotate(180deg); }

display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 60%; margin: auto; gap: 1rem; }
 * 1) home-nav {

@media screen and (hover: none) { .home-card a img { display: none; } #home-nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; max-width: 90%;

} .home-card { background-color: var(--color-surface-3); border: 1px solid var(--border-color-base) width: 100%; text-align: center; vertical-align: center; } }

@media screen and (hover: hover) { .home-card.home-card a img { height: 100%; width: 100%; } .home-card { border: 1px solid var(--border-color-base); border-radius: var(--space-xl); height: 8rem; width: 8rem; position: relative; overflow: hidden; } .home-card::before { position: absolute; pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; display: block; background: rgba(0, 0, 0, .4); content: ""; width: 100%; height: 100%; border-radius: var(--space-xl); z-index: 0; }

.home-card__foreground { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: bold; font-size: 1.2rem;

text-align: center; justify-content: center; align-items: center; display: flex; pointer-events: none; z-index: 1; } .home-card__foreground a { color: #edeff0; } }

.home-grid { display: grid; gap: var(--space-xl); margin-bottom: var(--space-xl); max-width: 90%; margin: auto }

.cells-3 { grid-template-columns: 1fr; }

.home-grid .grid-cell { border: 1px solid var(--border-color-base); text-align: left; padding: 0 var(--space-xl) var(--space-xl); margin-bottom: var(--space-xl); }

/* double up on specifity */ .grid-header__title.grid-header__title { font-size: 2rem; margin-top: var(--space-sm); text-align: center; }

@media screen and (hover: hover) { .cells-3 { grid-template-columns: 1fr 1fr 1fr; } .home-grid { max-width: 80%; } }

.grid-cell iframe { border-radius: 12px; }

/* END FRONT PAGE */

/* START SITENOTICE */ border-bottom: 2px solid var(--color-base--subtle); padding: 0 var(--space-md); }
 * 1) localNotice {

@media screen and (hover: none){ #localNotice table { border-right: none } } /* END SITENOTICE */

/* START WIKIEDITOR */ .wikiEditor-ui-toolbar { background-color: var(--color-surface-2) }

/* START SEARCH SUGGESTIONS */ .citizen-typeahead-suggestion__thumbnail { background-color: transparent; }

/* END SEARCH SUGGESTIONS */

/* START REPLACETEXT EXTENSION */ .ext-replacetext-searchoptions { background-color: var(--color-surface-1); }

/* END REPLACETEXT EXTENSION */

/* START DISCUSSIONTOOLS EXTENSION */ .ext-discussiontools-ui-replyWidget-preview { background-color: var(--color-surface-3); } /* END DISCUSSIONTOOLS EXTENSION */

/* BEGIN ACE EDITOR */ .ace-tm .ace_keyword { color: orange }

.ace-tm .ace_constant.ace_numeric { color: red; }

.ace-tm .ace_support.ace_function { color: pink } /* END ACE EDITOR */

/* BEGIN CATEGORY BUTTONS */
 * root.skin-citizen-dark .catlinks li > a:hover {

color: var(--color-surface-0); }

/* END CATEGORY BUTTONS */