12,652
editsno edit summary
No edit summary |
No edit summary |
||
(24 intermediate revisions by the same user not shown) | |||
Line 38: | Line 38: | ||
* These are added via hooks in LocalSettings.php. | * These are added via hooks in LocalSettings.php. | ||
* | * | ||
* The "mw-ads-enabled" | * The "mw-ads-enabled" and "mw-ads-disabled" classes are also added via a hook | ||
* | * in LocalSettings. | ||
* | * | ||
* There are also "mw-anonymous" and "mw-logged-in" which are equivalent under | |||
* normal circumstances, since ads are only shown to anon visitors, but please | |||
* use the ad-specific classes just in case. | |||
*/ | */ | ||
/* | /* | ||
Line 58: | Line 55: | ||
* header, and will be centered. | * header, and will be centered. | ||
*/ | */ | ||
/* The container for the ad. */ | /* The container for the ad. */ | ||
#bg3wiki-header-ad { | #bg3wiki-header-ad { | ||
Line 71: | Line 68: | ||
align-content: center; | align-content: center; | ||
overflow: hidden; | overflow: hidden; | ||
} | |||
.mw-ads-ramp #bg3wiki-header-ad { | |||
width: 320px; | |||
height: 50px; | |||
} | } | ||
Line 81: | Line 82: | ||
/* Ad banner is 468px. Add another 16px as padding. */ | /* Ad banner is 468px. Add another 16px as padding. */ | ||
max-width: calc(100% - 468px - 16px); | max-width: calc(100% - 468px - 16px); | ||
} | |||
.mw-ads-ramp #firstHeading { | |||
margin-top: 12px; | |||
max-width: calc(100% - 320px - 16px); | |||
} | } | ||
.mw-ads-enabled .mw-indicators { | .mw-ads-enabled .mw-indicators { | ||
Line 110: | Line 115: | ||
/* The actual insertion point for the ad. */ | /* The actual insertion point for the ad. */ | ||
#bg3wiki-header-ad-fuse { | #bg3wiki-header-ad-fuse, | ||
#bg3wiki-header-ad-ramp { | |||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Line 116: | Line 122: | ||
right: 0; | right: 0; | ||
bottom: 0; | bottom: 0; | ||
/* | align-content: center; | ||
/* So the two divs (fuse & ramp) don't block each other. */ | |||
/* Set pointer-events back on their child nodes. */ | |||
pointer-events: none; | |||
} | |||
/* See comment about pointer-events above. */ | |||
#bg3wiki-header-ad-fuse div, | |||
#bg3wiki-header-ad-ramp div { | |||
pointer-events: auto; | |||
} | } | ||
/* | /* | ||
* === Sidebar sticky vertical ad === | * === Sidebar sticky vertical ad === | ||
* | |||
* Note that being anonymous (.mw-anonymous) normally corresponds to ads being | |||
* enabled (.mw-ads-enabled) but in some cases a logged in user may still have | |||
* ads enabled (e.g. for testing) so we account for that possibility by using | |||
* the correct class selectors. | |||
* | |||
* Being logged in and also having ads enabled will make the sidebar ad appear | |||
* quite far down, due to the Special and Toolbox sections being visible. This | |||
* causes layout issues when viewing a short article, but that's OK since it's | |||
* just for testing purposes. | |||
*/ | */ | ||
Line 127: | Line 151: | ||
the ad. That said, we add a link to Special:Upload to the sidebar for anon | the ad. That said, we add a link to Special:Upload to the sidebar for anon | ||
visitors, as they may want to use that. */ | visitors, as they may want to use that. */ | ||
.mw- | .mw-anonymous #p-Special, | ||
.mw- | .mw-anonymous #p-tb, | ||
.mw-anonymous #p-VisualData { | |||
display: none; | display: none; | ||
} | } | ||
Line 134: | Line 159: | ||
/* The aforementioned link to Special:Upload for anon visitors. */ | /* The aforementioned link to Special:Upload for anon visitors. */ | ||
.mw-logged-in #n-Upload-file { | .mw-logged-in #n-Upload-file { | ||
display: none; | |||
} | |||
/* The ad section of the Sidebar has its own "About ads" link. */ | |||
.mw-ads-enabled #n-About-ads { | |||
display: none; | display: none; | ||
} | } | ||
Line 147: | Line 177: | ||
} | } | ||
/* The | /* The div containing the ad slot; see LocalSettings.php. */ | ||
#bg3wiki-sidebar-ad { | #bg3wiki-sidebar-ad { | ||
position: relative; | position: relative; | ||
Line 158: | Line 188: | ||
} | } | ||
/* Placeholder text within | /* Placeholder text within ad slot. */ | ||
#bg3wiki-sidebar-ad p { | #bg3wiki-sidebar-ad p { | ||
text-align: center; | text-align: center; | ||
Line 168: | Line 198: | ||
/* The actual insertion point for the ad. */ | /* The actual insertion point for the ad. */ | ||
#bg3wiki-sidebar-ad-fuse { | #bg3wiki-sidebar-ad-fuse, | ||
#bg3wiki-sidebar-ad-ramp { | |||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
Line 174: | Line 205: | ||
right: 0; | right: 0; | ||
bottom: 0; | bottom: 0; | ||
/* | align-content: center; | ||
/* So the two divs (fuse & ramp) don't block each other. */ | |||
/* Set pointer-events back on their child nodes. */ | |||
pointer-events: none; | |||
} | |||
/* See comment about pointer-events above. */ | |||
#bg3wiki-sidebar-ad-fuse div, | |||
#bg3wiki-sidebar-ad-ramp div { | |||
pointer-events: auto; | |||
} | |||
/* The "Served by $adProvider" text below. */ | |||
#bg3wiki-ad-provider-notice { | |||
font-size: 0.7em; | |||
font-style: italic; | |||
color: var(--fg-dark); | |||
} | } | ||
Line 185: | Line 231: | ||
/* Discord */ | /* Discord */ | ||
body.theme-dark-grey #n-Join-the-Discord\! { | body.theme-dark-grey #n-Join-the-Discord\!, | ||
body.theme-dark-grey #n-Discord { | |||
margin-top: 8px; | margin-top: 8px; | ||
} | } | ||
body.theme-dark-grey #n-Join-the-Discord\! a { | body.theme-dark-grey #n-Join-the-Discord\! a, | ||
body.theme-dark-grey #n-Discord a { | |||
padding-top: 3px; | padding-top: 3px; | ||
padding-bottom: 2px; | padding-bottom: 2px; | ||
Line 203: | Line 251: | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
font-weight: bold; | font-weight: bold; | ||
} | |||
/* Payment */ | |||
body.theme-dark-grey #n-Payment { | |||
margin-top: 8px; | |||
} | |||
body.theme-dark-grey #n-Payment a { | |||
padding-top: 3px; | |||
padding-bottom: 2px; | |||
padding-left: 24px; | |||
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg fill="%23FFA03C" viewBox="-0.5 0 20.4 20.4" xmlns="http://www.w3.org/2000/svg"><path d="M16.417 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.917 7.917zm-4.844 1.754a2.249 2.249 0 0 0-.556-1.477l-.001-.002a3.02 3.02 0 0 0-.835-.665l-.003-.002a3.498 3.498 0 0 0-.866-.313H9.31a3.78 3.78 0 0 0-.795-.083 2.849 2.849 0 0 1-.475-.037 1.8 1.8 0 0 1-.494-.158l-.002-.001a1.17 1.17 0 0 1-.371-.298L7.172 9a.733.733 0 0 1-.175-.44.749.749 0 0 1 .421-.63 2.157 2.157 0 0 1 1.11-.297 2.283 2.283 0 0 1 .391.066l.049.01a2.479 2.479 0 0 1 .473.166 1.33 1.33 0 0 1 .381.261.792.792 0 1 0 1.118-1.12 2.902 2.902 0 0 0-.85-.585 3.996 3.996 0 0 0-.785-.268h-.001l-.008-.002v-.786a.792.792 0 1 0-1.583 0v.763a3.557 3.557 0 0 0-1.14.454 2.328 2.328 0 0 0-1.159 1.967 2.296 2.296 0 0 0 .529 1.44 2.724 2.724 0 0 0 .894.717 3.342 3.342 0 0 0 .942.305 4.398 4.398 0 0 0 .736.059 2.202 2.202 0 0 1 .46.046 1.927 1.927 0 0 1 .467.168 1.431 1.431 0 0 1 .382.308.674.674 0 0 1 .165.436c0 .097 0 .324-.385.573a2.182 2.182 0 0 1-1.132.314 3.515 3.515 0 0 1-.494-.06 2.381 2.381 0 0 1-.459-.148h-.001a.953.953 0 0 1-.356-.274.792.792 0 1 0-1.197 1.037 2.516 2.516 0 0 0 .967.708 3.799 3.799 0 0 0 .774.237h.007v.783a.792.792 0 1 0 1.583 0v-.79a3.581 3.581 0 0 0 1.17-.479 2.215 2.215 0 0 0 1.107-1.9z"/></svg>'); | |||
background-repeat: no-repeat; | |||
font-weight: bold; | |||
} | |||
body.theme-dark-grey #n-Payment a::after { | |||
content: " (!!!)"; | |||
} | } | ||
Line 231: | Line 295: | ||
/* Advertisement info */ | /* Advertisement info */ | ||
body.theme-dark-grey #n-Update-on-ads { | body.theme-dark-grey #n-Update-on-ads, | ||
body.theme-dark-grey #n-About-ads { | |||
margin-top: 8px; | margin-top: 8px; | ||
} | } | ||
body.theme-dark-grey #n-Update-on-ads a { | body.theme-dark-grey #n-Update-on-ads a, | ||
body.theme-dark-grey #n-About-ads a { | |||
padding-top: 3px; | padding-top: 3px; | ||
padding-bottom: 2px; | padding-bottom: 2px; | ||
Line 272: | Line 338: | ||
display: none; | display: none; | ||
} | } | ||
} | |||
/* | |||
* == Extensions == | |||
*/ | |||
/* | |||
* === AudioButton === | |||
*/ | |||
a.ext-audiobutton[data-state="play"]::before { | |||
content: ' '; | |||
background-image: url('data:image/svg+xml, | |||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 64 64"> | |||
<circle fill="none" cx="32" cy="32" r="29" stroke-width="3" stroke="%23ffa03c"/> | |||
<polygon fill="%23ffa03c" points="24,18 24,46 48,32 "/> | |||
</svg>'); | |||
width: 20px; | |||
height: 20px; | |||
display: inline-block; | |||
background-repeat: no-repeat; | |||
vertical-align: -12%; | |||
background-position: bottom; | |||
} | |||
a.ext-audiobutton[data-state="pause"]::before { | |||
content: ' '; | |||
background-image: url('data:image/svg+xml, | |||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 64 64"> | |||
<circle fill="none" cx="32" cy="32" r="29" stroke-width="3" stroke="%23ffa03c"/> | |||
<line x1="26" y1="20" x2="26" y2="44" stroke="%23ffa03c" stroke-width="4"/> | |||
<line x1="38" y1="20" x2="38" y2="44" stroke="%23ffa03c" stroke-width="4"/> | |||
</svg>'); | |||
width: 20px; | |||
height: 20px; | |||
display: inline-block; | |||
background-repeat: no-repeat; | |||
vertical-align: -12%; | |||
background-position: bottom; | |||
} | } | ||
Line 343: | Line 448: | ||
} | } | ||
/* | /* | ||
* Make some warnings more prominent | * Make some warnings more prominent | ||
*/ | */ | ||
Line 612: | Line 717: | ||
/* Character info colours. Outdated. Will removed with the template. */ | /* Character info colours. Outdated. Will removed with the template. */ | ||
--bg3wiki-characterinfo-bg: #1B1B1B; | --bg3wiki-characterinfo-bg: #1B1B1B; | ||
--bg3wiki-characterinfo-color: #C1A886; | --bg3wiki-characterinfo-color: #C1A886; | ||
--bg3wiki-characterinfo-border: 1px solid #785000; | --bg3wiki-characterinfo-border: 1px solid #785000; | ||
--bg3wiki-characterinfo-header-bg: #281C14; | --bg3wiki-characterinfo-header-bg: #281C14; | ||
--bg3wiki-characterinfo-header-color: #C1A886; | --bg3wiki-characterinfo-header-color: #C1A886; | ||
Line 626: | Line 731: | ||
--bg3wiki-box-detail-bg: var(--bg3wiki-detail-dark-bg); | --bg3wiki-box-detail-bg: var(--bg3wiki-detail-dark-bg); | ||
--bg3wiki-box-detail-border: var(--bg3wiki-detail-dark-border); | --bg3wiki-box-detail-border: var(--bg3wiki-detail-dark-border); | ||
--bg3wiki-box-border: 1px solid #785000; | --bg3wiki-box-border: 1px solid #785000; | ||
--bg3wiki-box-accent-dark-border: 1px solid #121212; | --bg3wiki-box-accent-dark-border: 1px solid #121212; | ||
/* Navbox colours. */ | /* Navbox colours. */ | ||
Line 837: | Line 942: | ||
--bg3wiki-characterinfo-bg: var(--light-body-light); | --bg3wiki-characterinfo-bg: var(--light-body-light); | ||
--bg3wiki-characterinfo-color: black; | --bg3wiki-characterinfo-color: black; | ||
--bg3wiki-characterinfo-border: 0; | --bg3wiki-characterinfo-border: 0; | ||
--bg3wiki-characterinfo-header-bg: var(--light-body-dark); | --bg3wiki-characterinfo-header-bg: var(--light-body-dark); | ||
--bg3wiki-characterinfo-header-color: black; | --bg3wiki-characterinfo-header-color: black; | ||
Line 901: | Line 1,006: | ||
*/ | */ | ||
[aria-label]:hover, [aria-label]:focus {position: relative} | .mw-body [aria-label]:hover, | ||
.mw-body [aria-label]:focus { | |||
position: relative | |||
} | |||
[aria-label]:hover::after, | .mw-body [aria-label]:hover::after, | ||
[aria-label]:focus::after { | .mw-body [aria-label]:focus::after { | ||
position: absolute; | position: absolute; | ||
white-space: pre; | white-space: pre; | ||
Line 921: | Line 1,029: | ||
/* Changes the tooltip position. */ | /* Changes the tooltip position. */ | ||
[aria-label].aria-label-top-rig:hover::after, | .mw-body [aria-label].aria-label-top-rig:hover::after, | ||
[aria-label].aria-label-top-rig:focus::after { | .mw-body [aria-label].aria-label-top-rig:focus::after { | ||
bottom: 100%; | bottom: 100%; | ||
left: unset; | left: unset; |