MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');


/* 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:         #91a8c2;

	--vw-accent:         #c61c44;
	--vw-accent-subtle:  #f9d9df;

	--vw-gold:           #cfad3c;
	--vw-gold-subtle:    #f9f3d7;
	--vw-green:          #5ecf3c;
	--vw-green-subtle:   #ddf9d7;
	--vw-teal:           #209d80;
	--vw-teal-subtle:    #d7f9f3;
	--vw-blue:           #3c5ecf;
	--vw-blue-subtle:    #d7ddf9;
	--vw-violet:         #80209d;
	--vw-violet-subtle:  #f5e0f9;
}

/* 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:         #5a7595;

	--vw-accent:         #c54963;
	--vw-accent-subtle:  #461522;

	--vw-gold:           #c5a949;
	--vw-gold-subtle:    #473915;
	--vw-green:          #68c549;
	--vw-green-subtle:   #214715;
	--vw-teal:           #49c5a8;
	--vw-teal-subtle:    #154739;
	--vw-blue:           #4963c5;
	--vw-blue-subtle:    #152147;
	--vw-violet:         #a949c5;
	--vw-violet-subtle:  #391547;
}
@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:         #5a7595;

	--vw-accent:         #c54963;
	--vw-accent-subtle:  #461522;

	--vw-gold:           #c5a949;
	--vw-gold-subtle:    #473915;
	--vw-green:          #68c549;
	--vw-green-subtle:   #214715;
	--vw-teal:           #49c5a8;
	--vw-teal-subtle:    #154739;
	--vw-blue:           #4963c5;
	--vw-blue-subtle:    #152147;
	--vw-violet:         #a949c5;
	--vw-violet-subtle:  #391547;
}}
.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-family: 'Lora', serif;
	font-weight: 800;
    font-size: 1.5rem;
    color: var(--vw-accent);
}

.mw-logo-wordmark:hover, .mw-wordmark:hover, .mw-logo:hover {
	text-decoration: none;
}

body {
	font-family: 'Public Sans', sans-serif;
}

h1, h2 {
	font-family: 'Lora', serif !important;
	font-weight: 500 !important;
}


/* Main Page */ 
.page-Main_Page .firstHeading { 
	display: none; 
}
#welcome-box h1 { 
	border-bottom-color: var(--vw-accent); 
	width: min(100%, 400px);
}

@media (max-width: 600px) {
	#vw-main-title { text-align: center; }
	#vw-main-subtitle { margin-top: 0; text-align: center; }
	#vw-main-list { justify-content: center; }
}
@media (min-width: 601px) {
	#vw-main-title { text-align: left; }
    #vw-main-subtitle { margin-top: -0.5em; text-align: left; }
    #vw-main-list { justify-content:flex-end;}
}

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

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

.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;
	}
}