79 lines
No EOL
1.7 KiB
CSS
79 lines
No EOL
1.7 KiB
CSS
.healthWrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
> {
|
|
|
|
h3 {
|
|
color: #aaaaee;
|
|
}
|
|
|
|
.healthContainer {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto);
|
|
justify-items: center;
|
|
gap: 0px;
|
|
justify-content: start;
|
|
> {
|
|
* {
|
|
margin: -1px;
|
|
}
|
|
|
|
label {
|
|
&.healthTrackerBox {
|
|
cursor: pointer;
|
|
order: 1;
|
|
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg);
|
|
background-color: #444444;
|
|
background-size: 90%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
z-index: 1;
|
|
position: relative;
|
|
border: 2px solid #550000;
|
|
border-radius: 0px;
|
|
appearance: none;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 3px;
|
|
padding: 0px;
|
|
|
|
&.reset {
|
|
order: 2;
|
|
}
|
|
|
|
> span {
|
|
position: absolute;
|
|
content: "-1";
|
|
top: 2px;
|
|
right: 4px;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
input:checked {
|
|
& + .healthTrackerBox {
|
|
position: absolute;
|
|
opacity: 0;
|
|
z-index: 0;
|
|
|
|
> span {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
& ~ .healthTrackerBox {
|
|
order: 3;
|
|
background-color: #444444;
|
|
background-image: none;
|
|
|
|
> span {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |