MediaWiki:Common.css: Difference between revisions

Latest revision as of 11:11, 23 October 2025

/* 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  *
***********/
/* Horizontal scroll on tables */
table.wikitable {
display: grid !important;
}
table.wikitable > tbody {
overflow-x: auto; 
}

/* Center text on all rows, on a single or all columns.*/
.ccall td,
.cc1 tr td:nth-child(1),
.cc2 tr td:nth-child(2),
.cc3 tr td:nth-child(3),
.cc4 tr td:nth-child(4),
.cc5 tr td:nth-child(5),
.cc6 tr td:nth-child(6),
.cc7 tr td:nth-child(7),
.cc8 tr td:nth-child(8),
.cc9 tr td:nth-child(9) {
    text-align:center;
}
/* Uncenter text on all rows, on a single or all columns.*/
.ucall td,
.uc1 tr td:nth-child(1),
.uc2 tr td:nth-child(2),
.uc3 tr td:nth-child(3),
.uc4 tr td:nth-child(4),
.uc5 tr td:nth-child(5),
.uc6 tr td:nth-child(6),
.uc7 tr td:nth-child(7),
.uc8 tr td:nth-child(8),
.uc9 tr td:nth-child(9) {
    text-align:left !important;
}
/* Center text on a single or all table headers.*/
.chall th,
.ch1 tr th:nth-child(1),
.ch2 tr th:nth-child(2),
.ch3 tr th:nth-child(3),
.ch4 tr th:nth-child(4),
.ch5 tr th:nth-child(5),
.ch6 tr th:nth-child(6),
.ch7 tr th:nth-child(7),
.ch8 tr th:nth-child(8),
.ch9 tr th:nth-child(9) {
    text-align:center;
}
/* Uncenter text on a single or all table headers.*/
.uchall th,
.uch1 tr th:nth-child(1),
.uch2 tr th:nth-child(2),
.uch3 tr th:nth-child(3),
.uch4 tr th:nth-child(4),
.uch5 tr th:nth-child(5),
.uch6 tr th:nth-child(6),
.uch7 tr th:nth-child(7),
.uch8 tr th:nth-child(8),
.uch9 tr th:nth-child(9) {
    text-align:left !important;
}
/* 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: ']';
}

/***************
*  Stat table  *
****************/
.stattable {
border: 1px solid var(--border-color-base);
border-radius: 10px;
}
.stattable tr {
display:flex;
flex-wrap: wrap;
}
.stattable td:last-child dd {
margin-right:1.5em;
}
.stattable dd:first-child {
color:white;
font-weight:bold;
border-bottom: 1px solid var(--border-color-base);
}

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

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

/* Collapse Template (collapsed|) */
div.collapse-section {
display: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;
}

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

/* Spell Template */

/* Big text for spell level */
.spell {
    font-weight:bold;
    font-style:italic;
    font-size:1.5em;
}
/* Bold and centerized header for tables. */
.wikitable.spell th {
    font-weight:bold;
    text-align:center;
}