Toggle search
Toggle menu
11.6K
23.4K
4.7K
267.7K
bg3.wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Mobile.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
No edit summary
Undo revision 235389 by Taylan (talk)
Tag: Undo
 
(14 intermediate revisions by the same user not shown)
Line 47: Line 47:
  * in LocalSettings.php and uses the id bg3wiki-footer-ad.
  * in LocalSettings.php and uses the id bg3wiki-footer-ad.
  */
  */
/* Annoying "Privacy" button on bottom-right; not needed. We link to our own
  privacy policy page at the bottom, which has this button as a link. */
#qc-cmp2-persistent-link {
display: none;
}


/*
/*
  * === Control visibility ===
  * === Control visibility ===
  *
  *
  * The ad only appears if the screen dimensions are at least 320x720, because:
  * 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.
  * - 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.
  * - 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.
  */
  */


Line 67: Line 73:
}
}


@media screen and (min-width: 320px) and (min-height: 720px) {
@media screen and (min-width: 320px) and (min-height: 600px) {
.mw-ads-enabled #bg3wiki-footer-ad {
.mw-ads-enabled #bg3wiki-footer-ad {
display: block;
display: block;
Line 88: Line 94:
}
}


@media screen and (min-width: 320px) and (min-height: 720px) {
@media screen and (min-width: 320px) and (min-height: 600px) {
:root {
:root {
--footer-ad-h: 50px;
--footer-ad-h: 50px;
Line 94: Line 100:
}
}


@media screen and (min-width: 468px) and (min-height: 720px) {
@media screen and (min-width: 468px) and (min-height: 600px) {
:root {
:root {
--footer-ad-h: 60px;
--footer-ad-h: 60px;
Line 100: Line 106:
}
}


@media screen and (min-width: 728px) and (min-height: 1024px) {
@media screen and (min-width: 728px) and (min-height: 800px) {
:root {
:root {
--footer-ad-h: 90px;
--footer-ad-h: 90px;
Line 209: Line 215:


/*
/*
  * == PortableInfobox ==
  * == 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;
}
 
/*
* == Extensions ==
*/
 
/*
* === PortableInfobox ===
  */
  */


Line 224: Line 327:
gap: 5px;
gap: 5px;
flex-wrap: wrap;
flex-wrap: wrap;
}
/*
* === 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 233: Line 371:
   For some reason, it ends up being narrower than the available width if this
   For some reason, it ends up being narrower than the available width if this
   isn't set. */
   isn't set. */
/* Not needed as of Citizen v2.27.0 */
/*
.citizen-overflow-wrapper {
.citizen-overflow-wrapper {
width: 100%;
width: 100%;
}
}
*/


/*****************************************************************************
/*****************************************************************************
Retrieved from "https://new.bg3.wiki/wiki/MediaWiki:Mobile.css"