Template:CharacterSheet: Difference between revisions
No edit summary |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/* 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=Metal Mania'); | |||
@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: 'Metal Mania', 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)); | |||
text-shadow: 2px 2px 6px rgba(136,8,8, 0.3) | |||
} | |||
.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; | |||
} | |||
.rpgtable figure[typeof~='mw:File'].mw-halign-right { | |||
margin: 0px; | |||
} | |||
/* 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 0 0; | |||
border-collapse:collapse; | |||
width:100%; | |||
outline: 1px solid #999; | |||
outline-style: solid; | |||
outline-offset: -1px; | |||
} | |||
div.container { | |||
margin-top:-12px; | |||
} | |||
div.container ~ .container { | |||
margin-top:0px; | |||
} | |||
.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; | |||
line-height:normal; | |||
} | |||
.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; | |||
line-height:normal; | |||
} | |||
.container .rpgtable > tr > th, | |||
.container .rpgtable > * > tr > th { | |||
padding: 1px 0px; | |||
line-height:normal; | |||
} | |||
.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); | |||
} | |||
.firstcolumn { | |||
float:left; | |||
width: calc(33% - 5px); | |||
} | |||
.secondcolumn { | |||
float:left; | |||
margin-left: 9px; | |||
width: calc(33% - 5px); | |||
} | |||
.thirdcolumn { | |||
float:right; | |||
width: calc(33% - 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.hitdice tr:nth-child(2) td { | |||
height: 32px; | |||
} | |||
.rpgtable.armorclass tr:nth-child(2) td { | |||
height: 56px; | |||
padding-bottom:5px; | |||
} | |||
.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, | |||
.levelIcon { | |||
height: 54px; | |||
aspect-ratio: cos(30deg); | |||
clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0); | |||
background: #666; | |||
color: #fff; | |||
margin-left: 9px; | |||
line-height: 55px; | |||
font-size: 26px; | |||
} | |||
/* 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: 0px; | |||
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 { | |||
font-size: 22px; | |||
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; | |||
width:90px; | |||
} | |||
.rpgtable.stats tr td | |||
{ | |||
border-top:0px; | |||
border-bottom:0px; | |||
} | |||
.rpgtable.stats tr:nth-child(3) td | |||
{ | |||
border-bottom:1px solid #ccc; | |||
} | |||
.rpgtable.stats tr td:nth-child(2) | |||
{ | |||
border-left:1px solid #ccc; | |||
border-right:1px solid #ccc; | |||
} | |||
.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 | |||
{ | |||
font-size:12px; | |||
text-align:center; | |||
padding-right:5px; | |||
padding-left:5px; | |||
} | |||
.rpgtable.stats td:nth-child(3) | |||
{ | |||
font-size: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 td, | |||
.rpgtable.hitpoints tr td { | |||
text-align:center; | |||
} | |||
.rpgtable.hitpoints tr:nth-child(2) td:nth-child(1), | |||
.rpgtable.hitpoints tr:nth-child(2) td:nth-child(3) | |||
{ | |||
font-size: 9px; | |||
width: 15%; | |||
padding: 0px; | |||
} | |||
.rpgtable.hitpoints tr td div.staggered, | |||
.rpgtable.hitpoints tr td div.dead { | |||
height: 24px; | |||
line-height: 30px; | |||
font-size: 16px; | |||
} | |||
.rpgtable.hitpoints tr td div.currenthp, | |||
.rpgtable.hitpoints tr td div.temphp { | |||
background-color: rgba(255, 255, 255, 0.5); | |||
border: 1px solid #999; | |||
height: 80px; | |||
border-radius: 8px; | |||
font-size: 10px; | |||
line-height: 14px; | |||
} | |||
.rpgtable.hitpoints tr td div.temphp { | |||
height: 30px; | |||
margin-bottom: 2px; | |||
} | |||
.rpgtable.hitpoints tr td div.maxhp { | |||
z-index:1; | |||
height: 45px; | |||
width: 58px; | |||
text-align:center; | |||
line-height: 40px; | |||
font-size: 20px; | |||
margin: 0 auto; | |||
color: #fff; | |||
margin-top:5px; | |||
margin-bottom:5px; | |||
position: relative; | |||
} | |||
.rpgtable.hitpoints tr td div.maxhp:before, | |||
.rpgtable.hitpoints tr td div.maxhp:after { | |||
position: absolute; | |||
content: ""; | |||
left: 30px; | |||
top: 0; | |||
width: 30px; | |||
height: 48px; | |||
background: #666; | |||
border-radius: 50px 50px 0 0; | |||
transform: rotate(-45deg); | |||
transform-origin: 0 100%; | |||
z-index:-9; | |||
} | |||
.rpgtable.hitpoints tr td div.maxhp:after { | |||
left: 0; | |||
transform: rotate(45deg); | |||
transform-origin :100% 100%; | |||
z-index:-999; | |||
} | |||
.rpgtable.hitpoints tr td div.recoveryDies { | |||
background: #666; | |||
height: 24px; | |||
position: relative; | |||
margin: 0 auto; | |||
line-height: 24px; | |||
font-size: 14px; | |||
width: 60px; | |||
color: #fff; | |||
margin-bottom: 18px; | |||
margin-top: 20px; | |||
z-index: 1; | |||
} | |||
.rpgtable.hitpoints tr td div.recoveryDies:after { | |||
background: #666; | |||
content: ""; | |||
height: 60px; | |||
top: -18px; | |||
position: absolute; | |||
left: 18px; | |||
width: 24px; | |||
z-index: -9; | |||
} | |||
.rpgtable.hitpoints tr td span.skull { | |||
text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000; | |||
opacity: 0.2; | |||
font-size: 16px; | |||
} | |||
.rpgtable.hitpoints tr td span.skull.active { | |||
opacity: 1; | |||
} | |||
.rpgtable.hitpoints tr td span.skull.large { | |||
font-size:20px; | |||
} | |||
.rpgtable.armorclass tr td | |||
{ | |||
font-size:11px; | |||
line-height:12px; | |||
} | |||
.rpgtable.armorclass tr td div.ac, | |||
.rpgtable.armorclass tr td div.pd, | |||
.rpgtable.armorclass tr td div.md | |||
{ | |||
height: 42px; | |||
width: 36px; | |||
line-height: 36px; | |||
font-size: 20px; | |||
margin: 0 auto; | |||
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%); | |||
background: #666; | |||
color: #fff; | |||
margin-top:5px; | |||
margin-bottom:5px; | |||
} | |||
.rpgtable.armorclass tr td div.ac | |||
{ | |||
margin-top:5px; | |||
height: 48px; | |||
width: 42px; | |||
line-height: 42px; | |||
font-size: 26px; | |||
} | |||
.rpgtable.armorclass tr td div.init { | |||
border-radius: 50%; | |||
width: 36px; | |||
height: 36px; | |||
text-align: center; | |||
font-size: 20px; | |||
margin: 0 auto; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: #666; | |||
color: #fff; | |||
margin-top:5px; | |||
margin-bottom:5px; | |||
} | |||
.rpgtable.hitdice td:nth-child(1) | |||
{ | |||
width:25%; | |||
text-align:right; | |||
font-size:13px; | |||
} | |||
/* More boxes*/ | |||
.rpgtable.box tr.big td | |||
{ | |||
text-align:center; | |||
font-size:16px; | |||
} | |||
.rpgtable.box tr.big.smallerfont td | |||
{ | |||
font-size:13px; | |||
} | |||
/* Image */ | |||
.image .rpgtable td { | |||
height:143px; | |||
padding:0px; | |||
background-color: #000; | |||
} | |||
.image .rpgtable .portrait { | |||
height: 190px; | |||
overflow: hidden; | |||
} | |||
div.displaysection { | |||
} | |||
/* Weapons */ | |||
.weapons p { | |||
display:none; | |||
} | |||
.weapons .rpgtable tr.weapon td:nth-child(2), | |||
.weapons .rpgtable tr.weapon td:nth-child(3), | |||
.weapons .rpgtable tr.weapon td:nth-child(4) { | |||
text-align:center; | |||
white-space: nowrap; | |||
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:13px; | |||
line-height: 18px; | |||
height: 22px; | |||
max-width:110px; | |||
min-width:110px; | |||
overflow:hidden; | |||
white-space: nowrap; | |||
position:relative; | |||
} | |||
.statstable tr th { | |||
font-size:15px; | |||
} | |||
.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: 40px; | |||
width: 70px; | |||
min-width: 70px; | |||
white-space: normal; | |||
} | |||
.container .ranger, .container .ranger🎯 { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d6/Ranger.jpeg); | |||
width:12px; | |||
background-repeat: no-repeat; | |||
background-size: contain; | |||
} | |||
.statstable .ranger, .statstable .ranger🎯 { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d6/Ranger.jpeg); | |||
} | |||
.statstable .ranger.rogue, | |||
.statstable .ranger🎯.rogue, | |||
.statstable .ranger🎯.rogue🗡️{ | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/1/16/Rangerrogue.jpg); | |||
} | |||
.statstable .barbarian { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/7/7c/Barbarian.jpeg); | |||
} | |||
.statstable .barbarian.druid { | |||
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/a/ab/Barbdruid.jpg); | |||
} | |||
.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: 17px !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: 17px !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; | |||
} | |||
td.prof1:after, td.prof2:after { | |||
margin: 6px; | |||
content: "*"; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
z-index: -1; | |||
font-weight:normal; | |||
text-shadow: none; | |||
font-size:14px; | |||
} | |||
td.prof2:after { | |||
content: "**"; | |||
} | |||
/**************/ | |||
/* 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[rowspan]:nth-child(1) | |||
{ | |||
text-align: center; | |||
} | |||
.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); | |||
} | |||
.halftransparentImage { | |||
opacity: 0.5; | |||
height: 45px !important; | |||
width: 34px !important; | |||
} | |||
/**********************/ | |||
/* 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:10px; | |||
} | |||
.rpgtable.glossary td:nth-child(2) { | |||
width:80px; | |||
} | |||
.rpgtable.glossary td:nth-child(3) { | |||
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 | |||
} | |||
/* TOOLTIP */ | |||
.tooltip { | |||
position: relative; | |||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ | |||
} | |||
/* Tooltip text */ | |||
.tooltip .tooltiptext { | |||
visibility: hidden; | |||
width: 120px; | |||
background-color: black; | |||
color: #fff; | |||
text-align: center; | |||
padding: 5px 0; | |||
border-radius: 6px; | |||
font-family: roboto, cambria,Verdana,Geneva,sans-serif; | |||
font-size: 12px; | |||
font-weight: normal; | |||
/* Position the tooltip text - see examples below! */ | |||
position: absolute; | |||
z-index: 1; | |||
} | |||
/* Show the tooltip text when you mouse over the tooltip container */ | |||
.tooltip:hover .tooltiptext { | |||
visibility: visible; | |||
} | |||
/**********************/ | |||
/* TIMELESS SKIN CUST */ | |||
/**********************/ | |||
/* title height */ | |||
body.skin-timeless #p-logo-text a { | |||
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{ | |||
padding:0px 20px; | |||
font-size: 2.1em; | |||
text-shadow: 2px 2px 6px rgba(136,8,8, 0.5) | |||
/*font-weight: bold;*/ | |||
} | |||
/* table sorter improvements for this styling */ | |||
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), | |||
.jquery-tablesorter th.headerSort { | |||
padding-right: 0px; | |||
background-size: 17px; | |||
} | |||
.statstable.rpgtable.sortable tr th:first-child, | |||
.questlog.rpgtable.sortable tr th { | |||
padding-right:18px; | |||
} |
Revision as of 22:17, 29 August 2025
/* 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=Metal Mania'); @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: 'Metal Mania', 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)); text-shadow: 2px 2px 6px rgba(136,8,8, 0.3)
}
.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;
}
.rpgtable figure[typeof~='mw:File'].mw-halign-right {
margin: 0px;
}
/* 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 0 0; border-collapse:collapse; width:100%; outline: 1px solid #999; outline-style: solid; outline-offset: -1px;
}
div.container {
margin-top:-12px;
}
div.container ~ .container {
margin-top:0px;
}
.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; line-height:normal;
}
.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; line-height:normal;
}
.container .rpgtable > tr > th,
.container .rpgtable > * > tr > th {
padding: 1px 0px; line-height:normal;
}
.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);
}
.firstcolumn {
float:left; width: calc(33% - 5px);
}
.secondcolumn {
float:left; margin-left: 9px; width: calc(33% - 5px);
} .thirdcolumn {
float:right; width: calc(33% - 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.hitdice tr:nth-child(2) td {
height: 32px;
} .rpgtable.armorclass tr:nth-child(2) td {
height: 56px; padding-bottom:5px;
}
.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, .levelIcon {
height: 54px; aspect-ratio: cos(30deg); clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0); background: #666; color: #fff; margin-left: 9px; line-height: 55px; font-size: 26px;
}
/* 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: 0px; 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 {
font-size: 22px; 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; width:90px;
}
.rpgtable.stats tr td {
border-top:0px; border-bottom:0px;
} .rpgtable.stats tr:nth-child(3) td {
border-bottom:1px solid #ccc;
}
.rpgtable.stats tr td:nth-child(2) {
border-left:1px solid #ccc; border-right:1px solid #ccc;
}
.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 {
font-size:12px; text-align:center; padding-right:5px; padding-left:5px;
} .rpgtable.stats td:nth-child(3) {
font-size: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 td,
.rpgtable.hitpoints tr td {
text-align:center;
}
.rpgtable.hitpoints tr:nth-child(2) td:nth-child(1), .rpgtable.hitpoints tr:nth-child(2) td:nth-child(3)
{ font-size: 9px; width: 15%; padding: 0px;
}
.rpgtable.hitpoints tr td div.staggered, .rpgtable.hitpoints tr td div.dead {
height: 24px; line-height: 30px; font-size: 16px;
}
.rpgtable.hitpoints tr td div.currenthp, .rpgtable.hitpoints tr td div.temphp {
background-color: rgba(255, 255, 255, 0.5); border: 1px solid #999; height: 80px; border-radius: 8px; font-size: 10px;
line-height: 14px; } .rpgtable.hitpoints tr td div.temphp {
height: 30px; margin-bottom: 2px;
}
.rpgtable.hitpoints tr td div.maxhp {
z-index:1; height: 45px; width: 58px; text-align:center; line-height: 40px; font-size: 20px; margin: 0 auto; color: #fff; margin-top:5px; margin-bottom:5px; position: relative;
} .rpgtable.hitpoints tr td div.maxhp:before, .rpgtable.hitpoints tr td div.maxhp:after {
position: absolute; content: ""; left: 30px; top: 0; width: 30px; height: 48px; background: #666; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; z-index:-9;
} .rpgtable.hitpoints tr td div.maxhp:after {
left: 0; transform: rotate(45deg); transform-origin :100% 100%; z-index:-999;
}
.rpgtable.hitpoints tr td div.recoveryDies {
background: #666; height: 24px; position: relative; margin: 0 auto; line-height: 24px; font-size: 14px; width: 60px; color: #fff; margin-bottom: 18px; margin-top: 20px; z-index: 1; }
.rpgtable.hitpoints tr td div.recoveryDies:after {
background: #666; content: ""; height: 60px; top: -18px; position: absolute; left: 18px; width: 24px; z-index: -9; }
.rpgtable.hitpoints tr td span.skull { text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000;
opacity: 0.2; font-size: 16px;
} .rpgtable.hitpoints tr td span.skull.active { opacity: 1; } .rpgtable.hitpoints tr td span.skull.large { font-size:20px; }
.rpgtable.armorclass tr td {
font-size:11px; line-height:12px;
}
.rpgtable.armorclass tr td div.ac, .rpgtable.armorclass tr td div.pd, .rpgtable.armorclass tr td div.md {
height: 42px; width: 36px; line-height: 36px; font-size: 20px; margin: 0 auto; clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%); background: #666; color: #fff; margin-top:5px; margin-bottom:5px;
}
.rpgtable.armorclass tr td div.ac {
margin-top:5px; height: 48px; width: 42px; line-height: 42px; font-size: 26px;
} .rpgtable.armorclass tr td div.init {
border-radius: 50%; width: 36px; height: 36px; text-align: center; font-size: 20px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #666; color: #fff; margin-top:5px; margin-bottom:5px;
}
.rpgtable.hitdice td:nth-child(1) {
width:25%; text-align:right; font-size:13px;
}
/* More boxes*/ .rpgtable.box tr.big td {
text-align:center; font-size:16px;
}
.rpgtable.box tr.big.smallerfont td {
font-size:13px;
}
/* Image */ .image .rpgtable td {
height:143px; padding:0px; background-color: #000;
} .image .rpgtable .portrait { height: 190px; overflow: hidden; }
div.displaysection { }
/* Weapons */ .weapons p {
display:none;
}
.weapons .rpgtable tr.weapon td:nth-child(2), .weapons .rpgtable tr.weapon td:nth-child(3), .weapons .rpgtable tr.weapon td:nth-child(4) {
text-align:center; white-space: nowrap; 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:13px; line-height: 18px; height: 22px; max-width:110px; min-width:110px; overflow:hidden; white-space: nowrap; position:relative;
} .statstable tr th {
font-size:15px;
} .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: 40px; width: 70px; min-width: 70px; white-space: normal;
}
.container .ranger, .container .ranger🎯 {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d6/Ranger.jpeg); width:12px; background-repeat: no-repeat; background-size: contain;
}
.statstable .ranger, .statstable .ranger🎯 {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/d/d6/Ranger.jpeg);
} .statstable .ranger.rogue, .statstable .ranger🎯.rogue, .statstable .ranger🎯.rogue🗡️{
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/1/16/Rangerrogue.jpg);
} .statstable .barbarian {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/7/7c/Barbarian.jpeg);
} .statstable .barbarian.druid {
background-image: url(https://rpg.sandcat.nl/wbtw2024/images/a/ab/Barbdruid.jpg);
} .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: 17px !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: 17px !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;
}
td.prof1:after, td.prof2:after {
margin: 6px; content: "*"; position: absolute; top: 0; right: 0; z-index: -1; font-weight:normal; text-shadow: none; font-size:14px;
}
td.prof2:after {
content: "**";
}
/**************/ /* 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[rowspan]:nth-child(1) {
text-align: center;
}
.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);
}
.halftransparentImage {
opacity: 0.5; height: 45px !important; width: 34px !important;
}
/**********************/ /* 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:10px;
} .rpgtable.glossary td:nth-child(2) {
width:80px;
} .rpgtable.glossary td:nth-child(3) {
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
}
/* TOOLTIP */ .tooltip {
position: relative; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */ .tooltip .tooltiptext {
visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; font-family: roboto, cambria,Verdana,Geneva,sans-serif; font-size: 12px; font-weight: normal; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */ .tooltip:hover .tooltiptext {
visibility: visible;
}
/**********************/ /* TIMELESS SKIN CUST */ /**********************/ /* title height */ body.skin-timeless #p-logo-text a {
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{
padding:0px 20px; font-size: 2.1em; text-shadow: 2px 2px 6px rgba(136,8,8, 0.5) /*font-weight: bold;*/
}
/* table sorter improvements for this styling */ .client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort {
padding-right: 0px; background-size: 17px;
}
.statstable.rpgtable.sortable tr th:first-child, .questlog.rpgtable.sortable tr th {
padding-right:18px;
}