.sheet-block-a, .sheet-block-switch:checked~.sheet-block-b { display: block; } .sheet-block-b, .sheet-block-switch:checked~.sheet-block-a { display: none; } .sheet-main { display: grid; width: 800px; height: 900px; grid-template-columns: 1min-content; grid-template-rows: 1min-content 1min-content 1min-content; grid-template-areas: "header" "common" "footer"; } .sheet-header { display: grid; grid-template-columns: 1min-content 1min-content 1max-content 1min-content 1max-content 1min-content 1max-content 1min-content; grid-template-rows: 1min-content 1min-content 1min-content 1min-content; grid-template-areas: "named namedvalue namedvalue namedvalue strength strengthvalue agility agilityvalue" "class classvalue classvalue classvalue intelligence intvalue willpower willpowervalue" "health hpvalue armor armorvalue supply supplyvalue credits creditsvalue" "maxhp maxhpvalue . . maxsupply maxsupplyvalue . ."; grid-area: header; background-color: silver; padding-top: 5px; padding-bottom: 5px; } .sheet-named { grid-area: named; text-align: right; vertical-align: middle; } .sheet-namedvalue { grid-area: namedvalue; } .sheet-strength { grid-area: strength; text-align: right; vertical-align: middle; } .sheet-strengthvalue { grid-area: strengthvalue; } .sheet-agility { grid-area: agility; text-align: right; vertical-align: middle; } .sheet-agilityvalue { grid-area: agilityvalue; } .sheet-class { grid-area: class; text-align: right; vertical-align: middle; } .sheet-classvalue { grid-area: classvalue; } .sheet-intelligence { grid-area: intelligence; text-align: right; vertical-align: middle; } .sheet-intvalue { grid-area: intvalue; } .sheet-willpower { grid-area: willpower; text-align: right; vertical-align: middle; } .sheet-willpowervalue { grid-area: willpowervalue; } .sheet-health { grid-area: health; text-align: right; vertical-align: middle; } .sheet-maxhp { grid-area: maxhp; text-align: right; vertical-align: middle; } .sheet-maxhpvalue { grid-area: maxhpvalue; } .sheet-hpvalue { grid-area: hpvalue; } .sheet-armor { grid-area: armor; text-align: right; vertical-align: middle; } .sheet-armorvalue { grid-area: armorvalue; } .sheet-supply { grid-area: supply; text-align: right; vertical-align: middle; } .sheet-supplyvalue { grid-area: supplyvalue; } .sheet-maxsupply { grid-area: maxsupply; text-align: right; vertical-align: middle; } .sheet-maxsupplyvalue { grid-area: maxsupplyvalue; } .sheet-credits { grid-area: credits; text-align: right; vertical-align: middle; } .sheet-creditsvalue { grid-area: creditsvalue; } .sheet-common { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1min-content 1min-content 1min-content 1min-content 1min-content; grid-template-areas: "skills skills skills skills" "sk1 sk2 sk3 sk4" "abbilities abbilities abbilities abbilities" "geek psychic outlaw warrior" "look look gear gear"; grid-area: common; padding: 5px; } .sheet-skills { padding-top: 5px; grid-area: skills; } .sheet-common input { margin-right: 5px; } .sheet-footer input { margin-right: 5px; } .sheet-sk1 { grid-area: sk1; } .sheet-sk2 { grid-area: sk2; } .sheet-sk3 { grid-area: sk3; } .sheet-sk4 { grid-area: sk4; } .sheet-abbilities { padding-top: 5px; grid-area: abbilities; } .sheet-geek { grid-area: geek; } .sheet-psychic { grid-area: psychic; } .sheet-outlaw { grid-area: outlaw; } .sheet-warrior { grid-area: warrior; } .sheet-look { padding-top: 10px; grid-area: look; } .sheet-gear { padding-top: 10px; grid-area: gear; } .sheet-footer { display: grid; grid-template-columns: 1min-content 1max-content 1min-content 1max-content 1min-content; grid-template-rows: 1min-content 1min-content 1min-content 1min-content; grid-template-areas: "xp advancement advancement advancement advancement" "xpvalue newabb xptext1 newatt xptext2" "xpvalue newabb xptext1 newatt xptext2" "xpvalue newabb xptext1 newatt xptext2"; grid-area: footer; background-color: silver; padding: 5px; } .sheet-xp { grid-area: xp; } .sheet-advancement { grid-area: advancement; } .sheet-xpvalue { width: 90%; grid-area: xpvalue; } .sheet-newabb { grid-area: newabb; } .sheet-xptext1 { grid-area: xptext1; } .sheet-newatt { grid-area: newatt; } .sheet-xptext2 { grid-area: xptext2; } .sheet-section { border-style: solid; } .sheet-namedinput { grid-area: namedinput; width: 175%; } .sheet-classinput { grid-area: classinput; width: 100%; } .sheet-look textarea { width: 90%; height: 75%; } .sheet-gear textarea { width: 90%; height: 60%; } label { padding-bottom: 5px; padding-top: 10px; } span { padding-left: 5px; padding-right: 5px; padding-top: 10px; padding-bottom: 10px; } .sheet-ship { display: grid; width: 800px; height: 900px; grid-template-columns: 1max-content; grid-template-rows: 1min-content 1min-content 1min-content; grid-template-areas: "shipheader" "shipcommon" "shipfooter"; } .sheet-shipheader { display: grid; grid-template-columns: 2fr 1fr 1min-content 1fr 1min-content 1fr 1min-content; grid-template-rows: 1min-content 1min-content; grid-template-areas: "shipname hull hullv shiparmor shiparmorv fuel fuelv" "shipnamev hullmax hullmaxv dmg dmgv fuelmax fuelmaxv"; grid-area: shipheader; background-color: silver; padding: 5px; } .sheet-shipname { grid-area: shipname; } .sheet-shipnamev { grid-area: shipnamev; } .sheet-hull { grid-area: hull; text-align: right; } .sheet-hullmax { grid-area: hullmax; text-align: right; } .sheet-hullv { grid-area: hullv; } .sheet-hullmaxv { grid-area: hullmaxv; } .sheet-dmg { grid-area: dmg; text-align: right; } .sheet-dmgv { grid-area: dmgv; } .sheet-fuel { grid-area: fuel; text-align: right; } .sheet-fuelmax { grid-area: fuelmax; text-align: right; } .sheet-fuelv { grid-area: fuelv; } .sheet-fuelmaxv { grid-area: fuelmaxv; } .sheet-shiparmor { grid-area: shiparmor; text-align: right; } .sheet-shiparmorv { grid-area: shiparmorv; } .sheet-shipcommon { display: grid; grid-template-columns: 1min-content 1min-content; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-areas: "upgrades upgrades" "addarmor addarmortxt" "advelec advelectxt" "advdrive advdrivetxt" "aftbrn aftbrntxt" "fueltnks fueltnkstxt" "maneuvr maneuvrtxt" "passanger passangertxt" "cargo cargotxt" "medbay medbaytxt" "pwrweapons pwrweaponstxt" "shuttle shuttletxt"; grid-area: shipcommon; } .sheet-shipcommon input { margin-right: 5px; } .sheet-upgrades { grid-area: upgrades; } .sheet-addarmor { grid-area: addarmor; } .sheet-advelec { grid-area: advelec; } .sheet-advdrive { grid-area: advdrive; } .sheet-fueltnks { grid-area: fueltnks; } .sheet-passanger { grid-area: passanger; padding-right: 5px; } .sheet-cargo { grid-area: cargo; } .sheet-medbay { grid-area: medbay; } .sheet-pwrweapons { grid-area: pwrweapons; } .sheet-shuttle { grid-area: shuttle; } .sheet-addarmortxt { grid-area: addarmortxt; } .sheet-advelectxt { grid-area: advelectxt; } .sheet-advdrivetxt { grid-area: advdrivetxt; } .sheet-aftbrn { grid-area: aftbrn; } .sheet-aftbrntxt { grid-area: aftbrntxt; } .sheet-fueltnkstxt { grid-area: fueltnkstxt; } .sheet-maneuvrtxt { grid-area: maneuvrtxt; } .sheet-maneuvr { grid-area: maneuvr; } .sheet-passangertxt { grid-area: passangertxt; } .sheet-cargotxt { grid-area: cargotxt; } .sheet-medbaytxt { grid-area: medbaytxt; } .sheet-pwrweaponstxt { grid-area: pwrweaponstxt; } .sheet-shuttletxt { grid-area: shuttletxt; } .sheet-shipfooter { grid-area: shipfooter; } .sheet-shipfooter textarea { width: 100%; height: 75%; }