MediaWiki:Common.css: Difference between revisions

Revision as of 03:36, 16 April 2026

/*
 * == TOC ==
 *
 * Styling of MediaWiki's autogenerated Table of Contents
 */
.tocnumber {
    display: none;
}
.toc ul ul {
    border-left: 1px dotted var(--bdr-color);
    padding-left: 0.5em;
}
.toc > ul {
    padding: 0.75em 1.75em;
    margin: 0;
}

/*
 * == Miscellaneous ==
 */
/* Allows conditionally hiding things on narrow screens. */
@media screen and (max-width: 1199px) {
    .ttrpg-minwidth-1200 {
        display: none;
    }
}

/* For rounding images inserted via [[File:]]. */
.ttrpg-round-image img {
    border-radius: 50%;
}

/* Nowrap/wrap */
/* Note: .nowraplinks is used by [[Module:Navbox]] and [[Module:Sidebar]] */
.nowrap,
.nowraplinks a {
    white-space: nowrap;
}
.wrap,
.wraplinks a {
    white-space: normal;
}

/* Make sup a little smaller, like on Wikipedia */
sup {
    font-size: 80%;
}

/* Sub-list margin tweaks */
li > ul,
li > ol {
    margin-top: 0;
    /* Keep this equal to the margin-bottom of li, so that after the nested */
    /* list ends, further elements line up with those in other columns. */
    margin-bottom: 0.1em;
}

/*
 * == Styles for Templates/Modules ==
 *
 * Use this section only for styling of templates that are used ubiquitously,
 * such that they need maximum parsing efficiency, and therefore avoid using
 * Extension:TemplateStyles and [[Template:Template style]].
 */

/*
 * === [[Template:Icon text]] ===
 */

.ttrpg-icontext-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* This is for when the icon is given dimensions greater than the underlying
   file.  E.g. if you want the icon to appear as a 25x25 block, but the image
   file ends up 25x20 because it's not a square. */
.ttrpg-icontext-block .ttrpg-icontext-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ttrpg-icontext-extlink a.external {
    background-image: none;
    padding-right: 0;
}

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

    /*
 * === Math ===
    */

    body.theme-dark .mwe-math-fallback-image-inline,
    body.theme-dark .mwe-math-fallback-image-display {
    filter: hue-rotate(180deg) invert(1);
}

/*
 * === PortableInfobox ===
 */

:root {
    --pi-width: 280px;
}

.portable-infobox {
    background-color: var(--ttrpg-box-detail-bg);
    border: var(--ttrpg-wikitable-border);
    padding: 4px;
}
.portable-infobox .pi-item-spacing {
    padding: 0;
}
.portable-infobox .pi-group {
    border: none;
}

.portable-infobox .pi-data {
    border: none;
    margin: 2px 0;
}

.portable-infobox .pi-title {
    background: var(--ttrpg-box-header-bg);
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
}

.portable-infobox .pi-data[data-source="title"] {
    text-align: center;
    font-style: italic;
    font-size: 1.2em;
    margin-top: 2px;
    margin-bottom: 2px;
}

.portable-infobox .pi-tab-link,
.portable-infobox .pi-section-tab {
    color: var(--link);
    border: none;
    flex-grow: 1;
}

.portable-infobox .pi-tab-link.current,
.portable-infobox .pi-section-tab.pi-section-active {
    background: none;
    border-bottom: 1px solid var(--link);
}

.portable-infobox .pi-header {
    background: var(--ttrpg-box-label-bg);
    text-align: center;
    font-size: 1.05em;
    padding: 5px 0;
}

.portable-infobox .pi-data-label,
.portable-infobox .pi-data-value {
    padding: 3px 5px 3px 5px;
}

.portable-infobox .pi-data-label {
    background-color: var(--ttrpg-box-label-bg);
    font-weight: normal;
}

.portable-infobox table {
    background: none;
}
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
    border-left: 2px solid var(--ttrpg-box-detail-bg);
}
.pi-horizontal-group th.pi-horizontal-group-item {
    border-top: 2px solid var(--ttrpg-box-detail-bg);
    padding-top: 5px;
}
.pi-horizontal-group thead + tbody .pi-data-value {
    padding: 5px 0;
}

/*
 * === SyntaxHighlight_GeSHi ===
 */

