MediaWiki:Common.css: Difference between revisions
From The Wild Beyond the Witchlight
No edit summary |
No edit summary |
||
(129 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
/* Get nice font! */ | /* Get nice font! */ | ||
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&display=swap'); | ||
@import url('https://fonts.googleapis.com/css?family=Almendra'); | @import url('https://fonts.googleapis.com/css?family=Almendra'); | ||
@import url('https://fonts.googleapis.com/css?family=Ubuntu Condensed'); | |||
@import url('https://fonts.googleapis.com/css?family=Roboto'); | @import url('https://fonts.googleapis.com/css?family=Roboto'); | ||
@import url('https://fonts.googleapis.com/css?family=Rye'); | |||
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0'); | @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0'); | ||
:root { | :root { | ||
--font-family__header--campaign: 'Almendra', sans-serif; | --font-family__header--campaign: 'Almendra', sans-serif; | ||
} | } | ||
/* Wood background */ | /* Wood background */ | ||
Line 89: | Line 92: | ||
width: 8px; | width: 8px; | ||
line-height: 8px; | line-height: 8px; | ||
margin-left:1px; | |||
margin-bottom:2px; | |||
} | } | ||
Line 102: | Line 107: | ||
} | } | ||
/* Customer scaling characters for character page */ | |||
.rpgtable .image.brolin img { | |||
width: 260px; | |||
height: auto !important; | |||
max-width: none !important; | |||
margin-left: -55px; | |||
} | |||
.rpgtable .image.dhanell img { | |||
width: 240px; | |||
height: auto !important; | |||
max-width: none !important; | |||
margin-left: -70px; | |||
} | |||
.rpgtable .image.frostbite img { | |||
width: 200px; | |||
height: auto !important; | |||
max-width: none !important; | |||
margin-left: -30px; | |||
margin-top: -40px; | |||
filter: contrast(1.25); | |||
} | |||
.rpgtable .image.zephyr img { | |||
width: 250px; | |||
height: auto !important; | |||
max-width: none !important; | |||
margin-left: -70px; | |||
margin-top: -40px; | |||
} | |||
.rpgtable .image.maeve img { | |||
width: 140px; | |||
height: auto !important; | |||
max-width: none !important; | |||
} | |||
.rpgtable { | .rpgtable { | ||
Line 109: | Line 147: | ||
border-collapse:collapse; | border-collapse:collapse; | ||
width:100%; | width:100%; | ||
outline: 1px solid #999; | outline: 1px solid #999; | ||
outline-style: solid; | |||
outline-offset: -1px; | outline-offset: -1px; | ||
margin-top: | |||
} | |||
.container { | |||
margin-top:-12px; | |||
} | } | ||
Line 121: | Line 163: | ||
.rpgtable th { | .rpgtable th { | ||
font-family: var(--font-family__header--campaign, var(--font-family__header)) !important; | font-family: var(--font-family__header--campaign, var(--font-family__header)) !important; | ||
height: | height:20px; | ||
padding:0px; | padding:0px; | ||
} | } | ||
Line 138: | Line 180: | ||
padding: 1px 4px; | padding: 1px 4px; | ||
text-align: left; | text-align: left; | ||
} | |||
.rpgtable > tr > th, | |||
.rpgtable > * > tr > th { | |||
padding: 1px 0px; | |||
} | } | ||
Line 150: | Line 197: | ||
font-size: 12px; | font-size: 12px; | ||
line-height: 16px; | line-height: 16px; | ||
hyphens: auto; | |||
} | } | ||
Line 163: | Line 211: | ||
line-height:18px; | line-height:18px; | ||
font-family: roboto, cambria,Verdana,Geneva,sans-serif; | font-family: roboto, cambria,Verdana,Geneva,sans-serif; | ||
} | |||
.rpgtable a.external { | |||
background-image: none; | |||
padding-right: 0px; | |||
} | } | ||
Line 173: | Line 226: | ||
float:left; | float:left; | ||
width: 141px; | width: 141px; | ||
width: calc(50% - 5px); | |||
} | } | ||
.rightcolumn { | .rightcolumn { | ||
float:right; | float:right; | ||
width: 141px; | width: 141px; | ||
width: calc(50% - 5px); | |||
} | } | ||
.leftcolumn.wider, | |||
.rightcolumn.wider { | |||
width: calc(75% - 5px); | |||
} | |||
.leftcolumn.smaller, | |||
.rightcolumn.smaller{ | |||
width: calc(25% - 5px); | |||
} | |||
/*******************/ | /*******************/ | ||
Line 198: | Line 262: | ||
.rpgtable.character td:nth-child(4) | .rpgtable.character td:nth-child(4) | ||
{ | { | ||
font-size:14px; | font-size:13px; | ||
} | |||
.rpgtable.character tr td:nth-child(1) { | |||
width:75px; | |||
} | |||
.rpgtable.level tr:nth-child(2) td { | |||
height: 50px; | |||
text-align:center; | |||
} | |||
.rpgtable.lost tr:nth-child(2) td { | |||
text-align:center; | |||
padding: 1px; | |||
font-size: 11px; | |||
line-height: 14px; | |||
height: 28px; | |||
} | |||
.rpgtable.level tr:nth-child(3) td { | |||
border-bottom:0px; | |||
font-size:12px; | |||
line-height:14px; | |||
text-align: center; | |||
} | |||
.rpgtable.level tr:nth-child(4) td { | |||
border-top:0px; | |||
text-align: center; | |||
vertical-align:middle; | |||
height:22px; | |||
} | } | ||
.rpgtable. | |||
.rpgtable.level tr:nth-child(2) td div { | |||
height: 44px; | |||
aspect-ratio: cos(30deg); | |||
clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0); | |||
background: #666; | |||
color: #fff; | |||
margin-left: 9px; | |||
line-height: 45px; | |||
font-size: 24px; | |||
} | } | ||
Line 207: | Line 309: | ||
.rpgtable.stats tr.big | .rpgtable.stats tr.big | ||
{ | { | ||
height: | height: 54.5px; | ||
} | } | ||
Line 236: | Line 338: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
height: | height:52px; | ||
} | } | ||
Line 281: | Line 383: | ||
font-size:12px; | font-size:12px; | ||
text-align:right; | text-align:right; | ||
padding-right:0px; | |||
} | } | ||
.rpgtable.stats td:nth-child(3) | .rpgtable.stats td:nth-child(3) | ||
{ | { | ||
font-size:12px; | font-size:12px; | ||
} | |||
.statsdiv .leftcolumn, | |||
.statsdiv .rightcolumn { | |||
margin-top: -12px; | |||
} | } | ||
Line 297: | Line 405: | ||
.rpgtable.armorclass tr.big td { | .rpgtable.armorclass tr.big td { | ||
text-align:center; | text-align:center; | ||
} | |||
.rpgtable.hitpoints tr:nth-child(2) | |||
{ | |||
height:24px; | |||
border-bottom: 1px solid #ccc; | |||
} | } | ||
Line 302: | Line 416: | ||
.rpgtable.hitpoints tr:nth-child(2) td:nth-child(2) | .rpgtable.hitpoints tr:nth-child(2) td:nth-child(2) | ||
{ | { | ||
font-size: | font-size:20px; | ||
font-weight:normal; | |||
} | } | ||
.rpgtable.armorclass tr:nth-child(3) td | .rpgtable.armorclass tr:nth-child(3) td | ||
{ | { | ||
font-size:10px; | font-size:10px; | ||
} | } | ||
.rpgtable.armorclass tr:nth-child(2) td div.armorClass | |||
{ | |||
/*height: 32px; | |||
width: 32px; | |||
float: left; | |||
border: 2px solid #666; | |||
border-radius: 50% 50% 50% 50% / 0% 0% 50% 50%; | |||
background-color: #666; | |||
color: #fff; | |||
line-height: 30px; | |||
font-size: 20px; | |||
margin: 3px 0px; | |||
margin-left: 52px;*/ | |||
height: 38px; | |||
width: 36px; | |||
float: left; | |||
line-height: 32px; | |||
font-size: 20px; | |||
margin: 2px 0px; | |||
margin-left: 50px; | |||
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%); | |||
background: #666; | |||
color: #fff; | |||
} | |||
.rpgtable.armorclass tr:nth-child(2) td div.armorClassShield | |||
{ | |||
height: 42px; | |||
width: 60px; | |||
text-align: right; | |||
vertical-align: bottom; | |||
display: table-cell; | |||
font-size:10px; | |||
} | |||
.rpgtable.hitdice td | .rpgtable.hitdice td | ||
{ | { | ||
Line 329: | Line 481: | ||
height:143px; | height:143px; | ||
padding:0px; | padding:0px; | ||
background-color: #000; | |||
} | } | ||
.image .rpgtable .portrait { | .image .rpgtable .portrait { | ||
height: | height: 233px; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
/* Weapons */ | /* Weapons */ | ||
.weapons .rpgtable tr.weapon td:nth-child(2) | .weapons .rpgtable tr th:nth-child(2), | ||
.weapons .rpgtable tr th:nth-child(3) { | |||
font-size:12px; | |||
} | |||
.weapons .rpgtable tr.weapon td:nth-child(2) { | |||
text-align:center; | |||
white-space: nowrap; | |||
} | |||
.weapons .rpgtable tr.weapon td:nth-child(3) { | .weapons .rpgtable tr.weapon td:nth-child(3) { | ||
text-align:center; | text-align:center; | ||
} | } | ||
.weapons .rpgtable tr.weapon td { | .weapons .rpgtable tr.weapon td { | ||
border-bottom-style: dotted; | border-bottom-style: dotted; | ||
Line 348: | Line 510: | ||
font-style:italic; | font-style:italic; | ||
line-height: 14px; | line-height: 14px; | ||
height: 14px; | |||
} | } | ||
Line 360: | Line 523: | ||
{ | { | ||
border-right:0px; | border-right:0px; | ||
width: | width:13%; | ||
} | } | ||
Line 368: | Line 531: | ||
{ | { | ||
border-left:0px; | border-left:0px; | ||
width: | width:20%; | ||
font-weight:bold; | font-weight:bold; | ||
padding:1px; | |||
} | |||
.rpgtable.spellslots tr td.disabled { | |||
color:#999; | |||
} | } | ||
/* Character container */ | /* Character container */ | ||
.container { | .container { | ||
Line 382: | Line 551: | ||
/*border-bottom: 2px dotted #ccc;*/ | /*border-bottom: 2px dotted #ccc;*/ | ||
overflow: hidden; | overflow: hidden; | ||
line-height: 1; | |||
} | } | ||
/* lets put it in 1 column on a phone */ | |||
@media only screen and (max-width: 550px) { | |||
.container{ | |||
grid-template-columns: 293px; | |||
column-gap: 0px; | |||
max-height: none; | |||
/*zoom: 130%;*/ | |||
/*margin-top: -10px;*/ | |||
row-gap: 0px; | |||
width: 293px; | |||
} | |||
} | |||
.container tr th { | .container tr th { | ||
font-size: | font-size:15px; | ||
vertical-align:middle; | vertical-align:middle; | ||
text-align:center; | text-align:center; | ||
text-transform: uppercase; | |||
--font-family__header--campaign: 'Ubuntu Condensed', sans-serif; | |||
} | } | ||
/* Background story */ | /* Background story */ | ||
Line 393: | Line 579: | ||
page-break-before: always; | page-break-before: always; | ||
font-size:90%; | font-size:90%; | ||
max-width: 700px; | |||
hyphens: auto; | |||
} | } | ||
.container ul { | .container ul { | ||
Line 404: | Line 592: | ||
.statstable .image { | .statstable .image { | ||
width:128px; | width:128px; | ||
height: | height: 110px; | ||
overflow:hidden; | overflow:hidden; | ||
margin-left: -6px; | margin-left: -6px; | ||
Line 412: | Line 600: | ||
width:auto; | width:auto; | ||
} | } | ||
.statstable td, .statstable th { | .statstable tr td, .statstable tr th { | ||
text-align:center !important; | text-align:center !important; | ||
width: 110px; | width: 110px; | ||
font-size: | font-size:14px; | ||
line-height: | line-height: 18px; | ||
height: 22px; | |||
max-width:110px; | max-width:110px; | ||
overflow:hidden; | overflow:hidden; | ||
Line 423: | Line 612: | ||
} | } | ||
.statstable td:nth-child(1), .statstable th:nth-child(1) { | .statstable td:nth-child(1), .statstable th:nth-child(1) { | ||
width: | width: 140px; | ||
max-width: | max-width:140px; | ||
} | } | ||
.statstable td:nth-child(1), .statstable th:nth-child(1) { | .statstable td:nth-child(1), .statstable th:nth-child(1) { | ||
Line 435: | Line 624: | ||
.statstable tr:nth-child(odd) td { | .statstable tr:nth-child(odd) td { | ||
background-color: rgba(0,0,0,0.04); | background-color: rgba(0,0,0,0.04); | ||
} | |||
.statstable .class { | |||
background-repeat: no-repeat; | |||
background-size: contain; | |||
padding-left: 20px; | |||
width: 90px; | |||
} | } | ||
.statstable .ranger { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d6/Ranger.jpeg); | |||
} | |||
.statstable .barbarian { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/7/7c/Barbarian.jpeg); | |||
} | |||
.statstable .wizard{ | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/b/b3/Wizard.jpeg); | |||
} | |||
.statstable .bard { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/c/c8/Bard.jpeg); | |||
} | |||
.statstable .monk{ | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d4/Monk.jpeg); | |||
} | |||
.statstable .warlock { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/7/7b/Warlock.jpeg); | |||
} | |||
td. | td.ColorExtremeHigh { | ||
font-weight: bold !important; | font-weight: bold !important; | ||
color: #000 !important; | color: #000 !important; | ||
Line 452: | Line 665: | ||
0.1em -0.1em 1em #f40; | 0.1em -0.1em 1em #f40; | ||
} | } | ||
td. | td.ColorAlmostExtremeHigh{ | ||
font-weight: bold !important; | font-weight: bold !important; | ||
color: #000 !important; | color: #000 !important; | ||
Line 466: | Line 679: | ||
0.1em -0.1em 1em rgba(255,68,0, 0.7); | 0.1em -0.1em 1em rgba(255,68,0, 0.7); | ||
} | } | ||
td. | td.ColorVeryHigh { | ||
font-weight: bold !important; | font-weight: bold !important; | ||
color: #000 !important; | color: #000 !important; | ||
Line 480: | Line 693: | ||
0.1em -0.1em 1em rgba(255,68,0, 0.4); | 0.1em -0.1em 1em rgba(255,68,0, 0.4); | ||
} | } | ||
td. | td.ColorHigh { | ||
color: #000 !important; | color: #000 !important; | ||
font-size: 18px !important; | font-size: 18px !important; | ||
Line 493: | Line 706: | ||
0.1em -0.1em 1em rgba(255,68,0, 0.15); | 0.1em -0.1em 1em rgba(255,68,0, 0.15); | ||
} | } | ||
td. | td.ColorAvg { | ||
color: #000 !important; | color: #000 !important; | ||
font-size: 16px !important; | font-size: 16px !important; | ||
} | } | ||
td. | td.ColorLow { | ||
color: #888 !important; | color: #888 !important; | ||
font-size: 14px !important; | font-size: 14px !important; | ||
} | } | ||
Line 557: | Line 761: | ||
} | } | ||
/****************/ | /****************/ | ||
Line 826: | Line 860: | ||
color: #9a2e00!important; | color: #9a2e00!important; | ||
text-decoration:none !important; | text-decoration:none !important; | ||
} | } | ||
Line 923: | Line 912: | ||
} | } | ||
/**********************/ | /**********************/ | ||
/* TIMELESS SKIN CUST */ | /* TIMELESS SKIN CUST */ | ||
Line 1,417: | Line 1,031: | ||
background-color: rgba(0,0,0,0.5); | background-color: rgba(0,0,0,0.5); | ||
} | } | ||
Line 1,447: | Line 1,060: | ||
} | } | ||
/* Title improvement */ | /* Title improvement */ |
Latest revision as of 14:01, 10 November 2024
/* CSS placed here will be applied to all skins */
/* Get nice font! */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Almendra');
@import url('https://fonts.googleapis.com/css?family=Ubuntu Condensed');
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Rye');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
:root {
--font-family__header--campaign: 'Almendra', sans-serif;
}
/* Wood background */
body {
background: url("https://rpg.sandcat.nl/.sws/themes/wood-responsive//img/wood.jpg") repeat scroll 0 0 #ab8b4e;
}
/* Lighter background code sections */
.catlinks, pre, code, .mw-code {
background-color: rgba(255,255,255,0.5);
}
/* Hide Help Icon */
div#mw-indicator-mw-helplink{
display:none;
}
/* Page title + h1/h2 color+font */
.mw-page-title-main, h1, .mw-body h1, .mw-body-content h1, .mw-body-content h2 {
color: #9a2e00;
font-family: var(--font-family__header--campaign, var(--font-family__header));
}
.smallfont {
font-size:11px !important;
line-height:15px !important;
}
/* Links color*/
a, a:visited {
color: #9a2e00 !important;
text-decoration: none;
}
a.new, a.new:visited {
color: red !important;
text-decoration: none;
}
/* Footer color */
#footer-places a, #footer-places a:visited {
color: #ccc!important;
}
figure[typeof~='mw:File'].mw-halign-right {
margin: 2px 0 2px 10px;
}
figure[typeof~='mw:File'].mw-halign-left,
figure[typeof~='mw:File/Frameless'].mw-halign-left {
margin: 2px 20px 2px 0;
}
/* Base font */
html, body, button, input, select, textarea {
font-family: Verdana, Geneva, sans-serif;
}
span.circle {
height: 12px;
width: 12px;
border: 1px solid #202122;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
font-size: 10px;
text-align: center;
line-height: 12px;
margin-bottom:1px;
}
span.circle.black {
background-color:#202122;
color: #fff;
}
span.circle.small {
height: 8px;
width: 8px;
line-height: 8px;
margin-left:1px;
margin-bottom:2px;
}
/**************/
/* RPG Tables */
/**************/
.rpgtable img,
.mw-body-content table.rpgtable a > img,
.mw-body-content table.rpgtable .floatnone > img {
max-width:100% !important;
height:auto !important;
}
/* Customer scaling characters for character page */
.rpgtable .image.brolin img {
width: 260px;
height: auto !important;
max-width: none !important;
margin-left: -55px;
}
.rpgtable .image.dhanell img {
width: 240px;
height: auto !important;
max-width: none !important;
margin-left: -70px;
}
.rpgtable .image.frostbite img {
width: 200px;
height: auto !important;
max-width: none !important;
margin-left: -30px;
margin-top: -40px;
filter: contrast(1.25);
}
.rpgtable .image.zephyr img {
width: 250px;
height: auto !important;
max-width: none !important;
margin-left: -70px;
margin-top: -40px;
}
.rpgtable .image.maeve img {
width: 140px;
height: auto !important;
max-width: none !important;
}
.rpgtable {
background-color: rgba(255,255,255,0.5);
color: #202122;
margin: 12px 0;
border-collapse:collapse;
width:100%;
outline: 1px solid #999;
outline-style: solid;
outline-offset: -1px;
}
.container {
margin-top:-12px;
}
.rpgtable td p {
margin: 8px 0px 0px 0px;
}
.rpgtable th {
font-family: var(--font-family__header--campaign, var(--font-family__header)) !important;
height:20px;
padding:0px;
}
.rpgtable th div.shortinfo {
font-weight: normal;
font-size: 10px;
float: right;
margin-top: 4px;
}
.rpgtable > tr > th,
.rpgtable > tr > td,
.rpgtable > * > tr > th,
.rpgtable > * > tr > td {
padding: 1px 4px;
text-align: left;
}
.rpgtable > tr > th,
.rpgtable > * > tr > th {
padding: 1px 0px;
}
.rpgtable > tr > th,
.rpgtable > * > tr > th {
border: 1px solid #aaa;
}
.rpgtable > tr > td,
.rpgtable > * > tr > td {
border: 1px solid #ccc;
font-size: 12px;
line-height: 16px;
hyphens: auto;
}
.rpgtable > tr > th,
.rpgtable > * > tr > th {
background-color: rgba(50,50,50,0.3);
}
.rpgtable > caption {
font-weight: bold;
}
.rpgtable td {
height:18px;
line-height:18px;
font-family: roboto, cambria,Verdana,Geneva,sans-serif;
}
.rpgtable a.external {
background-image: none;
padding-right: 0px;
}
div .rpgtable td.smaller {
line-height:14px;
height:15px;
}
.leftcolumn {
float:left;
width: 141px;
width: calc(50% - 5px);
}
.rightcolumn {
float:right;
width: 141px;
width: calc(50% - 5px);
}
.leftcolumn.wider,
.rightcolumn.wider {
width: calc(75% - 5px);
}
.leftcolumn.smaller,
.rightcolumn.smaller{
width: calc(25% - 5px);
}
/*******************/
/* CHARACTER SHEET */
/*******************/
.rpgtable.character td {
border:0px;
vertical-align: top;
padding: 1px 0px 1px 4px;
}
.rpgtable.character td:nth-child(1),
.rpgtable.character td:nth-child(3)
{
font-size:12px;
}
.rpgtable.character td:nth-child(2),
.rpgtable.character td:nth-child(4)
{
font-size:13px;
}
.rpgtable.character tr td:nth-child(1) {
width:75px;
}
.rpgtable.level tr:nth-child(2) td {
height: 50px;
text-align:center;
}
.rpgtable.lost tr:nth-child(2) td {
text-align:center;
padding: 1px;
font-size: 11px;
line-height: 14px;
height: 28px;
}
.rpgtable.level tr:nth-child(3) td {
border-bottom:0px;
font-size:12px;
line-height:14px;
text-align: center;
}
.rpgtable.level tr:nth-child(4) td {
border-top:0px;
text-align: center;
vertical-align:middle;
height:22px;
}
.rpgtable.level tr:nth-child(2) td div {
height: 44px;
aspect-ratio: cos(30deg);
clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
background: #666;
color: #fff;
margin-left: 9px;
line-height: 45px;
font-size: 24px;
}
/* Stats */
.rpgtable.stats tr.big
{
height: 54.5px;
}
.rpgtable.stats .statModifier {
border-radius: 50%;
width: 46px;
height: 46px;
border: 2px solid #999;
text-align: center;
font-size: 26px;
margin-left: 20px;
margin-top: 1px;
margin-bottom: 1px;
float:left;
display: flex;
align-items: center;
justify-content: center;
background-color: #666;
border: 2px solid #666;
color:#fff;
}
.rpgtable.stats .statNumber {
float: right;
width: 46%;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height:52px;
}
.rpgtable.stats td
{
height: 16px;
line-height:14px;
border-right:0px;
border-left:0px;
}
.rpgtable.stats tr td
{
border-top:0px;
border-bottom:0px;
}
.rpgtable.stats tr:nth-child(3) td
{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
.rpgtable.stats tr:nth-child(3) td {
font-weight:bold;
}
.rpgtable.stats tr.big td
{
font-size:20px;
text-align: center;
}
.rpgtable.stats.heroic tr.big td {
font-size:40px;
}
.rpgtable.stats tr.big td:nth-child(2)
{
font-size:30px;
text-align: center;
}
.rpgtable.stats td:nth-child(2)
{
font-size:12px;
text-align:right;
padding-right:0px;
}
.rpgtable.stats td:nth-child(3)
{
font-size:12px;
}
.statsdiv .leftcolumn,
.statsdiv .rightcolumn {
margin-top: -12px;
}
/* AC, death saves, etc armorclass deathsaves hitpoints hitdice */
.rpgtable.armorclass td,
.rpgtable.deathsaves td,
.rpgtable.hitpoints td,
.rpgtable.hitdice td {
border:0px;
}
.rpgtable.armorclass tr.big td {
text-align:center;
}
.rpgtable.hitpoints tr:nth-child(2)
{
height:24px;
border-bottom: 1px solid #ccc;
}
.rpgtable.armorclass td:nth-child(1),
.rpgtable.hitpoints tr:nth-child(2) td:nth-child(2)
{
font-size:20px;
font-weight:normal;
}
.rpgtable.armorclass tr:nth-child(3) td
{
font-size:10px;
}
.rpgtable.armorclass tr:nth-child(2) td div.armorClass
{
/*height: 32px;
width: 32px;
float: left;
border: 2px solid #666;
border-radius: 50% 50% 50% 50% / 0% 0% 50% 50%;
background-color: #666;
color: #fff;
line-height: 30px;
font-size: 20px;
margin: 3px 0px;
margin-left: 52px;*/
height: 38px;
width: 36px;
float: left;
line-height: 32px;
font-size: 20px;
margin: 2px 0px;
margin-left: 50px;
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
background: #666;
color: #fff;
}
.rpgtable.armorclass tr:nth-child(2) td div.armorClassShield
{
height: 42px;
width: 60px;
text-align: right;
vertical-align: bottom;
display: table-cell;
font-size:10px;
}
.rpgtable.hitdice td
{
width:25%
}
/* More boxes*/
.rpgtable.box tr.big td
{
text-align:center;
font-size:16px;
}
.rpgtable.box tr.big.smallerfont td
{
font-size:14px;
}
/* Image */
.image .rpgtable td {
height:143px;
padding:0px;
background-color: #000;
}
.image .rpgtable .portrait {
height: 233px;
overflow: hidden;
}
/* Weapons */
.weapons .rpgtable tr th:nth-child(2),
.weapons .rpgtable tr th:nth-child(3) {
font-size:12px;
}
.weapons .rpgtable tr.weapon td:nth-child(2) {
text-align:center;
white-space: nowrap;
}
.weapons .rpgtable tr.weapon td:nth-child(3) {
text-align:center;
}
.weapons .rpgtable tr.weapon td {
border-bottom-style: dotted;
}
.weapons .rpgtable tr.notes td {
border-top-style: dotted;
font-size:11px;
font-style:italic;
line-height: 14px;
height: 14px;
}
.weapons .rpgtable tr.weapon td:nth-child(1) {
font-weight:bold;
}
.rpgtable.spellslots tr td:nth-child(1),
.rpgtable.spellslots tr td:nth-child(3),
.rpgtable.spellslots tr td:nth-child(5)
{
border-right:0px;
width:13%;
}
.rpgtable.spellslots tr td:nth-child(2),
.rpgtable.spellslots tr td:nth-child(4),
.rpgtable.spellslots tr td:nth-child(6)
{
border-left:0px;
width:20%;
font-weight:bold;
padding:1px;
}
.rpgtable.spellslots tr td.disabled {
color:#999;
}
/* Character container */
.container {
display: grid;
grid-template-columns: 32.5% 32.5% 32.5%;
column-gap: 10px;
row-gap: 10px;
font-family: var(--font-family__header--campaign, var(--font-family__header)) !important;
width:900px;
max-height: 1285px;
/*border-bottom: 2px dotted #ccc;*/
overflow: hidden;
line-height: 1;
}
/* lets put it in 1 column on a phone */
@media only screen and (max-width: 550px) {
.container{
grid-template-columns: 293px;
column-gap: 0px;
max-height: none;
/*zoom: 130%;*/
/*margin-top: -10px;*/
row-gap: 0px;
width: 293px;
}
}
.container tr th {
font-size:15px;
vertical-align:middle;
text-align:center;
text-transform: uppercase;
--font-family__header--campaign: 'Ubuntu Condensed', sans-serif;
}
/* Background story */
.background {
page-break-before: always;
font-size:90%;
max-width: 700px;
hyphens: auto;
}
.container ul {
margin: 0 0 0 1.6em;
padding:0px;
}
/****************************/
/* CHARACTER STATS OVERVIEW */
/****************************/
.statstable .image {
width:128px;
height: 110px;
overflow:hidden;
margin-left: -6px;
}
.statstable {
font-family: var(--font-family__header--campaign, var(--font-family__header));
width:auto;
}
.statstable tr td, .statstable tr th {
text-align:center !important;
width: 110px;
font-size:14px;
line-height: 18px;
height: 22px;
max-width:110px;
overflow:hidden;
white-space: nowrap;
position:relative;
}
.statstable td:nth-child(1), .statstable th:nth-child(1) {
width: 140px;
max-width:140px;
}
.statstable td:nth-child(1), .statstable th:nth-child(1) {
text-align:right !important;
}
.statstable td:has(> div.image) {
padding: 0px;
width: 128px;
}
.statstable tr:nth-child(odd) td {
background-color: rgba(0,0,0,0.04);
}
.statstable .class {
background-repeat: no-repeat;
background-size: contain;
padding-left: 20px;
width: 90px;
}
.statstable .ranger {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d6/Ranger.jpeg);
}
.statstable .barbarian {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/7/7c/Barbarian.jpeg);
}
.statstable .wizard{
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/b/b3/Wizard.jpeg);
}
.statstable .bard {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/c/c8/Bard.jpeg);
}
.statstable .monk{
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d4/Monk.jpeg);
}
.statstable .warlock {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/7/7b/Warlock.jpeg);
}
td.ColorExtremeHigh {
font-weight: bold !important;
color: #000 !important;
font-size: 18px !important;
text-shadow:
0 -0.05em 0.2em #fff,
0.01em -0.02em 0.15em #fe0,
0.01em -0.05em 0.15em #fc0,
0.02em -0.15em 0.2em #f90,
0.04em -0.2em 0.3em #f70,
0.05em -0.25em 0.4em #f70,
0.06em -0.2em 0.9em #f50,
0.1em -0.1em 1em #f40;
}
td.ColorAlmostExtremeHigh{
font-weight: bold !important;
color: #000 !important;
font-size: 18px !important;
text-shadow:
0 -0.05em 0.2em rgba(255,255,255, 0.7),
0.01em -0.02em 0.15em rgba(255, 238, 0, 0.7),
0.01em -0.05em 0.15em rgba(255,204,0, 0.7),
0.02em -0.15em 0.2em rgba(255,153,0, 0.7),
0.04em -0.2em 0.3em rgba(255,119,0, 0.7),
0.05em -0.25em 0.4em rgba(255,85,0, 0.7),
0.06em -0.2em 0.9em rgba(255,68,0, 0.7),
0.1em -0.1em 1em rgba(255,68,0, 0.7);
}
td.ColorVeryHigh {
font-weight: bold !important;
color: #000 !important;
font-size: 18px !important;
text-shadow:
0 -0.05em 0.2em rgba(255,255,255, 0.4),
0.01em -0.02em 0.15em rgba(255, 238, 0, 0.4),
0.01em -0.05em 0.15em rgba(255,204,0, 0.4),
0.02em -0.15em 0.2em rgba(255,153,0, 0.4),
0.04em -0.2em 0.3em rgba(255,119,0, 0.4),
0.05em -0.25em 0.4em rgba(255,85,0, 0.4),
0.06em -0.2em 0.9em rgba(255,68,0, 0.4),
0.1em -0.1em 1em rgba(255,68,0, 0.4);
}
td.ColorHigh {
color: #000 !important;
font-size: 18px !important;
text-shadow:
0 -0.05em 0.2em rgba(255,255,255, 0.15),
0.01em -0.02em 0.15em rgba(255, 238, 0, 0.15),
0.01em -0.05em 0.15em rgba(255,204,0, 0.15),
0.02em -0.15em 0.2em rgba(255,153,0, 0.15),
0.04em -0.2em 0.3em rgba(255,119,0, 0.15),
0.05em -0.25em 0.4em rgba(255,85,0, 0.15),
0.06em -0.2em 0.9em rgba(255,68,0, 0.15),
0.1em -0.1em 1em rgba(255,68,0, 0.15);
}
td.ColorAvg {
color: #000 !important;
font-size: 16px !important;
}
td.ColorLow {
color: #888 !important;
font-size: 14px !important;
}
/**************/
/* ARK SHEET */
/**************/
.cheatsheet .rpgtable {
margin: 0px;
}
.cheatsheet tr td {
font-size: 90%;
height: auto;
}
.cheatsheet p {
margin: 0 0;
}
.cheatsheet ul {
margin: 0.3em 0 0.3em 1.6em;
padding:0px;
}
.cheatsheet .content-table-wrapper,
.cheatsheet .content-table,
.cheatsheet .rpgtable,
.cheatsheet .rpgtable tr:nth-child(2) {
height:100%;
}
.container.cheatsheet .rpgtable td {
vertical-align: top;
}
.cheatsheet .range th:nth-child(2),
.cheatsheet .range th:nth-child(3),
.cheatsheet .range th:nth-child(4),
.cheatsheet .range th:nth-child(5),
.cheatsheet .cover th:nth-child(2),
.cheatsheet .cover th:nth-child(4){
font-size: 80%;
}
.cheatsheet .range th:nth-child(4),
.cheatsheet .range td:nth-child(4),
.cheatsheet .range th:nth-child(5),
.cheatsheet .range td:nth-child(5),
.cheatsheet .cover th:nth-child(2),
.cheatsheet .cover td:nth-child(2),
.cheatsheet .cover th:nth-child(4),
.cheatsheet .cover td:nth-child(4) {
text-align:center;
}
/****************/
/* SESSION LOG */
/****************/
.sessionlog {
margin: auto;
max-width: 850px;
}
.sessionlog p {
margin: 0 0 1em 0;
}
.sessionlog h2 {
text-align:center;
}
.sessionlog .date {
float: right;
}
.sessionlog .author {
padding-bottom: 5px;
}
.sessionlog .authorimage {
width: 100px;
height: 100px;
overflow:hidden;
margin-right:10px;
float: left;
position: relative;
z-index: 999;
border: 1px solid black;
box-shadow: 0px 0px 5px 0px #888;
}
.sessionlogs .logrow td:nth-child(1),
.sessionlogs th:nth-child(1) {
text-align: center;
max-width:25px;
}
.sessionlogs .sessionrow td {
border-top:unset;
}
.sessionlogs td {
font-size:90%;
}
.sessionlogs .logrow td:nth-child(2),
.sessionlogs .logrow td:nth-child(4),
.sessionlogs .logrow td:nth-child(5) {
max-width:100px;
}
.sessionlogs tr.even {
background-color: rgb(0,0,0,0.05);
}
/**********************/
/* SESSION NAVIGATION */
/**********************/
.rpgtable.sessionnav {
width:auto;
margin: 0 auto;
background:none;
border:0px;
outline:0px;
}
.rpgtable.sessionnav td {
width:100px;
text-align:center;
line-height:20px;
border:0px;
width:20%;
}
.rpgtable.sessionnav tr:nth-child(1) td {
font-family: var(--font-family__header--campaign, var(--font-family__header));
border-bottom:0px;
font-size: 70%;
color:#666;
}
.rpgtable.sessionnav tr:nth-child(2) td {
border-top:0px;
border-bottom:0px;
color: #9a2e00;
font-family: var(--font-family__header--campaign, var(--font-family__header));
font-weight:bold;
font-size:22px;
}
.rpgtable.sessionnav tr:nth-child(3) td {
border-top:0px;
font-size: 90%;
vertical-align: top;
}
.rpgtable.sessionnav tr:nth-child(2) td.disabled {
color: rgba(50,50,50, 0.3);
}
.rpgtable.sessionnav tr:nth-child(2) td.selected {
color: #9a2e00;
}
.rpgtable.sessionnav tr:nth-child(2) td a,
.rpgtable.sessionnav tr:nth-child(2) td a:visited,
.rpgtable.sessionnav tr:nth-child(2) td a:hover {
color: #9a2e00!important;
text-decoration:none !important;
}
.rpgtable.glossary td:nth-child(3),
.rpgtable.glossary td:nth-child(4),
.rpgtable.glossary td:nth-child(5),
.rpgtable.glossary td:nth-child(6),
.rpgtable.glossary td:nth-child(7)
{
font-size: 80%;
}
.rpgtable.glossary td:nth-child(7)
{
min-width:300px;
}
.rpgtable.glossary td:nth-child(1) {
width:80px;
}
.rpgtable.glossary td:nth-child(2) {
white-space: nowrap;
}
.rpgtable.glossary tr:nth-child(odd) td {
background-color: rgba(0,0,0,0.04);
}
.rpgtable.glossary td.image {
padding:0px;
text-align:center;
overflow:hidden;
}
.rpgtable.glossary .npcrow.dead {
background-color: rgba(0,0,0,0.2);
}
.rpgtable.glossary .npcrow.dead img {
filter: brightness(60%);
}
.rpgtable.glossary .npcimage {
width:80px;
max-height: 61px;
overflow:hidden;
margin-left: 0px;
margin-top:-5px;
}
.npcpageimage {
float:right;
width:40%;
padding-left:10px
}
/**********************/
/* TIMELESS SKIN CUST */
/**********************/
/* title height */
body.skin-timeless #p-logo-text a.long {
font-size: 1.6em;
padding: 0.3em 0.75em 0 0;
font-family: var(--font-family__header--campaign,var(--font-family__header));
font-variant: normal;
}
body.skin-timeless .mw-page-title-main,
body.skin-timeless h1,
body.skin-timeless h2,
body.skin-timeless h3,
body.skin-timeless .mw-body h1,
body.skin-timeless .mw-body-content h1,
body.skin-timeless .mw-body-content h2,
body.skin-timeless #mw-site-navigation h2,
body.skin-timeless #mw-related-navigation h2
body.skin-timeless #personal h2 {
font-family: var(--font-family__header--campaign,var(--font-family__header)) !important;
}
body.skin-timeless h3 {
font-size: 1.2em !important;
font-weight:bold;
}
body.skin-timeless .mw-portlet a:visited,
body.skin-timeless .toctogglelabel {
color: #9a2e00 !important;
}
body.skin-timeless #mw-content-container {
background:none;
}
body.skin-timeless .color-bar .color-left,
body.skin-timeless .color-bar .color-right,
body.skin-timeless .color-bar .color-middle {
background: #9a2e00;
}
body.skin-timeless #mw-header-container,
body.skin-timeless #mw-header-nav-hack,
body.skin-timeless #mw-content,
body.skin-timeless #site-navigation,
body.skin-timeless #site-tools,
body.skin-timeless #catlinks-sidebar,
body.skin-timeless #page-tools,
body.skin-timeless #content-bottom-stuff
{
background: url(https://rpg.sandcat.nl/.sws/themes/wood-responsive//img/paper.jpg) repeat scroll 0 0 #ab8b4e;
}
body.skin-timeless .sidebar-inner,
body.skin-timeless #personal-inner {
background: url(https://rpg.sandcat.nl/.sws/themes/wood-responsive//img/paper.jpg) repeat scroll 0 0 #ab8b4e;
}
body.skin-timeless #simpleSearch {
background: rgba(255,255,255,0.7);
}
/* Hiden Wiki tools on left panel*/
body.skin-timeless #site-tools {
display:none;
}
body.skin-timeless .mw-body h1.firstHeading,
body.skin-timeless .tools-inline li.selected {
border-bottom: 1px solid #a2a9b1;
}
body.skin-timeless #mw-content-container {
border-bottom: solid 4px #9a2e00;
}
/* stretch with content for small screen*/
body.skin-timeless center {
overflow:auto;
}
body.skin-timeless .mw-image-border > a:first-child > *:first-child:not(.mw-broken-media),
body.skin-timeless .mw-image-border > span:first-child > *:first-child:not(.mw-broken-media) {
border: 1px solid #9a2e00;
}
body.skin-timeless ul#filetoc,
body.skin-timeless .toc,
body.skin-timeless .toccolours,
body.skin-timeless .mw-warning {
background: rgba(255,255,255,0.5);
}
@media screen and (min-width: 1340px) {
body.skin-timeless #mw-site-navigation .sidebar-chunk {
padding: 1em 1em 0;
}
}
@media print
{
body.skin-timeless #mw-content {
background:none;
}
body.skin-timeless center {
overflow:visible;
}
}
/* width */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
/* Track */
::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.15);
border-radius: 8px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.3);
border-radius: 8px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0,0.5);
}
/* One-sided navigation menu */
@media screen and (min-width: 1340px) and (max-width:1460px) {
#mw-content-block {
display: block;
}
#mw-content,
#content-bottom-stuff {
margin-left: 14em;
}
#mw-content-wrapper {
float: right;
margin-left: -14em;
width: 100%;
}
#mw-related-navigation {
width: 14em;
padding: 0 1em 0 0;
}
div.color-middle {
margin-right: 0;
}
.mw-wiki-logo {
display: inline-block;
}
}
/* Title improvement */
body.skin-timeless #p-logo-text a.long {
padding:0px 20px;
font-variant:small-caps;
font-size: 1.5em;
font-weight: bold;
}