Hello, Im not sure what im doing wrong here. I am trying to use a hp bar on my shee that will adjust as you change you current hp. But what i can seem to get the max hp field to generate. all that is my test HTML is below. i will also add the css. can someone tell me what im doing wrong? HTML <!-- HP is based off level * 5 -->
<input name="attr_level" class="text040" type="text" value="1">
<div>
<input name="attr_current_hp" class="text040" type="text" value="0">
<input name="attr_toxbar" class="sheet-hidden sheet-toxbar" type="hidden" value="@{hpv}" disabled='true'>
<div class="sheet-toxbar"></div>
<input name="attr_max_hp" class="text040" type="text" >
</div>
<div><!-- Scripts -->
<script type="text/worker">
on("sheet:opened change:max_hp change:current_hp", function() {
getAttrs(["max_hp", "current_hp"], function(values) {
var maximum = values.current_hp;
var current = values.max_hp;
var hpPercent = [0,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,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,999];
for(let i = 0; i < hpPercent.length; i++) {
if(maximum <= (current * hpPercent[i]/ 100))
{hpvalue = i;
console.log("Toxic value is " + hpvalue)
break;
}
}
setAttrs({"hpv":hpvalue});
});
});
</script>
<script type="text/worker"><!-- HP -->
on('sheet:opened change:level', function (value) {
getAttrs(['level'], function (value) {
const level = values.level || 0;
const total_hp = level*5;
setAttrs({max_hp:total_hp});
});
});
</script> CSS div.sheet-toxbar {
width: 196px;
height: 21px;
border: 2px solid black;
color: black;
font-size: 12px;
font-weight: bold;
text-align: center;
}
input.sheet-toxbar[value="0"] ~ div.sheet-toxbar {
background: #dd7e6b;
} input.sheet-toxbar[value="0"] ~ div.sheet-toxbar::before {
content: "DOWN +1 EXHAUSTION";
}
input.sheet-toxbar[value="1"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 99%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="1"] ~ div.sheet-toxbar::before {
content:"1% HP Remaining";
}
input.sheet-toxbar[value="2"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 98%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="2"] ~ div.sheet-toxbar::before {
content:"2% HP Remaining";
}
input.sheet-toxbar[value="3"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 97%, #adfc03 20%, #adfc03 80%, #449600 100%);;
} input.sheet-toxbar[value="3"] ~ div.sheet-toxbar::before {
content:"3% HP Remaining";
}
input.sheet-toxbar[value="4"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 96%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="4"] ~ div.sheet-toxbar::before {
content:"4% HP Remaining";
}
input.sheet-toxbar[value="5"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 95%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="5"] ~ div.sheet-toxbar::before {
content:"5% HP Remaining";
}
input.sheet-toxbar[value="6"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 94%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="6"] ~ div.sheet-toxbar::before {
content:"6% HP Remaining";
}
input.sheet-toxbar[value="7"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 93%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="7"] ~ div.sheet-toxbar::before {
content:"7% HP Remaining";
}
input.sheet-toxbar[value="8"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 92%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="8"] ~ div.sheet-toxbar::before {
content:"8% HP Remaining";
}
input.sheet-toxbar[value="9"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 91%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="9"] ~ div.sheet-toxbar::before {
content:"9% HP Remaining";
}
input.sheet-toxbar[value="10"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 90%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="10"] ~ div.sheet-toxbar::before {
content:"10% HP Remaining";
}
input.sheet-toxbar[value="11"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 89%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="11"] ~ div.sheet-toxbar::before {
content:"11% HP Remaining";
}
input.sheet-toxbar[value="12"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 88%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="12"] ~ div.sheet-toxbar::before {
content:"12% HP Remaining";
}
input.sheet-toxbar[value="13"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 87%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="13"] ~ div.sheet-toxbar::before {
content:"13% HP Remaining";
}
input.sheet-toxbar[value="14"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 86%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="14"] ~ div.sheet-toxbar::before {
content:"14% HP Remaining";
}
input.sheet-toxbar[value="15"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 85%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="15"] ~ div.sheet-toxbar::before {
content:"15% HP Remaining";
}
input.sheet-toxbar[value="16"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 84%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="16"] ~ div.sheet-toxbar::before {
content:"16% HP Remaining";
}
input.sheet-toxbar[value="17"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 83%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="17"] ~ div.sheet-toxbar::before {
content:"17% HP Remaining";
}
input.sheet-toxbar[value="18"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 82%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="18"] ~ div.sheet-toxbar::before {
content:"18% HP Remaining";
}
input.sheet-toxbar[value="19"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 81%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="19"] ~ div.sheet-toxbar::before {
content:"19% HP Remaining";
}
input.sheet-toxbar[value="20"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 80%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="20"] ~ div.sheet-toxbar::before {
content:"20% HP Remaining";
}
input.sheet-toxbar[value="21"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 79%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="21"] ~ div.sheet-toxbar::before {
content:"21% HP Remaining";
}
input.sheet-toxbar[value="22"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 78%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="22"] ~ div.sheet-toxbar::before {
content:"22% HP Remaining";
}
input.sheet-toxbar[value="23"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 77%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="23"] ~ div.sheet-toxbar::before {
content:"23% HP Remaining";
}
input.sheet-toxbar[value="24"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 76%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="24"] ~ div.sheet-toxbar::before {
content:"24% HP Remaining";
}
input.sheet-toxbar[value="25"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 75%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="25"] ~ div.sheet-toxbar::before {
content:"25% HP Remaining";
}
input.sheet-toxbar[value="26"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 74%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="26"] ~ div.sheet-toxbar::before {
content:"26% HP Remaining";
}
input.sheet-toxbar[value="27"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 73%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="27"] ~ div.sheet-toxbar::before {
content:"27% HP Remaining";
}
input.sheet-toxbar[value="28"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 72%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="28"] ~ div.sheet-toxbar::before {
content:"28% HP Remaining";
}
input.sheet-toxbar[value="29"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 71%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="29"] ~ div.sheet-toxbar::before {
content:"29% HP Remaining";
}
input.sheet-toxbar[value="30"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 70%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="30"] ~ div.sheet-toxbar::before {
content:"20% HP Remaining";
}
input.sheet-toxbar[value="31"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 69%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="31"] ~ div.sheet-toxbar::before {
content:"31% HP Remaining";
}
input.sheet-toxbar[value="32"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 68%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="32"] ~ div.sheet-toxbar::before {
content:"32% HP Remaining";
}
input.sheet-toxbar[value="33"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 67%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="33"] ~ div.sheet-toxbar::before {
content:"33% HP Remaining";
}
input.sheet-toxbar[value="34"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 66%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="34"] ~ div.sheet-toxbar::before {
content:"34% HP Remaining";
}
input.sheet-toxbar[value="35"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 65%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="35"] ~ div.sheet-toxbar::before {
content:"35% HP Remaining";
}
input.sheet-toxbar[value="36"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 64%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="36"] ~ div.sheet-toxbar::before {
content:"36% HP Remaining";
}
input.sheet-toxbar[value="37"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 63%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="37"] ~ div.sheet-toxbar::before {
content:"37% HP Remaining";
}
input.sheet-toxbar[value="38"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 62%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="38"] ~ div.sheet-toxbar::before {
content:"38% HP Remaining";
}
input.sheet-toxbar[value="39"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 61%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="39"] ~ div.sheet-toxbar::before {
content:"39% HP Remaining";
}
input.sheet-toxbar[value="40"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 60%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="40"] ~ div.sheet-toxbar::before {
content:"40% HP Remaining";
}
input.sheet-toxbar[value="41"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 59%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="41"] ~ div.sheet-toxbar::before {
content:"41% HP Remaining";
}
input.sheet-toxbar[value="42"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 58%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="42"] ~ div.sheet-toxbar::before {
content:"42% HP Remaining";
}
input.sheet-toxbar[value="43"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 57%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="43"] ~ div.sheet-toxbar::before {
content:"43% HP Remaining";
}
input.sheet-toxbar[value="44"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 56%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="44"] ~ div.sheet-toxbar::before {
content:"44% HP Remaining";
}
input.sheet-toxbar[value="45"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 55%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="45"] ~ div.sheet-toxbar::before {
content:"45% HP Remaining";
}
input.sheet-toxbar[value="46"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 54%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="46"] ~ div.sheet-toxbar::before {
content:"46% HP Remaining";
}
input.sheet-toxbar[value="47"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 53%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="47"] ~ div.sheet-toxbar::before {
content:"47% HP Remaining";
}
input.sheet-toxbar[value="48"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 52%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="48"] ~ div.sheet-toxbar::before {
content:"48% HP Remaining";
}
input.sheet-toxbar[value="49"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 51%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="49"] ~ div.sheet-toxbar::before {
content:"49% HP Remaining";
}
input.sheet-toxbar[value="50"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 50%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="50"] ~ div.sheet-toxbar::before {
content:"50% HP Remaining";
}
input.sheet-toxbar[value="51"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 49%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="51"] ~ div.sheet-toxbar::before {
content:"51% HP Remaining";
}
input.sheet-toxbar[value="52"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 48%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="52"] ~ div.sheet-toxbar::before {
content:"52% HP Remaining";
}
input.sheet-toxbar[value="53"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 47%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="53"] ~ div.sheet-toxbar::before {
content:"53% HP Remaining";
}
input.sheet-toxbar[value="54"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 46%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="54"] ~ div.sheet-toxbar::before {
content:"54% HP Remaining";
}
input.sheet-toxbar[value="55"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 45%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="55"] ~ div.sheet-toxbar::before {
content:"55% HP Remaining";
}
input.sheet-toxbar[value="56"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 44%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="56"] ~ div.sheet-toxbar::before {
content:"56% HP Remaining";
}
input.sheet-toxbar[value="57"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 43%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="57"] ~ div.sheet-toxbar::before {
content:"57% HP Remaining";
}
input.sheet-toxbar[value="58"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 42%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="58"] ~ div.sheet-toxbar::before {
content:"58% HP Remaining";
}
input.sheet-toxbar[value="59"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 41%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="59"] ~ div.sheet-toxbar::before {
content:"59% HP Remaining";
}
input.sheet-toxbar[value="60"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 40%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="60"] ~ div.sheet-toxbar::before {
content:"60% HP Remaining";
}
input.sheet-toxbar[value="61"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 39%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="61"] ~ div.sheet-toxbar::before {
content:"61% HP Remaining";
}
input.sheet-toxbar[value="62"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 38%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="62"] ~ div.sheet-toxbar::before {
content:"62% HP Remaining";
}
input.sheet-toxbar[value="63"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 37%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="63"] ~ div.sheet-toxbar::before {
content:"63% HP Remaining";
}
input.sheet-toxbar[value="64"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 36%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="64"] ~ div.sheet-toxbar::before {
content:"64% HP Remaining";
}
input.sheet-toxbar[value="65"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 35%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="65"] ~ div.sheet-toxbar::before {
content:"65% HP Remaining";
}
input.sheet-toxbar[value="66"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 34%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="66"] ~ div.sheet-toxbar::before {
content:"66% HP Remaining";
}
input.sheet-toxbar[value="67"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 33%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="67"] ~ div.sheet-toxbar::before {
content:"67% HP Remaining";
}
input.sheet-toxbar[value="68"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 32%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="68"] ~ div.sheet-toxbar::before {
content:"68% HP Remaining";
}
input.sheet-toxbar[value="69"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 31%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="69"] ~ div.sheet-toxbar::before {
content:"69% HP Remaining";
}
input.sheet-toxbar[value="70"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 30%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="70"] ~ div.sheet-toxbar::before {
content:"70% HP Remaining";
}
input.sheet-toxbar[value="71"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 29%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="71"] ~ div.sheet-toxbar::before {
content:"71% HP Remaining";
}
input.sheet-toxbar[value="72"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 28%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="72"] ~ div.sheet-toxbar::before {
content:"72% HP Remaining";
}
input.sheet-toxbar[value="73"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 27%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="73"] ~ div.sheet-toxbar::before {
content:"73% HP Remaining";
}
input.sheet-toxbar[value="74"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 26%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="74"] ~ div.sheet-toxbar::before {
content:"74% HP Remaining";
}
input.sheet-toxbar[value="75"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 25%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="75"] ~ div.sheet-toxbar::before {
content:"75% HP Remaining";
}
input.sheet-toxbar[value="76"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 24%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="76"] ~ div.sheet-toxbar::before {
content:"76% HP Remaining";
}
input.sheet-toxbar[value="77"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 23%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="77"] ~ div.sheet-toxbar::before {
content:"77% HP Remaining";
}
input.sheet-toxbar[value="78"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 22%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="78"] ~ div.sheet-toxbar::before {
content:"78% HP Remaining";
}
input.sheet-toxbar[value="79"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 21%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="79"] ~ div.sheet-toxbar::before {
content:"79% HP Remaining";
}
input.sheet-toxbar[value="80"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 20%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="80"] ~ div.sheet-toxbar::before {
content:"80% HP Remaining";
}
input.sheet-toxbar[value="81"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 19%, #adfc03 19%, #adfc03 71%, #449600 100%);
} input.sheet-toxbar[value="81"] ~ div.sheet-toxbar::before {
content:"81% HP Remaining";
}
input.sheet-toxbar[value="82"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 18%, #adfc03 18%, #adfc03 72%, #449600 100%);
} input.sheet-toxbar[value="82"] ~ div.sheet-toxbar::before {
content:"82% HP Remaining";
}
input.sheet-toxbar[value="83"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 17%, #adfc03 17%, #adfc03 73%, #449600 100%);
} input.sheet-toxbar[value="83"] ~ div.sheet-toxbar::before {
content:"83% HP Remaining";
}
input.sheet-toxbar[value="84"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 16%, #adfc03 16%, #adfc03 74%, #449600 100%);
} input.sheet-toxbar[value="84"] ~ div.sheet-toxbar::before {
content:"84% HP Remaining";
}
input.sheet-toxbar[value="85"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 15%, #adfc03 15%, #adfc03 75%, #449600 100%);
} input.sheet-toxbar[value="85"] ~ div.sheet-toxbar::before {
content:"85% HP Remaining";
}
input.sheet-toxbar[value="86"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 14%, #adfc03 14%, #adfc03 76%, #449600 100%);
} input.sheet-toxbar[value="86"] ~ div.sheet-toxbar::before {
content:"86% HP Remaining";
}
input.sheet-toxbar[value="87"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 13%, #adfc03 13%, #adfc03 77%, #449600 100%);
} input.sheet-toxbar[value="87"] ~ div.sheet-toxbar::before {
content:"87% HP Remaining";
}
input.sheet-toxbar[value="88"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 12%, #adfc03 12%, #adfc03 78%, #449600 100%);
} input.sheet-toxbar[value="88"] ~ div.sheet-toxbar::before {
content:"88% HP Remaining";
}
input.sheet-toxbar[value="89"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 11%, #adfc03 11%, #adfc03 79%, #449600 100%);
} input.sheet-toxbar[value="89"] ~ div.sheet-toxbar::before {
content:"89% HP Remaining";
}
input.sheet-toxbar[value="90"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 10%, #adfc03 10%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="90"] ~ div.sheet-toxbar::before {
content:"90% HP Remaining";
}
input.sheet-toxbar[value="91"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 9%, #adfc03 9%, #adfc03 81%, #449600 100%);
} input.sheet-toxbar[value="91"] ~ div.sheet-toxbar::before {
content:"91% HP Remaining";
}
input.sheet-toxbar[value="92"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 8%, #adfc03 8%, #adfc03 82%, #449600 100%);
} input.sheet-toxbar[value="92"] ~ div.sheet-toxbar::before {
content:"92% HP Remaining";
}
input.sheet-toxbar[value="93"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 7%, #adfc03 7%, #adfc03 83%, #449600 100%);
} input.sheet-toxbar[value="93"] ~ div.sheet-toxbar::before {
content:"93% HP Remaining";
}
input.sheet-toxbar[value="94"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 6%, #adfc03 6%, #adfc03 84%, #449600 100%);
} input.sheet-toxbar[value="94"] ~ div.sheet-toxbar::before {
content:"94% HP Remaining";
}
input.sheet-toxbar[value="95"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 5%, #adfc03 5%, #adfc03 85%, #449600 100%);
} input.sheet-toxbar[value="95"] ~ div.sheet-toxbar::before {
content:"95% HP Remaining";
}
input.sheet-toxbar[value="96"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 4%, #adfc03 4%, #adfc03 86%, #449600 100%);
} input.sheet-toxbar[value="96"] ~ div.sheet-toxbar::before {
content:"96% HP Remaining";
}
input.sheet-toxbar[value="97"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 3%, #adfc03 3%, #adfc03 87%, #449600 100%);
} input.sheet-toxbar[value="97"] ~ div.sheet-toxbar::before {
content:"97% HP Remaining";
}
input.sheet-toxbar[value="98"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 2%, #adfc03 2%, #adfc03 88%, #449600 100%);
} input.sheet-toxbar[value="98"] ~ div.sheet-toxbar::before {
content:"98% HP Remaining";
}
input.sheet-toxbar[value="99"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 1%, #adfc03 1%, #adfc03 89%, #449600 100%);
} input.sheet-toxbar[value="99"] ~ div.sheet-toxbar::before {
content:"99% HP Remaining";
}
input.sheet-toxbar[value="100"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 0%, #adfc03 0%, #adfc03 90%, #449600 100%);
} input.sheet-toxbar[value="100"] ~ div.sheet-toxbar::before {
content:"100% HP Remaining";
}
input.sheet-toxbar[value="101"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #dd7e6b 0%, #adfc03 20%, #adfc03 80%, #449600 100%);
} input.sheet-toxbar[value="101"] ~ div.sheet-toxbar::before {
content:"Above Max HP";
}
