MediaWiki:Citizen.css

/* All CSS here will be loaded for users of the Citizen skin */ @font-face { font-family: 'Love'; src: url("/skins/NoelPoem/Love_font-Mahima_Khullar.ttf") format('truetype'); }	cursor: url("/skins/NoelPoem/bunny.ani"), url("/skins/NoelPoem/bunny.gif"), auto !important; }
 * selection {

background-color: #e334a7; background-image: linear-gradient(to right, #e114c1 0%, #e32599 100%); }
 * root.skin-citizen-dark {

--color-primary: #c033cc; --color-primary--hover: #cc5bd6; --color-primary--active: #8d2a62; --background-color-dp-00: #21132150; --background-color-dp-01: #2a1f2c50; --background-color-dp-02: #31242e50; --background-color-dp-03: #31263250; --background-color-dp-04: #34283550; --background-color-dp-06: #362d3950; --background-color-dp-08: #3b303c50; --background-color-dp-12: #3f344050; --background-color-dp-16: #41364250; --background-color-dp-24: #42394550; --background-color-overlay: rgba(33, 19, 32, 0.95); --background-color-overlay--lighter: rgba(33, 19, 33, 0.6); --background-color-framed: #2c1f2b; --background-color-framed--hover: #322632; --background-color-framed--active: #131a21; --background-color-input: rgba(0, 0, 0, 0.5); --background-color-icon: rgba(255, 255, 255, 0.4); --background-color-icon--hover: rgba(255, 255, 255, 0.6); --background-color-icon--active: rgba(255,255,255,0.2); --background-color-quiet--hover: rgba(255,255,255,0.05); --background-color-quiet--active: rgba(255,255,255,0.03); --background-color-primary--hover: #8d2a82; --background-color-primary--active: #7c267f; --background-color-destructive: #b32424; --background-color-warning: #ac6600; --background-color-success: #14866d; --color-base: rgba(249, 226, 244, 0.97); --color-base--emphasized: rgba(255,255,255,0.87); --color-base--subtle: rgba(255,255,255,0.38); --color-link: #d65bce; --color-link--hover: #ffc6e9; --color-link--active: #812a8d; --color-link-new: #e35b5b; --color-link-new--hover: #fee7e6; --color-link-new--active: #b32424; --opacity-icon-base--active: 0.2; --border-color-base: rgba(255,255,255,0.05); --border-color-base--lighter: rgba(255,255,255,0.02); --border-color-base--darker: rgba(255,255,255,0.08); --border-color-input: rgba(255,255,255,0.05); --border-color-input--hover: rgba(255,255,255,0.5); background-image: url(/skins/NoelPoem/background-dark.png); }
 * root {

--width-layout: 1280px; /* Slightly wider content */ /* Light theme specific color variables --color-surface-1: #f0f0f0; --color-surface-3: #e0e0e0; --color-surface-4: #e0e0e0; Gross and dreary, no thank you! */	--font-family-base: 'Love',cursive; --font-family-serif: 'Love', cursive; --background-color-dp-00: #ffdaf250; --background-color-dp-01: #ffdaf250; --background-color-dp-02: #ffdaf250; --background-color-dp-03: #ffdaf250; --background-color-dp-04: #ffdaf250; --background-color-dp-06: #ffdaf250; --background-color-dp-08: #ffdaf250; --background-color-dp-12: #ffdaf250; --background-color-dp-16: #ffdaf250; --background-color-dp-24: #ffdaf250; --color-primary: #cc33c2; --color-primary--hover: #d65bc3; --color-primary--active: #8d2a79; --color-link: #cc33b4; --color-link--hover: #d65bbd; --color-link--active: #8d2a7e; background-image: url(/skins/NoelPoem/background-light.png); } .mw-footer { background: var(--background-color-dp-01); }	margin-top: 30px; background-color: var(--background-color-dp-03); } .mw-footer a, .mw-footer a.external { color: var(--color-link); }	color: var(--color-base--emphasized); } .last-modified-bar { background: var(--background-color-framed); }	background: var(--background-color-framed); }	background-color: var(--background-color-framed--hover); } .center { width: 100%; text-align: center; }	background-image: url("skins/NoelPoem/ガンバレ.gif"); content: ""; position: absolute; top: 50px; left: 0; width: 100%; height: 230px; z-index: 1; background-position: center; background-repeat: no-repeat; } /* 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; } .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 { padding-right: 13px; background-image: url(/skins/Citizen/resources/skins.citizen.styles/images/external-link-ltr-icon.svg); background-position: center right; background-repeat: no-repeat; } /* 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); }
 * 1) footer-bottom {
 * 1) footer-sitetitle {
 * 1) searchInput {
 * 1) searchInput:focus {
 * 1) searchform::after {

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); } /* 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); } .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); } /* 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); }
 * 1) tabs-bbdw-char {
 * 1) pfForm .createboxInput, #pfForm .mandatoryField, #pfForm textarea {
 * 1) content .gallerybox div.thumb {

/* 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); } table.mw-wikiforum-frame, .mw-wikiforum-frame table { border-spacing: 0; margin-top: 0; }
 * 1) mw-wikiforum-searchbox-border {