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
add css tooltip colors as well
Undo revision 235389 by Taylan (talk)
Tag: Undo
 
(129 intermediate revisions by 2 users 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 {
  --color-primary__h: 20;
/* This should give us a nice dark orange / brown. */
  --color-surface-0: hsl(var(--color-primary__h) 20% 8%);
--color-primary__h: 15;
  --color-surface-1: hsl(var(--color-primary__h) 20% 10%);
 
  --color-surface-2: hsl(var(--color-primary__h) 20% 12%);
/* Make surfaces darker. */
  --background-color-overlay: hsla(var(--color-primary__h) 20% 8% / 95%);
--color-surface-0: hsl(var(--color-primary__h) 10% 8%);
  --background-color-overlay--lighter: hsl(var(--color-primary__h) 20% 8% / 60%);
--color-surface-1: hsl(var(--color-primary__h) 10% 10%);
  --bg3wiki-relative-location-bg: var(--color-surface-0);
--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);
}
 
/*
* == 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 ===
*/
 
.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;
}
 
/*
* === 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;
}
 
/*
* == 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--lighter: hsl(var(--color-primary__h) 20% 20% / 80%);
--bg3wiki-relative-location-bg: var(--color-surface-0);
--bg3wiki-relative-location-header-bg-dark: var(--color-surface-1);
--bg3wiki-relative-location-header-bg-dark: var(--color-surface-1);
/* CSS tooltip colours */
--aria-label-tooltip-bg: hsl(200deg 5% 10%);
--aria-label-tooltip-fg: hsl(0deg 0% 90%);
--aria-label-tooltip-border: none;
--bg3wiki-tooltip-border: #785000;
--bg3wiki-tooltip-border: #785000;
/* css tooltip colours */
--aria-label-tooltip-bg: hsl(200deg 5% 10%);
    --aria-label-tooltip-fg: hsl(0deg 0% 90%);
    --aria-label-tooltip-border: none;
}
}


/*
/* MobileFrontend should strip elements with this class, but still */
* Fix for table widths; not sure why this is necessary.
.nomobile {
*/
display: none;
}
.citizen-table-wrapper {
 
/* Trick to easily make lists with list-style: none */
/* Wrap a list in <div class="bg3wiki-list-style-none"> */
.bg3wiki-list-style-none > ul {
list-style: none;
}
 
/* Table styling */
 
.wikitable {
width: 100%;
width: 100%;
}
}
Line 48: Line 444:


.bg3wiki-d20-bg {
.bg3wiki-d20-bg {
    background-image: url('/static/d20-bg.png');
background-image: url('/static/d20-bg.png');
    background-position: center;
background-position: center;
    background-repeat: no-repeat;
background-repeat: no-repeat;
    background-size: 35px;
background-size: 35px;
}
}


Line 81: Line 477:


/* Imitating in-game tooltips */
/* Imitating in-game tooltips */
.bg3wiki-tooltip-box {
overflow: hidden;
margin: 0.5em 0.2em 0 0.2em;
}


.skin-citizen-dark .bg3wiki-tooltip-box {
.skin-citizen-dark .bg3wiki-tooltip-box {
background: #1B1A19;
background: #1B1A19;
box-shadow:
box-shadow:
rgba(0, 0, 0, 0.14) 3px 3px 6px 0px inset,
rgba(0, 0, 0, 0.14) 3px 3px 6px 0px inset,
rgba(0, 0, 0, 0.14) -3px -3px 6px 1px inset;
rgba(0, 0, 0, 0.14) -3px -3px 6px 1px inset;
border: 0.15rem solid var(--bg3wiki-tooltip-border);
border: 0.15rem solid var(--bg3wiki-tooltip-border);
border-radius: 10px;
border-radius: 10px;
Line 120: Line 521:
}
}


/* Spoilers */
/* ItemIcon stuff */
 