.mw-highlight pre { line-height: 125%; }
.mw-highlight td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
.mw-highlight span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
.mw-highlight td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.mw-highlight span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.mw-highlight .hll { background-color: #49483e }
.mw-highlight .c { color: #777; font-style: italic } /* Comment */
.mw-highlight .err { color: #A61717; background-color: #E3D2D2 } /* Error */
.mw-highlight .esc { color: #CCC } /* Escape */
.mw-highlight .g { color: #CCC } /* Generic */
.mw-highlight .k { color: #7686BB; font-weight: bold } /* Keyword */
.mw-highlight .l { color: #CCC } /* Literal */
.mw-highlight .n { color: #CCC } /* Name */
.mw-highlight .o { color: #CCC } /* Operator */
.mw-highlight .x { color: #CCC } /* Other */
.mw-highlight .p { color: #CCC } /* Punctuation */
.mw-highlight .ch { color: #777; font-style: italic } /* Comment.Hashbang */
.mw-highlight .cm { color: #777; font-style: italic } /* Comment.Multiline */
.mw-highlight .cp { color: #777; font-style: italic } /* Comment.Preproc */
.mw-highlight .cpf { color: #777; font-style: italic } /* Comment.PreprocFile */
.mw-highlight .c1 { color: #777; font-style: italic } /* Comment.Single */
.mw-highlight .cs { color: #777; font-style: italic } /* Comment.Special */
.mw-highlight .gd { color: #CCC } /* Generic.Deleted */
.mw-highlight .ge { color: #CCC } /* Generic.Emph */
.mw-highlight .ges { color: #CCC } /* Generic.EmphStrong */
.mw-highlight .gr { color: #CCC } /* Generic.Error */
.mw-highlight .gh { color: #CCC } /* Generic.Heading */
.mw-highlight .gi { color: #CCC } /* Generic.Inserted */
.mw-highlight .go { color: #CCC } /* Generic.Output */
.mw-highlight .gp { color: #FFF } /* Generic.Prompt */
.mw-highlight .gs { color: #CCC } /* Generic.Strong */
.mw-highlight .gu { color: #CCC } /* Generic.Subheading */
.mw-highlight .gt { color: #CCC } /* Generic.Traceback */
.mw-highlight .kc { color: #7686BB; font-weight: bold } /* Keyword.Constant */
.mw-highlight .kd { color: #7686BB; font-weight: bold } /* Keyword.Declaration */
.mw-highlight .kn { color: #7686BB; font-weight: bold } /* Keyword.Namespace */
.mw-highlight .kp { color: #7686BB; font-weight: bold } /* Keyword.Pseudo */
.mw-highlight .kr { color: #7686BB; font-weight: bold } /* Keyword.Reserved */
.mw-highlight .kt { color: #7686BB; font-weight: bold } /* Keyword.Type */
.mw-highlight .ld { color: #CCC } /* Literal.Date */
.mw-highlight .m { color: #4FB8CC } /* Literal.Number */
.mw-highlight .s { color: #51CC99 } /* Literal.String */
.mw-highlight .na { color: #CCC } /* Name.Attribute */
.mw-highlight .nb { color: #CCC } /* Name.Builtin */
.mw-highlight .nc { color: #CCC } /* Name.Class */
.mw-highlight .no { color: #CCC } /* Name.Constant */
.mw-highlight .nd { color: #CCC } /* Name.Decorator */
.mw-highlight .ni { color: #CCC } /* Name.Entity */
.mw-highlight .ne { color: #CCC } /* Name.Exception */
.mw-highlight .nf { color: #6A6AFF } /* Name.Function */
.mw-highlight .nl { color: #CCC } /* Name.Label */
.mw-highlight .nn { color: #CCC } /* Name.Namespace */
.mw-highlight .nx { color: #E2828E } /* Name.Other */
.mw-highlight .py { color: #CCC } /* Name.Property */
.mw-highlight .nt { color: #CCC } /* Name.Tag */
.mw-highlight .nv { color: #7AB4DB; font-weight: bold } /* Name.Variable */
.mw-highlight .ow { color: #CCC } /* Operator.Word */
.mw-highlight .pm { color: #CCC } /* Punctuation.Marker */
.mw-highlight .w { color: #BBB } /* Text.Whitespace */
.mw-highlight .mb { color: #4FB8CC } /* Literal.Number.Bin */
.mw-highlight .mf { color: #4FB8CC } /* Literal.Number.Float */
.mw-highlight .mh { color: #4FB8CC } /* Literal.Number.Hex */
.mw-highlight .mi { color: #4FB8CC } /* Literal.Number.Integer */
.mw-highlight .mo { color: #4FB8CC } /* Literal.Number.Oct */
.mw-highlight .sa { color: #51CC99 } /* Literal.String.Affix */
.mw-highlight .sb { color: #51CC99 } /* Literal.String.Backtick */
.mw-highlight .sc { color: #51CC99 } /* Literal.String.Char */
.mw-highlight .dl { color: #51CC99 } /* Literal.String.Delimiter */
.mw-highlight .sd { color: #51CC99 } /* Literal.String.Doc */
.mw-highlight .s2 { color: #51CC99 } /* Literal.String.Double */
.mw-highlight .se { color: #51CC99 } /* Literal.String.Escape */
.mw-highlight .sh { color: #51CC99 } /* Literal.String.Heredoc */
.mw-highlight .si { color: #51CC99 } /* Literal.String.Interpol */
.mw-highlight .sx { color: #51CC99 } /* Literal.String.Other */
.mw-highlight .sr { color: #51CC99 } /* Literal.String.Regex */
.mw-highlight .s1 { color: #51CC99 } /* Literal.String.Single */
.mw-highlight .ss { color: #51CC99 } /* Literal.String.Symbol */
.mw-highlight .bp { color: #CCC } /* Name.Builtin.Pseudo */
.mw-highlight .fm { color: #6A6AFF } /* Name.Function.Magic */
.mw-highlight .vc { color: #7AB4DB; font-weight: bold } /* Name.Variable.Class */
.mw-highlight .vg { color: #BE646C; font-weight: bold } /* Name.Variable.Global */
.mw-highlight .vi { color: #7AB4DB; font-weight: bold } /* Name.Variable.Instance */
.mw-highlight .vm { color: #7AB4DB; font-weight: bold } /* Name.Variable.Magic */
.mw-highlight .il { color: #4FB8CC } /* Literal.Number.Integer.Long */

/*****************************************************************************
 *
 * = 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. Some of it may also be better placed in Extension:Themes.
 *
 *****************************************************************************/

html {
    background-repeat: no-repeat;
}

/* Fix pre being bright on dark */
body.theme-dark-grey pre {
    background: var(--bg-main);
    color: var(--fg);
}

/* Set pre colour on light */
body.theme-light pre,
body.theme-light code {
    background: var(--mw-code-background-color);
}

.wikitable caption {
    padding: 0.2em;
}

/* Table styling */
.wikitable {
    border: var(--ttrpg-box-border) !important;
}

.wikitable tr,
.wikitable td,
.wikitable th,
.wikitable tr :is(th, td) {
    padding-left: 0.4em;
    padding-right: 0.4em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

table.wikitable td {
    background-color: var(--ttrpg-wikitable-bg) !important;
    border: var(--ttrpg-wikitable-border) !important;
}

.wikitable th {
    background-color: var(--ttrpg-wikitable-header-bg) !important;
    border: var(--ttrpg-wikitable-border) !important;
}

.wikitable td ul,
.wikitable td ol,
.wikitable td dl,
.wikitable tr td :is(ol,
ul) {
    text-align: left;
}

.wikitable > .ublist > ul,
.wikitable > .ttrpg-ublist > ul {
    margin: 0;
}

/*
 * Make some warnings more prominent
 */

body.theme-dark-grey .mw-userconfigpublic {
    color: yellow;
}

body.theme-dark-grey .mw-userconfigdangerous {
    color: red;
    font-weight: bold;
}

/*
 * Feedback Footer
 */

body.theme-dark-grey .ttrpg-article-footer {
    border: 1px solid var(--bdr-color);
    background-color: var(--bg-dark);
}

.ttrpg-article-footer {
    font-size: 1.1em;
    margin-top: 1em;
    padding: 0.5em;
}

/*
 * Various elements used across the wiki
 */

/* Info blob */

body.theme-dark-grey .ttrpg-info-blob {
    background-color: var(--bg-dark);
}

/* D20 background image for numbers */

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

/* Tooltip box */
body.theme-dark-grey .ttrpg-tooltip-box {
    background: #1B1A19;
}

body.theme-dark-grey .ttrpg-tooltip-gradient-common {
    background: linear-gradient(to bottom, #1B1A1999, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .ttrpg-tooltip-gradient-uncommon {
    background: linear-gradient(to bottom, #00491599, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .ttrpg-tooltip-gradient-rare {
    background: linear-gradient(to bottom, #00374999, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .ttrpg-tooltip-gradient-veryrare {
    background: linear-gradient(to bottom, #54003299, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .ttrpg-tooltip-gradient-legendary {
    background: linear-gradient(to bottom, #563E0D99, #1B1A1999, #1B1A1999, #40295199);
}

body.theme-dark-grey .ttrpg-tooltip-gradient-story {
    background: linear-gradient(to bottom, #561D0099, #1B1A1999, #1B1A1999, #40295199);
}

body {
    /* Box and text colours - Default */
    --ttrpg-box-dark-default: #383431;
    --ttrpg-box-mid-default: #2e2a28;
    --ttrpg-box-bright-default: #272321;
    --ttrpg-box-bg-default: #1B1818;
    --ttrpg-box-border-default: 1px solid #917459;
    --ttrpg-box-border-faded-default: 1px solid #5C4D44;
    --ttrpg-damage-colour-physical-fg: #8c8c8c;
    /* Box and text colours - Red */
    --ttrpg-box-dark-red: #4a3034;
    --ttrpg-box-mid-red: #36282a;
    --ttrpg-box-bright-red: #2b2123;
    --ttrpg-box-bg-red: #1f1a1b;
    --ttrpg-box-border-red: 1px solid #a85050;
    --ttrpg-box-border-faded-red: 1px solid #BA8E91;
    --ttrpg-damage-colour-death-fg: #cc3333;
    /* Box and text colours - Orange*/
    --ttrpg-box-dark-orange: #40352c;
    --ttrpg-box-mid-orange: #332a25;
    --ttrpg-box-bright-orange: #29231f;
    --ttrpg-box-bg-orange: #1c1917;
    --ttrpg-box-border-orange: 1px solid #a85050;
    --ttrpg-box-border-faded-orange: 1px solid #BA8E91;
    --ttrpg-damage-colour-fire-fg: #ee5500;
    /* Box and text colours - Yellow */
    --ttrpg-box-dark-yellow: #3b3729;
    --ttrpg-box-mid-yellow: #302c20;
    --ttrpg-box-bright-yellow: #26241e;
    --ttrpg-box-bg-yellow: #1c1b17;
    --ttrpg-box-border-yellow: 1px solid #a85050;
    --ttrpg-box-border-faded-yellow: 1px solid #BA8E91;
    --ttrpg-damage-colour-life-fg: #ccaa00;
    /* Box and text colours - Yellow-green */
    --ttrpg-box-dark-yellow-green: #383827;
    --ttrpg-box-mid-yellow-green: #2e2e1d;
    --ttrpg-box-bright-yellow-green: #272321;
    --ttrpg-box-bg-yellow-green: #1c1c16;
    --ttrpg-box-border-yellow-green: 1px solid #a85050;
    --ttrpg-box-border-faded-yellow-green: 1px solid #BA8E91;
    --ttrpg-damage-colour-acid-fg: #80b000;
    /* Box and text colours - Green */
    --ttrpg-box-dark-green: #343827;
    --ttrpg-box-mid-green: #2a2e1d;
    --ttrpg-box-bright-green: #24261e;
    --ttrpg-box-bg-green: #1b1c16;
    --ttrpg-box-border-green: 1px solid #a85050;
    --ttrpg-box-border-faded-green: 1px solid #BA8E91;
    --ttrpg-damage-colour-poison-fg: #44bb00;
    /* Box and text colours - Cyan-green*/
    --ttrpg-box-dark-cyan-green: #2f3b28;
    --ttrpg-box-mid-cyan-green: #232e1d;
    --ttrpg-box-bright-cyan-green: #21261e;
    --ttrpg-box-bg-cyan-green: #181c16;
    --ttrpg-box-border-cyan-green: 1px solid #a85050;
    --ttrpg-box-border-faded-cyan-green: 1px solid #BA8E91;
    /* Box and text colours - Cyan */
    --ttrpg-box-dark-cyan: #283b39;
    --ttrpg-box-mid-cyan: #1d2e2c;
    --ttrpg-box-bright-cyan: #1e2626;
    --ttrpg-box-bg-cyan: #161c1b;
    --ttrpg-box-border-cyan: 1px solid #a85050;
    --ttrpg-box-border-faded-cyan: 1px solid #BA8E91;
    /* Box and text colours - Blue*/
    --ttrpg-box-dark-blue: #2a3a40;
    --ttrpg-box-mid-blue: #202f33;
    --ttrpg-box-bright-blue: #1e2426;
    --ttrpg-box-bg-blue: #161a1c;
    --ttrpg-box-border-blue: 1px solid #a85050;
    --ttrpg-box-border-faded-blue: 1px solid #BA8E91;
    --ttrpg-damage-colour-cold-fg: #3399cc;
    /* Box and text colours - Indigo */
    --ttrpg-box-dark-indigo: #2e374a;
    --ttrpg-box-mid-indigo: #262c38;
    --ttrpg-box-bright-indigo: #21242b;
    --ttrpg-box-bg-indigo: #191a1f;
    --ttrpg-box-border-indigo: 1px solid #a85050;
    --ttrpg-box-border-faded-indigo: 1px solid #BA8E91;
    --ttrpg-damage-colour-lightning-fg: #3366cc;
    /* Box and text colours - Violet */
    --ttrpg-box-dark-violet: #402f4d;
    --ttrpg-box-mid-violet: #33273b;
    --ttrpg-box-bright-violet: #27212b;
    --ttrpg-box-bg-violet: #1c191f;
    --ttrpg-box-border-violet: 1px solid #a85050;
    --ttrpg-box-border-faded-violet: 1px solid #BA8E91;
    --ttrpg-damage-colour-thunder-fg: #8844bb;
    /* Box and text colours - Magenta*/
    --ttrpg-box-dark-magenta: #4a2e42;
    --ttrpg-box-mid-magenta: #3b2636;
    --ttrpg-box-bright-magenta: #2b2129;
    --ttrpg-box-bg-magenta: #1f191e;
    --ttrpg-box-border-magenta: 1px solid #a85050;
    --ttrpg-box-border-faded-magenta: 1px solid #BA8E91;
    --ttrpg-damage-colour-psychic-fg: #cc77aa;
    /* Bright colours */
    --ttrpg-damage-colour-physical-fg-bright: #8c8c8c;
    --ttrpg-damage-colour-death-fg-bright: #cc3333;
    --ttrpg-damage-colour-fire-fg-bright: #ee5500;
    --ttrpg-damage-colour-life-fg-bright: #ccaa00;
    --ttrpg-damage-colour-acid-fg-bright: #80b000;
    --ttrpg-damage-colour-poison-fg-bright: #44bb00;
    --ttrpg-damage-colour-cold-fg-bright: #3399cc;
    --ttrpg-damage-colour-lightning-fg-bright: #3366cc;
    --ttrpg-damage-colour-thunder-fg-bright: #8844bb;
    --ttrpg-damage-colour-psychic-fg-bright: #cc77aa;
    /* Temporary fix for ui link color issues */
    --ttrpg-ui-menu-item-a: white;
    /* Variables with the dark suffix are intended for detail elements within the contents of pages, such as tabbers, infoboxes, amboxes and tables. These are darker than other elements. */
    /* Intended for very large boxed elemetns that cover an entire page. */
    --ttrpg-tooltip-doc-bg: #2b2a28;
    --ttrpg-tooltip-bg: #1B1A19;
    /* Intended for accents like headers or titles */
    --ttrpg-accent: #211e1c;
    --ttrpg-accent-bg: #211e1c;
    --ttrpg-accent-dark-bg: #232324;
    --ttrpg-accent-text: var(--fg);
    /* Intended for labels in boxes */
    --ttrpg-label-bg: #2f2b28;
    --ttrpg-label-border: 2px solid #232323;
    --ttrpg-label-dark-bg: #171717;
    --ttrpg-label-dark-border: 1px solid #1f1d1c;
    /* Intended for data elements in boxes, where its contents are displayed. */
    --ttrpg-data-bg: #232323;
    --ttrpg-data-border: 1px solid #4d4a46;
    --ttrpg-data-row-even-bg: #272727;
    --ttrpg-data-row-odd-bg: var(--bg-main);
    --ttrpg-data-dark-bg: #1f1e1e;
    --ttrpg-data-dark-border: 1px solid #242322;
    /* Intended for detail elements in boxes */
    --ttrpg-detail-bg: #1b1b1b;
    --ttrpg-detail-dark-bg: #121212;
    --ttrpg-detail-dark-border: 2px solid #121212;
    /* Relative location */
    --ttrpg-relative-location-bg: var(--ttrpg-data-dark-bg);
    --ttrpg-relative-location-header-bg-dark: var(--ttrpg-accent-dark-bg);
    /* Old Navbox colours. Will be removed. */
    --ttrpg-navbox-bg: var(--bg-dark);
    --ttrpg-navbox-bg: var(--bg-dark);
    --ttrpg-navbox-header-bg: var(--ttrpg-accent);
    --ttrpg-navbox-header-text: var(--ttrpg-accent-text);
    --ttrpg-navbox-header-secondary-bg: #28201B;
    --ttrpg-gameplay-navbox-bg: #302d2d;
    --ttrpg-gameplay-navbox-header-bg: #241f1f;
    /* css tooltip colours */
    --aria-label-tooltip-bg: hsl(200deg 5% 10%);
    --aria-label-tooltip-fg: hsl(0deg 0% 90%);
    --aria-label-tooltip-border: none;
    /* Documentation */
    --ttrpg-documentation-bg: var(--ttrpg-tooltip-doc-bg);
    --ttrpg-documentation-border: var(--ttrpg-tooltip-border);
    --ttrpg-documentation-header-bg: var(--bg-dark);
    /* Tab bar */
    --ttrpg-tabbar-bg: var(--ttrpg-data-dark-bg);
    --ttrpg-tabbar-active-color: var(--fgt);
    --ttrpg-tabbar-active-bg: var(--ttrpg-accent-dark-bg);
    /* License */
    --ttrpg-license-color: rgb(210,210,210);
    /* Spoiler warning */
    --ttrpg-spoiler-warning-start: #443E20;
    --ttrpg-spoiler-warning-end: #232323;
    --ttrpg-spoiler-warning-strong-color: #ebb73f;
    /* Widget:lower city map */
    --ttrpg-lower-city-map-bg: var(--bg-dark);
    --ttrpg-lower-city-map-inner-bg: var(--bg-main);
    /* Toc */
    --toc-subheader-border-color: var(--ttrpg-tooltip-border);
    /* Tables */
    --ttrpg-wikitable-bg: var(--ttrpg-data-dark-bg);
    --ttrpg-wikitable-header-bg: var(--ttrpg-label-dark-bg);
    --ttrpg-wikitable-border: var(--ttrpg-data-border);
    --ttrpg-wikitable-muted-bg: var(--bg3-wiki-label-dark-bg);
    --ttrpg-wikitable-muted-border: var(--ttrpg-data-border-bg);
    /* Quotes */
    --ttrpg-blockquote-marks: #C1A878;
    /* Hatnotes */
    --ttrpg-hatnote-bg: inherit;
    --ttrpg-hatnote-font-style: italic;
    --ttrpg-hatnote-font-size: inherit;
    --ttrpg-hatnote-padding: 0 1.6em 0.4em 1.6em;
    --ttrpg-hatnote-margin: 0 0 0.4em 0;
    /* Resistance colours */
    --ttrpg-imagetext-text-resistant-color: #a9f5f0;
    --ttrpg-imagetext-text-immune-color: #e8e29e;
    --ttrpg-imagetext-text-vulnerable-color: #ff476c;
    /* Character info colours. Outdated. Will removed with the template. */
    --ttrpg-characterinfo-bg: #1B1B1B;
    --ttrpg-characterinfo-color: #C1A886;
    --ttrpg-characterinfo-border: 1px solid #785000;
    --ttrpg-characterinfo-header-bg:  #281C14;
    --ttrpg-characterinfo-header-color: #C1A886;
    --ttrpg-characterinfo-subheader-bg:  #1B1B1B;
    --ttrpg-characterinfo-subheader-color: #C1A886;
    /* Infobox colours */
    --ttrpg-box-header-bg: var(--ttrpg-accent-dark-bg);
    --ttrpg-box-label-bg: var(--ttrpg-label-dark-bg);
    --ttrpg-box-label-border: var(--ttrpg-label-dark-border);
    --ttrpg-box-data-bg: var(--ttrpg-data-dark-bg);
    --ttrpg-box-data-border: var(--ttrpg-data-dark-border);
    --ttrpg-box-detail-bg: var(--ttrpg-detail-dark-bg);
    --ttrpg-box-detail-border: var(--ttrpg-detail-dark-border);
    --ttrpg-box-border: 1px solid #785000;
    --ttrpg-box-accent-dark-border: 1px solid #121212;
    /* Navbox colours. */
    --ttrpg-navbox-data-bg: var(--ttrpg-data-row-even-bg);
    --ttrpg-navbox-data-row-even-bg: var(--ttrpg-data-row-even-bg);
    --ttrpg-navbox-data-row-odd-bg: var(--ttrpg-data-row-odd-bg);
    --ttrpg-navbox-header-bg: var(--ttrpg-accent-bg);
    --ttrpg-navbox-label-bg: var(--ttrpg-label-bg);
    --ttrpg-navbox-label-border: var(--ttrpg-label-border);
    --ttrpg-navbox-sublabel-bg: #3b3632;
    /* Ambox. */
    --ttrpg-ambox-bg: var(--ttrpg-data-dark-bg);
}

/* References need to be recolored on dark theme */
body.theme-dark-grey .references li:target {
    background-color: var(--bg-darker);
}

/*** Light theme-related styling ***/
body.theme-light .mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head {
    border-bottom-color: var(--light-body-border);
}

body.theme-light .oo-ui-popupWidget-popup {
    background-color: var(--light-body-light);
    border-color: var(--light-body-border);
}

body.theme-light oo-ui-widget oo-ui-widget-enabled mw-echo-ui-placeholderItemWidget oo-ui-labelElement,
body.theme-light .mw-echo-ui-placeholderItemWidget {
    background-color: var(--light-body-mid);
}

body.theme-light .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background-color: var(--light-body-mid);
}

/*** Light theme-related colors ***/
body.theme-light {
    /* Box and text colours - Default */
    --ttrpg-box-dark-default: #bab3b6;
    --ttrpg-box-mid-default: #c3c1c2;
    --ttrpg-box-bright-default: #c9c7c8;
    --ttrpg-box-bg-default: #d5d5db;
    --ttrpg-box-border-default: 1px solid #a85050;
    --ttrpg-box-border-faded-default: 1px solid #BA8E91;
    --ttrpg-damage-colour-physical-fg: #58586F;
    --ttrpg-damage-colour-physical-fg-bright: #878787;
    /* Box and text colours - Red */
    --ttrpg-box-dark-red: #d4a9b0;
    --ttrpg-box-mid-red: #d4babe;
    --ttrpg-box-bright-red: #d6c5c8;
    --ttrpg-box-bg-red: #dbd5d6;
    --ttrpg-box-border-red: 1px solid #a85050;
    --ttrpg-box-border-faded-red: 1px solid #BA8E91;
    --ttrpg-damage-colour-death-fg: #A52C42;
    --ttrpg-damage-colour-death-fg-bright: #FF385D;
    /* Box and text colours - Orange*/
    --ttrpg-box-dark-orange: #c9b199;
    --ttrpg-box-mid-orange: #cfc0b2;
    --ttrpg-box-bright-orange: #d1c6bc;
    --ttrpg-box-bg-orange: #dbd6d3;
    --ttrpg-box-border-orange: 1px solid #a85050;
    --ttrpg-box-border-faded-orange: 1px solid #BA8E91;
    --ttrpg-damage-colour-fire-fg: #8B4713;
    --ttrpg-damage-colour-fire-fg-bright: #E05E00;
    /* Box and text colours - Yellow */
    --ttrpg-box-dark-yellow: #c2b793;
    --ttrpg-box-mid-yellow: #c9c1a9;
    --ttrpg-box-bright-yellow: #cfc9b6;
    --ttrpg-box-bg-yellow: #d9d7d0;
    --ttrpg-box-border-yellow: 1px solid #a85050;
    --ttrpg-box-border-faded-yellow: 1px solid #BA8E91;
    --ttrpg-damage-colour-life-fg: #6A5820;
    --ttrpg-damage-colour-life-fg-bright: #AD8200;
    /* Box and text colours - Yellow-green */
    --ttrpg-box-dark-yellow-green: #baba8d;
    --ttrpg-box-mid-yellow-green: #c4c4a1;
    --ttrpg-box-bright-yellow-green: #c9c9ad;
    --ttrpg-box-bg-yellow-green: #d6d6ce;
    --ttrpg-box-border-yellow-green: 1px solid #a85050;
    --ttrpg-box-border-faded-yellow-green: 1px solid #BA8E91;
    --ttrpg-damage-colour-acid-fg: #5D5D1D;
    --ttrpg-damage-colour-acid-fg-bright: #8A8A00;
    /* Box and text colours - Green */
    --ttrpg-box-dark-green: #aeba86;
    --ttrpg-box-mid-green: #bfc7a3;
    --ttrpg-box-bright-green: #c5ccaf;
    --ttrpg-box-bg-green: #d7d9d0;
    --ttrpg-box-border-green: 1px solid #a85050;
    --ttrpg-box-border-faded-green: 1px solid #BA8E91;
    --ttrpg-damage-colour-poison-fg: #4D6114;
    --ttrpg-damage-colour-poison-fg-bright: #6F9400;
    /* Box and text colours - Cyan-green*/
    --ttrpg-box-dark-cyan-green: #9dbf8c;
    --ttrpg-box-mid-cyan-green: #b1c9a5;
    --ttrpg-box-bright-cyan-green: #bbcfb2;
    --ttrpg-box-bg-cyan-green: #d3d9d0;
    --ttrpg-box-border-cyan-green: 1px solid #a85050;
    --ttrpg-box-border-faded-cyan-green: 1px solid #BA8E91;
    /* Box and text colours - Cyan */
    --ttrpg-box-dark-cyan: #8ebfbb;
    --ttrpg-box-mid-cyan: #a5c9c6;
    --ttrpg-box-bright-cyan: #b2cfcc;
    --ttrpg-box-bg-cyan: #d0d9d8;
    --ttrpg-box-border-cyan: 1px solid #a85050;
    --ttrpg-box-border-faded-cyan: 1px solid #BA8E91;
    /* Box and text colours - Blue*/
    --ttrpg-box-dark-blue: #9bb9c7;
    --ttrpg-box-mid-blue: #afc3cc;
    --ttrpg-box-bright-blue: #bccbd1;
    --ttrpg-box-bg-blue: #d0d7d9;
    --ttrpg-box-border-blue: 1px solid #a85050;
    --ttrpg-box-border-faded-blue: 1px solid #BA8E91;
    --ttrpg-damage-colour-cold-fg: #0E627C;
    --ttrpg-damage-colour-cold-fg-bright: #0091C2;
    /* Box and text colours - Indigo */
    --ttrpg-box-dark-indigo: #a7b7d1;
    --ttrpg-box-mid-indigo: #b8c2d6;
    --ttrpg-box-bright-indigo: #c1c8d6;
    --ttrpg-box-bg-indigo: #d1d7e3;
    --ttrpg-box-border-indigo: 1px solid #a85050;
    --ttrpg-box-border-faded-indigo: 1px solid #BA8E91;
    --ttrpg-damage-colour-lightning-fg: #1A52C1;
    --ttrpg-damage-colour-lightning-fg-bright: #4281FF;
    /* Box and text colours - Violet */
    --ttrpg-box-dark-violet: #c4aed4;
    --ttrpg-box-mid-violet: #cbbcd6;
    --ttrpg-box-bright-violet: #cfc5d6;
    --ttrpg-box-bg-violet: #dbd5e0;
    --ttrpg-box-border-violet: 1px solid #a85050;
    --ttrpg-box-border-faded-violet: 1px solid #BA8E91;
    --ttrpg-damage-colour-thunder-fg: #8127C2;
    --ttrpg-damage-colour-thunder-fg-bright: #B957FF;
    /* Box and text colours - Magenta*/
    --ttrpg-box-dark-magenta: #d4a7ca;
    --ttrpg-box-mid-magenta: #d6b8cf;
    --ttrpg-box-bright-magenta: #d6c1d1;
    --ttrpg-box-bg-magenta: #ded3dc;
    --ttrpg-box-border-magenta: 1px solid #a85050;
    --ttrpg-box-border-faded-magenta: 1px solid #BA8E91;
    --ttrpg-damage-colour-psychic-fg: #82457A;
    --ttrpg-damage-colour-psychic-fg-bright: #C766B2;
    /* Temporary fix for ui link color issues */
    --ttrpg-ui-menu-item-a: black;
    --mw-code-background-color: #ddd4bb;
    /* We want itemicon border opacity to be 1.0. */
    --ttrpg-itemicon-border-opacity: 100%;
    /* Navbox colours */
    --ttrpg-navbox-header-bg: var(--light-body-dark);
    --ttrpg-navbox-header-secondary-bg: var(--light-body-mid);
    --ttrpg-gameplay-navbox-header-bg: var(--light-body-dark);

    --ttrpg-navbox-bg: var(--light-body-light);
    --ttrpg-gameplay-navbox-bg: var(--light-body-light);

    --ttrpg-navbox-header-text: default;
    /* Define different colors for relative location theme */
    --ttrpg-relative-location-bg: var(--light-body-light);
    --ttrpg-relative-location-header-bg-dark: var(--light-body-dark);
    --aria-label-tooltip-bg: hsl(0deg 0% 90%);
    --aria-label-tooltip-fg: hsl(200deg 5% 10%);
    --aria-label-tooltip-border: 1px solid hsl(200deg 5% 10%);
    /* Override tooltip colour */
    --ttrpg-tooltip-bg: var(--light-body-light);
    /* Documentation */
    --ttrpg-documentation-bg: #eaf3ff;
    --ttrpg-documentation-border: #a3caff;
    --ttrpg-documentation-header-bg: #c2dcff;
    /* Tab bar */
    --ttrpg-tabbar-bg: var(--light-body-light);
    --ttrpg-tabbar-active-color: var(--light-background-link-color);
    --ttrpg-tabbar-active-bg: var(--light-body-background-color);
    /* License box */
    --ttrpg-license-color: black;
    /* Spoiler box */
    --ttrpg-spoiler-warning-start: var(--light-body-dark);
    --ttrpg-spoiler-warning-end: var(--light-body-light);
    --ttrpg-spoiler-warning-strong-color: black;
    /* Widget:lower city map */
    --ttrpg-lower-city-map-bg: var(--light-body-light);
    --ttrpg-lower-city-map-inner-bg: var(--light-body-main);
    /* Toc */
    --toc-subheader-border-color: var(--light-body-border);
    /* Tables */
    --ttrpg-wikitable-bg: var(--light-body-light);
    --ttrpg-wikitable-header-bg: var(--light-body-dark);
    --ttrpg-wikitable-border: 1px solid var(--light-body-border);
    --ttrpg-wikitable-muted-bg: var(--light-body-mid);
    --ttrpg-wikitable-muted-border: var(--light-body-border);
    /* Quotes */
    --ttrpg-blockquote-marks: #4a2e1d;
    /* Hatnotes */
    --ttrpg-hatnote-bg: inherit;
    --ttrpg-hatnote-font-style: italic;
    --ttrpg-hatnote-font-size: inherit;
    --ttrpg-hatnote-padding: 0 1.6em 0.4em 1.6em;
    --ttrpg-hatnote-margin: 0 0 0.4em 0;
    /* Resistance colours */
    --ttrpg-imagetext-text-resistant-color: #0d5752;
    --ttrpg-imagetext-text-immune-color: #424028;
    --ttrpg-imagetext-text-vulnerable-color: #591523;
    /* Infobox colours old */
    --ttrpg-characterinfo-bg: var(--light-body-light);
    --ttrpg-characterinfo-color: black;
    --ttrpg-characterinfo-border: 0;
    --ttrpg-characterinfo-header-bg: var(--light-body-dark);
    --ttrpg-characterinfo-header-color: black;
    --ttrpg-characterinfo-subheader-bg:  var(--light-body-mid);
    --ttrpg-characterinfo-subheader-color: black;
    /* Infobox colours */
    --ttrpg-box-header-bg: var(--light-body-dark);
    --ttrpg-box-label-bg: var(--light-body-mid);
    --ttrpg-box-label-border: none;
    --ttrpg-box-data-bg: var(--light-body-light);
    --ttrpg-box-detail-bg: var(--light-body-light);
    --ttrpg-box-detail-border: none;
    --ttrpg-box-border: var(--light-body-border);
    --ttrpg-box-accent-dark-border: none;
    /* Navbox colours. */
    --ttrpg-navbox-data-bg: var(--light-body-light);
    --ttrpg-navbox-data-row-even-bg: var(--light-body-light);
    --ttrpg-navbox-data-row-odd-bg: var(--light-body-light);
    --ttrpg-navbox-header-bg: var(--light-body-dark);
    --ttrpg-navbox-label-bg: var(--light-body-mid);
    --ttrpg-navbox-label-border: var(--light-body-light);
    --ttrpg-navbox-sublabel-bg: var(--light-body-mid);
    /* Ambox. */
    --ttrpg-ambox-bg: var(--light-body-mid);
}

/* Item icons */
body.theme-light .ttrpg-itemicon {
    background-color: var(--light-body-light);
}

/* Info blob */
body.theme-light .ttrpg-info-blob {
    background-color: var(--light-body-mid);
}

/* Coordinates: Light skin needs the background not to be transparent */
body.theme-light .ttrpg-coordinates {
    background: #343232;
}

/* Helper classes to add a drop shadow to white icons only on light theme */
body.theme-light .ttrpg-lightmode-drop-shadow,
body.theme-light .ttrpg-lightmode-drop-shadow > img {
    filter: drop-shadow(0 0 2px black);
}

body.theme-light .gallery.ttrpg-gallery-drop-shadow img {
    filter: drop-shadow(0 0 2px black);
}

/*
CSS tooltip implementation. Usage in markup:

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

.mw-body [aria-label]:not([role="textbox"]):hover {
    position: relative
}

.mw-body [aria-label]:not([role="textbox"]):hover::after {
    position: absolute;
    white-space: pre;
    line-height: 1;
    padding: 0.3rem;
    content: attr(aria-label);
    background-color: var(--aria-label-tooltip-bg);
    color: var(--aria-label-tooltip-fg);
    border: var(--aria-label-tooltip-border);
    text-decoration: unset;

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

/* Changes the tooltip position. */
.mw-body [aria-label].aria-label-top-rig:hover::after {
    bottom: 100%;
    left: unset;
    right: 0;
}

/* Optional class for indicating tooltip presence via underline. */
.ttrpg-help-tooltip[aria-label] {
    cursor: help;
}


:root {
    /* Originally for the "tooltip" style boxes; also used for some other
     * things now. Should perhaps be renamed or split into different variables.
     */
    --ttrpg-tooltip-border: #785000;
}

/* Table of contents */
.toc {
    margin: 0.5em 0 0 0.5em;
}

/* Remove [edit] button from h4 to h6 */
:is(h4, h5, h6) .mw-editsection {
    display: none;
}

/* Trick to easily make lists with list-style: none */
/* Wrap a list in <div class="ttrpg-list-style-none"> */
.ttrpg-list-style-none > ul {
    list-style: none;
}

/* Some h3 use an alternative style. */
.ttrpg-tooltip-box h3,
h3.ttrpg-level-header {
    border-bottom: 1px dashed var(--ttrpg-tooltip-border);
    font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
    font-weight: normal;
}

h3.ttrpg-level-header {
    font-size: 140%;
}

/* Book text, shared css */
.ttrpg-book-text {
    box-shadow:
            rgba(0, 0, 0, 0.14) 3px 3px 6px 0px inset,
            rgba(0, 0, 0, 0.14) -3px -3px 6px 1px inset;
    border: 0.15rem solid #785000;
    border-radius: 10px;
    padding: 30px 40px;
}

.ttrpg-book-text p {
    font-family: 'Linux Libertine', 'Georgia', serif;
    font-size: 1.2rem;
    max-width: 800px;
    margin: auto;
}

/* Item, spell, etc. properties */
.ttrpg-property-list > ul {
    margin-left: 0;
    list-style: none;
}
.mw-content-ltr ul.ttrpg-property-list {
    margin-left: 0;
    list-style: none;
}
.ttrpg-property-list dd {
    margin-left: 0;
}

/* ItemIcon stuff */

:root {
    --ttrpg-itemicon-common: 72, 72, 72;
    --ttrpg-itemicon-uncommon: 1, 189, 57;
    --ttrpg-itemicon-rare: 1, 191, 255;
    --ttrpg-itemicon-very-rare: 209, 1, 123;
    --ttrpg-itemicon-legendary: 183, 134, 29;
    --ttrpg-itemicon-story: 255, 89, 1;

    --ttrpg-itemicon-gradient-top-opacity: 0%;
    --ttrpg-itemicon-gradient-bot-opacity: 12.5%;

    --ttrpg-itemicon-border-opacity: 60%;
}

.ttrpg-itemicon-wrapper {
    text-align: center;
}

/* The value of --ttrpg-rarity-color will be set per rarity class. */
.ttrpg-itemicon {
    display: inline-block;
    background: linear-gradient(
            rgba(var(--ttrpg-rarity-color), var(--ttrpg-itemicon-gradient-top-opacity)),
            rgba(var(--ttrpg-rarity-color), var(--ttrpg-itemicon-gradient-bot-opacity))
    );
    border: solid 1px rgba(var(--ttrpg-rarity-color), var(--ttrpg-itemicon-border-opacity));
}

.ttrpg-itemicon-common {
    --ttrpg-rarity-color: var(--ttrpg-itemicon-common);
}

.ttrpg-itemicon-uncommon {
    --ttrpg-rarity-color: var(--ttrpg-itemicon-uncommon);
}

.ttrpg-itemicon-rare {
    --ttrpg-rarity-color: var(--ttrpg-itemicon-rare);
}

.ttrpg-itemicon-very-rare {
    --ttrpg-rarity-color: var(--ttrpg-itemicon-very-rare);
}

.ttrpg-itemicon-legendary {
    --ttrpg-rarity-color: var(--ttrpg-itemicon-legendary);
}

.ttrpg-itemicon-story {
    --ttrpg-rarity-color: var(--ttrpg-itemicon-story);
}

/* Coordinates */

body .ttrpg-coordinates {
    font-family: 'Linux Libertine', 'Times New Roman', serif;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
    color: #AB9F89;
    background: #34323285;
    border-radius: 5px;
    padding: 3px 5px;
    box-shadow: 1px 1px 5px #00000030;
}

/* Tooltip box: imitating in-game tooltips and item icons */
body .ttrpg-tooltip-box {
    background: var(--ttrpg-tooltip-bg);
    box-shadow:
            rgba(0, 0, 0, 0.14) 3px 3px 6px 0px inset,
            rgba(0, 0, 0, 0.14) -3px -3px 6px 1px inset;
    border: 0.15rem solid var(--ttrpg-tooltip-border);
    border-radius: 10px;
    padding: 15px;
    margin: 0.5em 0.2em 0 0.2em;
}

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

/* Damage Rider As Source (DRS) template */
.ttrpg-damage-rider-source {
    font-size: 10px;
    vertical-align: top;
    font-style: italic;
}

/* Proficiency abbreviation styling */
.ttrpg-save-proficiency-abbr  {
    font-size: 10px;
    vertical-align: top;
}

/* For mobile eyes only */
.nodesktop {
    display: none;
}

/* Hat note */
.hatnote {
    font-style: var(--ttrpg-hatnote-font-style);
    font-size: var(--ttrpg-hatnote-font-size);
    padding: var(--ttrpg-hatnote-padding);
    margin: var(--ttrpg-hatnote-margin);
    border: 0;
    display: block;
    background-color: var(--ttrpg-hatnote-bg);
}

/* Price calculator */
#ttrpg-price-calculator {
    border: 1px solid var(--ttrpg-tooltip-border);
}

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

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

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

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

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

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

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

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

.navcat div > .CategoryTreeSection::after {
    content: " · ";
    font-weight: bold;
}

.navcat div > .CategoryTreeSection:last-child::after {
    content: none;
}

.navcat div > .CategoryTreeTag,
.navcat div > .CategoryTreePageBullet {
    display: none;
    margin: 0;
    padding: 0;
}

.navcat div {
    display: inline;
    margin: 0;
    padding: 0;
    padding-left: 0;
}

/* Documentation css */
.ts-doc-doc {
    background-color: var(--ttrpg-documentation-bg);
    /* border: 1px solid var(--ttrpg-documentation-border); */
}

.ts-doc-header {
    background-color: var(--ttrpg-documentation-header-bg);
}

.ts-doc-footer {
    background-color: var(--ttrpg-documentation-bg);
    border: 1px solid var(--ttrpg-documentation-border);
}

/* Info blob */
div.ttrpg-info-blob {
    display: inline-block;
    padding: 0 1em 0 1em;
    border-radius: 20px;
}
span.ttrpg-info-blob {
    display: inline-block;
    padding: 0 0.5em 0 0.5em;
    border-radius: 10px;
}

.ttrpg-info-blob {
    font-family: monospace;
}

/* number inside AC shield */
.ttrpg-ac-value {
    display: grid;
    justify-items:start;
    align-items: start
}

.ttrpg-ac-value > div {
    grid-column-start: 1;
    grid-row-start: 1;
}

.ttrpg-ac-value .ac-value {
    text-align:center;
    width: 40px;
    align-self: center;
    padding-bottom: 0.5ch
}

.ttrpg-ac-value .ac-value-comment {
    grid-column-start: 2;
    grid-row-start: 1;
    align-self: center
}

/* Spoiler warning */
.ttrpg-spoiler-warning {
    background: linear-gradient(to right, var(--ttrpg-spoiler-warning-start), var(--ttrpg-spoiler-warning-end));
    align-items:center;
    border-radius:10px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
}

.ttrpg-spoiler-warning.ttrpg-spoiler-warning-no-grad {
    background: transparent;
}

.ttrpg-spoiler-warning strong {
    color: var(--ttrpg-spoiler-warning-strong-color);
}

/* Widget: Interactive map */
.ttrpg-lower-city-map {
    background-color: var(--ttrpg-lower-city-map-bg);
    border: 1px solid var(--ttrpg-tooltip-border);
}

.ttrpg-lower-city-map-svg {
    background-color: var(--ttrpg-lower-city-map-inner-bg);
}

/** Suppress fallback MathML implementation: most browsers support it natively. **/
/* -*- Mode: CSS; tab-width: 2; indent-tabs-mode:nil; c-basic-offset: 2 -*- */
/* vim: set ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* Retrieved from https://github.com/fred-wang/webextension-native-mathml/blob/master/content-scripts/mediawiki.css */

/* Reset some CSS properties set by MediaWiki and hide the image fallback */
.mwe-math-mathml-a11y {
    clip: auto;
    overflow: visible;
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
    display: inherit;
}

body.mediawiki .ve-ce-mwLatexNode .mwe-math-mathml-a11y {
    /* override https://phabricator.wikimedia.org/diffusion/EMAT/browse/master/modules/ve-math/ve.ce.MWLatexNode.css */
    display: inherit;
}
/* Support where MediaWiki lazy loaded images */
.mwe-math-mathml-inline ~ .lazy-image-placeholder,
.mwe-math-mathml-display ~ .lazy-image-placeholder,
    /* Support where MediaWiki doesn't lazy load images */
.mwe-math-mathml-inline + .mwe-math-fallback-image-inline,
.mwe-math-mathml-display + .mwe-math-fallback-image-display {
    display: none;
}

/* Tablelist template */

.ttrpg-tablelist dt {
    font-weight: bold;
    font-size: 100%;
    margin: 0;
    display: inline;
}

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

/* No colon style */
.ttrpg-tablelist.nocolon dt::after {
    content: none;
}

.ttrpg-tablelist dl {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

.ttrpg-tablelist dd {
    font-size: 100%;
    margin: 0;
    display: inline;
}

.ttrpg-tablelist dd::after {
    content: "\a";
    white-space: pre;
}

/* Unbulleted lists */
.ttrpg-ublist ul,
.ttrpg-ublist ol {
    margin: 0;
    padding: 0;
    line-height: inherit;
    list-style: none;
}

/* Horizontal lists */
.ttrpg-horizontlist dl,
.ttrpg-horizontlist ul {
    margin: 0;
    padding: 0;
}

.ttrpg-horizontlist dl ul,
.ttrpg-horizontlist dl dl,
.ttrpg-horizontlist ul dl,
.ttrpg-horizontlist ul ul {
    display: inline;
}

.ttrpg-horizontlist dd,
.ttrpg-horizontlist dt,
.ttrpg-horizontlist li {
    margin: 0;
    display: inline;
}

.ttrpg-horizontlist dd::after,
.ttrpg-horizontlist li::after {
    content: " · ";
    font-weight: bold;
}

.ttrpg-horizontlist dd:last-child::after,
.ttrpg-horizontlist dt:last-child::after,
.ttrpg-horizontlist li:last-child::after {
    content: none;
}

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

.ttrpg-horizontlist dd dd:first-child::before,
.ttrpg-horizontlist dd dt:first-child::before,
.ttrpg-horizontlist dd li:first-child::before,
.ttrpg-horizontlist dt dd:first-child::before,
.ttrpg-horizontlist dt dt:first-child::before,
.ttrpg-horizontlist dt li:first-child::before,
.ttrpg-horizontlist li dd:first-child::before,
.ttrpg-horizontlist li dt:first-child::before,
.ttrpg-horizontlist li li:first-child::before {
    content: " (";
    font-weight: normal;
}

.ttrpg-horizontlist dd dd:last-child::after,
.ttrpg-horizontlist dd dt:last-child::after,
.ttrpg-horizontlist dd li:last-child::after,
.ttrpg-horizontlist dt dd:last-child::after,
.ttrpg-horizontlist dt dt:last-child::after,
.ttrpg-horizontlist dt li:last-child::after,
.ttrpg-horizontlist li dd:last-child::after,
.ttrpg-horizontlist li dt:last-child::after,
.ttrpg-horizontlist li li:last-child::after {
    content: ")";
    font-weight: normal;
}

/* Resource list */
.ttrpg-resource-list dl {
    margin: 0;
    padding: 0;
}

.ttrpg-resource-list dd,
.ttrpg-resource-list dt {
    margin: 0;
    display: inline;
}

.ttrpg-resource-list dd dd,
.ttrpg-resource-list dd ddt,
.ttrpg-resource-list dt dd,
.ttrpg-resource-list dt dt {
    margin: 0 0 0 2.1em;
    display: block;
}

.ttrpg-resource-list dd:last-child::after,
.ttrpg-resource-list dt:last-child::after {
    content: none;
}

/* Quotes */
.ttrpg-quoteinline {
    overflow: hidden;
    margin: 0 0 -0.5em;
}

/* Important is a bad idea */
blockquote {
    border-left: 2px solid #3d3d3d !important;
}

.ttrpg-bquote {
    overflow: hidden;
    margin: 1em 0;
}

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

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

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

.ttrpg-template-shortcut-top {
    text-align: center;
    margin: 0;
    padding: 0 0 0.16em 0;
    border-bottom: 2px solid #3d3d3d;
    font-size: 90%;
}

/* Resistance colours */
.ttrpg-imagetext-text-resistant {
    color: var(--ttrpg-imagetext-text-resistant-color);
}

.ttrpg-imagetext-text-immune{
    color: var(--ttrpg-imagetext-text-immune-color);
}

.ttrpg-imagetext-text-vulnerable {
    color: var(--ttrpg-imagetext-text-vulnerable-color);
}

/* Character info template styling */
.ttrpg-characterinfo {
    background-color: var(--ttrpg-characterinfo-bg);
    border: var(--ttrpg-characterinfo-border);
    color: var(--ttrpg-characterinfo-color);
    width: 20em;
    margin: 0.5em 0 0 2em;
}

.ttrpg-characterinfo th:not(.ttrpg-characterinfo-subheader) {
    background: var(--ttrpg-characterinfo-header-bg);
    color: var(--ttrpg-characterinfo-header-color);
}

.ttrpg-characterinfo-subheader {
    padding-left: 38px;
    vertical-align: top;
    background-color: var(--ttrpg-characterinfo-subheader-bg);;
    border: 0;
    color: var(--ttrpg-characterinfo-subheader-color);
}

/* Message boxes including ambox and mbox */
table.ombox,
table.ambox {
    background-color: var(--ttrpg-ambox-bg);
    border: var(--ttrpg-wikitable-border);
}

table.ambox-speedy {
    /* Pink */
    background-color: #400805 !important;
}


.div-col-rules {
    column-rule: 1px solid #805608 !important;
}

/**
  Navbox classes
**/
.navbox,
.mw-parser-output .navbox-list-with-group,
.ttrpg-navbox {
    text-align: center;
    border:1px solid var(--ttrpg-tooltip-border);
    color: var(--fg);
    width: 100%;
}

.mw-parser-output .navbox-list-with-group, {
    color: var(--ttrpg-navbox-header-text);
    background-color: var(--ttrpg-navbox-bg);
}

.ttrpg-navbox-header {
    font-weight: bold;
    font-size: 105%;
    background-color: var(--ttrpg-navbox-header-bg);
    border: 0px none;
}

.ttrpg-navbox-side-header {
    background-color: var(--ttrpg-navbox-header-bg);
}

.ttrpg-navbox-side-secondary-header {
    background-color: var(--ttrpg-navbox-header-secondary-bg);
}

/* These important tags will be removed, emergency fix */
.navbox-title {
    font-weight: bold;
    background-color: var(--ttrpg-navbox-header-bg);
    border: none !important;
}

.navbox-group {
    font-weight: bold;
    background-color: var(--ttrpg-navbox-label-bg);
    border-top: var(--ttrpg-navbox-label-border);
}

.navbox-subgroup .navbox-group {
    font-weight: bold;
    background-color: var(--ttrpg-navbox-sublabel-bg);
    border-top: var(--ttrpg-navbox-label-border);
    border-left: var(--ttrpg-navbox-label-border);
}


.navbox-list {
    border:1px solid var(--ttrpg-tooltip-border);
    background-color: var(--ttrpg-navbox-data-bg);
}

.navbox-odd {
    background-color: var(--ttrpg-navbox-data-row-odd-bg);
    border: none !important;
    color: var(--fg);
}

.navbox-even {
    background-color: var(--ttrpg-navbox-data-row-even-bg);
    border: none !important;
    border-top: var(--ttrpg-navbox-label-border);
    color: var(--fg);
}

/* The actual contents of the navbox. */
.ttrpg-navbox-content {
    text-align: left;
    padding: 0 4px;
}

/* Wikitext sometimes inserts implicit <p>s */
.ttrpg-navbox-content p {
    color: var(--ttrpg-navbox-header-text);
}

/* Classes for gameplay navboxes */
.ttrpg-gameplay-navbox {
    color: var(--ttrpg-navbox-header-text);
    background-color: var(--ttrpg-gameplay-navbox-bg);
    margin-top: 1rem;
    border: 1px solid var(--ttrpg-tooltip-border);
    width: 100%;
}

.ttrpg-gameplay-navbox-header {
    background-color: var(--ttrpg-gameplay-navbox-header-bg);
    text-align: center;
}

.ttrpg-gameplay-navbox-row-header {
    font-size: 95%;
    padding: 0.75rem;
}

.ttrpg-gameplay-navbox-content {
    border: 0px none;
    font-size: 95%;
    padding-left: 1ch;
}

table.wikitable td {
    background-color: var(--ttrpg-wikitable-bg) !important;
    border: var(--ttrpg-wikitable-border) !important;
}

.wikitable th {
    background-color: var(--ttrpg-wikitable-header-bg) !important;
    border: var(--ttrpg-wikitable-border) !important;
}

.wikitable th[scope=row],
.wikitable th[scope=rowgroup] {
    font-weight: normal;
    text-align: left;
}

/* Sidebar styling */
table.sidebar {
    background-color: var(--ttrpg-box-detail-bg);
    color: var(--fg);
    border: var(--ttrpg-box-border);
}

.sidebar-title,
.sidebar-navbar {
    background: var(--ttrpg-box-header-bg);
    color: var(--fg);
    border: var(--ttrpg-box-accent-dark-border);
}

.sidebar-above {
    background: var(--ttrpg-box-header-bg);
    color: var(--fg);
    border: var(--ttrpg-box-accent-dark-border);
    display: block;
    margin-bottom: 0.5em;
}

.sidebar-image,
.sidebarcaption {
    background-color: var(--ttrpg-box-detail-bg);
    border: var(--ttrpg-box-detail-border);
    color: var(--fg);
}

.sidebar-list-title {
    background-color: var(--ttrpg-box-label-bg);
    border: var(--ttrpg-box-label-border);
    color: var(--fg);
    text-align: left;
}

.sidebar-content {
    background-color: var(--ttrpg-box-data-bg);
    color: var(--fg);
    border: 1px solid var(--ttrpg-box-data-border);
}

.sidebar-list {
    background-color: var(--ttrpg-box-data-bg);
    color: var(--fg);
    border: 1px solid var(--ttrpg-box-data-border);
}

.sidebar-list-content {
    background-color: var(--ttrpg-box-data-bg);
    color: var(--fg);
    border: 1px solid var(--ttrpg-box-data-border);
}

.sidebar-heading {
    background-color: var(--ttrpg-box-label-bg);
    border: var(--ttrpg-box-label-border);
    color: var(--fg);
    display: block;
    margin-bottom: 0.5em;
}

.sidebar-below {
    background: var(--ttrpg-box-header-bg);
    color: var(--fg);
    border: var(--ttrpg-box-accent-dark-border);
}

.ttrpg-sheet {
    max-width: none;
    width: 100%;
}

.ui-menu .ui-menu-item a {
    color: var(--ttrpg-ui-menu-item-a);
}

/* Damage type colors, primarily used by [[Template:Damage colour]]. */

.ttrpg-damage-type-physical,
.ttrpg-damage-type-weapon,
.ttrpg-damage-type-piercing,
.ttrpg-damage-type-bludgeoning,
.ttrpg-damage-type-slashing {
    color: var(--ttrpg-damage-colour-physical-fg);
}
.ttrpg-damage-type-acid {
    color: var(--ttrpg-damage-colour-acid-fg);
}
.ttrpg-damage-type-cold {
    color: var(--ttrpg-damage-colour-cold-fg);
}
.ttrpg-damage-type-fire {
    color: var(--ttrpg-damage-colour-fire-fg);
}
.ttrpg-damage-type-death {
    color: var(--ttrpg-damage-colour-death-fg);
}
.ttrpg-damage-type-lightning {
    color: var(--ttrpg-damage-colour-lightning-fg);
}
.ttrpg-damage-type-poison {
    color: var(--ttrpg-damage-colour-poison-fg);
}
.ttrpg-damage-type-life {
    color: var(--ttrpg-damage-colour-life-fg);
}
.ttrpg-damage-type-thunder {
    color: var(--ttrpg-damage-colour-thunder-fg);
}
.ttrpg-damage-type-psychic {
    color: var(--ttrpg-damage-colour-psychic-fg);
}

.ttrpg-info-blob .ttrpg-damage-type-physical,
.ttrpg-info-blob .ttrpg-damage-type-weapon,
.ttrpg-info-blob .ttrpg-damage-type-piercing,
.ttrpg-info-blob .ttrpg-damage-type-bludgeoning,
.ttrpg-info-blob .ttrpg-damage-type-slashing {
    color: var(--ttrpg-damage-colour-physical-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-acid {
    color: var(--ttrpg-damage-colour-acid-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-cold {
    color: var(--ttrpg-damage-colour-cold-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-fire {
    color: var(--ttrpg-damage-colour-fire-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-death {
    color: var(--ttrpg-damage-colour-death-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-lightning {
    color: var(--ttrpg-damage-colour-lightning-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-poison {
    color: var(--ttrpg-damage-colour-poison-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-life {
    color: var(--ttrpg-damage-colour-life-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-thunder {
    color: var(--ttrpg-damage-colour-thunder-fg-bright);
}
.ttrpg-info-blob .ttrpg-damage-type-psychic {
    color: var(--ttrpg-damage-colour-psychic-fg-bright);
}

/* The following single-word variants of the damage type class names are
 * obsolete and should be removed once we've confirmed that they aren't still
 * used somewhere.
 */

.physical,
.weapon,
.piercing,
.bludgeoning,
.slashing {
    color: var(--ttrpg-damage-colour-physical-fg);
}
.acid {
    color: var(--ttrpg-damage-colour-acid-fg);
}
.cold {
    color: var(--ttrpg-damage-colour-cold-fg);
}
.fire {
    color: var(--ttrpg-damage-colour-fire-fg);
}
.death {
    color: var(--ttrpg-damage-colour-death-fg);
}
.lightning {
    color: var(--ttrpg-damage-colour-lightning-fg);
}
.poison {
    color: var(--ttrpg-damage-colour-poison-fg);
}
.life {
    color: var(--ttrpg-damage-colour-life-fg);
}
.thunder {
    color: var(--ttrpg-damage-colour-thunder-fg);
}
.psychic {
    color: var(--ttrpg-damage-colour-psychic-fg);
}

.ttrpg-info-blob .physical,
.ttrpg-info-blob .weapon,
.ttrpg-info-blob .piercing,
.ttrpg-info-blob .bludgeoning,
.ttrpg-info-blob .slashing {
    color: var(--ttrpg-damage-colour-physical-fg-bright);
}
.ttrpg-info-blob .acid {
    color: var(--ttrpg-damage-colour-acid-fg-bright);
}
.ttrpg-info-blob .cold {
    color: var(--ttrpg-damage-colour-cold-fg-bright);
}
.ttrpg-info-blob .fire {
    color: var(--ttrpg-damage-colour-fire-fg-bright);
}
.ttrpg-info-blob .death {
    color: var(--ttrpg-damage-colour-death-fg-bright);
}
.ttrpg-info-blob .lightning {
    color: var(--ttrpg-damage-colour-lightning-fg-bright);
}
.ttrpg-info-blob .poison {
    color: var(--ttrpg-damage-colour-poison-fg-bright);
}
.ttrpg-info-blob .life {
    color: var(--ttrpg-damage-colour-life-fg-bright);
}
.ttrpg-info-blob .thunder {
    color: var(--ttrpg-damage-colour-thunder-fg-bright);
}
.ttrpg-info-blob .psychic {
    color: var(--ttrpg-damage-colour-psychic-fg-bright);
}

/* Colour classes for templates */
.ttrpg-red-1,
th.red {
    background-color: var(--ttrpg-box-dark-red);
}

.ttrpg-red-2 {
    background-color: var(--ttrpg-box-mid-red);
}

.ttrpg-red-3 {
    background-color: var(--ttrpg-box-bright-red);
}

.ttrpg-red-border {
    border: var(--ttrpg-box-border-red);
}

.ttrpg-red-border-faded {
    border: var(--ttrpg-box-border-faded-red);
}

.ttrpg-orange-1,
th.orange {
    background-color: var(--ttrpg-box-dark-orange);
}

.ttrpg-orange-2 {
    background-color: var(--ttrpg-box-mid-orange);
}

.ttrpg-orange-3 {
    background-color: var(--ttrpg-box-bright-orange);
}

.ttrpg-orange-border {
    border: var(--ttrpg-box-border-orange);
}

.ttrpg-orange-border-faded {
    border: var(--ttrpg-box-border-faded-orange);
}

.ttrpg-yellow-1,
th.yellow {
    background-color: var(--ttrpg-box-dark-yellow);
}

.ttrpg-yellow-2 {
    background-color: var(--ttrpg-box-mid-yellow);
}

.ttrpg-yellow-3 {
    background-color: var(--ttrpg-box-bright-yellow);
}

.ttrpg-yellow-border {
    border: var(--ttrpg-box-border-yellow);
}

.ttrpg-yellow-border-faded {
    border: var(--ttrpg-box-border-faded-yellow);
}

.ttrpg-yellow-green-1,
th.yellow-green {
    background-color: var(--ttrpg-box-dark-yellow-green);
}

.ttrpg-yellow-green-2 {
    background-color: var(--ttrpg-box-mid-yellow-green);
}

.ttrpg-yellow-green-3 {
    background-color: var(--ttrpg-box-bright-yellow-green);
}

.ttrpg-yellow-green-border {
    border: var(--ttrpg-box-border-yellow-green);
}

.ttrpg-yellow-green-border-faded {
    border: var(--ttrpg-box-border-faded-yellow-green);
}

.ttrpg-green-1,
th.green {
    background-color: var(--ttrpg-box-dark-green);
}

.ttrpg-green-2 {
    background-color: var(--ttrpg-box-mid-green);
}

.ttrpg-green-3 {
    background-color: var(--ttrpg-box-bright-green);
}

.ttrpg-green-border {
    border: var(--ttrpg-box-border-green);
}

.ttrpg-green-border-faded {
    border: var(--ttrpg-box-border-faded-green);
}

.ttrpg-cyan-green-1,
th.cyan-green {
    background-color: var(--ttrpg-box-dark-cyan-green);
}

.ttrpg-cyan-green-2 {
    background-color: var(--ttrpg-box-mid-cyan-green);
}

.ttrpg-cyan-green-3 {
    background-color: var(--ttrpg-box-bright-cyan-green);
}

.ttrpg-cyan-green-border {
    border: var(--ttrpg-box-border-cyan-green);
}

.ttrpg-cyan-green-border-faded {
    border: var(--ttrpg-box-border-faded-cyan-green);
}

.ttrpg-cyan-1,
th.cyan {
    background-color: var(--ttrpg-box-dark-cyan);
}

.ttrpg-cyan-2 {
    background-color: var(--ttrpg-box-mid-cyan);
}

.ttrpg-cyan-3 {
    background-color: var(--ttrpg-box-bright-cyan);
}

.ttrpg-cyan-border {
    border: var(--ttrpg-box-border-cyan);
}

.ttrpg-cyan-border-faded {
    border: var(--ttrpg-box-border-faded-cyan);
}

.ttrpg-blue-1,
th.blue {
    background-color: var(--ttrpg-box-dark-blue);
}

.ttrpg-blue-2 {
    background-color: var(--ttrpg-box-mid-blue);
}

.ttrpg-blue-3 {
    background-color: var(--ttrpg-box-bright-blue);
}

.ttrpg-blue-border {
    border: var(--ttrpg-box-border-blue);
}

.ttrpg-blue-border-faded {
    border: var(--ttrpg-box-border-faded-blue);
}

.ttrpg-indigo-1,
th.indigo {
    background-color: var(--ttrpg-box-dark-indigo);
}

.ttrpg-indigo-2 {
    background-color: var(--ttrpg-box-mid-indigo);
}

.ttrpg-indigo-3 {
    background-color: var(--ttrpg-box-bright-indigo);
}

.ttrpg-indigo-border {
    border: var(--ttrpg-box-border-indigo);
}

.ttrpg-indigo-border-faded {
    border: var(--ttrpg-box-border-faded-indigo);
}

.ttrpg-violet-1,
th.violet {
    background-color: var(--ttrpg-box-dark-violet);
}

.ttrpg-violet-2 {
    background-color: var(--ttrpg-box-mid-violet);
}

.ttrpg-violet-3 {
    background-color: var(--ttrpg-box-bright-violet);
}

.ttrpg-violet-border {
    border: var(--ttrpg-box-border-violet);
}

.ttrpg-violet-border-faded {
    border: var(--ttrpg-box-border-faded-violet);
}


.ttrpg-magenta-1,
th.magenta {
    background-color: var(--ttrpg-box-dark-magenta);
}

.ttrpg-magenta-2 {
    background-color: var(--ttrpg-box-mid-magenta);
}

.ttrpg-magenta-3 {
    background-color: var(--ttrpg-box-bright-magenta);
}

.ttrpg-magenta-border {
    border: var(--ttrpg-box-border-magenta);
}

.ttrpg-magenta-border-faded {
    border: var(--ttrpg-box-border-faded-magenta);
}

/** Edit notice
*/

.ttrpg-edit-notice {
    max-width: 30em;
    margin: 0 auto;
}


.ttrpg-edit-notice ul {
    padding: 0;
    background-color: var(--ttrpg-box-data-bg);
    border: 1px solid;
    border-color: var(--ttrpg-box-data-border);
    text-align: center;
}

.ttrpg-edit-notice li {
    padding: 0 0.4em;
}

.ttrpg-edit-notice-help {
    font-weight: bold;
    background-color: var(--ttrpg-box-header-bg);
    border-color: var(--ttrpg-box-header-border);
    text-align: center;
}

.ttrpg-edit-notice-list {
    font-size: 0.875em;
    font-weight: bold;
}

/** Hide for anon users
*/
.ttrpg-group-autoconfirmed {
    display: none;
}

.ttrpg-achievement {
    width: 100%;
}

/* For visual effect, as of now only used on [[Illithid Powers]]. */

.ttrpg-visible-on-hover {
    opacity: 0;
    transition-property: opacity;
    transition-duration: .4s;
}
.ttrpg-visible-on-hover:hover,
.ttrpg-visible-on-hover:focus {
    opacity: 1;
}

/* Template:WeaponsTableHeader / Template:WeaponsTableRow */

.ttrpg-weapons-table td:not(:last-child) {
    text-align: center;
}


/* Dark Mode */
.client-dark-mode body {
    background-color: #121212;
    color: #e0e0e0;
}
.client-dark-mode #content,
.client-dark-mode .mw-body {
    background-color: #1e1e1e;
}
.client-dark-mode a {
    color: #8ab4f8;
}
.client-dark-mode .wikitable {
    background-color: #1e1e1e;
    color: #e0e0e0;
}
.client-dark-mode img {
    filter: brightness(0.9);
}

/* Language switcher */
.lang-switcher .external {
    background-image: none !important;
    padding-right: 0 !important;
}
.lang-switcher a .lang-create {
    color: #ba0000 !important;
    font-weight: 500;
}
.lang-switcher .mw-file-element {
    margin-bottom: 2px;
}