I seem to have borked something real good. I've got this series of buttons across the top of my sheet that turn sections on and off. Here's the CSS. (I know this bit works) .charsheet .sheet-contswitch {
display: grid;
grid-template-columns: fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px) fit-content(200px) fit-content(100px) fit-content(100px) fit-content(100px) auto auto;
grid-template-rows: 32px;
grid-gap: 1rem;
background: url('<a href="https://blinkoz.s3.amazonaws.com/Clients/Blinxel/OtekuOtaku/Continuum/LinedPaperBG-04.png" rel="nofollow">https://blinkoz.s3.amazonaws.com/Clients/Blinxel/OtekuOtaku/Continuum/LinedPaperBG-04.png</a>');
}
table {
border-collapse: collapse;
border: 0x solid black;
}
@import url('<a href="https://fonts.googleapis.com/css?family=Pangolin&display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Pangolin&display=swap</a>');
/* Radio buttons to select section */
input.sheet-switch {
display: inline;
width: auto;
justify-items: start;
}
.charsheet .sheet-pagesections {
background-color: transparent;
color: #0000cc;
font-family: Pangolin;
line-height: 34px;
}
input.sheet-switch[value="all"]:checked ~ div.sheet-personal,
input.sheet-switch[value="all"]:checked ~ div.sheet-metabilities,
input.sheet-switch[value="all"]:checked ~ div.sheet-attributes,
input.sheet-switch[value="all"]:checked ~ div.sheet-goals,
input.sheet-switch[value="all"]:checked ~ div.sheet-skills,
input.sheet-switch[value="all"]:checked ~ div.sheet-combat,
input.sheet-switch[value="all"]:checked ~ div.sheet-favors,
input.sheet-switch[value="all"]:checked ~ div.sheet-relationships,
input.sheet-switch[value="all"]:checked ~ div.sheet-vehicles
{
display: block;
}
input.sheet-toggle-show[value="0"] ~ div.sheet-continuum,
input.sheet-toggle-show[value="0"] ~ div.sheet-yet,
input.sheet-toggle-show[value="0"] ~ div.sheet-spanning,
input.sheet-toggle-show[value="0"] ~ div.sheet-meta
{
display: none;
}
input.sheet-switch[value="personal"]:checked ~ div:not(.sheet-personal)
{
display: none;
}
input.sheet-switch[value="spanning"]:checked ~ div:not(.sheet-spanning) {
display: none;
}
input.sheet-switch[value="metabilities"]:checked ~ div:not(.sheet-metabilities) {
display: none;
}
input.sheet-switch[value="attributes"]:checked ~ div:not(.sheet-attributes) {
display: none;
}
input.sheet-switch[value="goals"]:checked ~ div:not(.sheet-goals) {
display: none;
}
input.sheet-switch[value="skills"]:checked ~ div:not(.sheet-skills) {
display: none;
}
input.sheet-switch[value="combat"]:checked ~ div:not(.sheet-combat) {
display: none;
}
input.sheet-switch[value="yet"]:checked ~ div:not(.sheet-yet) {
display: none;
}
input.sheet-switch[value="favors"]:checked ~ div:not(.sheet-favors) {
display: none;
}
input.sheet-switch[value="relationships"]:checked ~ div:not(.sheet-relationships) {
display: none;
}
input.sheet-switch[value="vehicles"]:checked ~ div:not(.sheet-vehicles) {
display: none;
}
/* end section selection*/ Now this is the old HTML, which works- </div>
<input type="radio" class="sheet-switch" name="attr_section" value="all" checked>All&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="personal">Personal Data&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="attributes">Attributes&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="goals">Goals&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="skills">Skills&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="combat">Combat and Equipment&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="favors">Favors&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="relationships">Relationships&nbsp;&nbsp;
<input type="radio" class="sheet-switch" name="attr_section" value="vehicles">Vehicles&nbsp;&nbsp;
<input type="checkbox" class="sheet-switch" name="attr_continuumdeets" value="1" style="opacity:0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" class="sheet-switch" name="attr_showmetabilities" value="1" style="opacity:0">&nbsp;&nbsp;
<div class="sheet-personal">
<h1 class="sheet-section">Personal Data</h1> and so on... here's the new one, where I'm migrating to Grid... <div class="sheet-contswitch">
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="all" checked><span class="sheet-pagesections" class="item" >All</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="personal"><span class="sheet-pagesections" class="item" >Personal Data</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="attributes"><span class="sheet-pagesections">Attributes</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="goals"><span class="sheet-pagesections">Goals</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="skills"><span class="sheet-pagesections">Skills</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="combat"><span class="sheet-pagesections">Combat and Equipment</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="favors"><span class="sheet-pagesections">Favors</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="relationships"><span class="sheet-pagesections">Relationships</span></div>
<div class="item"><input type="radio" class="sheet-switch" name="attr_section" value="vehicles"><span class="sheet-pagesections">Vehicles</span></div>
<div class="item"><input type="checkbox" class="sheet-switch" name="attr_continuumdeets" value="1" style="opacity:1"></div>
<div class="item"><input type="checkbox" class="sheet-switch" name="attr_showmetabilities" value="1" style="opacity:1"></div>
</div> I suspect it's to do with the <div class="sheet-contswitch"> but I'm not sure.
