|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */
| |
|
| |
| :root {
| |
| --color-surface-0: rgb(15,15,20);
| |
| --color-surface-2: rgb(18,18,23);
| |
| }
| |
|
| |
| /* 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;
| |
| }
| |
| }
| |
|
| |
|
| |
| /* 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;
| |
| }
| |
|
| |
| /* 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;
| |
| }
| |
|
| |
| /* 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;
| |
| content: 'BOOO';
| |
| }
| |
| 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 hr.small-link { | | div.feat-list hr.small-link { |
| margin:0; | | margin:0; |
| Line 189: |
Line 14: |
| div.feat-list div[class^="mw-customtoggle-"]::after { | | div.feat-list div[class^="mw-customtoggle-"]::after { |
| margin-left:.25em; | | margin-left:.25em; |
| | color: var(--color-inverted-primary); |
| } | | } |
| div.feat-list div[class^="mw-customtoggle-"]:has(+ div[class*="mw-collapsible"]):not([class*="mw-collapsed"])::after { | | div.feat-list div[class^="mw-customtoggle-"]:has(+ div[class*="mw-collapsible"]):not([class*="mw-collapsed"])::after { |
