MediaWiki:Citizen.css

/* 这里所有CSS都会加载给Citizen皮肤的用户 */
/* 修正章节编辑器图标 */
.mw-ui-icon-wikimedia-edit:before {
    background-image: url(/load.php?modules=skins.citizen.icons&image=wikiText&format=original&lang=zh-cn&skin=citizen&version=18h62);
}

.mw-editsection-visualeditor:before {
    background-image: url(/load.php?modules=skins.citizen.icons&image=edit&format=original&lang=zh-cn&skin=citizen&version=18h62);
}

.mw-ui-icon-edit:before {
    background-image: url(/load.php?modules=skins.citizen.icons&image=edit&format=original&lang=zh-cn&skin=citizen&version=18h62);
}

/* 转自Dustloop This page was last edited on 1 November 2024, at 14:58. */
:root {
	--shadow-1: 0px 2px 2px 0px rgba(0,0,0,0.14) , 0px 3px 1px -2px rgba(0,0,0,0.12) , 0px 1px 5px 0px rgba(0,0,0,0.2);
	--shadow-2: 0px 2px 5px 0px rgba(0,0,0,0.14) , 0px 1px 10px 0px rgba(0,0,0,0.12) , 0px 2px 4px -1px rgba(0,0,0,0.2);
	--shadow-3: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2);
	--shadow-4: 0px 16px 24px 2px rgba(0,0,0,0.14) , 0px 6px 30px 5px rgba(0,0,0,0.12) , 0px 8px 10px -7px rgba(0,0,0,0.2);
	--shadow-5: 0px 24px 38px 3px rgba(0,0,0,0.14) , 0px 9px 46px 8px rgba(0,0,0,0.12) , 0px 11px 15px -7px rgba(0,0,0,0.2);
}

:root.citizen-feature-custom-width-clientpref-standard {
    --width-layout: 1320px; /* Slightly wider content */
}

@media screen and (min-width: 640px) {
    html.citizen-animations-ready {
        scroll-behavior: auto;
    }
}

/* Disable Tabber scroll animation */
.tabber-animations-ready .tabber__section,
.tabber-animations-ready .tabber__tabs {
  scroll-behavior: unset;
}

.tabber__tab {
  color: var(--color-base--subtle);
}

:root.skin-citizen-light {
	--card-shadow-dlw: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);
	--color-pink: #B22EA1;
	--color-blue: #1971A4;
	--color-green: #007A3D;
	--color-red: #D51515;
	--color-orange: #975D11;
	--color-magenta: #A045B0;
	--color-pastel-red: #ff6666;
	--color-pastel-green: #77dd77;
	--color-adaptive-green: #8edf91;
	
	--balance-badge-font-color: #404244;
	
	--rainbow-text-base-color: black;
	
	/* higher contrast text */
	--color-base: #373a3c;
	--color-base--emphasized: #0d0e0e;
	--color-base--subtle: #5c6064;
	
	/* Limbus Company Specific Color Codes */
	--LCB-Color-Heads-Hit:     hsl(91, 41%, 32%);
	--LCB-Color-Clash-Win:     hsl(30, 100%, 33%);
	--LCB-Color-On-Use:        hsl(193, 85%, 30%);
	--LCB-Color-Generic-Green: hsl(91, 74%, 32%);
	--LCB-Color-Debuff:        hsl(0, 100%, 40%);
    --LCB-Color-Buff:          hsl(47, 100%, 27%);
    --LCB-Color-Resource:      hsl(29, 47%, 40%);
}
:root.skin-citizen-dark {
	--card-shadow-dlw: 0px 3px 3px -2px rgba(0,0,0,0.4),0px 3px 4px 0px rgba(0,0,0,0.28),0px 1px 8px 0px rgba(0,0,0,0.24);
	--color-pink: #DE7CD1;
	--color-blue: #1ba6ff;
	--color-green: #16df53;
	--color-red: #ff6b6b;
	--color-orange: #e8982c;
	--color-magenta: #f646e8;
	--color-pastel-red: #FF7575;
	--color-pastel-green: #77dd77;
	--color-adaptive-green: #115317;
	
	--balance-badge-font-color: black;
	--rainbow-text-base-color: white;
	
	/* higher contrast borders */
	--border-color-base: rgba(255,255,255,0.08);
	--border-color-base--lighter: rgba(255,255,255,0.05);
	--border-color-base--darker: rgba(255,255,255,0.11);
	
	/* higher contrast text */
	--color-base: hsl(var(--color-primary__h) 0% 90%);
	--color-base--emphasized: hsl(var(--color-primary__h) 85% 100%);
	--color-base--subtle: hsl(var(--color-primary__h) 25% 78%);
	
	/* Limbus Company Specific Color Codes */
	--LCB-Color-Heads-Hit:     hsl(91, 98%, 79%);
	--LCB-Color-Clash-Win:     hsl(30, 100%, 50%);
	--LCB-Color-On-Use:        hsl(193, 97%, 57%);
	--LCB-Color-Generic-Green: hsl(91, 85%, 59%);
	--LCB-Color-Debuff:        hsl(0, 100%, 63%);
    --LCB-Color-Buff:          hsl(47, 100%, 50%);
    --LCB-Color-Resource:      hsl(29, 47%, 50%);
}

