damage_block.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

.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;
}