Jump to content

MediaWiki:Common.css: Difference between revisions

From VassarWiki
subtler variable
colors
Line 3: Line 3:
/* light mode */
/* light mode */
:root, .skin-theme-clientpref-day {
:root, .skin-theme-clientpref-day {
    --vw-bg-page:       #f8f9fa;
--vw-bg-page: #f8f9fa;
    --vw-bg-surface:   #ffffff;
--vw-bg-surface: #ffffff;
    --vw-bg-subtle:     #eaecf0;
--vw-bg-subtle: #eaecf0;
--vw-bg-subtler:   #f8f9fa;
--vw-bg-subtler: #f8f9fa;
    --vw-accent:       #8B3347;
--vw-accent: #8B3347;
    --vw-accent-subtle: #f5dde2;
--vw-accent-subtle: #f5dde2;
--vw-gold: #8a7633;
--vw-gold-subtle: #f4f0dc;
--vw-green: #478a33;
--vw-green-subtle: #e0f4dc;
--vw-teal: #338a76;
--vw-teal-subtle: #dcf4f0;
--vw-blue: #33478a;
--vw-blue-subtle: #dce0f4;
--vw-violet: #76338A;
--vw-violet-subtle: #f0dcf4;
}
}


/* dark mode */
/* dark mode */
.skin-theme-clientpref-night {
.skin-theme-clientpref-night {
    --vw-bg-page:       #101418;
--vw-bg-page: #101418;
    --vw-bg-surface:   #1e2227;
--vw-bg-surface: #1e2227;
    --vw-bg-subtle:     #2a2f36;
--vw-bg-subtle: #2a2f36;
--vw-bg-subtler:   #101418;
--vw-bg-subtler: #101418;
    --vw-accent:       #F2A0B2;  
--vw-accent: #F2A0B2;  
    --vw-accent-subtle: #3d1e26;
--vw-accent-subtle: #3d1e26;
--vw-gold: #f2e0a1;
--vw-gold-subtle: #3e351e;
--vw-green: #f2e0a1;
--vw-green-subtle: #263e1e;
--vw-teal: #a1f2e0;
--vw-teal-subtle: #1e3e35;
--vw-blue: #a1b3f2;
--vw-blue-subtle: #1e263e;
--vw-violet: #e0a1f2;
--vw-violet-subtle: #351e3e;
}
}
@media ( prefers-color-scheme: dark ) {
@media ( prefers-color-scheme: dark ) {
     .skin-theme-clientpref-os {
     .skin-theme-clientpref-os {
        --vw-bg-page:       #101418;
--vw-bg-page: #101418;
        --vw-bg-surface:   #1e2227;
--vw-bg-surface: #1e2227;
        --vw-bg-subtle:     #2a2f36;
--vw-bg-subtle: #2a2f36;
    --vw-bg-subtler:   #101418;
--vw-bg-subtler: #101418;
        --vw-accent:       #F2A0B2;
--vw-accent: #F2A0B2;  
        --vw-accent-subtle: #3d1e26;
--vw-accent-subtle: #3d1e26;
--vw-gold: #f2e0a1;
--vw-gold-subtle: #3e351e;
--vw-green: #f2e0a1;
--vw-green-subtle: #263e1e;
--vw-teal: #a1f2e0;
--vw-teal-subtle: #1e3e35;
--vw-blue: #a1b3f2;
--vw-blue-subtle: #1e263e;
--vw-violet: #e0a1f2;
--vw-violet-subtle: #351e3e;
     }
     }
}
}
Line 76: Line 109:
     min-width: 280px;
     min-width: 280px;
}
}
#events-box h2 { border-bottom-color: #627ac1; }
 
#bulletin-box h2 { border-bottom-color: #62c1aa; }
#events-box {
border: 2px solid var(--vw-blue);
background-color: var(--vw-blue-subtle);
}
#events-box h2 { border-bottom-color: var(--vw-blue); }
#events-box {
border: 2px solid var(--vw-green);
background-color: var(--vw-green-subtle);
}
#bulletin-box h2 { border-bottom-color: var(--vw-green); }


@media (max-width: 600px) {
@media (max-width: 600px) {

Revision as of 23:33, 13 April 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:		#eaecf0;
	--vw-bg-subtler:	#f8f9fa;
	--vw-accent:		#8B3347;
	--vw-accent-subtle:	#f5dde2;
	
	--vw-gold:			#8a7633;
	--vw-gold-subtle:	#f4f0dc;
	--vw-green:			#478a33;
	--vw-green-subtle:	#e0f4dc;
	--vw-teal:			#338a76;
	--vw-teal-subtle:	#dcf4f0;
	--vw-blue:			#33478a;
	--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-subtler:	#101418;
	--vw-accent:		#F2A0B2; 
	--vw-accent-subtle:	#3d1e26;
	
	--vw-gold:			#f2e0a1;
	--vw-gold-subtle:	#3e351e;
	--vw-green:			#f2e0a1;
	--vw-green-subtle:	#263e1e;
	--vw-teal:			#a1f2e0;
	--vw-teal-subtle:	#1e3e35;
	--vw-blue:			#a1b3f2;
	--vw-blue-subtle:	#1e263e;
	--vw-violet:		#e0a1f2;
	--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-subtler:	#101418;
		--vw-accent:		#F2A0B2; 
		--vw-accent-subtle:	#3d1e26;
		
		--vw-gold:			#f2e0a1;
		--vw-gold-subtle:	#3e351e;
		--vw-green:			#f2e0a1;
		--vw-green-subtle:	#263e1e;
		--vw-teal:			#a1f2e0;
		--vw-teal-subtle:	#1e3e35;
		--vw-blue:			#a1b3f2;
		--vw-blue-subtle:	#1e263e;
		--vw-violet:		#e0a1f2;
		--vw-violet-subtle:	#351e3e;
    }
}

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

.mw-logo-wordmark {
    font-size: 1.5rem;
    color: maroon;
}

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

.infobox {
    width: 300px;
    float: right;
    margin: 0 0 1em 1em;
}
@media (max-width: 480px) {
    .infobox {
        width: 100% !important;
        float: none !important;
        margin: 0 0 1em 0;
    }
}

.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: 50%;
}

#events-box, #bulletin-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); }
#events-box {
	border: 2px solid var(--vw-green);
	background-color: var(--vw-green-subtle);
}
#bulletin-box h2 { border-bottom-color: var(--vw-green); }

@media (max-width: 600px) {
    #welcome-box h1 { width: 100%; }
}

.documentation .mw-editsection {
    display: none;
}