65 lines
902 B
CSS
65 lines
902 B
CSS
.damage-selector, .damage-effect-indicator, label {
|
|
width: 20px;
|
|
}
|
|
|
|
.damage-selector, .damage-effect-indicator {
|
|
height: 30px;
|
|
}
|
|
|
|
.damage-selector {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid black;
|
|
display: inline-block;
|
|
}
|
|
|
|
.damage-effect-indicator {
|
|
position: absolute;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
pointer-events: none;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.damage-selector.clear {
|
|
background-color: white;
|
|
}
|
|
|
|
.damage-selector.bruise {
|
|
background-color: orange;
|
|
}
|
|
|
|
.damage-selector.lethal {
|
|
background-color: red;
|
|
}
|
|
|
|
label input[type="radio"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
label {
|
|
display: none;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
label:first-of-type {
|
|
display: block;
|
|
}
|
|
|
|
label:has(input:checked) {
|
|
display: none;
|
|
}
|
|
|
|
label:has(+ label input:checked) {
|
|
display: none;
|
|
}
|
|
|
|
label:has(input:checked) + label {
|
|
display: block;
|
|
}
|