PRD Wiki:Main Page/styles.css: Difference between revisions

From PRD Wiki
Jump to navigation Jump to search
← Older editNewer edit →
RandomUser34 (talk | contribs)
Bureaucrats, Check users, Interface administrators, observers, Suppressors, Administrators
191 edits
wp>Izno
move styles upstream
m 1 revision imported
Line 1: Line 1:
/* {{pp|small=yes}} */
.mp-panel {
.mp-box {
width: 100%;
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
height: auto;
padding: 0 0.5em 0.5em;
border: 1px solid #88A;
margin-top: 4px;
background-color: #ACF;
color: inherit;
vertical-align: top;
margin: 0em 0em 0.5em 0em;
border-spacing: 0.6em;
}
}


.mp-h2,
.mp-panel h1 {
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
font-size: 230%;
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
font-family: 'hoefler text','times new roman', serif;
margin: 0.5em 0;
font-variant: small-caps;
padding: 0.2em 0.4em;
font-size: 120%;
font-weight: bold;
font-family: inherit;
}
 
.mp-later {
font-size: 85%;
font-weight: normal;
}
 
#mp-welcomecount {
text-align: center;
margin: 0.4em;
}
 
#mp-welcome {
font-size: 162%;
padding: 0.1em;
}
 
#mp-welcome h1,
#mp-welcome .mw-heading1 {
font-size: inherit;
font-family: inherit;
display: inline;
border: none;
border: none;
margin: 0;
padding: 5pt
}
}


#mp-free {
.mp-panel h2 {
font-size: 95%;
text-align: left;
font-size: 1.2em;
margin: 4px 0;
padding: 1.5px 0 2px 4px;
background: var(--background-color-neutral, #eaecf0) url('https://upload.wikimedia.org/wikipedia/commons/1/1b/Wikibar2.png') right no-repeat;
background-size: auto 100%;
font-weight: bold;
border: 1px solid #AAA;
text-align: left;
color: inherit;
display: block !important;
}
}


#articlecount {
.mp-panel h2 span {
font-size: 85%;
display: inline !important;
}
}


#articlecount > ul {
.mp-subpanel {
vertical-align: top;
color: #000;
border: 3px double #AAA;
background-color: var(--background-color-base, #fff);
color: inherit;
padding: 0.5em;
margin: 0;
margin: 0;
padding: 0;
width: 100%;
}
}


#articlecount > ul > li {
.mp-left {
margin: 0;
width: 55%;
display: inline;
}
}


#articlecount > ul > li::after {
.mp-right {
content: " · ";
width: 45%;
font-weight: bold;
}
}


#articlecount > ul > li:last-child::after {
#EnWpMpBook2 {
content: "";
padding: 1em 0 .6em;
}
}


#mp-banner {
body.skin-minerva table {
text-align: center;
border-collapse: separate !important;
padding-top: 0.5em;
}
}


/* clear fix */
@media screen and ( max-width: 720px ) {
.mp-contains-float::after {
    body.skin-minerva td,
content: "";
    body.skin-minerva tr,
display: block;
    body.skin-minerva tbody,
clear: both;
    body.skin-minerva table {
}
        display: block;
 
        width: 100% !important;
@media (max-width: 875px) {
        box-sizing: border-box;
/* We need to improve Template:POTD as used on the main page so that these
    }
* hacks aren't necessary */
   
#mp-tfp table,
    #mf-projs td:not(:only-child) {
#mp-tfp tr,
    display: inline-block;
#mp-tfp td,
    width: 40% !important;
#mp-tfp tbody {
    padding: 5px 0;
display: block !important;
    }
width: 100% !important;
    #mf-projs td:nth-child(even) {
box-sizing: border-box;
    width: 50% !important;
    }
#mf-projs td.empty {
display: none !important;
}
   
#mf-know td:last-child tr {
display: flex;
flex-direction: column-reverse;
}
}
 
#mf-know {
#mp-tfp tr:first-child td:first-child a.mw-file-description {
text-align: center;
text-align: center;
display: table;
margin: 0 auto;
}
#articlecount > ul > li::after {
content: "";
font-weight: normal;
}
}
#mf-know table {
#articlecount > ul > li {
margin: 0;
display: block;
}
}
 
@media (min-width: 875px) {
#mp-upper {
display: flex;
}
}
#mf-know td {
#mp-left {
padding: 0 !important;
flex: 1 1 55%;
margin-right: 2px;
}
}
#mf-know td tr {
#mp-right {
padding: 1em 0;
flex: 1 1 45%;
margin-left: 2px;
}
}
}
}


@media screen {
@media screen {
#mp-topbanner {
html.skin-theme-clientpref-night .mp-panel {
background-color: #f9f9f9;
background-color: #002D70;
border-color: #ddd;
}
#mp-banner {
background-color: #fffaf5;
border-color: #f2e0ce;
}
#mp-left {
background-color: #f5fffa;
border-color: #cef2e0;
}
#mp-left .mp-h2 {
background-color: #cef2e0;
border-color: #a3bfb1;
}
#mp-right {
background-color: #f5faff;
border-color: #cedff2;
}
#mp-right .mp-h2 {
background-color: #cedff2;
border-color: #a3b0bf;
}
#mp-middle {
background-color: #fff5fa;
border-color: #f2cedd;
}
#mp-middle .mp-h2 {
background-color: #f2cedd;
border-color: #bfa3af;
}
#mp-lower {
background-color: #faf5ff;
border-color: #ddcef2;
}
#mp-lower .mp-h2 {
background-color: #ddcef2;
border-color: #afa3bf;
}
#mp-bottom {
/* no background */
border-color: #e2e2e2;
}
#mp-bottom .mp-h2 {
background-color: #eee;
border-color: #ddd;
}
 
/* night mode */
html.skin-theme-clientpref-night #mp-topbanner {
background-color: #171a1d;
border-color: #676767;
}
html.skin-theme-clientpref-night #mp-banner {
background-color: #331a00;
border-color: #663428;
}
html.skin-theme-clientpref-night #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
html.skin-theme-clientpref-night #mp-left .mp-h2 {
background-color: #104437;
border-color: #2f4d41;
}
html.skin-theme-clientpref-night #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
html.skin-theme-clientpref-night #mp-right .mp-h2 {
background-color: #082849;
border-color: #a3b0bf;
}
html.skin-theme-clientpref-night #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
html.skin-theme-clientpref-night #mp-middle .mp-h2 {
background-color: #882c43;
border-color: #926c80;
}
html.skin-theme-clientpref-night #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
html.skin-theme-clientpref-night #mp-lower .mp-h2 {
background-color: #7545ab;
border-color: #afa3bf;
}
html.skin-theme-clientpref-night #mp-bottom {
/* no background */
border-color: #676767;
}
html.skin-theme-clientpref-night #mp-bottom .mp-h2 {
background-color: #3d3d3d;
border-color: #676767;
}
}
}
}


/* OS night mode */
@media screen and (prefers-color-scheme: dark) {
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os .mp-panel {
html.skin-theme-clientpref-os #mp-topbanner {
background-color: #002D70;
background-color: #171a1d;
border-color: #676767;
}
html.skin-theme-clientpref-os #mp-banner {
background-color: #331a00;
border-color: #663428;
}
html.skin-theme-clientpref-os #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
html.skin-theme-clientpref-os #mp-left .mp-h2 {
background-color: #104437;
border-color: #2f4d41;
}
html.skin-theme-clientpref-os #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
html.skin-theme-clientpref-os #mp-right .mp-h2 {
background-color: #082849;
border-color: #a3b0bf;
}
html.skin-theme-clientpref-os #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
html.skin-theme-clientpref-os #mp-middle .mp-h2 {
background-color: #882c43;
border-color: #926c80;
}
html.skin-theme-clientpref-os #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
html.skin-theme-clientpref-os #mp-lower .mp-h2 {
background-color: #7545ab;
border-color: #afa3bf;
}
html.skin-theme-clientpref-os #mp-bottom {
/* no background */
border-color: #676767;
}
html.skin-theme-clientpref-os #mp-bottom .mp-h2 {
background-color: #3d3d3d;
border-color: #676767;
}
}
}
}

Revision as of 10:35, 17 February 2026

.mp-panel {
	width: 100%;
	height: auto;
	border: 1px solid #88A;
	background-color: #ACF;
	color: inherit;
	vertical-align: top;
	margin: 0em 0em 0.5em 0em;
	border-spacing: 0.6em;
}

.mp-panel h1 {
	font-size: 230%;
	font-family: 'hoefler text','times new roman', serif;
	font-variant: small-caps;
	border: none;
	margin: 0;
	padding: 5pt
}

.mp-panel h2 {
	text-align: left;
	font-size: 1.2em;
	margin: 4px 0;
	padding: 1.5px 0 2px 4px;
	background: var(--background-color-neutral, #eaecf0) url('https://upload.wikimedia.org/wikipedia/commons/1/1b/Wikibar2.png') right no-repeat;
	background-size: auto 100%;
	font-weight: bold;
	border: 1px solid #AAA;
	text-align: left;
	color: inherit;
	display: block !important;
}

.mp-panel h2 span {
	display: inline !important;
}

.mp-subpanel {
	vertical-align: top;
	color: #000;
	border: 3px double #AAA;
	background-color: var(--background-color-base, #fff);
	color: inherit;
	padding: 0.5em;
	margin: 0;
	width: 100%;
}

.mp-left {
	width: 55%;
}

.mp-right {
	width: 45%;
}

#EnWpMpBook2 {
	padding: 1em 0 .6em;
}

body.skin-minerva table {
	border-collapse: separate !important;
}

@media screen and ( max-width: 720px ) {
    body.skin-minerva td,
    body.skin-minerva tr,
    body.skin-minerva tbody,
    body.skin-minerva table {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    #mf-projs td:not(:only-child) {
    	display: inline-block;
    	width: 40% !important;
    	padding: 5px 0;
    }
    #mf-projs td:nth-child(even) {
    	width: 50% !important;
    }
	#mf-projs td.empty {
		display: none !important;
	}
    
	#mf-know td:last-child tr {
		display: flex;
		flex-direction: column-reverse;
	}
	#mf-know {
		text-align: center;
	}
	#mf-know table {
		margin: 0;
	}
	#mf-know td {
		padding: 0 !important;
	}
	#mf-know td tr {
		padding: 1em 0;
	}
}

@media screen {
	html.skin-theme-clientpref-night .mp-panel {
		background-color: #002D70;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .mp-panel {
		background-color: #002D70;
	}
}
Retrieved from "https://prdmc.ca/w/index.php?title=PRD_Wiki:Main_Page/styles.css&oldid=1555"