So my custom character sheet uses CSS Grid. It also uses expandable-sections, each entry of which contains an "Expand" button that will hide or show extra details on the entry. Here is an example with the "Expand" button not pressed: Here is an example with the "Expand" button pressed: Notice that once the expand button is pressed, it changes color to match the color gradient used in the extra details. This is done so that, without having to think about it, the viewer associates the extra details that show up, with the expand button that was pressed to make them show up. You see, because this sheet uses expandable-sections, there can be many entries right on top of each other, and before I added the color change, it was difficult to tell which "Expand" button, was associated with the extra details. In addition, I used a color gradient rather than a solid color because when multiple entries, stacked right on top of each other, all have their "Expand" buttons pressed, it makes it easy to tell one entry from another. I also had a lot of fun getting the same color gradient to be spread over multiple CSS Grid cells. Plus it looks nice, but I digress. The problem is that one of my players is seeing a UI bug, shown here: I'm not sure what is causing this, because I never see this bug anymore. However, I used to see it. I had to fiddle with the CSS for a while before I got the "Expand" button to rest in the spot where I wanted it. Now, there is a simple solution to this issue, which is to reduce the width of the "Expand" button. The problem with this is that doing this exposes the otherwise hidden color gradient, when the "Expand" button is not pressed, as seen here: This solution is a hack, and I want to avoid it. So far though, I haven't found a way to do it. Now this is the kind of tiny UI detail that drives people nuts, so I'll understand if no one wants to fiddle with it. I thought I might as well ask though, in case someone already knows of a solution. Anyway, this should be all the code. Here's the HTML: <fieldset class="repeating_defenses">
<div class="expandable-section paleRedGradient">
<div class="defensesTitleGrid">
<div class="defbcb blueBackground section">
<div class="fieldLabelCenter white blueBackground section">Base</div>
<input
class="field derived24 section"
name="attr_defense_basic_combat_bonus"
value="@{defense_subtotal}"
disabled="true">
</div>
<div class="defmd1 blueBackground section">
<div class="fieldLabelCenter white blueBackground section">Modifier</div>
<input class="field right manual24" name="attr_defense_modifier_1" type="number" value='0'>
</div>
<div class="defmd2 blueBackground section">
<div class="fieldLabelCenter white blueBackground section">Modifier</div>
<input class="field right manual24" name="attr_defense_modifier_2" type="number" value='0'>
</div>
<div class="defshw section">
<input type="checkbox" name="attr_defense_checkbox_expand" value="1" class="expandEntry expand-state" title="@{defense_checkbox_expand}" /><span title="Expand"></span>
</div>
<div class="defnam blueBackground section">
<div class="fieldLabelCenter white section">Name</div>
<input class="field manual24" name="attr_defense_name" type="text">
</div>
<div class="defrol blueBackground section">
<button
class="buttonStyle cast"
name="roll_defense"
type="roll"
value='&{template:default}{{name=@{defense_name}}}{{Defense Roll=[[1d100cf0cs0+@{defense_total_defense_bonus}]]}}'
style="float:right;">Roll</button>
</div>
<div class="defmd3 blueBackground section">
<div class="fieldLabelCenter white blueBackground section">Modifier</div>
<input class="field right manual24" name="attr_defense_modifier_3" type="number" value='0'>
</div>
<div class="defmd4 blueBackground section">
<div class="fieldLabelCenter white blueBackground section">Modifier</div>
<input class="field right manual24" name="attr_defense_modifier_4" type="number" value='0'>
</div>
<div class="deftot blueBackground section">
<div class="fieldLabelCenter white blueBackground section">Total</div>
<input
class="field derived24 section"
name="attr_defense_total_defense_bonus"
value="@{defense_basic_combat_bonus}+@{defense_modifier_1}+@{defense_modifier_2}+@{defense_modifier_3}+@{defense_modifier_4}"
disabled="true">
</div>
</div>
</div>
</fieldset>
And here's the CSS: .charsheet button[type=roll]::before {display: none;}
.sheet-expand-control[value="0"] ~ .sheet-expanded-view,
.sheet-expand-control:not([value="0"]) ~ .sheet-collapsed-view{display:none;}
.sheet-expand-control:not([value="0"]) ~ .sheet-expanded-view{}
.sheet-expandable-section:not(:hover) > .sheet-expand-button{opacity:0;}
.sheet-expandable-section > :not(.sheet-expand-button){grid-column:1 / -1;}
.sheet-expandable-section > .sheet-expand-button > .sheet-expand-state{grid-area:button;}
.sheet-expand-button > span{font-family:pictos;}
.sheet-expand-button > input:checked ~ .sheet-expand-state{transform:rotate(90deg);}
.sheet-expandable-section > .sheet-expand-button{
display:grid;
grid-template-columns:auto;
grid-template-rows:auto;
grid-template-areas:"button";
place-items:center;
width:auto;
height:auto;
}
.sheet-expandable-section > input[type=checkbox]{
opacity:0;
z-index:10;
width:100%;
height:100%;
grid-area:button;
}
.sheet-expand-button > input[type=checkbox]{
opacity:0;
z-index:10;
grid-area:button;
}
.sheet-collapsed-view{
display:grid;
clip-path:var(--spanPolygon);
}
.sheet-defensesTitleGrid {
display: grid;
width: 790px; /*ideal 790*/
height: 38px;
grid-gap: 0px;
grid-template-columns: 56px 56px 56px 56px 342px 56px 56px 56px 56px;
grid-template-rows: 38px;
grid-template-areas:
"defbcb defmd1 defmd2 defshw defnam defrol defmd3 defmd4 deftot";
}
button {
background-position-x: initial !important;
background-position-y: initial !important;
display: inline-block;
text-shadow: 0px 0px !important;
text-decoration: none !important;
font-weight: 600;
border: none;
border-top: none !important;
border-radius: 0px !important;
cursor: pointer;
background-image: linear-gradient(to top left, #adbbff, #001a9c); /* blue */
color: white;
height: 15px;
width: 39px;
text-align: center;
z-index: 1;
}
button:hover {
background-image: linear-gradient(to top left, #ff69fa, #5c0959) !important; /* violet */
color: white !important;
}
button:active {
background-image: linear-gradient(to top left, #ffffff, #bfbfbf) !important; /* white */
color: black !important;
}
.sheet-buttonStyle {background-image: linear-gradient(to top left, #00db14, #095c11); /* green */}
input.sheet-expandEntry {
cursor: pointer; width: 54px;
z-index: 1; height: 28px;
opacity: 0;}
input.sheet-expandEntry + span::before {
background-image: linear-gradient(to top left, #adbbff, #001a9c); /* blue */
color: white; width: 54px;
content: attr(title); height: 28px;
display: inline-block; margin-left: -54px;
text-align: center; font-size: 14px; border: 1px solid #4169E1;
font-weight: 600; padding-top: 8px;}
input.sheet-expandEntry:hover + span::before {
background-image: linear-gradient(to top left, #ff69fa, #5c0959) !important; /* violet */
color: white !important;}
input.sheet-expandEntry:checked + span::before {
color: black; background-image: none;
background-color: rgba(0, 0, 0, 0) !important;}
input.sheet-expandEntry:active + span::before {
background-image: linear-gradient(to top left, #ffffff, #bfbfbf) !important; /* white */
color: black !important;}
.sheet-section {
padding: 0px;
border-style: none;
}
/* defensesTitleGrid */
.sheet-defbcb {grid-area: defbcb;} /* attr_defense_basic_combat_bonus */
.sheet-defmd1 {grid-area: defmd1;} /* attr_defense_modifier_1 */
.sheet-defmd2 {grid-area: defmd2;} /* attr_defense_modifier_2 */
.sheet-defshw {grid-area: defshw;} /* attr_defense_checkbox_expand */
.sheet-defnam {grid-area: defnam;} /* attr_defense_name */
.sheet-defrol {grid-area: defrol;} /* roll_defense */
.sheet-defmd3 {grid-area: defmd3;} /* attr_defense_modifier_3 */
.sheet-defmd4 {grid-area: defmd4;} /* attr_defense_modifier_4 */
.sheet-deftot {grid-area: deftot;} /* attr_defense_total_attack_bonus */
.sheet-cast {
font-size: 14px !important;
width: 48px;
height: 32px;
margin: 1px !important;
}
.sheet-field {
border: 1px solid #4169E1;
border-radius: 0px;
margin: 0px;
width: 100% !important;
display: inline-block;
text-align: center;
background-color: white;
}
.sheet-manual24 {
font-size: 14px !important;
height: 24px !important;
}
.sheet-derived24 {
font-size: 14px !important;
height: 24px !important;
}
.sheet-fieldLabelCenter {
font-size: 12px !important;
font:caption;
text-align: center;
}
.sheet-white {color: white;}
.sheet-right {text-align: right;}
.sheet-blueBackground {background-color: #4169E1;}
.sheet-paleRedGradient {background-image: linear-gradient(to top left, #ffffff, #ff8080);} Thanks for taking the time to read this post.