@media (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
	--card-shadow-dlw: 0px 3px 3px -2px rgba(0,0,0,0.4),0px 3px 4px 0px rgba(0,0,0,0.28),0px 1px 8px 0px rgba(0,0,0,0.24);
	--color-pink: #DE7CD1;
	--color-blue: #1ba6ff;
	--color-green: #16df53;
	--color-red: #ff6b6b;
	--color-orange: #e8982c;
	--color-magenta: #f646e8;
	--color-pastel-red: #FF7575;
	--color-pastel-green: #77dd77;
	--color-adaptive-green: #115317;
	
	--balance-badge-font-color: black;
	--rainbow-text-base-color: white;
	
	/* higher contrast borders */
	--border-color-base: rgba(255,255,255,0.08);
	--border-color-base--lighter: rgba(255,255,255,0.05);
	--border-color-base--darker: rgba(255,255,255,0.11);
	
	/* higher contrast text */
	--color-base: hsl(var(--color-primary__h) 0% 90%);
	--color-base--emphasized: hsl(var(--color-primary__h) 85% 100%);
	--color-base--subtle: hsl(var(--color-primary__h) 25% 78%);
	
	/* Limbus Company Specific Color Codes */
	--LCB-Color-Heads-Hit:     hsl(91, 98%, 79%);
	--LCB-Color-Clash-Win:     hsl(30, 100%, 50%);
	--LCB-Color-On-Use:        hsl(193, 97%, 57%);
	--LCB-Color-Generic-Green: hsl(91, 85%, 59%);
	--LCB-Color-Debuff:        hsl(0, 100%, 63%);
    --LCB-Color-Buff:          hsl(47, 100%, 50%);
    --LCB-Color-Resource:      hsl(29, 47%, 50%);
	}
}

/********************** Expandable Section button styling *********************/
.mw-collapsible-toggle {
	padding: 0.2rem 0.5rem;
	background: var( --color-surface-2 );
	border-radius: var(--border-radius--pill);
	border: 1px solid var(--border-color-base);
}

.mw-collapsible-toggle:hover {
	background: var( --color-surface-2--hover );
}
.mw-collapsible-toggle:active {
	background: var( --color-surface-2-active );
}

.mw-collapsible-toggle .mw-collapsible-text {
	font-size: 0.875rem;
	color: var(--color-base--emphasized);
}

.mw-collapsible-toggle .mw-collapsible-text:hover {
	text-decoration: none;
}

.mw-collapsible-toggle-default:before { content: ''; }
.mw-collapsible-toggle-default:after  { content: ''; }
.mw-enhancedchanges-arrow { background-color: unset; }

/***************************** Table Improvements *****************************/
.wikitable {
	background-color: var(--color-surface-2);
	overflow-x: unset;
}
.wikitable tbody tr:nth-child(odd) {
    background-color: var(--color-surface-1);
}
.wikitable tbody tr:hover {
    background-color: var(--color-surface-2--hover);
}

