Ad placeholder

MediaWiki:Mobile.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Mobile.css (view source)

Revision as of 18:38, 10 September 2024

9,565 bytes added ,  10 September
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-secondary__h: 255;


--color-surface-0: hsl(var(--color-primary__h) 10% 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) 5% 12%);
--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 {
color: var(--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;
}
}
Retrieved from "https://dev.bg3.wiki/wiki/Special:MobileDiff/167438...227695"

Navigation menu