9,856
editsno edit summary
(Fix/cleanup some stuff.) |
No edit summary |
||
(17 intermediate revisions by the same user not shown) | |||
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); | ||
/* 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; | ||
} | } | ||
/* | /* MobileFrontend should strip elements with this class, but still */ | ||
.nomobile { | |||
display: none; | |||
} | |||
. | |||
/* 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 82: | Line 63: | ||
.bg3wiki-d20-bg { | .bg3wiki-d20-bg { | ||
background-image: url('/static/d20-bg.png'); | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
background-size: 35px; | |||
} | } | ||
Line 115: | Line 96: | ||
/* 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 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 153: | Line 139: | ||
font-family: 'Linux Libertine', 'Georgia', serif; | font-family: 'Linux Libertine', 'Georgia', serif; | ||
} | } | ||
/* ItemIcon stuff */ | |||
:root { | :root { | ||
Line 165: | Line 153: | ||
--bg3wiki-itemicon-gradient-bot-opacity: 12.5%; | --bg3wiki-itemicon-gradient-bot-opacity: 12.5%; | ||
--bg3wiki-itemicon-border-opacity: 60%; | --bg3wiki-itemicon-border-opacity: 60%; | ||
} | } | ||
Line 216: | Line 195: | ||
/* 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; | |||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); | |||
margin: 5px; | |||
text-align: center; | |||
} | } | ||
Line 230: | Line 210: | ||
/* 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 237: | Line 218: | ||
/* License box */ | /* License box */ | ||
#mw-license-preview .bg3wiki-license-box-container { | #mw-license-preview .bg3wiki-license-box-container { | ||
/* Don't want margin in the preview box because that breaks things */ | /* Don't want margin in the preview box because that breaks things */ | ||
Line 243: | Line 225: | ||
.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 263: | Line 245: | ||
vertical-align: top; | vertical-align: top; | ||
padding: 0.4rem 0 0.4rem 0.9rem; | padding: 0.4rem 0 0.4rem 0.9rem; | ||
} | } | ||
Line 279: | Line 256: | ||
/* 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 377: | Line 355: | ||
padding-bottom: 0.5ch | padding-bottom: 0.5ch | ||
} | } | ||
.bg3wiki-ac-value .ac-value-comment { | .bg3wiki-ac-value .ac-value-comment { | ||
Line 385: | Line 362: | ||
} | } | ||
/* | /* CSS tooltip implementation. Usage in markup: | ||
CSS tooltip implementation. Usage in markup: | |||
<some-element aria-label="tooltip text here"> | |||
normal text | |||
</some-element> | |||
*/ | */ | ||
Line 397: | Line 373: | ||
[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 415: | Line 391: | ||
[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 432: | Line 408: | ||
.bg3wiki-tabbar { | .bg3wiki-tabbar { | ||
background-color: #1B1A19; | background-color: #1B1A19; | ||
margin: 0.5em 0 0 0; | |||
} | } | ||
Line 489: | Line 465: | ||
.bg3wiki-horizontlist dt::after { | .bg3wiki-horizontlist dt::after { | ||
content: ":"; | |||
font-weight: normal; | |||
font-size: 100%; | |||
} | } | ||
Line 526: | Line 502: | ||
.bg3wiki-quotesource { | .bg3wiki-quotesource { | ||
line-height: 1.5em; | |||
padding-left: 1.5em; | |||
margin-top: 0; | |||
} | } | ||
.bg3wiki-blockquote-marks { | .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(-- | background-color: var(--color-surface-2); | ||
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 556: | Line 530: | ||
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%; | |||
} | } | ||
/* | /* 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; | |||
} | } | ||
/* | /* PortableInfobox */ | ||
.portable-infobox [data-item-name="bg3wiki-resistances"] ul { | |||
margin: 0; | |||
list-style: none; | |||
display: flex; | |||
justify-content: center; | |||
gap: 5px; | |||
} | } | ||
/* Character info template styling */ | /* Character info template styling */ | ||
.infobox { | .infobox { | ||
display: table; | |||
width: 100%; | |||
font-size: 90%; | |||
margin-left: auto; | |||
margin-right: auto; | |||
background-color: var(--color-surface-0); | |||
} | } | ||
.infobox-above { | .infobox-above { | ||
font-size: 130%; | |||
text-align: center; | |||
background: | background: var(--color-surface-1); | ||
} | } | ||
.infobox-subheader { | .infobox-subheader { | ||
text-align: center; | |||
background-color: var(--color-surface-0); | |||
} | } | ||
.infobox-header { | .infobox-header { | ||
text-align: center; | |||
font-size: 130%; | |||
text-align: center; | |||
background: | background: var(--color-surface-1); | ||
} | } | ||
.infobox-title { | .infobox-title { | ||
text-align: center; | |||
} | } | ||
.infobox-label { | .infobox-label { | ||
background-color: var(--color-surface-1); | |||
margin-right: 5em; | |||
padding: 5px; | |||
} | } | ||
th.infobox-label { | th.infobox-label { | ||
text-align: right; | |||
} | |||
th.infobox-label:has(.bg3wiki-icontext-block), | |||
th.infobox-label:has(.bg3wiki-condition) { | |||
text-align: left; | |||
} | } | ||
Line 640: | Line 609: | ||
.infobox-data { | .infobox-data { | ||
text-align: center; | |||
background-color: var(--color-surface-1); | |||
padding: 5px; | |||
} | } | ||
.infobox-below { | .infobox-below { | ||
text-align: center; | |||
background: | background: var(--color-surface-1); | ||
} | } | ||
.infobox-image { | .infobox-image { | ||
text-align: center; | |||
background-color: var(--color-surface-0); | |||
} | } | ||
Line 664: | Line 630: | ||
.infobox caption { | .infobox caption { | ||
display: table-caption; | display: table-caption; | ||
background-color: var(--color-surface-0); | |||
} | } | ||
Line 677: | Line 642: | ||
.wraplinks a { | .wraplinks a { | ||
white-space: normal; | white-space: normal; | ||
} | } |