.bg3wiki-spoiler-blur {
    filter: blur(3px);
    opacity: 0.2;
    transition-property: filter, opacity;
    transition-duration: .4s;
}
 
.bg3wiki-spoiler-blur:hover, .bg3wiki-spoiler-blur:focus {
    filter: none;
    opacity: 1;
}
 


:root {
:root {
Line 146: Line 534:
--bg3wiki-itemicon-gradient-bot-opacity: 12.5%;
--bg3wiki-itemicon-gradient-bot-opacity: 12.5%;
--bg3wiki-itemicon-border-opacity: 60%;
--bg3wiki-itemicon-border-opacity: 60%;
/* Navbox colours */
--bg3wiki-navbox-bg: #1B1B1B;
--bg3wiki-navbox-header-bg: #281C14;
--bg3wiki-navbox-header-text: #C1A886;
--bg3wiki-navbox-header-secondary-bg: #28201B;
/* Documentation */
--bg3wiki-documentation-bg: var(--bg-dark);
--bg3wiki-documentation-border: var(--bg3wiki-tooltip-border);
--bg3wiki-documentation-header-bg: var(--bg-darker);
}
}


Line 197: Line 576:


/* Relative Location stuff */
/* Relative Location stuff */
.relative-location {
.relative-location {
background: var(--bg3wiki-relative-location-bg);
background: var(--bg3wiki-relative-location-bg);
border: 1px solid var(--bg3wiki-tooltip-border);
border: 1px solid var(--bg3wiki-tooltip-border);
    border-spacing: 0;
border-spacing: 0;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    margin: 5px;
margin: 5px;
    text-align: center;
text-align: center;
}
}


Line 211: Line 591:


/* Damage Rider As Source (DRS) template */
/* Damage Rider As Source (DRS) template */
.bg3wiki-damage-rider-source {
.bg3wiki-damage-rider-source {
font-size:10px;
font-size:10px;
Line 218: Line 599:


/* License box */
/* License box */
#mw-license-preview .bg3wiki-license-box-container {
#mw-license-preview .bg3wiki-license-box-container {
margin: auto auto auto 0; /* Don't want margin in the preview box because that breaks things */
/* Don't want margin in the preview box because that breaks things */
margin: auto auto auto 0;
}
}


.bg3wiki-license-box-container {
.bg3wiki-license-box-container {
  margin: 4px 0 4px 10%;
margin: 4px 0 4px 10%;
}
}


.bg3wiki-license-box {
.bg3wiki-license-box {
  border: 2px solid #785000;
border: 2px solid #785000;
  border-collapse: collapse;
border-collapse: collapse;
  background: #1B1A19;
background: #1B1A19;
  color: rgb(210,210,210);
color: rgb(210,210,210);
  width: 100%;
width: 100%;
}
}


Line 243: Line 626:
vertical-align: top;
vertical-align: top;
padding: 0.4rem 0 0.4rem 0.9rem;
padding: 0.4rem 0 0.4rem 0.9rem;
}
/* For desktop eyes only */
.nomobile {
display: none;
}
}


Line 259: Line 637:
/* Price calculator */  
/* Price calculator */  
#bg3wiki-price-calculator {
#bg3wiki-price-calculator {
  border: 1px solid var(--bg3wiki-tooltip-border);
border: 1px solid var(--bg3wiki-tooltip-border);
}
}


#bg3wiki-price-calculator-form {
#bg3wiki-price-calculator-form {
  padding: 0.5em;
padding: 0.5em;
}
}


#bg3wiki-price-calculator-form input[type="number"] {
#bg3wiki-price-calculator-form input[type="number"] {
  width: 100%;
width: 100%;
}
}


#bg3wiki-price-calculator-form td {
#bg3wiki-price-calculator-form td {
  padding-right: 0.5em;
padding-right: 0.5em;
}
}


#bg3wiki-price-calculator-form th {
#bg3wiki-price-calculator-form th {
  text-align: right;
text-align: right;
  padding-right: 0.5em;
