MediaWiki:Common.css: Difference between revisions

Latest revision as of 22:26, 17 May 2026

/* CSS placed here will be applied to all skins */

/* light mode */
:root, .skin-theme-clientpref-day {
	--vw-bg-page:		#f8f9fa;
	--vw-bg-surface:	#ffffff;
	--vw-bg-subtle:		#f8f9fa;
	--vw-bg-heading:	#EAECF0;
	--vw-text-subtle:   #555555;
	--vw-border:		#A2A9B1;
	
	--vw-accent:		#af3350;
	--vw-accent-subtle:	#f5dde2;
	
	--vw-gold:			#b7a054;
	--vw-gold-subtle:	#f4f0dc;
	--vw-green:			#6bb754;
	--vw-green-subtle:	#e0f4dc;
	--vw-teal:			#338a76;
	--vw-teal-subtle:	#dcf4f0;
	--vw-blue:			#546bb7;
	--vw-blue-subtle:	#dce0f4;
	--vw-violet:		#76338A;
	--vw-violet-subtle:	#f0dcf4;
}

/* dark mode */
.skin-theme-clientpref-night {
	--vw-bg-page:		#101418;
	--vw-bg-surface:	#1e2227;
	--vw-bg-subtle:		#2a2f36;
	--vw-bg-heading: 	#27292D;
	--vw-text-subtle:   #BBBBBB;
	--vw-border:		#72777D;
	
	--vw-accent:		#ad6171; 
	--vw-accent-subtle:	#3d1e26;
	
	--vw-gold:			#ad9c61;
	--vw-gold-subtle:	#3e351e;
	--vw-green:			#74ad61;
	--vw-green-subtle:	#263e1e;
	--vw-teal:			#61ad9b;
	--vw-teal-subtle:	#1e3e35;
	--vw-blue:			#6171ad;
	--vw-blue-subtle:	#1e263e;
	--vw-violet:		#9c61ad;
	--vw-violet-subtle:	#351e3e;
}
@media ( prefers-color-scheme: dark ) {
    .skin-theme-clientpref-os {
		--vw-bg-page:		#101418;
		--vw-bg-surface:	#1e2227;
		--vw-bg-subtle:		#2a2f36;
		--vw-bg-heading: 	#27292D;
		--vw-text-subtle:   #BBBBBB;
		--vw-border:		#72777D;
		
		
		--vw-accent:		#F2A0B2; 
		--vw-accent-subtle:	#3d1e26;
		
		--vw-gold:			#ad9c61;
		--vw-gold-subtle:	#3e351e;
		--vw-green:			#74ad61;
		--vw-green-subtle:	#263e1e;
		--vw-teal:			#61ad9b;
		--vw-teal-subtle:	#1e3e35;
		--vw-blue:			#6171ad;
		--vw-blue-subtle:	#1e263e;
		--vw-violet:		#9c61ad;
		--vw-violet-subtle:	#351e3e;
    }
}
.skin-theme-clientpref-night .mw-logo-icon {
    filter: invert(1);
}

@media ( prefers-color-scheme: dark ) {
    .skin-theme-clientpref-os .mw-logo-icon {
        filter: invert(1);
    }
}


#footer-info li, #footer-places li {
    font-size: 14px;
}

.mw-logo-wordmark {
    font-size: 1.5rem;
    color: var(--vw-accent);
}

.hatnote {
    font-style: italic;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.infobox {
    float: right;
    margin: 0 0 1em 1em;
}
@media (max-width: 600px) {
    .infobox {
        width: 100% !important;
        float: none !important;
        margin: 0 0 1em 0;
        box-sizing: border-box;
    }
    .infobox img {
        max-width: 100% !important;
        overflow: hidden;
    }
}
@media (min-width: 601px){
	.infobox{
		max-width: 300px !important;
	}
}

.page-Main_Page .firstHeading { 
	display: none; 
}

#welcome-box {
	border: 2px solid var(--vw-accent);
	background-color: var(--vw-accent-subtle);
}
#welcome-box h1 { 
	border-bottom-color: var(--vw-accent); 
	width: min(100%, 400px);
}

#events-box, #feature-box {
    flex: 1;
    min-width: 280px;
}

#events-box {
	border: 2px solid var(--vw-blue);
	background-color: var(--vw-blue-subtle);
}
#events-box h2 { border-bottom-color: var(--vw-blue); }
#bulletin-box {
	border: 2px solid var(--vw-green);
	background-color: var(--vw-green-subtle);
}
#bulletin-box h2 { border-bottom-color: var(--vw-green); }
#feature-box {
	border: 2px solid var(--vw-gold);
	background-color: var(--vw-gold-subtle);
}
#feature-box h2 { border-bottom-color: var(--vw-gold); }

.documentation .mw-editsection:not(.documentation-edit) {
    display: none;
}

.poster-container {
	display:flex; flex-wrap:wrap; gap:0.4em;
}