Files
roll20-character-sheets/Miseries & Misfortunes/css/die.css
T

147 lines
3.7 KiB
CSS

.sheet-die-container {
position: relative;
min-height: 50px;
}
.sheet-die-container span {
position: absolute;
}
.sheet-d4 {
font-family: 'dicefontd4';
}
.sheet-d6 {
font-family: 'dicefontd6';
}
.sheet-d8 {
font-family: 'dicefontd8';
}
.sheet-d10 {
font-family: 'dicefontd10';
}
.sheet-d12 {
font-family: 'dicefontd12';
}
.sheet-d20 {
font-family: 'dicefontd20';
}
.sheet-d100 {
font-family: 'dicefontd10';
}
input.sheet-dietype-flag[value='d4'] ~ .sheet-d4,
input.sheet-dietype-flag[value='d6'] ~ .sheet-d6,
input.sheet-dietype-flag[value='d8'] ~ .sheet-d8,
input.sheet-dietype-flag[value='d10'] ~ .sheet-d10,
input.sheet-dietype-flag[value='d12'] ~ .sheet-d12,
input.sheet-dietype-flag[value='d20'] ~ .sheet-d20,
input.sheet-dietype-flag[value='d100'] ~ .sheet-d100,
input.sheet-dietype-flag[value='d4'] ~ button .sheet-die-container .sheet-d4,
input.sheet-dietype-flag[value='d6'] ~ button .sheet-die-container .sheet-d6,
input.sheet-dietype-flag[value='d8'] ~ button .sheet-die-container .sheet-d8,
input.sheet-dietype-flag[value='d10'] ~ button .sheet-die-container .sheet-d10,
input.sheet-dietype-flag[value='d12'] ~ button .sheet-die-container .sheet-d12,
input.sheet-dietype-flag[value='d20'] ~ button .sheet-die-container .sheet-d20,
input.sheet-dietype-flag[value='d100'] ~ button .sheet-die-container .sheet-d100 {
display: initial;
font-size: 3.5em;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #2a2d80;
text-shadow: rgb(0, 0, 0) 0px 0px 3px;
z-index: 1;
top: 14px;
opacity: 0.8;
}
input.sheet-dietype-flag[value='d100'] ~ button .sheet-die-container .sheet-tn {
letter-spacing: 0.95em;
margin-left: 0.5em;
}
.sheet-d4::after,
.sheet-d6::after,
.sheet-d8::after,
.sheet-d10::after,
.sheet-d12::after,
.sheet-d20::after {
content: '0';
}
.sheet-d100::after {
content: '00';
}
.sheet-tn {
border: none;
background-color: transparent;
font-size: 2em;
z-index: 2;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 16px;
text-shadow: -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff;
}
.sheet-die-container-skill {
position: relative;
min-height: 15px;
display: inline-block;
}
.sheet-die-container-skill .sheet-tn {
font-size: 1em;
}
input.sheet-dietype-flag[value='0'] ~ .sheet-d10,
input.sheet-dietype-flag[value='1'] ~ .sheet-d6,
input.sheet-dietype-flag[value='2'] ~ .sheet-d6,
input.sheet-dietype-flag[value='3'] ~ .sheet-d6,
input.sheet-dietype-flag[value='4'] ~ .sheet-d6,
input.sheet-dietype-flag[value='5'] ~ .sheet-d6,
input.sheet-dietype-flag[value='6'] ~ .sheet-d8,
input.sheet-dietype-flag[value='7'] ~ .sheet-d10,
input.sheet-dietype-flag[value='8'] ~ .sheet-d12,
input.sheet-dietype-flag[value='9'] ~ .sheet-d20,
input.sheet-dietype-flag[value='10'] ~ .sheet-d100,
input.sheet-dietype-flag[value='11'] ~ .sheet-d100,
input.sheet-dietype-flag[value='12'] ~ .sheet-d100,
input.sheet-dietype-flag[value='13'] ~ .sheet-d100 {
display: initial;
font-size: 1.7em;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: #2a2d80;
text-shadow: rgb(0, 0, 0) 0px 0px 3px;
z-index: 1;
top: 14px;
opacity: 0.8;
}
input.sheet-dietype-flag[value='10'] ~ .sheet-tn,
input.sheet-dietype-flag[value='11'] ~ .sheet-tn,
input.sheet-dietype-flag[value='12'] ~ .sheet-tn,
input.sheet-dietype-flag[value='13'] ~ .sheet-tn {
letter-spacing: 0.95em;
margin-left: 0.5em;
}
input.sheet-dietype-flag[value='10'] ~ .sheet-d100,
input.sheet-dietype-flag[value='11'] ~ .sheet-d100,
input.sheet-dietype-flag[value='12'] ~ .sheet-d100,
input.sheet-dietype-flag[value='13'] ~ .sheet-d100 {
top: -0.35em;
}