9,869
editsWhitespace / indentation fixes.
(Table width issues.) |
(Whitespace / indentation fixes.) |
||
Line 2: | Line 2: | ||
:root.skin-citizen-dark { | :root.skin-citizen-dark { | ||
--color-primary__h: 15; | |||
--color-secondary__h: 255; | |||
--color-surface-0: hsl(var(--color-primary__h) 10% 10%); | |||
--color-surface-1: hsl(var(--color-primary__h) 10% 10%); | |||
--color-surface-2: hsl(var(--color-primary__h) 5% 12%); | |||
--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); | ||
--bg3wiki-tooltip-border: #785000; | --bg3wiki-tooltip-border: #785000; | ||
/* css tooltip colours */ | /* css tooltip colours */ | ||
--aria-label-tooltip-bg: hsl(200deg 5% 10%); | --aria-label-tooltip-bg: hsl(200deg 5% 10%); | ||
--aria-label-tooltip-fg: hsl(0deg 0% 90%); | |||
--aria-label-tooltip-border: none; | |||
/* this is incredibly silly of me but let's see */ | /* this is incredibly silly of me but let's see */ | ||
--bg3wiki-math: invert(1); | --bg3wiki-math: invert(1); | ||
/* 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. */ | /* Variables with the dark suffix are intended for detail elements within | ||
/* Intended for very large boxed elemetns that cover an entire page. */ | * 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. */ | |||
--bg3wiki-tooltip-doc-bg: #2b2a28; | --bg3wiki-tooltip-doc-bg: #2b2a28; | ||
--bg3wiki-tooltip-bg: #1B1A19; | --bg3wiki-tooltip-bg: #1B1A19; | ||
/* Intended for accents like headers or titles */ | /* Intended for accents like headers or titles */ | ||
--bg3wiki-accent: #211e1c; | --bg3wiki-accent: #211e1c; | ||
--bg3wiki-accent-bg: #211e1c; | --bg3wiki-accent-bg: #211e1c; | ||
--bg3wiki-accent-dark-bg: #232324; | --bg3wiki-accent-dark-bg: #232324; | ||
--bg3wiki-accent-text: var(--fg); | --bg3wiki-accent-text: var(--fg); | ||
/* Intended for labels in boxes */ | /* Intended for labels in boxes */ | ||
--bg3wiki-label-bg: #2f2b28; | --bg3wiki-label-bg: #2f2b28; | ||
--bg3wiki-label-border: 2px solid #232323; | |||
--bg3wiki-label-dark-bg: #171717; | --bg3wiki-label-dark-bg: #171717; | ||
--bg3wiki-label-dark-border: 1px solid #1f1d1c; | |||
/* Intended for data elements in boxes, where its contents are displayed. */ | /* Intended for data elements in boxes, where its contents are displayed. */ | ||
--bg3wiki-data-bg: #232323; | --bg3wiki-data-bg: #232323; | ||
--bg3wiki-data-border: 1px solid #4d4a46; | --bg3wiki-data-border: 1px solid #4d4a46; | ||
Line 38: | Line 41: | ||
--bg3wiki-data-row-odd-bg: var(--bg-main); | --bg3wiki-data-row-odd-bg: var(--bg-main); | ||
--bg3wiki-data-dark-bg: #1f1e1e; | --bg3wiki-data-dark-bg: #1f1e1e; | ||
--bg3wiki-data-dark-border: 1px solid #242322; | |||
/* Intended for detail elements in boxes */ | /* Intended for detail elements in boxes */ | ||
--bg3wiki-detail-bg: #1b1b1b; | --bg3wiki-detail-bg: #1b1b1b; | ||
--bg3wiki-detail-dark-bg: #121212; | --bg3wiki-detail-dark-bg: #121212; | ||
Line 45: | Line 48: | ||
/* Tables */ | /* Tables */ | ||
--bg3wiki-wikitable-bg: var(--bg3wiki-data-dark-bg); | --bg3wiki-wikitable-bg: var(--bg3wiki-data-dark-bg); | ||
--bg3wiki-wikitable-header-bg: var(--bg3wiki-label-dark-bg); | |||
--bg3wiki-wikitable-border: var(--bg3wiki-data-border); | |||
--bg3wiki-wikitable-muted-bg: var(--bg3-wiki-label-dark-bg); | --bg3wiki-wikitable-muted-bg: var(--bg3-wiki-label-dark-bg); | ||
--bg3wiki-wikitable-muted-border: var(--bg3wiki-data-border-bg); | --bg3wiki-wikitable-muted-border: var(--bg3wiki-data-border-bg); | ||
Line 87: | Line 90: | ||
.bg3wiki-d20-bg { | .bg3wiki-d20-bg { | ||
background-image: url('/static/d20-bg.png'); | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
background-size: 35px; | |||
} | } | ||
Line 124: | Line 127: | ||
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 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 224: | Line 227: | ||
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; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); | |||
margin: 5px; | |||
text-align: center; | |||
} | } | ||
Line 248: | Line 251: | ||
.bg3wiki-license-box-container { | .bg3wiki-license-box-container { | ||
margin: 4px 0 4px 10%; | |||
} | } | ||
.bg3wiki-license-box { | .bg3wiki-license-box { | ||
border: 2px solid #785000; | |||
border-collapse: collapse; | |||
background: #1B1A19; | |||
color: rgb(210,210,210); | |||
width: 100%; | |||
} | } | ||
Line 272: | Line 275: | ||
/* For desktop eyes only */ | /* For desktop eyes only */ | ||
.nomobile { | .nomobile { | ||
display: none; | display: none; | ||
} | } | ||
Line 284: | Line 287: | ||
/* Price calculator */ | /* Price calculator */ | ||
#bg3wiki-price-calculator { | #bg3wiki-price-calculator { | ||
border: 1px solid var(--bg3wiki-tooltip-border); | |||
} | } | ||
#bg3wiki-price-calculator-form { | #bg3wiki-price-calculator-form { | ||
padding: 0.5em; | |||
} | } | ||
#bg3wiki-price-calculator-form input[type="number"] { | #bg3wiki-price-calculator-form input[type="number"] { | ||
width: 100%; | |||
} | } | ||
#bg3wiki-price-calculator-form td { | #bg3wiki-price-calculator-form td { | ||
padding-right: 0.5em; | |||
} | } | ||
#bg3wiki-price-calculator-form th { | #bg3wiki-price-calculator-form th { | ||
text-align: right; | |||
padding-right: 0.5em; | |||
} | } | ||
#bg3wiki-price-calculator-form label { | #bg3wiki-price-calculator-form label { | ||
margin-left: 0.2em; | |||
} | } | ||
#bg3wiki-price-calculator-result { | #bg3wiki-price-calculator-result { | ||
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; | |||
} | } | ||
/* 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 382: | Line 386: | ||
padding-bottom: 0.5ch | padding-bottom: 0.5ch | ||
} | } | ||
.bg3wiki-ac-value .ac-value-comment { | .bg3wiki-ac-value .ac-value-comment { | ||
Line 390: | Line 393: | ||
} | } | ||
/* | /* CSS tooltip implementation. Usage in markup: | ||
CSS tooltip implementation. Usage in markup: | |||
<some-element aria-label="tooltip text here"> | |||
normal text | |||
</some-element> | |||
*/ | */ | ||
Line 402: | Line 404: | ||
[aria-label]:hover::after, | [aria-label]:hover::after, | ||
[aria-label]:focus::after { | [aria-label]:focus::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; | |||
} | } | ||
Line 420: | Line 422: | ||
[aria-label].aria-label-top-rig:hover::after, | [aria-label].aria-label-top-rig:hover::after, | ||
[aria-label].aria-label-top-rig:focus::after { | [aria-label].aria-label-top-rig:focus::after { | ||
bottom: 100%; | |||
left: unset; | |||
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; | |||
text-decoration-line: underline; | |||
text-decoration-style: dotted; | |||
text-decoration-thickness: 1px; | |||
text-underline-offset: calc(1ex / 2); | |||
} | } | ||
Line 437: | Line 439: | ||
.bg3wiki-tabbar { | .bg3wiki-tabbar { | ||
background-color: #1B1A19; | background-color: #1B1A19; | ||
margin: 0.5em 0 0 0; | |||
} | } | ||
Line 494: | Line 496: | ||
.bg3wiki-horizontlist dt::after { | .bg3wiki-horizontlist dt::after { | ||
content: ":"; | |||
font-weight: normal; | |||
font-size: 100%; | |||
} | } | ||
Line 531: | Line 533: | ||
.bg3wiki-quotesource { | .bg3wiki-quotesource { | ||
line-height: 1.5em; | |||
padding-left: 1.5em; | |||
margin-top: 0; | |||
} | } | ||
.bg3wiki-blockquote-marks { | .bg3wiki-blockquote-marks { | ||
color: var(--bg3wiki-blockquote-marks); | |||
font-size: 120%; | |||
font-family: serif; | |||
font-weight: bold; | |||
} | } | ||
/* Shortcut */ | /* Shortcut */ | ||
.bg3wiki-template-shortcut { | .bg3wiki-template-shortcut { | ||
display: inline-block; | |||
background-color: var(--bg3wiki-documentation-header-bg); | background-color: var(--bg3wiki-documentation-header-bg); | ||
border: 1px solid var(--bg3wiki-documentation-border); | border: 1px solid var(--bg3wiki-documentation-border); | ||
text-align: center; | text-align: center; | ||
margin: 1em; | |||
padding: 0 0.33em 0 0.33em; | padding: 0 0.33em 0 0.33em; | ||
vertical-align: top; | |||
width: fit-content; | |||
font-size: 85%; | |||
} | } | ||
Line 561: | Line 563: | ||
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%; | |||
} | } | ||
/* Resistance colours */ | /* Resistance colours */ | ||
.bg3wiki-imagetext-text-resistant { | .bg3wiki-imagetext-text-resistant { | ||
color: var(--bg3wiki-imagetext-text-resistant-color); | |||
} | } | ||
.bg3wiki-imagetext-text-immune{ | .bg3wiki-imagetext-text-immune{ | ||
color: var(--bg3wiki-imagetext-text-immune-color); | |||
} | } | ||
.bg3wiki-imagetext-text-vulnerable { | .bg3wiki-imagetext-text-vulnerable { | ||
color: var(--bg3wiki-imagetext-text-vulnerable-color); | |||
} | } | ||
Line 589: | Line 591: | ||
/* Character info template styling */ | /* Character info template styling */ | ||
.infobox { | .infobox { | ||
font-size: 90%; | |||
margin-left: auto; | |||
margin-right: auto; | |||
background-color: #121212; | |||
border: 1px solid #ada6a9; | |||
} | } | ||
.infobox-above { | .infobox-above { | ||
font-size: 130%; | |||
text-align: center; | |||
background: #171717; | background: #171717; | ||
border: 1px solid #121212; | |||
} | } | ||
.infobox-subheader { | .infobox-subheader { | ||
text-align: center; | |||
background-color: #121212; | |||
border: 2px solid #121212; | |||
} | } | ||
.infobox-header { | .infobox-header { | ||
text-align: center; | |||
font-size: 130%; | |||
text-align: center; | |||
background: #171717; | background: #171717; | ||
border: 1px solid #121212; | |||
} | } | ||
.infobox-title { | .infobox-title { | ||
text-align: center; | |||
} | } | ||
.infobox-label { | .infobox-label { | ||
background-color: #171717; | |||
border: 1px solid #1f1d1c; | |||
margin-right: 5em; | |||
padding: 5px; | |||
} | } | ||
th.infobox-label:not(:has(.bg3wiki-icontext-block)) { | th.infobox-label:not(:has(.bg3wiki-icontext-block)) { | ||
text-align: right; | |||
} | } | ||
Line 637: | Line 639: | ||
.infobox-data { | .infobox-data { | ||
text-align: center; | |||
background-color: #1f1e1e; | |||
border: 1px solid #242322; | |||
padding: 5px; | |||
} | } | ||
.infobox-below { | .infobox-below { | ||
text-align: center; | |||
background: #171717; | background: #171717; | ||
border: 1px solid #121212; | |||
} | } | ||
.infobox-image { | .infobox-image { | ||
text-align: center; | |||
background-color: #121212; | |||
border: 2px solid #121212; | |||
} | } | ||
Line 661: | Line 663: | ||
.infobox caption { | .infobox caption { | ||
display: table-caption; | display: table-caption; | ||
background-color: #121212; | |||
border: 2px solid #121212; | |||
} | } | ||
Line 679: | Line 681: | ||
.wikitable td { | .wikitable td { | ||
background-color: var(--bg3wiki-wikitable-bg); | |||
border: var(--bg3wiki-wikitable-border); | |||
} | } | ||
.wikitable th { | .wikitable th { | ||
background-color: var(--bg3wiki-wikitable-header-bg); | |||
border: var(--bg3wiki-wikitable-border); | |||
} | } |