Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
:root {
--color-surface-0: rgb(15,15,20);
--color-surface-2: rgb(18,18,23);
}
label.tabs-label:hover {
background:pink;
}
/* General */
.small {
font-size:.8em;
vertical-align:text-bottom;
}
.italic {
font-style:italic;
}
.col-2 {
columns: auto 2;
break-inside: avoid;
}
.col-3 {
columns: auto 3;
break-inside: avoid;
}
@media only screen and (max-width: 600px) {
.col-2,
.col-3 {
columns: auto 1;
}
}
/***********
* Tables *
***********/
// Center text on all rows on a single or all columns.
.center-column-all tr td,
.center-column-1 tr td:nth-child(1),
.center-column-2 tr td:nth-child(2),
.center-column-3 tr td:nth-child(3),
.center-column-4 tr td:nth-child(4),
.center-column-5 tr td:nth-child(5),
.center-column-6 tr td:nth-child(6),
.center-column-7 tr td:nth-child(7),
.center-column-8 tr td:nth-child(8),
.center-column-9 tr td:nth-child(9) {
text-align:center;
}
/* Small Link */
p:has(>span.small-link) {
margin-top:0;
}
span.small-link {
font-size:.8em;
font-weight:bold;
}
span.small-link a {
padding-left:1.5em;
margin-left:-1.5em;
}
hr.small-link {
margin:-.5em 0 -.5em 0;
}
span.small-link:before {
font-size: .75em;
content: '🔗';
margin-right:.25em;
vertical-align: text-top;
}
.tabs-content hr.small-link {
margin:0 0 -.5em 0;
}
/* Header Link */
h2.link,
h3.link,
h4.link,
h5.link {
display:inline;
}
h2.link + p,
h3.link + p,
h4.link + p,
h5.link + p {
display:inline;
font-weight:bold;
margin-left:.5em;
}
h2.link + p > a,
h3.link + p > a,
h4.link + p > a,
h5.link + p > a,
h2.link + section > p > a,
h3.link + section > p > a,
h4.link + section > p > a,
h5.link + section > p > a {
font-weight:bold;
}
h2.link + p > a::before,
h3.link + p > a::before,
h4.link + p > a::before,
h5.link + p > a::before,
h2.link + section > p > a::before,
h3.link + section > p > a::before,
h4.link + section > p > a::before,
h5.link + section > p > a::before {
content: '[';
}
h2.link + p > a::after,
h3.link + p > a::after,
h4.link + p > a::after,
h5.link + p > a::after,
h2.link + section > p > a::after,
h3.link + section > p > a::after,
h4.link + section > p > a::after,
h5.link + section > p > a::after {
content: ']';
}
/* Tabs */
label.tabs-label {
background-color: var(--border-color-base);
}
label.tabs-label:hover {
background-color: var(--border-color-base--darker);
}
div.tabs > label.tabs-label {
border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0;
background-color: var(--color-surface-1);
}
/* Active tab */
.tabs-tabbox > .tabs-input:checked + .tabs-label,
.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
background-color: var(--color-surface-2);
border-bottom: 0;
box-shadow: none;
}
/* Category Tree */
div.category-tree-base div {
margin-left:20px;
}
div.category-tree-base div::before {
margin-right:.4em;
font-size: var(--font-size-x-small);
content: '●';
}
div.category-tree-base div.mw-collapsible {
margin-left:0;
}
div.category-tree-base span[class^="mw-customtoggle-"]::after {
margin-left:.25em;
font-family: monospace;
}
div.category-tree-base span[class^="mw-customtoggle-"]:has(+ div[class*="mw-collapsible"]):not([class*="mw-collapsed"])::after {
font-weight: bold;
content: '[ – ]';
}
div.category-tree-base span[class^="mw-customtoggle-"]:has(+ div[class*="mw-collapsible"][class*="mw-collapsed"])::after {
font-weight: bold;
content: '[ + ]';
}
/* Feat List */
div.feat-list h2 {
display:block;
}
div.feat-list hr.small-link {
margin:0;
}
div.feat-list div.mw-customtoggle {
color: var(--color-link);
font-size: var(--font-size-xx-large);
font-weight: bold;
display: block;
}
div.feat-list div.mw-collapsible {
margin-left:1em;
}
div.feat-list div[class^="mw-customtoggle-"]::after {
margin-left:.25em;
color: var(--color-base);
accent-color: var(--color-progressive);
font-weight: normal;
font-family: monospace;
}
div.feat-list div[class^="mw-customtoggle-"]:has(+ div[class*="mw-collapsible"]):not([class*="mw-collapsed"])::after {
content: '[ – ]';
}
div.feat-list div[class^="mw-customtoggle-"]:has(+ div[class*="mw-collapsible"][class*="mw-collapsed"])::after {
content: '[ + ]';
}
/*
* Theme Table
*/
@media (min-width:1280px) {
.citizen-overflow-wrapper:has(table.theme-tree) {
width:45% !important;
float:right;
}
}
/**************
* Templates *
***************/
/* Calculation Template (c|) */
span.calculation {
color: var(--color-emphasized);
background-color: var(--color-surface-2);
border: var(--border-width-base) solid var(--border-color-base);
border-radius: var(--border-radius-base);
padding: 2px 4px;
font-family: var(--font-family-monospace);
font-size: var(--font-size-small);
}
/* Item Template */
div.item {
font-weight:bold;
font-size:.9em;
}
div.item + hr {margin:0;}
span.item.common {color:white;}
span.item.uncommon {color:lime;}
span.item.rare {color:slateblue;}
span.item.epic {color:purple;}
span.item.legendary {color:orange;}
span.item.attunement {
color:white;
background-color:royalblue;
border-radius:.1em;
padding:.1em .3em 0 .3em;
margin:0 .3em 0 .3em;
}