padding-right: 0.5em;
}
}


#bg3wiki-price-calculator-form label {
#bg3wiki-price-calculator-form label {
  margin-left: 0.2em;
margin-left: 0.2em;
}
}


#bg3wiki-price-calculator-result {
#bg3wiki-price-calculator-result {
  margin: 1em;
margin: 1em;
}
}


#bg3wiki-price-calculator-result td, #bg3wiki-price-calculator-result th {
#bg3wiki-price-calculator-result td, #bg3wiki-price-calculator-result th {
  text-align: right;
text-align: right;
}
}


/* Hack to display category trees as a navbox. Only used on NavModding and NavGuides for now.
/* Hack to display category trees as a navbox. Only used on NavModding and  
*/
* NavGuides for now.
*/


.navcat div > .CategoryTreeSection::after {
.navcat div > .CategoryTreeSection::after {
Line 357: Line 736:
padding-bottom: 0.5ch
padding-bottom: 0.5ch
}
}


.bg3wiki-ac-value .ac-value-comment {
.bg3wiki-ac-value .ac-value-comment {
Line 365: Line 743:
}
}


/*
/* CSS tooltip implementation. Usage in markup:
CSS tooltip implementation. Usage in markup:


  <some-element aria-label="tooltip text here">
<some-element aria-label="tooltip text here">
    normal text
normal text
  </some-element>
</some-element>
*/
*/


[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-height: 1;
line-height: 1;
  padding: 0.3rem;
padding: 0.3rem;
  content: attr(aria-label);
content: attr(aria-label);
  background-color: var(--aria-label-tooltip-bg);
background-color: var(--aria-label-tooltip-bg);
  color: var(--aria-label-tooltip-fg);
color: var(--aria-label-tooltip-fg);
  border: var(--aria-label-tooltip-border);
border: var(--aria-label-tooltip-border);
  text-decoration: unset;
text-decoration: unset;


  /* See optional override below. */
/* See optional override below. */
  bottom: 100%;
bottom: 100%;
  left: 0;
left: 0;
}
}


/* 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;
  right: 0;
right: 0;
}
}


/* Optional class for indicating tooltip presence via underline. */
/* Optional class for indicating tooltip presence via underline. */
.bg3wiki-help-tooltip[aria-label] {
.bg3wiki-help-tooltip[aria-label] {
  cursor: help;
cursor: help;
  text-decoration-line: underline;
text-decoration-line: underline;
  text-decoration-style: dotted;
text-decoration-style: dotted;
  text-decoration-thickness: 1px;
text-decoration-thickness: 1px;
  text-underline-offset: calc(1ex / 2);
text-underline-offset: calc(1ex / 2);
}
}


Line 412: Line 792:
.bg3wiki-tabbar {
.bg3wiki-tabbar {
background-color: #1B1A19;
background-color: #1B1A19;
margin: 0.5em 0 0 0;
}
}


Line 468: Line 849:


.bg3wiki-horizontlist dt::after {
.bg3wiki-horizontlist dt::after {
    content: ":";
content: ":";
    font-weight: normal;
font-weight: normal;
    font-size: 100%;
font-size: 100%;
}
}


Line 505: Line 886:


.bg3wiki-quotesource {
.bg3wiki-quotesource {
    line-height: 1.5em;
line-height: 1.5em;
    padding-left: 1.5em;
padding-left: 1.5em;
    margin-top: 0;
margin-top: 0;
}
}


.bg3wiki-blockquote-marks {
.bg3wiki-blockquote-marks {
    color: var(--bg3wiki-blockquote-marks);
font-size: 120%;
    font-size: 120%;
font-family: serif;
    font-family: serif;
font-weight: bold;
    font-weight: bold;
}
}


