Maverick/SR6_Roll20_Sheet
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added Basic Health Tracker Functionality

Browse source
This commit is contained in:
Sebastian Fischlmayr 2022-10-01 21:33:00 +02:00
parent 0abccf3f48
commit 05a0feab52
Signed by: Maverick
GPG key ID: 6379E413924A4E77
10 changed files with 290 additions and 348 deletions
Download patch file Download diff file Expand all files Collapse all files

125
components/_healthBox.css
View file

@ -1,79 +1,66 @@
.healthWrapper {
.repcontainer[data-groupname="repeating_physicaltracker"] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
> {
grid-template-columns: repeat(3, auto);
justify-items: center;
gap: 0px;
justify-content: start;
h3 {
color: #aaaaee;
> * {
margin: -1px;
}
> .repitem {
width: fit-content;
height: fit-content;
> .itemcontrol {
display: none !important;
}
> button {
> span.woundModDisplay {
content: "-1";
top: 2px;
right: 4px;
color: #bfbdba;
position: absolute;
}
background-color: #444444;
border: 2px solid #550000;
border-radius: 0px;
appearance: none;
width: 3.5rem;
height: 3.5rem;
border-radius: 3px;
padding: 0px;
position: relative;
grid-span: 1span;
margin: 0px;
}
.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;
> div {
pointer-events: none;
}
&.reset {
order: 2;
}
> span {
position: absolute;
content: "-1";
top: 2px;
right: 4px;
display: none;
}
}
}
> input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button {
> div {
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
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;
}
}
}
> span.woundModDisplay {
display: none;
}
}
}
}
.repcontrol[data-groupname="repeating_physicaltracker"] {
display: none !important;
}