MediaWiki:Common.css: Difference between revisions
EnWikiAdmin (talk | contribs) No edit summary Tag: Reverted |
EnWikiAdmin (talk | contribs) No edit summary |
||
(60 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* | /* Typography and Basic Styling */ | ||
cite, | |||
dfn { | |||
font-style: inherit; | |||
} | } | ||
# | |||
q { | |||
width: 100%; | quotes: '"' '"' "'" "'"; | ||
} | |||
small { | |||
font-size: 85%; | |||
} | |||
.mw-body-content sub, | |||
.mw-body-content sup { | |||
font-size: 80%; | |||
} | |||
.references { | |||
margin-bottom: 0.5em; | |||
} | |||
/* Parsoid Customizations for Reference Styling */ | |||
/* Reset the reference counter for each group */ | |||
span[rel="mw:referencedBy"] { | |||
/* counter-reset: mw-ref-linkback 0;*/ | |||
} | |||
/* Custom styling for each type of reference */ | |||
span[rel="mw:referencedBy"] > a::before { | |||
font-size: 80%; | |||
font-weight: bold; | |||
font-style: italic; | |||
content: counter(mw-ref-linkback, lower-alpha); | |||
} | |||
a[rel="mw:referencedBy"]::before { | |||
font-weight: bold; | |||
content: "^"; | |||
} | |||
span[rel="mw:referencedBy"]::before { | |||
content: "^ "; | |||
} | |||
/* Collapsible Elements */ | |||
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) { | |||
font-weight: normal; | |||
padding-right: 0.2em; | |||
padding-left: 0.2em; | |||
} | |||
.mw-collapsible-leftside-toggle .mw-collapsible-toggle { | |||
float: left; | |||
} | |||
/* Custom Margins for Block Elements */ | |||
blockquote { | |||
overflow: hidden; | |||
margin: 1em 0; | |||
padding: 0 40px; | |||
} | |||
.infobox { | |||
border: 1px solid #a2a9b1; | |||
color: black; | |||
padding: 0.2em; | |||
font-size: 88%; | |||
line-height: 1.5em; | |||
border-spacing: 3px; | |||
} | |||
@media screen { | |||
.infobox { | |||
background-color: #f8f9fa; | |||
} | |||
} | |||
@media (max-width: 640px) { | |||
.infobox { | |||
width: 100%; | |||
} | |||
.infobox .nowrap { | |||
white-space: normal; | |||
} | |||
} | |||
@media (min-width: 640px) { | |||
.infobox { | |||
margin: 0.5em 0 0.5em 1em; | |||
float: right; | |||
clear: right; | |||
width: 22em; | |||
} | |||
} | |||
.infobox-header, | |||
.infobox-label, | |||
.infobox-above, | |||
.infobox-full-data, | |||
.infobox-data, | |||
.infobox-below, | |||
.infobox-subheader, | |||
.infobox-image, | |||
.infobox-navbar, | |||
.infobox th, | |||
.infobox td { | |||
vertical-align: top; | |||
} | |||
.infobox-label, | |||
.infobox-data, | |||
.infobox th, | |||
.infobox td { | |||
text-align: left; | |||
} | |||
.infobox .infobox-above, | |||
.infobox .infobox-title, | |||
.infobox caption { | |||
font-size: 125%; | |||
font-weight: bold; | |||
text-align: center; | |||
padding: 0.2em; | |||
} | |||
.infobox .infobox-header, | |||
.infobox .infobox-subheader, | |||
.infobox .infobox-image, | |||
.infobox .infobox-full-data, | |||
.infobox .infobox-below { | |||
text-align: center; | |||
} | |||
.infobox .infobox-navbar { | |||
text-align: right; | |||
} | |||
/* Table and List Formatting */ | |||
.wikitable.plainrowheaders th[scope=row], | |||
.wikitable.plainrowheaders th[scope=rowgroup] { | |||
font-weight: normal; | |||
text-align: left; | |||
} | |||
.nounderlines a, | |||
.IPA a:link, | |||
.IPA a:visited { | |||
text-decoration: none !important; | |||
} | |||
.nowrap, | |||
.nowraplinks a { | |||
white-space: nowrap; | |||
} | |||
.wrap, | |||
.wraplinks a { | |||
white-space: normal; | |||
} | |||
/* Media and Images */ | |||
.mw-parser-output a[href$=".pdf"].external, | |||
.mw-parser-output a[href*=".pdf?"].external, | |||
.mw-parser-output a[href*=".pdf#"].external, | |||
.mw-parser-output a[href$=".PDF"].external, | |||
.mw-parser-output a[href*=".PDF?"].external, | |||
.mw-parser-output a[href*=".PDF#"].external { | |||
background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right; | |||
padding: 8px 18px 8px 0; | |||
} | |||
/* Simplified footnote style */ | |||
.mw-reflist { | |||
/*counter-reset: footnote-counter !important;*/ | |||
} | |||
.mw-reflist li::before { | |||
counter-increment: footnote-counter !important; | |||
content: "[" counter(footnote-counter, lower-alpha) "] " !important; | |||
} | |||
body.skin-vector .nomobile { | |||
display: block !important; | |||
} | |||
body.skin-vector .onlymobile { | |||
display: none !important; | |||
} | |||
/* Minimum thumb width */ | |||
@media (min-width: 640px) { | |||
figure[typeof~='mw:File/Thumb'], | |||
figure[typeof~='mw:File/Frame'], | |||
.thumbinner { | |||
min-width: 100px; | |||
} | |||
} | |||
@media screen { | |||
/* Put a chequered background behind images, only visible if they have transparency, | |||
* except on main, user, and portal namespaces | |||
*/ | |||
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img { | |||
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat; | |||
} | |||
@media screen { | |||
.nochecker .gallerybox .thumb img { | |||
background-image: none; | |||
} | |||
@media (max-width: 640px) { | |||
.flagicon a > img, | |||
.flagicon noscript > img { | |||
max-width: none !important; | |||
} | |||
} | |||
@media (max-width: 640px) { | |||
.flagicon a > img, | |||
.flagicon noscript > img { | |||
max-width: none !important; | |||
} | |||
} | |||
/* Warning Boxes */ | |||
.mw-warning-with-logexcerpt, | |||
div.mw-lag-warn-high, | |||
div.mw-cascadeprotectedwarning, | |||
div#mw-protect-cascadeon { | |||
clear: both; | |||
margin: 0.2em 0; | |||
border: 1px solid #bb7070; | |||
background-color: var(--background-color-error-subtle, #ffdbdb); | |||
padding: 0.25em 0.9em; | |||
box-sizing: border-box; | |||
} | |||
/* Style the main quotebox container */ | |||
.mw-parser-output .quotebox { | |||
background-color: #F9F9F9; /* Light background for readability */ | |||
border: 1px solid #aaa; /* Soft border */ | |||
box-sizing: border-box; | |||
padding: 10px; /* Internal padding for content */ | |||
font-size: 88%; /* Adjust text size */ | |||
max-width: 100%; /* Ensure it doesn’t exceed container width */ | |||
width: 30em; /* Control width of the quote box */ | |||
margin: 0.5em auto; /* Center align by default, adjust if needed */ | |||
} | |||
/* Floating alignment for left and right options */ | |||
.mw-parser-output .quotebox.floatleft { | |||
float: left; | |||
margin: 0.5em 1.4em 0.8em 0; | |||
} | |||
.mw-parser-output .quotebox.floatright { | |||
float: right; | |||
margin: 0.5em 0 0.8em 1.4em; | |||
} | |||
/* Optional additional styling for content readability */ | |||
.mw-parser-output .quotebox p { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* Customize font or other specific needs */ | |||
.mw-parser-output .quotebox { | |||
font-family: sans-serif; | |||
color: #202122; /* Text color for contrast */ | |||
line-height: 1.5; | |||
} | |||
/* Hide the entire tags section in Recent Changes */ | |||
.mw-tag-markers { | |||
display: none !important; | |||
} | |||
/*body.page-Main_Page #firstHeading { | |||
display: none !important; | |||
}*/ | |||
body.page-Test_page .mw-body { | |||
grid-template-columns: minmax(0, 1fr) min-content; | |||
} | |||
body.page-Test_page #firstHeading { | |||
display: none !important; | |||
} | |||
body.page-Main_Page .mw-body { | |||
grid-template-columns: minmax(0, 1fr) min-content; | |||
} | |||
body.page-Main_Page #firstHeading { | |||
display: none !important; | |||
} | |||
body.page-Main_Page .mw-body { | |||
grid-template-columns: minmax(0, 1fr) min-content; | |||
} | |||
/* Hide the pre-content heading holder on Main_Page in mobile view */ | |||
@media (max-width: 1120px) { /* Adjust the breakpoint as needed */ | |||
body.page-Main_Page .pre-content.heading-holder { | |||
display: none !important; | |||
} | |||
} | |||
/* Hide ShortDescription on desktop */ | |||
body.skin-vector #siteSub { | |||
display: none; | |||
} | |||
/* Show ShortDescription on mobile */ | |||
@media (max-width: 768px) { | |||
body.skin-vector #siteSub { | |||
display: block; | |||
} | |||
} | } |
Latest revision as of 23:29, 11 January 2025
/* CSS placed here will be applied to all skins */
/* Typography and Basic Styling */
cite,
dfn {
font-style: inherit;
}
q {
quotes: '"' '"' "'" "'";
}
small {
font-size: 85%;
}
.mw-body-content sub,
.mw-body-content sup {
font-size: 80%;
}
.references {
margin-bottom: 0.5em;
}
/* Parsoid Customizations for Reference Styling */
/* Reset the reference counter for each group */
span[rel="mw:referencedBy"] {
/* counter-reset: mw-ref-linkback 0;*/
}
/* Custom styling for each type of reference */
span[rel="mw:referencedBy"] > a::before {
font-size: 80%;
font-weight: bold;
font-style: italic;
content: counter(mw-ref-linkback, lower-alpha);
}
a[rel="mw:referencedBy"]::before {
font-weight: bold;
content: "^";
}
span[rel="mw:referencedBy"]::before {
content: "^ ";
}
/* Collapsible Elements */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
font-weight: normal;
padding-right: 0.2em;
padding-left: 0.2em;
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
float: left;
}
/* Custom Margins for Block Elements */
blockquote {
overflow: hidden;
margin: 1em 0;
padding: 0 40px;
}
.infobox {
border: 1px solid #a2a9b1;
color: black;
padding: 0.2em;
font-size: 88%;
line-height: 1.5em;
border-spacing: 3px;
}
@media screen {
.infobox {
background-color: #f8f9fa;
}
}
@media (max-width: 640px) {
.infobox {
width: 100%;
}
.infobox .nowrap {
white-space: normal;
}
}
@media (min-width: 640px) {
.infobox {
margin: 0.5em 0 0.5em 1em;
float: right;
clear: right;
width: 22em;
}
}
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
.infobox th,
.infobox td {
vertical-align: top;
}
.infobox-label,
.infobox-data,
.infobox th,
.infobox td {
text-align: left;
}
.infobox .infobox-above,
.infobox .infobox-title,
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
padding: 0.2em;
}
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
text-align: center;
}
.infobox .infobox-navbar {
text-align: right;
}
/* Table and List Formatting */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
text-align: left;
}
.nounderlines a,
.IPA a:link,
.IPA a:visited {
text-decoration: none !important;
}
.nowrap,
.nowraplinks a {
white-space: nowrap;
}
.wrap,
.wraplinks a {
white-space: normal;
}
/* Media and Images */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
padding: 8px 18px 8px 0;
}
/* Simplified footnote style */
.mw-reflist {
/*counter-reset: footnote-counter !important;*/
}
.mw-reflist li::before {
counter-increment: footnote-counter !important;
content: "[" counter(footnote-counter, lower-alpha) "] " !important;
}
body.skin-vector .nomobile {
display: block !important;
}
body.skin-vector .onlymobile {
display: none !important;
}
/* Minimum thumb width */
@media (min-width: 640px) {
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
.thumbinner {
min-width: 100px;
}
}
@media screen {
/* Put a chequered background behind images, only visible if they have transparency,
* except on main, user, and portal namespaces
*/
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
}
@media screen {
.nochecker .gallerybox .thumb img {
background-image: none;
}
@media (max-width: 640px) {
.flagicon a > img,
.flagicon noscript > img {
max-width: none !important;
}
}
@media (max-width: 640px) {
.flagicon a > img,
.flagicon noscript > img {
max-width: none !important;
}
}
/* Warning Boxes */
.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background-color: var(--background-color-error-subtle, #ffdbdb);
padding: 0.25em 0.9em;
box-sizing: border-box;
}
/* Style the main quotebox container */
.mw-parser-output .quotebox {
background-color: #F9F9F9; /* Light background for readability */
border: 1px solid #aaa; /* Soft border */
box-sizing: border-box;
padding: 10px; /* Internal padding for content */
font-size: 88%; /* Adjust text size */
max-width: 100%; /* Ensure it doesn’t exceed container width */
width: 30em; /* Control width of the quote box */
margin: 0.5em auto; /* Center align by default, adjust if needed */
}
/* Floating alignment for left and right options */
.mw-parser-output .quotebox.floatleft {
float: left;
margin: 0.5em 1.4em 0.8em 0;
}
.mw-parser-output .quotebox.floatright {
float: right;
margin: 0.5em 0 0.8em 1.4em;
}
/* Optional additional styling for content readability */
.mw-parser-output .quotebox p {
margin: 0;
padding: 0;
}
/* Customize font or other specific needs */
.mw-parser-output .quotebox {
font-family: sans-serif;
color: #202122; /* Text color for contrast */
line-height: 1.5;
}
/* Hide the entire tags section in Recent Changes */
.mw-tag-markers {
display: none !important;
}
/*body.page-Main_Page #firstHeading {
display: none !important;
}*/
body.page-Test_page .mw-body {
grid-template-columns: minmax(0, 1fr) min-content;
}
body.page-Test_page #firstHeading {
display: none !important;
}
body.page-Main_Page .mw-body {
grid-template-columns: minmax(0, 1fr) min-content;
}
body.page-Main_Page #firstHeading {
display: none !important;
}
body.page-Main_Page .mw-body {
grid-template-columns: minmax(0, 1fr) min-content;
}
/* Hide the pre-content heading holder on Main_Page in mobile view */
@media (max-width: 1120px) { /* Adjust the breakpoint as needed */
body.page-Main_Page .pre-content.heading-holder {
display: none !important;
}
}
/* Hide ShortDescription on desktop */
body.skin-vector #siteSub {
display: none;
}
/* Show ShortDescription on mobile */
@media (max-width: 768px) {
body.skin-vector #siteSub {
display: block;
}
}