Merge pull request #13599 from nashidau/master

RolemasterUnified Official: Item fixes for Treasure Law
Roll20 · Dec 12, 2024 · c2e2767 · c2e2767
2 parents 18be9d9 + 3b72777
commit c2e2767
Show file tree

Hide file tree

Showing 4 changed files with 258 additions and 25 deletions.
diff --git 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{