Gaia - Resouce BG

Resource Background and inputs alignment
DBFBlackbull · Jan 13, 2024 · 0e2acab · 0e2acab
1 parent f55668b
commit 0e2acab
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/Gaia/gaia.css b/Gaia/gaia.css
@@ -343,7 +343,7 @@ label.title {
 
 .exaustao, .recurso {
   height: 70px;
-  flex: 0 0 220px;
+  flex: 0 0 230px;
   position: relative;
   padding-top: 15px;
   margin: 10px 0px 25px;
@@ -375,8 +375,9 @@ label.title {
   float: right;
   position: absolute;
   top: -5px;
-  right: 30px;
+  right: 0;
   font-weight: bold;
+  width: 140px;
 }
 
 .recurso .input-placeholder3 {
@@ -540,7 +541,25 @@ input.gaia-radio:checked::before {
   max-width: 30px;
   text-align: center;
 }
+
 .gaia-border-magic {
+  display: flex;
+  flex: 0 0 75px;
+  /* margin-left: 5px; */
+}
+.recurso .gaia-border-magic::before {
+  content: '';
+  background: url(https://raw.githubusercontent.com/VHPaiva/roll20-character-sheets/master/Gaia/assets/recurso-max.png) no-repeat;
+  background-size: contain;
+  display: block;
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  top: -40px;
+  left: -30px;
+}
+
+.gaia-border-magic2 {
   background: url(https://raw.githubusercontent.com/VHPaiva/roll20-character-sheets/master/Gaia/assets/recurso-max.png) no-repeat;
   background-size: contain;
   width: 50%;
@@ -550,13 +569,14 @@ input.gaia-radio:checked::before {
   left: -45px;
   z-index: 5;
 }
-.gaia-border-magic input {
+.gaia-border-magic2 input {
   border: none;
   background-color: unset;
 }
 .recurso .gaia-border {
   position: absolute;
   width: 170px;
+  width: 210px;
   right: 0;
 }
 

diff --git a/Gaia/gaia.html b/Gaia/gaia.html
@@ -276,20 +276,17 @@
 		<div class="flexrow space-around">
 			<div class="form-group recurso">
 				<span class="recurso-nome">Pontos de Vida</span>
-				<div class="gaia-border-magic">
-					<div class="input-placeholder flex0" data-placeholder="Max">
-						<input type="text" class="resource-max" name="attr_vidatotal" value="0">
-						<span class="placeholder">Max</span>
-						<input type="hidden" name="attr_vida_max" value="@{vidatotal} + @{vidatemp}" readonly/>
-					</div>
-				</div>
 				<div class="gaia-border flexrow">
 					<div class="gaia-border-corner-container">
 						<span class="gaia-border-corner topleft"></span>
 						<span class="gaia-border-corner topright"></span>
 						<span class="gaia-border-corner botleft"></span>
 						<span class="gaia-border-corner botright"></span>
 					</div>
+					<div class="gaia-border-magic">
+						<input type="text" class="resource-max" name="attr_vidatotal" value="0" placeholder="Máximo" title="Máximo">
+						<input type="hidden" name="attr_vida_max" value="@{vidatotal} + @{vidatemp}" readonly/>
+					</div>
 					<div class="input-placeholder" data-placeholder="Atual">
 						<input type="text" class="resource-value" name="attr_vida" value="0">
 						<span class="placeholder">Atual</span>
@@ -302,20 +299,17 @@
 			</div>
 			<div class="form-group recurso">
 				<span class="recurso-nome">Pontos de Energia</span>
-				<div class="gaia-border-magic">
-					<div class="input-placeholder flex0" data-placeholder="Max">
-						<input type="text" class="resource-max" name="attr_energiatotal">
-						<span class="placeholder">Max</span>
-						<input type="hidden" name="attr_energia_max" value="@{energiatotal} + @{energiatemp}" readonly/>
-					</div>
-				</div>
 				<div class="gaia-border flexrow">
 					<div class="gaia-border-corner-container">
 						<span class="gaia-border-corner topleft"></span>
 						<span class="gaia-border-corner topright"></span>
 						<span class="gaia-border-corner botleft"></span>
 						<span class="gaia-border-corner botright"></span>
 					</div>
+					<div class="gaia-border-magic">
+						<input type="text" class="resource-max" name="attr_energiatotal">
+						<input type="hidden" name="attr_energia_max" value="@{energiatotal} + @{energiatemp}" readonly/>
+					</div>
 					<div class="input-placeholder" data-placeholder="Atual">
 						<span class="placeholder">Atual</span>
 						<input type="text" class="resource-value" name="attr_energia">