/* Shortcut */
/* Shortcut */
.bg3wiki-template-shortcut {
.bg3wiki-template-shortcut {
    display: inline-block;
display: inline-block;
background-color: var(--bg3wiki-documentation-header-bg);
background-color: var(--color-surface-2);
border: 1px solid var(--bg3wiki-documentation-border);
text-align: center;
text-align: center;
    margin: 1em;
margin: 1em;
padding: 0 0.33em 0 0.33em;
padding: 0 0.33em 0 0.33em;
    vertical-align: top;
vertical-align: top;
    width: fit-content;
width: fit-content;
    font-size: 85%;
font-size: 85%;
}
}


Line 535: Line 914:
padding: 0 0 0.16em 0;
padding: 0 0 0.16em 0;
border-bottom: 2px solid #3d3d3d;
border-bottom: 2px solid #3d3d3d;
    font-size: 90%;
font-size: 90%;
}
 
/* Amboxes */
.ambox {
background-color: var(--color-surface-2);
}
.ambox-speedy {
/* Pink */
background-color: #400805;
}
.ambox .mbox-image,
.ambox .mbox-imageright {
/* These are hidden since the screen may be too narrow. */
display: none;
}
 
/* Character info template styling */
.infobox {
display: table;
width: 100%;
font-size: 90%;
margin-left: auto;
margin-right: auto;
background-color: var(--color-surface-0);
}
 
.infobox-above {
font-size: 130%;
text-align: center;
background: var(--color-surface-1);
}
 
.infobox-subheader {
text-align: center;
background-color: var(--color-surface-0);
}
 
.infobox-header {
text-align: center;
font-size: 130%;
text-align: center;
background: var(--color-surface-1);
}
 
.infobox-title {
text-align: center;
}
}


/* Resistance colours */
.infobox-label {
.bg3wiki-imagetext-text-resistant {
background-color: var(--color-surface-1);
    color: var(--bg3wiki-imagetext-text-resistant-color);
margin-right: 5em;
padding: 5px;
}
}


.bg3wiki-imagetext-text-immune{
th.infobox-label {
    color: var(--bg3wiki-imagetext-text-immune-color);
text-align: right;
}
}


.bg3wiki-imagetext-text-vulnerable {
th.infobox-label:has(.bg3wiki-icontext-block),
    color: var(--bg3wiki-imagetext-text-vulnerable-color);
th.infobox-label:has(.bg3wiki-condition) {
text-align: left;
}
}


/* Character info template styling */
td.infobox-label {
.bg3wiki-characterinfo {
text-align: center;
    background-color: var(--bg3wiki-characterinfo-bg);  
}
    border: var(--bg3wiki-characterinfo-border);  
 
    color: var(--bg3wiki-characterinfo-color);
.infobox-data {
    width: 20em;  
text-align: center;
background-color: var(--color-surface-1);
padding: 5px;
}
 
.infobox-below {
text-align: center;
background: var(--color-surface-1);
}
 
.infobox-image {
text-align: center;
background-color: var(--color-surface-0);
}
 
.infobox table {
display: table;
}
 
.infobox caption {
display: table-caption;
background-color: var(--color-surface-0);
}
 
/* Remove nowrap when undesired in infoboxes  */
.mw-parser-output .infobox .nowrap {
white-space: normal !important;
}
}


.bg3wiki-characterinfo th:not(.bg3wiki-characterinfo-subheader) {
/* When we want wrapping */
background: var(--bg3wiki-characterinfo-header-bg);
.wrap,
color: var(--bg3wiki-characterinfo-header-color);
.wraplinks a {
white-space: normal;
}
}


.bg3wiki-characterinfo-subheader {
/* Template:WeaponsTableHeader / Template:WeaponsTableRow */
padding-left: 38px;
 
vertical-align: top;
.bg3wiki-weapons-table td:not(:last-child) {
    background-color: var(--bg3wiki-characterinfo-subheader-bg);;
text-align: center;
    border: 0;
    color: var(--bg3wiki-characterinfo-subheader-color);  
}
}
Retrieved from "https://new.bg3.wiki/wiki/MediaWiki:Mobile.css"