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: #21132120;
	--background-color-dp-01: #2a1f2c20;
	--background-color-dp-02: #31242e20;
	--background-color-dp-03: #31263220;
	--background-color-dp-04: #34283520;
	--background-color-dp-06: #362d3920;
	--background-color-dp-08: #3b303c20;
	--background-color-dp-12: #3f344020;
	--background-color-dp-16: #41364220;
	--background-color-dp-24: #42394520;
	--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 */
	/* --background-color-dp-01: #f0f0f0;
	--background-color-dp-03: #e0e0e0;
	--background-color-dp-04: #e0e0e0; Way too drab and dreary, yuck! */

	--font-family-base:  'Love',cursive;
	--font-family-serif: 'Love', cursive;
	--background-color-dp-00: #ffdaf220;
	--background-color-dp-01: #ffdaf220;
	--background-color-dp-02: #ffdaf220;
	--background-color-dp-03: #ffdaf220;
	--background-color-dp-04: #ffdaf220;
	--background-color-dp-06: #ffdaf220;
	--background-color-dp-08: #ffdaf220;
	--background-color-dp-12: #ffdaf220;
	--background-color-dp-16: #ffdaf220;
	--background-color-dp-24: #ffdaf220;
	--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);
}
#footer-bottom {
	margin-top: 30px;
	background-color: var(--background-color-dp-03);
}
.mw-footer a, .mw-footer a.external {
	color: var(--color-link);
}
#footer-sitetitle {
	color: var(--color-base--emphasized);
}
.center {
	width: 100%;
	text-align: center;
}
#searchform::after {
	background-image: url("skins/NoelPoem/ガンバレ.gif");
	content: "";
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	height: 230px;
	z-index: 101;
	background-position: center;
	background-repeat: no-repeat;
}
/* Prevent Imbox images from being crushed */
a.image {
	max-width: max-content;
}
.news-box {
	border-color: var(--background-color-dp-04);
	background-color: var(--background-color-dp-01);
}
.tooltip {
	border-bottom: 2px ridge var(--color-primary);
}
.tooltiptext {
	background-color: var(--background-color-dp-00);
}
/* 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(--background-color-dp-01); /* #23272f; */
}
.infobox {
	background: var(--background-color-dp-01); /* #23272f; */
}
.infobox th {
	background-color: var(--background-color-dp-03);
}
.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(--background-color-dp-24);
	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(--background-color-dp-01); /* #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(--background-color-dp-04);
	border: 1px solid var(--border-color-base);
}

table.cargoTable.noMerge tr:nth-child(2n+1),
table.cargoTable.mergeSimilarCells td.odd {
	background-color: var(--background-color-dp-04);
}
table.cargoTable.noMerge tr:nth-child(2n),
table.cargoTable.mergeSimilarCells td.even {
	background-color: var(--background-color-dp-08);
}
table.cargoTable td {
	border: 1px solid var(--border-color-base);
}

/* Grids */
.wikigrid { /* match .wikitable styling */
    background-color: var(--background-color-dp-01);
}
.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 */
#tabs-bbdw-char {
	background-color: var(--background-color-dp-01);
	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(--background-color-dp-01);
}
table.imbox-notice {
	border: 3px solid var(--border-color-base);
}
/* Forms */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--background-color-dp-12);
	border: 1px solid var(--border-color-base);
}
#pfForm .createboxInput, #pfForm .mandatoryField, #pfForm textarea {
	max-width: 95%;
	background-color: var(--background-color-dp-00);
	border: 1px solid var(--background-color-dp-00);
}
.select2-results__option, .select2-results__options, .select2-dropdown {
	background-color: var(--background-color-dp-04);
}
/* Navbox */
table.navbox {
	background: var(--background-color-dp-01); /* #23272f; */
}
.navbox-title, table.navbox th {
	background: var(--background-color-dp-08);
}
.subpagelist {
	background: var(--background-color-dp-03);
}
.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(--background-color-dp-01);
	border: 1px solid var(--background-color-dp-24);
}
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(--background-color-dp-24);
	background-color: var(--background-color-framed);
}
#content .gallerybox div.thumb {
	border-color: var(--background-color-dp-24);
	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);
}