10,947
editsMore actions
Add damage color classes.
(Add list style none hack from Common.css, and rearrange some stuff.) |
(Add damage color classes.) |
||
| (50 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* All CSS here will be loaded for users of the mobile site */ | /* All CSS here will be loaded for users of the mobile site */ | ||
/***************************************************************************** | |||
* | |||
* = START CLEANED UP SECTION = | |||
* | |||
* Everything here has to be documented properly, explaining what it does if | |||
* not obvious, and especially, explaining where the CSS classes/ids/etc. are | |||
* actually used. Things should be transitioned to use TemplateStyles as much | |||
* as possible; otherwise list ALL templates / pages that rely on the CSS | |||
* found in here. | |||
* | |||
* Also, the CSS here should be divided into sections and sub-sections just as | |||
* you would do with headers in a regular page. Use the following format for | |||
* these "headers" below: | |||
* | |||
* /* | |||
* * == This is a section of cleaned-up CSS == | |||
* * / | |||
* | |||
* /* | |||
* * === This is a sub-section of the above === | |||
* * / | |||
* | |||
*****************************************************************************/ | |||
/* | |||
* == Modify Citizen's dark theme == | |||
*/ | |||
/* The Citizen skin defines some variables based on which the entire color | |||
palette is defined. It's blue by default for the dark theme. */ | |||
:root.skin-citizen-dark { | :root.skin-citizen-dark { | ||
/* This should give us a nice dark orange / brown. */ | |||
--color-primary__h: 15; | --color-primary__h: 15; | ||
--color-surface-0: hsl(var(--color-primary__h) 10% | /* Make surfaces darker. */ | ||
--color-surface-0: hsl(var(--color-primary__h) 10% 8%); | |||
--color-surface-1: hsl(var(--color-primary__h) 10% 10%); | --color-surface-1: hsl(var(--color-primary__h) 10% 10%); | ||
--color-surface-2: hsl(var(--color-primary__h) | --color-surface-2: hsl(var(--color-primary__h) 10% 12%); | ||
} | |||
/* | |||
* == Advertisement == | |||
* | |||
* On Citizen, we show a fixed banner at the bottom. It's added through a hook | |||
* in LocalSettings.php and uses the id bg3wiki-footer-ad. | |||
*/ | |||
/* | |||
* === Control visibility === | |||
* | |||
* The ad only appears if the screen dimensions are at least 320x600, because: | |||
* | |||
* - Smallest ads are 320px in width, so no ads if the screen is narrower. | |||
* - We shouldn't steal any vertical space if the screen isn't tall enough. | |||
* | |||
* Note that mobile browsers often use a height value for CSS media queries | |||
* that's quite a bit smaller than the real height that will be available once | |||
* UI elements of the browser are hidden, which usually happens as the user | |||
* starts scrolling down on a page. | |||
* | |||
* At the time of this writing, this behavior doesn't seem standardized, and | |||
* there's no way to query, in CSS, what the available height will be once the | |||
* browser has hidden some of its UI elements. In JS, it's windnow.innerHeight, | |||
* which gets dynamically updated as UI elements appear and disappear. But the | |||
* height used for CSS media queries is static, and generally seems to be based | |||
* on the initial value of window.innerHeight at first render. | |||
*/ | |||
#bg3wiki-footer-ad { | |||
display: none; | |||
} | |||
@media screen and (min-width: 320px) and (min-height: 600px) { | |||
.mw-ads-enabled #bg3wiki-footer-ad { | |||
display: block; | |||
} | |||
} | |||
/* | |||
* === Footer ad height config === | |||
* | |||
* Height is conditional, to fit various standard ad sizes: | |||
* | |||
* 320x50, 468x60, 728x90, 970x90 | |||
* | |||
* The sizes with height 90px are only used if the screen is very tall. | |||
*/ | |||
:root { | |||
/* Make sure to use 'px' here or else calc() can break. */ | |||
--footer-ad-h: 0px; | |||
} | |||
@media screen and (min-width: 320px) and (min-height: 600px) { | |||
:root { | |||
--footer-ad-h: 50px; | |||
} | |||
} | |||
@media screen and (min-width: 468px) and (min-height: 600px) { | |||
:root { | |||
--footer-ad-h: 60px; | |||
} | |||
} | |||
@media screen and (min-width: 728px) and (min-height: 800px) { | |||
:root { | |||
--footer-ad-h: 90px; | |||
} | |||
} | |||
/* | |||
* === Adjustments to Citizen skin elements === | |||
* | |||
* Citizen switches its layout at the width limit of 1120px, and we have to | |||
* apply different customizations to the layout based on that. | |||
*/ | |||
/* Make sure we can scroll to the end, taking the ad into account. */ | |||
.mw-ads-enabled .citizen-page-container { | |||
margin-bottom: var(--footer-ad-h); | |||
} | |||
/* The narrow layout where the Citizen "header" is at the bottom. We have to | |||
make sure that the "header" and everything tied to it is above the ad. */ | |||
@media screen and (max-width: 1119px) { | |||
/* This one is visible even if the Citizen "header" is hidden. Make sure | |||
it's above the ad. Note that the weird .citizen-feature... class is on | |||
the <html> element so it's even before .mw-ads-enabled. */ | |||
.citizen-feature-autohide-navigation-clientpref-1 | |||
.mw-ads-enabled.citizen-scroll--down .citizen-toc { | |||
bottom: calc(var(--footer-ad-h) + var(--space-xs)); | |||
} | |||
/* The "header" is actually at the bottom; make sure it's above the ad. */ | |||
.mw-ads-enabled .citizen-header { | |||
bottom: var(--footer-ad-h); | |||
} | |||
/* These float above the header. */ | |||
.mw-ads-enabled .page-actions, | |||
.mw-ads-enabled .citizen-toc { | |||
bottom: calc(var(--footer-ad-h) + var(--header-size) + var(--space-xs)); | |||
} | |||
} | |||
/* The wide layout where the Citizen "header" is on the left-side and the TOC | |||
floats on the right. */ | |||
@media screen and (min-width: 1120px) { | |||
/* Make sure "header" (left-side panel) isn't covered by ad. */ | |||
.mw-ads-enabled .citizen-header { | |||
bottom: var(--footer-ad-h); | |||
} | |||
/* Make sure TOC isn't too high. */ | |||
.mw-ads-enabled .citizen-toc { | |||
max-height: calc( | |||
100vh - var(--footer-ad-h) - var(--height-sticky-header) | |||
); | |||
} | |||
} | |||
/* | |||
* === Rest of the footer ad configuration === | |||
*/ | |||
/* Container */ | |||
.mw-ads-enabled #bg3wiki-footer-ad { | |||
position: fixed; | |||
bottom: 0; | |||
left: 0; | |||
height: var(--footer-ad-h); | |||
width: 100%; | |||
background: var(--color-surface-3); | |||
z-index: 999; | |||
align-content: center; | |||
overflow: hidden; | |||
} | |||
/* Placeholder text for when ad isn't shown yet / doesn't show up. */ | |||
#bg3wiki-footer-ad p { | |||
text-align: center; | |||
font-size: 0.9em; | |||
font-style: italic; | |||
color: var(--color-subtle); | |||
} | |||
/* The actual insertion point for the ad. */ | |||
#bg3wiki-footer-ad-fuse, | |||
#bg3wiki-footer-ad-ramp { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 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-footer-ad-fuse div, | |||
#bg3wiki-footer-ad-ramp div { | |||
pointer-events: auto; | |||
} | |||
/* The "Ads served by: xyz" text at the bottom. */ | |||
#bg3wiki-ad-provider-notice { | |||
margin: 0 var(--padding-page); | |||
color: var(--color-subtle); | |||
} | |||
/* | |||
* == PortableInfobox == | |||
*/ | |||
.portable-infobox { | |||
margin-bottom: 2em; | |||
} | |||
/* Style the resistances part of the creature infobox. */ | |||
.pi-type-creature [data-item-name="resistances"] ul { | |||
margin: 0; | |||
list-style: none; | |||
display: flex; | |||
justify-content: center; | |||
gap: 5px; | |||
flex-wrap: wrap; | |||
} | |||
/* | |||
* == Template-specific CSS == | |||
* | |||
* These are things that can't be done via Extension:TemplateStyles, because | |||
* they respond to dark/light theme settings. | |||
*/ | |||
/* | |||
* === Template:DamageColor === | |||
*/ | |||
.skin-citizen-dark .bg3wiki-damage-type-physical, | |||
.skin-citizen-dark .bg3wiki-damage-type-weapon, | |||
.skin-citizen-dark .bg3wiki-damage-type-piercing, | |||
.skin-citizen-dark .bg3wiki-damage-type-bludgeoning, | |||
.skin-citizen-dark .bg3wiki-damage-type-slashing { | |||
color: #8c8c8c; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-acid { | |||
color: #80b000; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-cold { | |||
color: #3399cc; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-fire { | |||
color: #ee5500; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-force { | |||
color: #cc3333; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-healing { | |||
color: #30bbbb; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-lightning { | |||
color: #3366cc; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-necrotic { | |||
color: #40b050; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-poison { | |||
color: #44bb00; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-radiant { | |||
color: #ccaa00; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-thunder { | |||
color: #8844bb; | |||
} | |||
.skin-citizen-dark .bg3wiki-damage-type-psychic { | |||
color: #cc77aa; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-physical, | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-weapon, | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-piercing, | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-bludgeoning, | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-slashing { | |||
color: #8c8c8c; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-acid { | |||
color: #80b000; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-cold { | |||
color: #3399cc; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-fire { | |||
color: #ee5500; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-force { | |||
color: #cc3333; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-healing { | |||
color: #30bbbb; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-lightning { | |||
color: #3366cc; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-necrotic { | |||
color: #40b050; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-poison { | |||
color: #44bb00; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-radiant { | |||
color: #ccaa00; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-thunder { | |||
color: #8844bb; | |||
} | |||
.skin-citizen-dark .bg3wiki-info-blob .bg3wiki-damage-type-psychic { | |||
color: #cc77aa; | |||
} | |||
/* | |||
* == Miscellaneous == | |||
*/ | |||
/* Citizen wraps tables in a pair of divs, and the outer one's width isn't set. | |||
For some reason, it ends up being narrower than the available width if this | |||
isn't set. */ | |||
/* Not needed as of Citizen v2.27.0 */ | |||
/* | |||
.citizen-overflow-wrapper { | |||
width: 100%; | |||
} | |||
*/ | |||
/***************************************************************************** | |||
* | |||
* = START LEGACY CSS = | |||
* | |||
* This is CSS that was added in the past and wasn't always documented well. | |||
* Some of it may be unnecessary and should perhaps be cautiously deleted, | |||
* other parts should be moved either to TemplateStyles or to the cleaned up | |||
* section above. | |||
* | |||
*****************************************************************************/ | |||
:root.skin-citizen-dark { | |||
--background-color-overlay: hsla(var(--color-primary__h) 20% 20% / 60%); | --background-color-overlay: hsla(var(--color-primary__h) 20% 20% / 60%); | ||
--background-color-overlay--lighter: hsl(var(--color-primary__h) 20% 20% / 80%); | --background-color-overlay--lighter: hsl(var(--color-primary__h) 20% 20% / 80%); | ||
| Line 369: | Line 711: | ||
*/ | */ | ||
[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 389: | Line 734: | ||
/* 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; | ||
| Line 508: | Line 853: | ||
.bg3wiki-blockquote-marks { | .bg3wiki-blockquote-marks { | ||
font-size: 120%; | font-size: 120%; | ||
font-family: serif; | font-family: serif; | ||
| Line 633: | Line 977: | ||
.wraplinks a { | .wraplinks a { | ||
white-space: normal; | white-space: normal; | ||
} | |||
/* Template:WeaponsTableHeader / Template:WeaponsTableRow */ | |||
.bg3wiki-weapons-table td:not(:last-child) { | |||
text-align: center; | |||
} | } | ||