diff --git a/RolemasterUnified_Official/rolemasterunified.css b/RolemasterUnified_Official/rolemasterunified.css index 5589718ea429..ef58d9cf4639 100644 --- a/RolemasterUnified_Official/rolemasterunified.css +++ b/RolemasterUnified_Official/rolemasterunified.css @@ -998,7 +998,7 @@ div.attacks { display: grid; /*grid-template-columns: 5em 1fr 2em 2em;*/ /* 10em unitl I get icons */ - grid-template-columns: 5em 1fr 10em 10em 12em; + grid-template-columns: 2em 5em 1fr 10em 10em 12em; } .inventorytitle { @@ -1253,6 +1253,163 @@ div.attacks { /* vim: set sts=4 sw=4 syn=css : */ + + + +/* ----- BAR TRACK ----- */ +.bar-track { + background-color: lightgrey;/* #313031; /* Dark Grey */ + width: 100px; + height: 7px; + margin: 2px; + border-radius: 5px; + overflow: hidden; + place-items:center start; + display:grid; + grid-template-areas:'content'; + --tensSize:0%; + --onesSize:0%; + --decimalSize:0%; + --trackGoodColor:green; + --trackBadColor:red; +} + +.bar-progress { + /* Note that this calculation is done in this element so that the changing values of the size variables cascade to it properly and + update the value as the sizes are updated */ + --trackPercentage: calc(var(--tensSize) + var(--onesSize) + var(--decimalSize)); + box-sizing: border-box; + grid-area:content; + background-color: color-mix(in oklab,var(--trackGoodColor) var(--trackPercentage),var(--trackBadColor)); /* Green fading to red as damage taken */ + width: var(--trackPercentage); + height: 100%; + transition: width 0.25s ease-in-out, background-color 0.25s ease-in-out; +} + +/* ----- BAR PROGRESS STEPS ----- */ +/* 10's steps */ +.bar-value[value^="1"]:not([value^="1."]):not([value="1"]) + .bar-track{ + --tensSize: 10%; +} +.bar-value[value^="2"]:not([value^="2."]):not([value="2"]) + .bar-track{ + --tensSize: 20%; +} +.bar-value[value^="3"]:not([value^="3."]):not([value="3"]) + .bar-track{ + --tensSize: 30%; +} +.bar-value[value^="4"]:not([value^="4."]):not([value="4"]) + .bar-track{ + --tensSize: 40%; +} +.bar-value[value^="5"]:not([value^="5."]):not([value="5"]) + .bar-track{ + --tensSize: 50%; +} +.bar-value[value^="6"]:not([value^="6."]):not([value="6"]) + .bar-track{ + --tensSize: 60%; +} +.bar-value[value^="7"]:not([value^="7."]):not([value="7"]) + .bar-track{ + --tensSize: 70%; +} +.bar-value[value^="8"]:not([value^="8."]):not([value="8"]) + .bar-track{ + --tensSize: 80%; +} +.bar-value[value^="9"]:not([value^="9."]):not([value="9"]) + .bar-track{ + --tensSize: 90%; +} +.bar-value[value^="10"]:not([value^="10."]):not([value="10"]) + .bar-track{ + --tensSize: 100%; +} +/* Ones sizing */ +.bar-value:is([value*="1."],[value$="1"]:not([value*="."])) + .bar-track{ + --onesSize: 1% +} +.bar-value:is([value*="2."],[value$="2"]:not([value*="."])) + .bar-track{ + --onesSize: 2% +} +.bar-value:is([value*="3."],[value$="3"]:not([value*="."])) + .bar-track{ + --onesSize: 3% +} +.bar-value:is([value*="4."],[value$="4"]:not([value*="."])) + .bar-track{ + --onesSize: 4% +} +.bar-value:is([value*="5."],[value$="5"]:not([value*="."])) + .bar-track{ + --onesSize: 5% +} +.bar-value:is([value*="6."],[value$="6"]:not([value*="."])) + .bar-track{ + --onesSize: 6% +} +.bar-value:is([value*="7."],[value$="7"]:not([value*="."])) + .bar-track{ + --onesSize: 7% +} +.bar-value:is([value*="8."],[value$="8"]:not([value*="."])) + .bar-track{ + --onesSize: 8% +} +.bar-value:is([value*="9."],[value$="9"]:not([value*="."])) + .bar-track{ + --onesSize: 9% +} +/* decimal sizing */ +.bar-value:is([value*=".0"],[value*=".1"]) + .bar-track{ + --decimalSize: 0.1%; +} +.bar-value[value*=".2"] + .bar-track{ + --decimalSize: 0.2%; +} +.bar-value[value*=".3"] + .bar-track{ + --decimalSize: 0.3%; +} +.bar-value[value*=".4"] + .bar-track{ + --decimalSize: 0.4%; +} +.bar-value[value*=".5"] + .bar-track{ + --decimalSize: 0.5%; +} +.bar-value[value*=".6"] + .bar-track{ + --decimalSize: 0.6%; +} +.bar-value[value*=".7"] + .bar-track{ + --decimalSize: 0.7%; +} +.bar-value[value*=".8"] + .bar-track{ + --decimalSize: 0.8%; +} +.bar-value[value*=".9"] + .bar-track{ + --decimalSize: 0.9%; +} + + +/* vim: set sts=4 sw=4 syn=css : */ + + + +.accordian { + cursor: pointer; + width: 100%; + height: 100%; + color: rgba(0,0,0,0); +} + +.accordiantoggle { + display: none; +} + +.accordian:checked ~ .accordiantoggle { + display: block; +} + +.accordian::after { + + content: "\25B2"; + color: rgba(0,0,0,1); +} +.accordian:checked::after { + content: "\25BC"; + color: rgba(0,0,0,1); +} + +.active:after { +} + + + /* https://cssloaders.github.io */ .loader{ diff --git a/RolemasterUnified_Official/rolemasterunified.html b/RolemasterUnified_Official/rolemasterunified.html index 0c55409b6d86..54d3ebce9c3d 100644 --- a/RolemasterUnified_Official/rolemasterunified.html +++ b/RolemasterUnified_Official/rolemasterunified.html @@ -2384,12 +2384,18 @@
-