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

102
output/main.css
View file

@ -2,17 +2,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
display: block;
}
.healthWrapper {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
display: grid;
}
.healthWrapper > h3 {
color: #aae;
}
.healthWrapper > .healthContainer {
.repcontainer[data-groupname="repeating_physicaltracker"] {
grid-template-columns: repeat(3, auto);
justify-content: start;
justify-items: center;
@ -20,59 +10,64 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
display: grid;
}
.healthWrapper > .healthContainer > * {
.repcontainer[data-groupname="repeating_physicaltracker"] > * {
margin: -1px;
}
.healthWrapper > .healthContainer > label.healthTrackerBox {
cursor: pointer;
z-index: 1;
-webkit-appearance: none;
appearance: none;
width: 3.5rem;
height: 3.5rem;
background-color: #444;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
border: 2px solid #500;
border-radius: 3px;
order: 1;
padding: 0;
position: relative;
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.healthWrapper > .healthContainer > label.healthTrackerBox.reset {
order: 2;
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > .itemcontrol {
display: none !important;
}
.healthWrapper > .healthContainer > label.healthTrackerBox > span {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button > span.woundModDisplay {
content: "-1";
display: none;
color: #bfbdba;
position: absolute;
top: 2px;
right: 4px;
}
.healthWrapper > .healthContainer > input:checked + .healthTrackerBox {
opacity: 0;
z-index: 0;
position: absolute;
}
.healthWrapper > .healthContainer > input:checked + .healthTrackerBox > span {
display: block;
}
.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox {
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > button {
-webkit-appearance: none;
appearance: none;
width: 3.5rem;
height: 3.5rem;
grid-span: 1span;
background-color: #444;
background-image: none;
order: 3;
border: 2px solid #500;
border-radius: 3px;
margin: 0;
padding: 0;
position: relative;
}
.healthWrapper > .healthContainer > input:checked ~ .healthTrackerBox > span {
display: block;
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > div {
pointer-events: none;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > div {
height: 100%;
width: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/5f/Red_X.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.repcontainer[data-groupname="repeating_physicaltracker"] > .repitem > input[type="hidden"][name="attr_isCrossed"][value="true"] ~ button > span.woundModDisplay {
display: none;
}
.repcontrol[data-groupname="repeating_physicaltracker"] {
display: none !important;
}
.attr-rolls {
@ -162,7 +157,7 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
border: 0;
border-radius: 1em;
margin: 0 2px;
padding: 0;
padding: 2px;
}
.sheetform .charactersheet button[type="roll"] {
@ -174,6 +169,15 @@ input.sheet-tabstoggle[value="main"] ~ .main-tab {
background-image: none;
border: 0;
border-radius: 8px;
padding: 1px;
position: relative;
}
.sheetform .charactersheet button[type="roll"]:before {
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
.sheetform .charactersheet input {