/***************** disable image zoom transformation on hover *****************/
figure[ typeof~='mw:File' ] > a:first-child img,
figure[ typeof~='mw:File/Frameless' ] > a:first-child img,
figure[ typeof~='mw:File/Thumb' ] > a:first-child img,
figure[ typeof~='mw:File/Frame' ] > a:first-child img {
  transform: none !important;
}

/******************************** custom stuff ********************************/
.nearest-neighbor-image-scaling img {
	image-rendering: pixelated;
}

.tippy-content .tooltiptext-hr {
    display: block;
    height: 1px;
    margin: var(--space-xs) 0;
    background: var( --border-color-base );
}

/*************** make text stand out against the banner images ***************/
body:not(.citizen-body-header--sticky) .firstHeading
{
  text-shadow: -1px -1px 0 var(--color-surface-0), 1px -1px 0 var(--color-surface-0), -1px 1px 0 var(--color-surface-0), 1px 1px 0 var(--color-surface-0), 4px 3px 0px var(--color-surface-0);
}

body:not(.citizen-body-header--sticky) #siteSub,
body:not(.citizen-body-header--sticky) #contentSub {
  text-shadow: -1px -1px 0 var(--color-surface-0), 1px -1px 0 var(--color-surface-0), -1px 1px 0 var(--color-surface-0), 1px 1px 0 var(--color-surface-0), 2px 2px 0px var(--color-surface-0);
}

/********** Div class wrapper for Tabber to fix incompatible drop shadows. **********/
.tabber-shadows-fix {
	margin:-7px;
}

.tabber-shadows-fix > .tabber.tabber--live > .tabber__header {
	margin: 7px 7px 0 7px;
}

.tabber-shadows-fix > .tabber.tabber--live > .tabber__section > .tabber__panel {
	padding: 0 7px 7px 7px;
}

/**
 * CSS hack to hide immediate heading before movecard
 * Put here because TemplateStyles does not like :has()
 */
h3:has(+ .movecard),
h4:has(+ .movecard) {
	position: relative;
    margin: 0;
}

h3:has(+ .movecard) > .mw-headline,
h4:has(+ .movecard) > .mw-headline {
	position: absolute;
    visibility: hidden;
    font-size: 0;
}

h3:has(+ .movecard) > .mw-editsection,
h4:has(+ .movecard) > .mw-editsection {
	position: absolute;
	top: var(--space-xs);
    right: var(--space-xs);
	opacity: 0;
	pointer-event: none;
}

h3:has(+ .movecard:hover) > .mw-editsection,
h4:has(+ .movecard:hover) > .mw-editsection,
h3:has(+ .movecard) > .mw-editsection:hover,
h4:has(+ .movecard) > .mw-editsection:hover {
	opacity: 1;
	pointer-event: auto;
}


/*********************************** Quizes ***********************************/
.quizQuestions .header {
    font-size: var(--font-size-large);
}

.quiz .question {
    margin-left: 2em;
    background-color: var(--color-surface-1);
    padding: 0.1em 1em 1em 1em;
    margin: 1em;
    border-radius: var(--border-radius--large);
    box-shadow: var(--card-shadow-dlw);
}

.quiz .header .questionId {
	font-size: var(--font-size-medium);
	text-indent: 0em;
	margin-right: 1em;
}

.quizForm input[type=submit] {
	padding: 0.25em 0.55em;
	background: var( --color-surface-2 );
	border-radius: var(--border-radius--pill);
	border: 1px solid var(--border-color-base);
	color: var(--color-base--emphasized);
	font-size: var(--font-size-x-large);
}
.quizForm input[type=submit]:hover {
	background: var( --color-surface-2--hover );
}

.quizForm .correction {
	background-color: var( --color-surface-0 );
	color: var(--color-base);
	font-size: var(--font-size-x-large);
}

.quizForm .score {
	color: var(--color-green);
}

.quizForm .total {
	color: var(--color-blue);
}

.quiz .object .correction {
	font-size: var(--font-size-medium);
}