Hi all, So ran into another two issues designing this sheet and I can't for the life of me figure them out. See image below: 1) The first issue is I am trying to center the white text into the blue hexagon. But no matter what I try it will not move down to center. I've tried border, padding and margin to no luck. I am wondering if it is running into the border/padding/margin of the input box? But even adjusting that I've had no luck. 2) Notice how large the input box is? I cannot get it to resize smaller or to a two-digit number size. *Sorry for the blurry image, its a screenshot of a screenshot to be able to see the input box. Here is the relevant html: <div class="stats section">
<div class="soak-box">
<span class="stat-text-soak-head">SOAK</span>
<input class="soak-stat" type="number" name="attr_soak" max="20" min="-5" value="0">
</div>
<div class="threshold-box">
<span class="stat-text-head">WOUNDS</span>
<input class="wound-threshold-stat" type="number" name="attr_wound_threshold" max="60" min="-60" value="0">
<input class="wound-current-stat" type="number" name="attr_wound_current" max="60" min="-60" value="0">
<span class="stat-text-foot">Threshold</span>
<span class="stat-text-foot">Current</span>
</div>
<div class="threshold-box">
<span class="stat-text-head">STRAIN</span>
<input class="strain-threshold-stat" type="number" name="attr_strain_threshold" max="60" min="-60" value="0">
<input class="strain-current-stat" type="number" name="attr_strain_current" max="60" min="-60" value="0">
<span class="stat-text-foot">Threshold</span>
<span class="stat-text-foot">Current</span>
</div>
<div class="threshold-box">
<span class="stat-text-head">DEFENSE</span>
<input class="defense-ranged-stat" type="number" name="attr_ranged_def" max="4" min="0" value="0">
<input class="defense-melee-stat" type="number" name="attr_melee_def" max="4" min="0" value="0">
<span class="stat-text-foot">Threshold</span>
<span class="stat-text-foot">Current</span>
</div>
<div class="threshold-box">
<span class="stat-text-force-head">FORCE</span>
<input class="force-threshold-stat" type="number" name="attr_force_threshold" max="10" min="0" value="0">
<input class="force-current-stat" type="number" name="attr_force_current" max="10" min="0" value="0">
<span class="stat-text-foot">Threshold</span>
<span class="stat-text-foot">Current</span>
</div>
</div> Here is the relevant CSS: .sheet-stats {
grid-area: stats;
background-color: #72cddc;
display: inline-grid;
grid-template-columns: repeat(5, 1fr);
}
.sheet-soak-box {
background-image: url(<a href="https://github.com/InquisitorTremayne/FFG-SWRPG-R20-Sheet/blob/master/images/soak_box_small.png?raw=true" rel="nofollow">https://github.com/InquisitorTremayne/FFG-SWRPG-R20-Sheet/blob/master/images/soak_box_small.png?raw=true</a>);
background-position: left;
background-repeat: no-repeat;
padding: none;
}
.sheet-threshold-box {
background-image: url(<a href="https://github.com/InquisitorTremayne/FFG-SWRPG-R20-Sheet/blob/master/images/threshold_box_small.png?raw=true" rel="nofollow">https://github.com/InquisitorTremayne/FFG-SWRPG-R20-Sheet/blob/master/images/threshold_box_small.png?raw=true</a>);
background-position: left;
background-repeat: no-repeat;
padding: none;
}
input.sheet-soak-stat,
input.sheet-wound-threshold-stat,
input.sheet-wound-current-stat,
input.sheet-strain-threshold-stat,
input.sheet-strain-current-stat,
input.sheet-defense-ranged-stat,
input.sheet-defense-melee-stat,
input.sheet-force-threshold-stat,
input.sheet-force-current-stat {
display: inline-grid;
font-weight: bold;
font-size: 15pt;
margin-top: 5px;
border: 1px transparent;
background-color: transparent;
}
input.sheet-soak-stat {
margin-left: 40px;
text-align: center;
}
input.sheet-wound-threshold-stat,
input.sheet-strain-threshold-stat,
input.sheet-defense-ranged-stat,
input.sheet-force-threshold-stat {
text-align: right;
}
input.sheet-wound-current-stat,
input.sheet-strain-current-stat,
input.sheet-defense-melee-stat,
input.sheet-force-current-stat {
text-align: left;
}
span.sheet-stat-text-head {
margin-top: 1em;
margin-left: 3em;
margin-bottom: none;
font-weight: bold;
color: #FFFFFF;
}
span.sheet-stat-text-soak-head {
margin-top: 1em;
margin-left: 48px;
font-weight: bold;
color: #FFFFFF;
}
span.sheet-stat-text-force-head {
margin-top: 1em;
margin-left: 45px;
font-weight: bold;
color: #FFFFFF;
} Could it be the in-line grid for the inputs? I just happened to get lucky putting that in-line there and they almost automatically centered to where I wanted them so I left it! :D Thoughts? Thanks
