mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
10941 lines
216 KiB
CSS
10941 lines
216 KiB
CSS
/*
|
||
Logical Fantasy Gaming (LFG)
|
||
Official Roll20 Character Sheet
|
||
|
||
Author: Daniel Brillat
|
||
System: Logical Fantasy Gaming (LFG)
|
||
Repository: https://github.com/LogicalFantasyGaming/lfg-roll20-character-sheet
|
||
*/
|
||
|
||
/* LFG Roll20 Sheet (Phase 1 - Manual Entry) */
|
||
/* v3: expanded Skills + Gear slots based on Hybrid v17 PDF form fields */
|
||
|
||
.lfg-sheet { font-family: Arial, sans-serif; position: relative;
|
||
}
|
||
|
||
|
||
/* Default fillable field tone (matches Core Stats fields) */
|
||
.lfg-sheet input[type="text"],
|
||
.lfg-sheet textarea{
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
/* Placeholder styling: lighter than filled text */
|
||
.lfg-sheet input::placeholder,
|
||
.lfg-sheet textarea::placeholder{
|
||
color: rgba(0,0,0,0.45);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Hide tab state radios (still functional) */
|
||
.tabstate {
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
/* Tabs */
|
||
.tabs {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.tabbtn {
|
||
border: 1px solid #333;
|
||
padding: 6px 10px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
|
||
/* Highlight active tab */
|
||
#tab-front:checked ~ .tabs label[for="tab-front"],
|
||
#tab-back:checked ~ .tabs label[for="tab-back"],
|
||
#tab-magic:checked ~ .tabs label[for="tab-magic"] {
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
|
||
/* Pages */
|
||
.page { display: none; }
|
||
#tab-front:checked ~ .page-front { display: block; }
|
||
#tab-back:checked ~ .page-back { display: block; }
|
||
#tab-magic:checked ~ .page-magic { display: block; }
|
||
|
||
.grid { display: grid; gap: 10px; }
|
||
.grid.two { grid-template-columns: 1fr 1fr; }
|
||
.grid.three { grid-template-columns: 1fr 1fr 1fr; }
|
||
|
||
/* Top row (Core Stats + Armor & Saves): stack by default, sit side-by-side when wide enough */
|
||
.grid.top-two{
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
gap: 20px;
|
||
justify-content:flex-start;
|
||
align-items:flex-start;
|
||
/* ensures we only wrap when there would be <10px space to the right */
|
||
padding-right:10px;
|
||
}
|
||
|
||
.grid.top-two > .card{
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
|
||
.card {
|
||
border: 1px solid #333;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
}
|
||
.card-title { font-weight: bold; margin-bottom: 8px; }
|
||
|
||
.subcard {
|
||
border: 1px solid #777;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
.subcard-title {
|
||
font-weight: bold;
|
||
margin-bottom: 6px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.row { margin-bottom: 8px; }
|
||
.row label { display: block; font-size: 12px; margin-bottom: 2px; }
|
||
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||
.row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
|
||
|
||
input[type="text"], textarea {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border: 1px solid #666;
|
||
border-radius: 4px;
|
||
padding: 4px 6px;
|
||
}
|
||
|
||
textarea { min-height: 25px; resize: vertical; }
|
||
|
||
.stat small { display: block; font-size: 11px; margin-top: 4px; }
|
||
hr { border: none; border-top: 1px solid #999; margin: 10px 0; }
|
||
|
||
/* Skills */
|
||
.skill-header {
|
||
display: grid;
|
||
grid-template-columns: 0.7fr 2.2fr 0.9fr 0.8fr 0.8fr 0.7fr;
|
||
gap: 6px;
|
||
align-items: end;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
margin-bottom: 6px;
|
||
}
|
||
.skill-row {
|
||
display: grid;
|
||
grid-template-columns: 0.7fr 2.2fr 0.9fr 0.8fr 0.8fr 0.7fr;
|
||
gap: 6px;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
.skill-name { font-size: 12px; }
|
||
|
||
/* Weapons */
|
||
.weapon-block { padding: 6px 0; }
|
||
|
||
/* Inventory grids */
|
||
.inv-grid {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
.inv-cols-1 { grid-template-columns: 1fr; }
|
||
.inv-cols-2 { grid-template-columns: 1fr 1fr; }
|
||
|
||
.inv-row {
|
||
display: grid;
|
||
grid-template-columns: 28px 1fr 80px;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
.inv-label {
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
border: 1px solid #999;
|
||
border-radius: 4px;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.inv-sheaths {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
|
||
/* Equipped */
|
||
.equip-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 6px;
|
||
}
|
||
.equip-row {
|
||
display: grid;
|
||
grid-template-columns: 120px 1fr 80px;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
.equip-label {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
|
||
/* Repeating custom skills */
|
||
fieldset.repeating_customskills {
|
||
border: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.skill-header-custom,
|
||
.skill-row-custom {
|
||
grid-template-columns: 0.7fr 2.2fr 0.9fr 0.8fr 0.8fr 0.7fr;
|
||
}
|
||
|
||
.skill-row-custom input[type="text"]{
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
/* ===== Identity Strip (Front) ===== */
|
||
.identity-strip{
|
||
border: 1px solid #333;
|
||
border-radius: 0;
|
||
padding: 6px 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.id-grid{
|
||
display: grid;
|
||
grid-template-columns: 1.5fr 1.1fr 0.7fr 0.7fr 0.7fr 0.7fr 0.8fr 140px;
|
||
gap: 6px 10px;
|
||
align-items: end;
|
||
}
|
||
|
||
/* labels */
|
||
.identity-strip label{
|
||
display: block;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
text-transform: uppercase;
|
||
margin-bottom: 2px;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
/* underline inputs */
|
||
.identity-strip input[type="text"]{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border: 0;
|
||
border-bottom: 1px solid #333;
|
||
border-radius: 0;
|
||
padding: 1px 2px;
|
||
height: 18px;
|
||
font-size: 11px;
|
||
background: transparent;
|
||
}
|
||
.identity-strip input[type="text"]:focus{
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* XP compact box (4 digits) */
|
||
.id-xp{
|
||
justify-self: end;
|
||
width: 140px;
|
||
border: 2px solid #333;
|
||
padding: 4px 6px 6px 6px;
|
||
border-radius: 0;
|
||
}
|
||
.id-xp label{ text-align: center; font-size: 9px; margin-bottom: 3px; }
|
||
.id-xp .xp4{
|
||
border: 1px solid #333 !important;
|
||
border-radius: 0;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
height: 26px;
|
||
padding: 2px 4px;
|
||
}
|
||
|
||
/* Row layout matching paper sheet */
|
||
.id-name{ grid-column: 1 / 2; grid-row: 1; }
|
||
.id-class{ grid-column: 2 / 3; grid-row: 1; }
|
||
.id-level{ grid-column: 3 / 4; grid-row: 1; }
|
||
.id-xp{ grid-column: 4 / 5; grid-row: 1; align-self: start; }
|
||
|
||
/* second row across full width excluding XP */
|
||
.id-age{ grid-column: 1 / 2; grid-row: 2; }
|
||
.id-sex{ grid-column: 2 / 3; grid-row: 2; }
|
||
.id-height{ grid-column: 3 / 4; grid-row: 2; }
|
||
.id-weight{ grid-column: 1 / 2; grid-row: 3; }
|
||
.id-hair{ grid-column: 2 / 3; grid-row: 3; }
|
||
.id-eyes{ grid-column: 3 / 4; grid-row: 3; }
|
||
.id-race{ grid-column: 1 / 4; grid-row: 4; }
|
||
|
||
/* third row: morality + motivations */
|
||
.id-morality{ grid-column: 1 / 2; grid-row: 5; }
|
||
.id-motivation1{ grid-column: 2 / 3; grid-row: 5; }
|
||
.id-motivation2{ grid-column: 3 / 4; grid-row: 5; }
|
||
|
||
/* responsive */
|
||
@media (max-width: 900px){
|
||
.id-grid{ grid-template-columns: 1fr 1fr; }
|
||
.id-xp{ grid-column: 1 / 3; grid-row: auto; width: auto; }
|
||
.id-race, .id-motivation1, .id-motivation2{ grid-column: 1 / 3; }
|
||
}
|
||
|
||
|
||
/* Override placements to fit Age/Sex/Height/Weight/Hair/Eyes/Race on one line */
|
||
.id-name{ grid-column: 1 / 4; grid-row: 1; }
|
||
.id-class{ grid-column: 4 / 7; grid-row: 1; }
|
||
.id-level{ grid-column: 7 / 8; grid-row: 1; }
|
||
.id-xp{ grid-column: 8 / 9; grid-row: 1; align-self: start; }
|
||
|
||
/* Single line: Age, Sex, Height, Weight, Hair, Eyes, Race */
|
||
.id-age{ grid-column: 1 / 2; grid-row: 2; }
|
||
.id-sex{ grid-column: 2 / 3; grid-row: 2; }
|
||
.id-height{ grid-column: 3 / 4; grid-row: 2; }
|
||
.id-weight{ grid-column: 4 / 5; grid-row: 2; }
|
||
.id-hair{ grid-column: 5 / 6; grid-row: 2; }
|
||
.id-eyes{ grid-column: 6 / 7; grid-row: 2; }
|
||
.id-race{ grid-column: 7 / 8; grid-row: 2; }
|
||
|
||
/* Row 3: Morality + Motivations */
|
||
.id-morality{ grid-column: 1 / 3; grid-row: 3; }
|
||
.id-motivation1{ grid-column: 3 / 6; grid-row: 3; }
|
||
.id-motivation2{ grid-column: 6 / 8; grid-row: 3; }
|
||
|
||
|
||
/* ===== Collapsible Identity Strip ===== */
|
||
.id-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
/* Button */
|
||
.id-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
|
||
/* Show when checked */
|
||
.id-toggle:checked + .id-toggle-btn{
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
|
||
/* Collapse/expand: checkbox and label are directly before .identity-strip */
|
||
.id-toggle:not(:checked) + .id-toggle-btn + .identity-strip{
|
||
display: none;
|
||
}
|
||
|
||
|
||
/* ===== Core Stats Ability Block (paper style) ===== */
|
||
.ability-block{
|
||
margin-bottom: 8px;
|
||
}
|
||
.ability-header{
|
||
display: grid;
|
||
grid-template-columns: 70px 1fr 0.6fr;
|
||
gap: 8px;
|
||
align-items: end;
|
||
margin-bottom: 6px;
|
||
}
|
||
.ability-col-title{
|
||
font-family: Arial, sans-serif;
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
text-align: center;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.ability-row{
|
||
display: grid;
|
||
grid-template-columns: 70px 1fr 0.6fr;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.ability-abbr{
|
||
font-weight: 900;
|
||
font-size: 28px;
|
||
letter-spacing: 1px;
|
||
line-height: 1;
|
||
}
|
||
.ability-box{
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
height: 44px !important;
|
||
font-size: 18px !important;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* ===== Ability Score Size Reduction (Sheet16) ===== */
|
||
.ability-abbr{
|
||
font-size: 21px; /* ~25% reduction from 28px */
|
||
}
|
||
|
||
.ability-col-title{
|
||
font-size: 10px;
|
||
}
|
||
|
||
.ability-box{
|
||
width: 64px;
|
||
height: 32px !important;
|
||
font-size: 14px !important;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* ===== Ability Block Fixes (Sheet17) ===== */
|
||
/* Make STR/DEX/etc smaller */
|
||
.ability-abbr{
|
||
font-size: 18px !important;
|
||
letter-spacing: 0.5px !important;
|
||
}
|
||
|
||
/* Column headers should be readable */
|
||
.ability-col-title{
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
/* Force narrow numeric boxes (3 digits) */
|
||
.ability-header,
|
||
.ability-row{
|
||
grid-template-columns: 55px 72px 64px !important;
|
||
gap: 6px !important;
|
||
}
|
||
|
||
.ability-box{
|
||
width: 72px !important;
|
||
max-width: 72px !important;
|
||
min-width: 72px !important;
|
||
height: 30px !important;
|
||
font-size: 16px !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* Ensure inputs don't stretch to 100% */
|
||
.ability-row input[type="text"]{
|
||
justify-self: center;
|
||
}
|
||
|
||
|
||
/* ===== Core Stats Card - Exact Layout (Sheet38) ===== */
|
||
.core-stats-card .card-title{
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.hp-panel{
|
||
border: 2px solid #333;
|
||
border-radius: 0;
|
||
padding: 10px;
|
||
margin: 12px auto 14px auto;
|
||
display: inline-block;
|
||
width: fit-content;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hp-panel-title{
|
||
text-align: center;
|
||
font-weight: 900;
|
||
font-size: 24px;
|
||
letter-spacing: 0.3px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.hp-grid{
|
||
display: grid;
|
||
grid-template-columns: repeat(3, auto);
|
||
gap: 14px;
|
||
align-items: end;
|
||
justify-content: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.hp-label{
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.hp-label-small{
|
||
font-size: 13px;
|
||
line-height: 1.05;
|
||
text-align: center;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hp-box{
|
||
width: 64px;
|
||
box-sizing: border-box;
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
height: 34px !important;
|
||
font-size: 16px !important;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.hp-drgrid{
|
||
display: grid;
|
||
/* Match HP grid column geometry so the DR field can align with Injured Threshold */
|
||
grid-template-columns: repeat(3, 62px);
|
||
gap: 14px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.hp-drlabel{
|
||
grid-column: 1 / 3;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.hp-drbox{
|
||
grid-column: 3;
|
||
justify-self: stretch;
|
||
width: 62px;
|
||
min-width: 62px;
|
||
max-width: 62px;
|
||
height: 24px !important;
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
font-size: 13px !important;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.corestat-row{
|
||
display: grid;
|
||
grid-template-columns: 1fr 86px;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 18px 0;
|
||
}
|
||
|
||
.corestat-label{
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.corestat-label-initiative{
|
||
color: #1e4db7;
|
||
}
|
||
|
||
.corestat-box{
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
height: 34px !important;
|
||
font-size: 16px !important;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
padding: 0 !important;
|
||
width: 86px !important;
|
||
}
|
||
|
||
|
||
|
||
/* ===== Core Stats Fixed Box Width + Non-Drifting Spacing (Sheet39) ===== */
|
||
/* HP boxes: fixed width + fixed gaps (do not expand with window) */
|
||
.core-stats-card .hp-grid{
|
||
grid-template-columns: repeat(3, 62px) !important;
|
||
justify-content: center;
|
||
gap: 14px !important;
|
||
}
|
||
|
||
.core-stats-card .hp-cell{
|
||
width: 62px;
|
||
}
|
||
|
||
.core-stats-card .hp-box{
|
||
width: 50px !important;
|
||
min-width: 50px !important;
|
||
max-width: 50px !important;
|
||
}
|
||
|
||
/* Hit Rating / Initiative / Move Speed: keep input close to label (no drifting) */
|
||
.core-stats-card .corestat-row{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
margin: 18px 0;
|
||
}
|
||
|
||
.core-stats-card .corestat-label{
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.core-stats-card .corestat-box{
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
|
||
/* ===== Armor & Saves card (Sheet43) ===== */
|
||
.armor-saves-card { padding: 10px 12px 12px; }
|
||
|
||
.armor-saves-card .armor-box,
|
||
.armor-saves-card .save-box {
|
||
border: 2px solid #333;
|
||
border-radius: 0;
|
||
height: 34px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
background: #f2f2f2;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* All Saving Throw boxes are the same size */
|
||
.armor-saves-card input.save-box{
|
||
/* Reduce max width by 50% (84px -> 42px) */
|
||
width: 42px;
|
||
max-width: 42px;
|
||
/* Reduced by 15% from prior (43px -> ~37px) */
|
||
height: 37px;
|
||
}
|
||
|
||
/* Ensure all Saving Throw inputs (including Ability Mod) share the same size */
|
||
.armor-saves-card input.save-ability,
|
||
.armor-saves-card input.save-total{
|
||
width: 42px;
|
||
max-width: 42px;
|
||
height: 37px;
|
||
}
|
||
|
||
/* Ability Mod boxes (CON/DEX/WIS) are fillable with visible placeholders */
|
||
.armor-saves-card input.save-ability{
|
||
font-weight: 900;
|
||
}
|
||
.armor-saves-card input.save-ability::placeholder{
|
||
color: #888;
|
||
opacity: 1;
|
||
font-weight: 900;
|
||
}
|
||
|
||
|
||
.armor-saves-card input.armor-box,
|
||
.armor-saves-card input.save-box{
|
||
padding: 0 !important;
|
||
box-sizing: border-box;
|
||
}
|
||
.armor-saves-card .armor-top{
|
||
width: max-content;
|
||
|
||
display: grid;
|
||
/* Reduce Armor Class field widths by 25% (84px -> 63px) */
|
||
grid-template-columns: auto 63px auto;
|
||
align-items: start;
|
||
column-gap: 12px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.armor-saves-card .armor-class-label{
|
||
font-size: 26px;
|
||
font-weight: 900;
|
||
color: #7a1f1f;
|
||
line-height: 1.05;
|
||
padding-top: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.armor-saves-card .armor-box-main{
|
||
width: 63px;
|
||
/* Increase height by 20% (44px -> ~53px) */
|
||
height: 64px;
|
||
font-size: 22px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.armor-saves-card .temp-ac-block{
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 5px;
|
||
justify-self: center;
|
||
}
|
||
.armor-saves-card .temp-ac-label{
|
||
font-size: 12px;
|
||
line-height: 1.05;
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.armor-saves-card .armor-box-temp{
|
||
width: 32px;
|
||
/* Increase height by 20% (34px -> ~41px) */
|
||
height: 49px;
|
||
margin-top: 2px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.armor-saves-card .armor-lines{
|
||
margin-top: 10px;
|
||
display: grid;
|
||
grid-template-columns: auto 63px auto;
|
||
column-gap: 12px;
|
||
row-gap: 10px;
|
||
justify-content: start;
|
||
}
|
||
|
||
/* Small reference text under Touch AC (matches Temp AC label styling) */
|
||
.armor-saves-card .ac-formula{
|
||
font-size: 12px;
|
||
line-height: 1.05;
|
||
margin-top: 8px;
|
||
margin-left: 2px;
|
||
color: #333;
|
||
text-align: left;
|
||
}
|
||
|
||
.armor-saves-card .armor-line{
|
||
display: contents;
|
||
}
|
||
|
||
.armor-saves-card .armor-line-label{
|
||
grid-column: 1;
|
||
font-size: 18px;
|
||
font-weight: 900;
|
||
color: #333;
|
||
text-align: left;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.armor-saves-card .armor-box-small{
|
||
width: 63px;
|
||
height: 41px;
|
||
font-size: 16px;
|
||
grid-column: 2;
|
||
justify-self: center;
|
||
}
|
||
|
||
.armor-saves-card .conditions-panel{
|
||
border: 1px solid #333;
|
||
padding: 6px 8px 2px;
|
||
margin-top: 12px;
|
||
width: 300px;
|
||
max-width: 300px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.armor-saves-card .conditions-label{
|
||
font-size: 16px;
|
||
color: #333;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.armor-saves-card .conditions-text{
|
||
width: 100%;
|
||
height: 48px;
|
||
border: 1px solid #333;
|
||
resize: none;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
.armor-saves-card .saving-title{
|
||
margin-top: 14px;
|
||
text-align: center;
|
||
font-size: 22px;
|
||
font-weight: 900;
|
||
color: #333;
|
||
}
|
||
|
||
.armor-saves-card .saving-header{
|
||
margin-top: 4px;
|
||
display: grid;
|
||
grid-template-columns: 81px 37px 29px 37px 4px 37px 4px 37px;
|
||
align-items: end;
|
||
column-gap: 6px;
|
||
justify-content: start;
|
||
}
|
||
|
||
.armor-saves-card .saving-header .sh{
|
||
font-size: 12px;
|
||
text-align: center;
|
||
line-height: 1.05;
|
||
color: #333;
|
||
justify-self: center;
|
||
}
|
||
|
||
.armor-saves-card .save-row{
|
||
margin-top: 6px;
|
||
display: grid;
|
||
grid-template-columns: 96px 37px 29px 37px 4px 37px 4px 37px;
|
||
align-items: center;
|
||
column-gap: 6px;
|
||
}
|
||
|
||
.armor-saves-card .save-name{
|
||
font-size: 20px;
|
||
font-weight: 900;
|
||
letter-spacing: 1px;
|
||
color: #333;
|
||
text-align: left;
|
||
}
|
||
|
||
.armor-saves-card .save-eq,
|
||
.armor-saves-card .save-plus{
|
||
text-align: center;
|
||
font-size: 22px;
|
||
font-weight: 900;
|
||
color: #333;
|
||
}
|
||
|
||
/* Ability mod boxes are now fillable inputs with placeholders */
|
||
.armor-saves-card input.save-ability::placeholder{
|
||
color: #888;
|
||
opacity: 1;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.armor-saves-card input.save-ability{
|
||
font-weight: 900;
|
||
}
|
||
|
||
|
||
/* Total Save boxes: larger font to match Initiative */
|
||
.armor-saves-card .save-total{
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* ===== Sheet52 adjustments ===== */
|
||
|
||
/* Conditions / Effects: left-align and lock position with its header text */
|
||
.armor-saves-card .conditions-panel{
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
/* keep fixed size; do not expand with window */
|
||
width: 300px !important;
|
||
max-width: 300px !important;
|
||
}
|
||
.armor-saves-card .conditions-label{
|
||
text-align: left !important;
|
||
}
|
||
|
||
/* Core Stats card max width: no more than HP panel + 40px (HP panel outer ~238px) */
|
||
.core-stats-card{
|
||
width: fit-content;
|
||
max-width: 278px;
|
||
}
|
||
|
||
/* Armor & Saves card max width: no more than Saving Throws grid + 40px (grid ~344px) */
|
||
.armor-saves-card{
|
||
width: fit-content;
|
||
max-width: 384px;
|
||
}
|
||
|
||
/* ===== Sheet61: Weapons table-style layout (Front) ===== */
|
||
.weapon-table{
|
||
border: 1px solid #333;
|
||
border-radius: 0;
|
||
display: grid;
|
||
grid-template-columns: 1.35fr 1fr 1fr 1.2fr;
|
||
grid-auto-rows: auto;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* grid placement */
|
||
.weapon-table > *{
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.wt-left{
|
||
border-right: 1px solid #333;
|
||
padding: 8px 10px;
|
||
}
|
||
|
||
.wt-row1{ border-bottom: 1px solid #333; }
|
||
.wt-row2{ border-bottom: 1px solid #333; }
|
||
|
||
.wt-head{
|
||
border-right: 1px solid #333;
|
||
border-bottom: 1px solid #333;
|
||
text-align: center;
|
||
font-family: Arial, sans-serif;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
padding: 10px 6px 12px;
|
||
line-height: 1.05;
|
||
}
|
||
.wt-head:last-child{ border-right: 0; }
|
||
|
||
.wt-cell{
|
||
border-right: 1px solid #333;
|
||
border-bottom: 1px solid #333;
|
||
padding: 10px 12px;
|
||
}
|
||
.wt-cell:last-child{ border-right: 0; }
|
||
|
||
/* left column typography */
|
||
.wt-weaponline{
|
||
display: grid;
|
||
grid-template-columns: 174px 1fr;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
.wt-weaponlabel{
|
||
font-size: 22px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.wt-weaponname{
|
||
border: 0 !important;
|
||
border-bottom: 1px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
height: 26px !important;
|
||
padding: 2px 4px !important;
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
.wt-handline{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px; /* exactly 10px between label text and R/L box */
|
||
margin-bottom: 8px;
|
||
}
|
||
.wt-handlabel{
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
}
|
||
.wt-hand{
|
||
width: 72px !important;
|
||
height: 26px !important;
|
||
font-size: 14px !important;
|
||
text-align: center;
|
||
flex: 0 0 72px;
|
||
}
|
||
|
||
.wt-bigaction{
|
||
display: block;
|
||
}
|
||
.wt-biglabel{
|
||
font-size: 18px;
|
||
font-weight: 900;
|
||
}
|
||
.wt-bigbox{
|
||
height: 28px !important;
|
||
font-size: 14px !important;
|
||
}
|
||
|
||
/* Attack line */
|
||
.wt-attackline{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
.wt-attacklabel{
|
||
font-size: 22px;
|
||
font-weight: 900;
|
||
}
|
||
.wt-attackname{
|
||
border: 0 !important;
|
||
border-bottom: 1px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
height: 28px !important;
|
||
padding: 2px 4px !important;
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
/* right column inputs */
|
||
.wt-box{
|
||
width: 100% !important;
|
||
height: 42px !important;
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
font-size: 18px !important;
|
||
font-weight: 700 !important;
|
||
text-align: center !important;
|
||
padding: 0 !important;
|
||
background: #f2f2f2 !important;
|
||
}
|
||
|
||
/* Other Info row spans full width */
|
||
.wt-otherinfo{
|
||
grid-column: 1 / 5;
|
||
padding: 10px 12px 12px;
|
||
}
|
||
.wt-otherlabel{
|
||
font-family: Arial, sans-serif;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 6px;
|
||
}
|
||
/* Keep the weapon hr tight */
|
||
.repeating_weapons hr{
|
||
margin: 10px 0;
|
||
}
|
||
|
||
/* Repeating Feats/Abilities: keep consistent spacing */
|
||
fieldset.repeating_featsabilities{
|
||
border: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ===== Sheet62: Weapons card full-width (Front) ===== */
|
||
.weapons-card-full{
|
||
grid-column: 1 / -1; /* span both columns in .grid.two */
|
||
width: 682px; /* Core Stats (278) + gap (20) + Armor&Saves (384) */
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* make the grid container not constrain the spanning card */
|
||
.page-front .grid.two{
|
||
grid-auto-flow: row;
|
||
}
|
||
|
||
/* WEAPON label textbox */
|
||
.wt-weaponlabelbox{
|
||
width: 174px !important; /* +5% from 165px */
|
||
height: 28px !important;
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
background: #f2f2f2 !important;
|
||
font-size: 15px !important;
|
||
font-weight: 700 !important;
|
||
text-align: left !important;
|
||
padding: 2px 6px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Update weaponline layout since label is now an input */
|
||
.wt-weaponline{
|
||
display: grid;
|
||
grid-template-columns: 150px 1fr;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* Other Attack single textbox */
|
||
.wt-otherattack{
|
||
width: 90% !important;
|
||
height: 29px !important;
|
||
border: 0.7px solid #888 !important; /* ~0.5pt */
|
||
border-radius: 0 !important;
|
||
background: #f2f2f2 !important;
|
||
font-size: 14px !important;
|
||
font-weight: 700 !important;
|
||
padding: 2px 8px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* Sheet63: Big Action Attack label matches Attack Bonus style */
|
||
.wt-biglabel{
|
||
font-family: Arial, sans-serif;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Sheet71: Weapon Other Info textarea sizing (matches desired 1-line expandable behavior) */
|
||
.weapon-notes-text{
|
||
width: 100%;
|
||
height: 25px;
|
||
min-height: 25px;
|
||
border: 1px solid #333;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
/* Sheet72: Override Roll20 largedialog textarea height for weapon notes (initially compact but resizable) */
|
||
.charsheet textarea.weapon-notes-text{
|
||
height: 25px;
|
||
min-height: 25px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
}
|
||
|
||
/* Sheet73: header inputs under Attack Bonus / Critical / Damage */
|
||
.wt-head{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.wt-headlabel{
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.wt-box-top{
|
||
margin-top: 8px !important;
|
||
height: 42px !important; /* exact match to existing wt-box */
|
||
}
|
||
|
||
|
||
/* Sheet78: Secondary (second-row) weapon boxes */
|
||
.wt-row2 .wt-box{
|
||
font-size: 12px !important; /* already reduced */
|
||
height: 24px !important; /* -10% from 27px */
|
||
border: 0.7px solid #999 !important; /* ~0.5pt, lighter */
|
||
background: #f6f6f6 !important; /* subtle secondary feel */
|
||
}
|
||
|
||
/* Sheet76: Wider Initiative box */
|
||
input[name="attr_Initiative"].corestat-box{
|
||
width: 96px !important;
|
||
}
|
||
|
||
/* Sheet77: Expandable Feats & Class Abilities rows (initially compact) */
|
||
.charsheet textarea.feats-notes-text{
|
||
width: 100%;
|
||
height: 25px;
|
||
min-height: 25px;
|
||
border: 1px solid #333;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
padding: 2px 4px;
|
||
}
|
||
|
||
/* Sheet78: Feats card row spacing consistency */
|
||
.feats-card .row{
|
||
margin-bottom: 6px;
|
||
}
|
||
.feats-card .row:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.charsheet textarea.feats-notes-text{
|
||
margin: 0;
|
||
display: block;
|
||
}
|
||
|
||
/* Sheet81: Definitive styling for Atk Bonus 2 / Critical 2 / Damage 2 */
|
||
.charsheet input.wt-box.wt-box-secondary{
|
||
height: 36px !important; /* 15% shorter than 42px */
|
||
font-size: 12px !important; /* -2 points from 14px baseline */
|
||
border-width: 0.7px !important; /* ~0.5pt */
|
||
border-style: solid !important;
|
||
border-color: #bbb !important; /* visibly lighter */
|
||
background: #f7f7f7 !important; /* subtle secondary */
|
||
}
|
||
|
||
/* Sheet82: Confidence Tokens line under CHA in Core Stats */
|
||
.ability-tokenline{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* Sheet83: Confidence Tokens box narrower (-30%) */
|
||
.charsheet input.hp-drbox.ct-box{
|
||
width: 44px !important;
|
||
min-width: 44px !important;
|
||
max-width: 44px !important;
|
||
}
|
||
|
||
/* Sheet83: Prevent Identity & XP grid from stretching too wide on large windows */
|
||
.id-grid{
|
||
max-width: 760px;
|
||
}
|
||
|
||
/* Sheet84: Morality Points compact field (3 digits) */
|
||
.id-moralitypoints input.mp3{
|
||
width: 56px;
|
||
max-width: 56px;
|
||
min-width: 56px;
|
||
}
|
||
|
||
/* Sheet85: Vision & Senses / Languages row (even split) */
|
||
.id-row-vision{
|
||
grid-column: 1 / 8; /* stop before the 140px XP column (col 8) */
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* Sheet85: Morality Points compact field (3 digits) */
|
||
.id-moralitypoints input.mp3{
|
||
width: 56px;
|
||
max-width: 56px;
|
||
min-width: 56px;
|
||
}
|
||
|
||
/* Sheet87: Prevent Vision & Senses label wrapping */
|
||
.id-vision label{
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* Sheet88: Identity toggle chevron + clickable affordance */
|
||
.id-toggle-btn{
|
||
position: relative;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
padding-right: 22px; /* room for arrow */
|
||
}
|
||
.id-toggle-btn::after{
|
||
content: "◀"; /* collapsed */
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
.id-toggle:checked + .id-toggle-btn::after{
|
||
content: "▼"; /* expanded */
|
||
color: #000;
|
||
}
|
||
.id-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
/* Sheet88: Tabs look like real tabs */
|
||
.tabs{
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-bottom: 0;
|
||
}
|
||
.tabbtn{
|
||
cursor: pointer;
|
||
font-weight: 700;
|
||
padding: 6px 12px;
|
||
border: 1px solid #777;
|
||
border-bottom: 1px solid #777;
|
||
background: #e9e9e9;
|
||
border-top-left-radius: 8px;
|
||
border-top-right-radius: 8px;
|
||
box-shadow: 0 1px 0 rgba(0,0,0,0.15);
|
||
user-select: none;
|
||
}
|
||
.tabbtn:hover{
|
||
background: #f2f2f2;
|
||
}
|
||
|
||
/* Active tab */
|
||
.tabstate:checked + input.tabstate + .tabs label[for="tab-front"]{
|
||
/* placeholder - overridden below */
|
||
}
|
||
#tab-front:checked ~ .tabs label[for="tab-front"],
|
||
#tab-back:checked ~ .tabs label[for="tab-back"]{
|
||
background: #eaeaea;
|
||
border-color: #333;
|
||
border-bottom: none; /* connected to content */
|
||
position: relative;
|
||
top: 1px; /* slight lift */
|
||
}
|
||
|
||
/* Sheet89: Right column stack under Armor & Saves */
|
||
.right-col{
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
width: fit-content;
|
||
max-width: 384px;
|
||
}
|
||
|
||
/* Sheet89: Armor & Defenses card sizing */
|
||
.armor-defenses-card{
|
||
width: fit-content;
|
||
max-width: 308px;
|
||
}
|
||
|
||
|
||
/* ===== Sheet94: Armor & Defenses layout (paper-style) ===== */
|
||
.armor-defenses-card{
|
||
width: fit-content;
|
||
max-width: 308px;
|
||
padding: 10px 12px 12px;
|
||
}
|
||
|
||
.armor-defenses-card .ad-body{
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* shared */
|
||
.armor-defenses-card .ad-label{
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.armor-defenses-card .ad-label.red{
|
||
color: #7a1f1f;
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
}
|
||
.armor-defenses-card .ad-input{
|
||
background: transparent !important;
|
||
border: 0 !important;
|
||
border-bottom: 1px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
padding: 2px 4px !important;
|
||
height: 22px !important;
|
||
font-size: 12px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
.armor-defenses-card .ad-input:focus{
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* block wrapper */
|
||
.armor-defenses-card .ad-block{
|
||
border: 1px solid #333;
|
||
border-radius: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.armor-defenses-card .ad-block-title{
|
||
font-weight: 900;
|
||
font-size: 16px;
|
||
letter-spacing: 0.4px;
|
||
padding: 8px 10px;
|
||
border-bottom: 1px solid #333;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* armor block rows */
|
||
.armor-defenses-card .ad-armor{
|
||
padding-bottom: 8px;
|
||
}
|
||
.armor-defenses-card .ad-row{
|
||
padding: 6px 10px;
|
||
border-bottom: 1px solid #333;
|
||
}
|
||
.armor-defenses-card .ad-row:last-child{
|
||
border-bottom: 0;
|
||
}
|
||
.armor-defenses-card .ad-row-two{
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
.armor-defenses-card .ad-row-three{
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 10px;
|
||
}
|
||
.armor-defenses-card .ad-field{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.armor-defenses-card .ad-field.ar-field{
|
||
gap: 4px;
|
||
}
|
||
.armor-defenses-card .ad-line{
|
||
width: 100%;
|
||
}
|
||
.armor-defenses-card input.ad-box{
|
||
width: 42px !important;
|
||
min-width: 42px !important;
|
||
max-width: 42px !important;
|
||
height: 26px !important;
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
background: #f2f2f2 !important;
|
||
text-align: center !important;
|
||
font-weight: 700 !important;
|
||
padding: 0 !important;
|
||
}
|
||
/* AR box: +20% size, +2pt font */
|
||
.armor-defenses-card input.ad-box.ad-box-ar{
|
||
width: 50px !important;
|
||
min-width: 50px !important;
|
||
max-width: 50px !important;
|
||
height: 31px !important;
|
||
font-size: 14px !important;
|
||
}
|
||
.armor-defenses-card input.ad-box.ad-box-secondary{
|
||
border-width: 0.7px !important;
|
||
border-style: solid !important;
|
||
border-color: #bbb !important;
|
||
background: #f7f7f7 !important;
|
||
font-size: 12px !important;
|
||
}
|
||
.armor-defenses-card .ad-divider{
|
||
height: 0;
|
||
border-top: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.armor-defenses-card .ad-attackpen{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.armor-defenses-card .ad-details{
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
.armor-defenses-card .ad-check{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
font-size: 11px;
|
||
font-style: italic;
|
||
}
|
||
.armor-defenses-card .ad-check input[type="checkbox"]{
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
/* Other Defenses table */
|
||
.armor-defenses-card .ad-table{
|
||
display: grid;
|
||
grid-template-columns: 1fr 82px;
|
||
border: 1px solid #333;
|
||
border-radius: 0;
|
||
}
|
||
.armor-defenses-card .ad-th{
|
||
padding: 8px 10px;
|
||
border-bottom: 1px solid #333;
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
.armor-defenses-card .ad-th-left{
|
||
border-right: 1px solid #333;
|
||
}
|
||
.armor-defenses-card .ad-th-right{
|
||
text-align: center;
|
||
}
|
||
.armor-defenses-card .ad-td{
|
||
padding: 3px 10px;
|
||
border-bottom: 1px solid #333;
|
||
}
|
||
.armor-defenses-card .ad-td-left{
|
||
border-right: 1px solid #333;
|
||
font-weight: 700;
|
||
}
|
||
.armor-defenses-card .ad-td-right{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.armor-defenses-card input.ad-tablebox{
|
||
width: 50px !important;
|
||
min-width: 50px !important;
|
||
max-width: 50px !important;
|
||
height: 26px !important;
|
||
border: 2px solid #333 !important;
|
||
border-radius: 0 !important;
|
||
background: #f2f2f2 !important;
|
||
text-align: center !important;
|
||
font-weight: 700 !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* Parry + Resistances spans full width */
|
||
.armor-defenses-card .ad-parry,
|
||
.armor-defenses-card .ad-resist{
|
||
grid-column: 1 / -1;
|
||
padding: 8px 10px;
|
||
border-bottom: 1px solid #333;
|
||
}
|
||
.armor-defenses-card .ad-parry{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.armor-defenses-card .ad-parry-label{
|
||
font-weight: 900;
|
||
}
|
||
.armor-defenses-card .ad-parry-fixed{
|
||
font-weight: 700;
|
||
}
|
||
.armor-defenses-card .ad-parry-line{
|
||
width: 100%;
|
||
}
|
||
|
||
.armor-defenses-card .ad-resist{
|
||
border-bottom: 0;
|
||
}
|
||
.armor-defenses-card .ad-resist-label{
|
||
font-weight: 900;
|
||
margin-bottom: 6px;
|
||
}
|
||
.armor-defenses-card .ad-textarea{
|
||
width: 100%;
|
||
min-height: 28px !important;
|
||
border: 1px solid #333;
|
||
background: #f2f2f2;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
padding: 4px 6px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ===== Sheet95 tweaks ===== */
|
||
.armor-defenses-card .ad-block-title{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.armor-defenses-card .ad-title-input{
|
||
flex: 1 1 auto;
|
||
min-width: 120px;
|
||
height: 22px !important;
|
||
font-size: 14px !important;
|
||
border-bottom: 1px solid #333 !important;
|
||
}
|
||
|
||
.armor-defenses-card .ad-armor-type{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* ===== Sheet96: Resistances textarea smaller by default ===== */
|
||
.armor-defenses-card .ad-textarea{
|
||
height: 28px !important;
|
||
min-height: 28px !important;
|
||
line-height: 14px !important;
|
||
resize: vertical;
|
||
}
|
||
|
||
/* ===== Sheet96: Other Defenses left column inputs ===== */
|
||
.armor-defenses-card input.ad-td-input{
|
||
width: 100% !important;
|
||
height: 22px !important;
|
||
border-bottom: 0 !important;
|
||
border: 0 !important;
|
||
padding: 0 2px !important;
|
||
background: transparent !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
/* ===== Sheet97: Identity & XP tab width ===== */
|
||
.id-toggle-btn{
|
||
display: block !important;
|
||
width: 100% !important;
|
||
max-width: 384px !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
/* ===== Sheet97: Armor & Defenses card narrower ===== */
|
||
.armor-defenses-card{
|
||
max-width: 308px !important;
|
||
}
|
||
|
||
/* ===== Sheet97: Smaller MP / Max DEX / Attack Penalty boxes ===== */
|
||
.armor-defenses-card input.ad-box{
|
||
width: 42px !important;
|
||
min-width: 42px !important;
|
||
max-width: 42px !important;
|
||
}
|
||
|
||
/* ===== Sheet101: Parry & DR sizing + spacing ===== */
|
||
.armor-defenses-card .ad-parry{
|
||
display: grid;
|
||
grid-template-columns: auto auto;
|
||
justify-content: start;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.armor-defenses-card .ad-parry .corestat-box{
|
||
width: 49px !important;
|
||
height: 27px !important;
|
||
}
|
||
.armor-defenses-card .ad-dr-row{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.armor-defenses-card .ad-dr-row .ad-label{
|
||
white-space: nowrap;
|
||
}
|
||
.armor-defenses-card .ad-dr-row .corestat-box{
|
||
width: 69px !important;
|
||
height: 27px !important;
|
||
}
|
||
|
||
/* Sheet110: ARvC label forced to black */
|
||
.armor-defenses-card .arvc-black { color: #000; }
|
||
|
||
/* Sheet112: Lighter placeholder text across the entire sheet */
|
||
.lfg-sheet input::placeholder,
|
||
.lfg-sheet textarea::placeholder{
|
||
color: #b8b8b8 !important;
|
||
opacity: 1;
|
||
}
|
||
.lfg-sheet input::-webkit-input-placeholder,
|
||
.lfg-sheet textarea::-webkit-input-placeholder{
|
||
color: #b8b8b8 !important;
|
||
}
|
||
.lfg-sheet input:-ms-input-placeholder,
|
||
.lfg-sheet textarea:-ms-input-placeholder{
|
||
color: #b8b8b8 !important;
|
||
}
|
||
.lfg-sheet input::-ms-input-placeholder,
|
||
.lfg-sheet textarea::-ms-input-placeholder{
|
||
color: #b8b8b8 !important;
|
||
}
|
||
|
||
/* Sheet112: layout for Attack Penalty moved into Tattered row */
|
||
.armor-defenses-card .ad-row.ad-details{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.armor-defenses-card .ad-attackpen-inline{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Sheet113: Prevent wrapping for specific Armor & Defenses labels */
|
||
.armor-defenses-card .nowrap{ white-space: nowrap; }
|
||
|
||
/* Sheet113: Increase AR input font size */
|
||
.armor-defenses-card input[name="attr_Armor_Rating"]{ font-size: 14px; }
|
||
|
||
/* Sheet115: Armor Type row becomes a single full-width input */
|
||
.armor-defenses-card .ad-row.ad-armor-type{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.armor-defenses-card .ad-row.ad-armor-type .armor-type-full{
|
||
width: 100%;
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
/* Sheet118: Reduce Attack Penalty (Tattered/Attack Penalty) row height by 4px */
|
||
.armor-defenses-card .ad-row.ad-details{
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
/* Sheet119: Vertically center text in small inputs (Attack Penalty + Other Defenses) */
|
||
.armor-defenses-card .ad-otherdef input,
|
||
.armor-defenses-card .ad-attackpen-inline input{
|
||
line-height: 18px;
|
||
padding-top: 2px;
|
||
padding-bottom: 2px;
|
||
}
|
||
|
||
/* Sheet120: Vertically center text in Attack Penalty + Other Defenses inputs (override existing fixed-height styles) */
|
||
.armor-defenses-card .ad-attackpen-inline input{
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
line-height: 22px !important; /* matches the 22px fixed height used by ad-input */
|
||
}
|
||
.armor-defenses-card .ad-block.ad-otherdef input.ad-td-input{
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
line-height: 22px !important;
|
||
}
|
||
|
||
/* Sheet120: Make Other Defenses outline match Armor section (avoid double border by removing inner table border) */
|
||
.armor-defenses-card .ad-block.ad-otherdef .ad-table{
|
||
border: 0 !important;
|
||
}
|
||
|
||
|
||
/* Sheet122: Reduce effective width of Armor & Defenses card by 10px
|
||
(grid-controlled card; reduce horizontal padding instead) */
|
||
.armor-defenses-card{
|
||
padding-left: calc(var(--card-padding, 10px) - 5px);
|
||
padding-right: calc(var(--card-padding, 10px) - 5px);
|
||
}
|
||
|
||
/* Sheet127: Font size adjustments requested */
|
||
|
||
/* Armor Rating input +2 */
|
||
.armor-defenses-card .ad-box-ar{
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Attack Penalty input +2 */
|
||
.armor-defenses-card input[name="attr_Attack_Penalty"]{
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* Reduce FORT / REF / WILL label size by 2 */
|
||
.save-name{
|
||
font-size: 10px;
|
||
}
|
||
|
||
/* Sheet128: Force font size changes (override ad-input !important base) */
|
||
.armor-defenses-card input.ad-input[name="attr_Armor_Rating"]{
|
||
font-size: 14px !important; /* +2 from 12px base */
|
||
}
|
||
.armor-defenses-card input.ad-input[name="attr_Attack_Penalty"]{
|
||
font-size: 14px !important; /* +2 from 12px base */
|
||
}
|
||
|
||
/* Sheet128: Reduce FORT/REF/WILL label size by 2 (scope to AC & Saves card) */
|
||
.armor-saves-card .save-name{
|
||
font-size: 18px !important; /* from 20px */
|
||
}
|
||
|
||
/* Sheet129: Increase AR input font size by +2 */
|
||
.armor-defenses-card input.ad-input[name="attr_Armor_Rating"]{
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
/* Sheet129: Move Saving Throws boxes/labels 5px left by tightening first grid column */
|
||
.armor-saves-card .saving-header,
|
||
.armor-saves-card .save-row{
|
||
grid-template-columns: 61px 42px 18px 42px 18px 42px 18px 42px;
|
||
}
|
||
|
||
/* Sheet130: Collapsible Armor & Defenses card (Front tab only) */
|
||
.armor-defenses-card .ad-card-toggle{ display:none; }
|
||
.armor-defenses-card .card-title.ad-card-toggle-btn{
|
||
position: relative;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
padding-right: 22px;
|
||
}
|
||
.armor-defenses-card .card-title.ad-card-toggle-btn::after{
|
||
content: "▼";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
.armor-defenses-card .ad-card-toggle:not(:checked) + .card-title.ad-card-toggle-btn::after{
|
||
content: "▶";
|
||
}
|
||
.armor-defenses-card .ad-card-collapsible{ display:none; }
|
||
.armor-defenses-card .ad-card-toggle:checked + .card-title.ad-card-toggle-btn + .ad-card-collapsible{
|
||
display:block;
|
||
}
|
||
|
||
/* sheet139: Boot Sheath weight fields narrower */
|
||
.boot-sheath input[placeholder^="Wt"]{ width:50%; }
|
||
|
||
/* sheet139: separator before TOTAL EQUIPPED */
|
||
.equip-sep{
|
||
grid-column: 1 / -1;
|
||
border-top: 1px solid #000;
|
||
margin: 2px 0;
|
||
}
|
||
|
||
/* sheet141: ensure Boot Sheath item fields remain readable */
|
||
.boot-sheath input[placeholder^="Boot Sheath"]{
|
||
min-width: 100px;
|
||
}
|
||
|
||
/* sheet144: make Boot Sheath Wt column truly narrower without leaving right-side whitespace */
|
||
.boot-sheath .inv-row{
|
||
grid-template-columns: 28px 1fr 40px; /* 80px -> 40px (50%) */
|
||
}
|
||
.boot-sheath input[placeholder^="Wt"]{
|
||
width: 100%;
|
||
min-width: 0;
|
||
justify-self: stretch;
|
||
}
|
||
|
||
|
||
/* sheet145: Capacity & Encumbrance subcard */
|
||
.capacity-encumbrance .cap-block{
|
||
border: 1px solid #000;
|
||
margin-top: 6px;
|
||
padding: 4px;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-header{
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
border-bottom: 1px solid #000;
|
||
padding-bottom: 2px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-row{
|
||
display: grid;
|
||
grid-template-columns: 1fr 70px;
|
||
gap: 6px;
|
||
align-items: center;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-label{
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-row input{
|
||
width: 100%;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-grid{
|
||
display: grid;
|
||
grid-template-columns: 1fr 80px 55px;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-grid-head{
|
||
font-weight: 700;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-grid-right{
|
||
grid-column: 3;
|
||
text-align: center;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-grid-label{
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-grid-input{
|
||
width: 100%;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-grid-penalty{
|
||
text-align: center;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* sheet147: TOTAL EQUIPPED WEIGHT spans name+wt columns and aligns with Wt fields */
|
||
input[name="attr_TotalEquippedWeight"]{
|
||
grid-column: 2 / 4;
|
||
width: 100%;
|
||
min-width: 160px;
|
||
}
|
||
|
||
|
||
/* sheet149: Equip Slots weight column header */
|
||
.equip-weight-header{
|
||
font-size: 0.85em;
|
||
line-height: 1;
|
||
}
|
||
.equip-weight-header-text{
|
||
text-align: center;
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* sheet150: Equip Slots column headers */
|
||
.equip-header-row{
|
||
margin-bottom: 2px;
|
||
}
|
||
.equip-header-row .equip-col-header{
|
||
text-align: center;
|
||
font-weight: 700;
|
||
font-size: 0.85em;
|
||
line-height: 1;
|
||
}
|
||
|
||
|
||
/* sheet151: tighten Gear & Equipment card width */
|
||
.gear-equipment{
|
||
padding-left: calc(var(--card-padding, 10px) - 5px);
|
||
padding-right: calc(var(--card-padding, 10px) - 5px);
|
||
}
|
||
|
||
|
||
/* sheet152: tighten Equip Slots row label column by 15px (moves fields closer to labels) */
|
||
.equip-slots .equip-row{
|
||
grid-template-columns: 105px 1fr 80px;
|
||
}
|
||
|
||
|
||
/* sheet152: TOTAL EQUIPPED WEIGHT slightly narrower but right-aligned with Weight column */
|
||
.equip-slots input[name="attr_TotalEquippedWeight"]{
|
||
width: calc(100% - 15px);
|
||
justify-self: end;
|
||
}
|
||
|
||
|
||
/* sheet153: Backpack repeating rows + total */
|
||
.backpack-card fieldset.repeating_backpack{
|
||
border: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Number repeating rows starting at 6 (after fixed 1–5) */
|
||
.backpack-card{
|
||
counter-reset: backpackrep 5;
|
||
}
|
||
.backpack-card fieldset.repeating_backpack .repitem{
|
||
counter-increment: backpackrep;
|
||
}
|
||
.backpack-card fieldset.repeating_backpack .repitem .rep-index::before{
|
||
content: counter(backpackrep);
|
||
}
|
||
|
||
/* Separator line before total */
|
||
.backpack-card .inv-sep{
|
||
border-top: 1px solid #000;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* Total backpack weight row: single field spanning name+weight columns, right-aligned */
|
||
.backpack-card .inv-total-row input[name="attr_TotalBackpackWeight"]{
|
||
grid-column: 2 / 4;
|
||
width: 100%;
|
||
justify-self: end;
|
||
min-width: 160px;
|
||
}
|
||
|
||
|
||
/* sheet154: Backpack remove numbered column + consistent spacing */
|
||
.backpack-card .inv-grid{
|
||
gap: 6px;
|
||
}
|
||
.backpack-card .inv-row{
|
||
grid-template-columns: 1fr 80px;
|
||
gap: 6px;
|
||
}
|
||
.backpack-card .inv-row input{
|
||
width: 100%;
|
||
}
|
||
|
||
/* Total backpack weight spans both columns */
|
||
.backpack-card .inv-total-row input[name="attr_TotalBackpackWeight"]{
|
||
grid-column: 1 / 3;
|
||
justify-self: end;
|
||
}
|
||
|
||
|
||
/* sheet154: Equip Slots label column 15px tighter */
|
||
.equip-slots .equip-row{
|
||
grid-template-columns: 90px 1fr 80px;
|
||
}
|
||
|
||
/* sheet154: Equipped Item inputs 10px narrower, keep right edge aligned (gap to Weight stays the same) */
|
||
.equip-slots input[placeholder$=" Equip"]{
|
||
width: calc(100% - 10px);
|
||
justify-self: end;
|
||
}
|
||
|
||
|
||
/* sheet155: Carried Item inputs match Equipped Item input width */
|
||
.equip-slots input[placeholder^="Carried Item"]{
|
||
width: calc(100% - 10px);
|
||
justify-self: end;
|
||
}
|
||
|
||
|
||
/* sheet155: Backpack repeating row spacing matches fixed rows */
|
||
.backpack-card fieldset.repeating_backpack{
|
||
display: block;
|
||
}
|
||
.backpack-card fieldset.repeating_backpack .repitem{
|
||
margin: 0;
|
||
}
|
||
.backpack-card fieldset.repeating_backpack .repitem + .repitem{
|
||
margin-top: 6px;
|
||
}
|
||
.backpack-card fieldset.repeating_backpack .repitem .inv-row{
|
||
margin: 0;
|
||
}
|
||
|
||
|
||
/* sheet170: Gear & Equipment - reduce all Wt fields by 25% (80px -> 60px) and keep spacing consistent */
|
||
.gear-equipment .inv-row{
|
||
grid-template-columns: 28px 1fr 60px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.gear-equipment .equip-row{
|
||
grid-template-columns: 120px 1fr 60px;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Ensure all Wt inputs within Gear & Equipment fit the new column width */
|
||
.gear-equipment input[placeholder^="Wt"]{
|
||
width: 100%;
|
||
max-width: 60px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet171 – Equip Slots: shift item + weight columns 20px left and narrow card by 20px */
|
||
|
||
/* Reduce right padding / width so card is 20px thinner */
|
||
.gear-equipment .equip-slots{
|
||
padding-right: 10px;
|
||
padding-left: 10px;
|
||
}
|
||
|
||
/* Shift Equipped Item + Weight columns left */
|
||
.gear-equipment .equip-row{
|
||
grid-template-columns: 120px calc(1fr - 20px) 60px;
|
||
column-gap: 6px;
|
||
}
|
||
|
||
/* Ensure inputs still fill their columns */
|
||
.gear-equipment .equip-row input{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet172 – Equip Slots: shift item + weight columns 30px left and narrow card by 30px */
|
||
|
||
/* Make the Equip Slots card 30px thinner */
|
||
.gear-equipment .equip-slots{
|
||
padding-right: 5px;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
/* Shift Equipped Item + Weight columns 30px closer to labels */
|
||
.gear-equipment .equip-row{
|
||
grid-template-columns: 120px calc(1fr - 30px) 60px;
|
||
column-gap: 6px;
|
||
}
|
||
|
||
/* Inputs fill their adjusted columns */
|
||
.gear-equipment .equip-row input{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet173 – Fix Equip Slots shift: use valid grid sizing (no calc with fr) */
|
||
|
||
/* Make Equip Slots subcard 30px thinner by reducing its width (left edge stays put) */
|
||
.gear-equipment .equip-slots{
|
||
box-sizing: border-box;
|
||
width: calc(100% - 30px);
|
||
}
|
||
|
||
/* Shift Equipped Item + Weight columns 30px left by shrinking the label column */
|
||
.gear-equipment .equip-slots .equip-row{
|
||
grid-template-columns: 90px 1fr 60px;
|
||
gap: 6px;
|
||
}
|
||
|
||
|
||
/* sheet174 – Backpack field widths match Equip Slots (Equipped Item + Weight columns) */
|
||
|
||
/* Match Backpack subcard overall width to Equip Slots subcard width */
|
||
.gear-equipment .backpack-card{
|
||
box-sizing: border-box;
|
||
width: calc(100% - 30px);
|
||
}
|
||
|
||
/* Use the same column sizing as Equip Slots: label-area 90px, item 1fr, weight 60px */
|
||
.gear-equipment .backpack-card .inv-row{
|
||
grid-template-columns: 90px 1fr 60px;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Keep the numbered squares at the right edge of the 90px label area */
|
||
.gear-equipment .backpack-card .inv-label{
|
||
justify-self: end;
|
||
}
|
||
|
||
/* Ensure Backpack Item + Wt inputs fill their columns (matching Equip Slots behavior) */
|
||
.gear-equipment .backpack-card .inv-row input{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* TOTAL BACKPACK WEIGHT row uses the same grid sizing */
|
||
.gear-equipment .backpack-card .inv-total-row{
|
||
grid-template-columns: 90px 1fr 60px;
|
||
gap: 6px;
|
||
}
|
||
|
||
|
||
/* sheet176 – Backpack: item column min/max widths + placeholder fix support */
|
||
.gear-equipment .backpack-card .inv-row{
|
||
grid-template-columns: 90px minmax(100px, 350px) 60px !important;
|
||
gap: 6px;
|
||
}
|
||
|
||
|
||
/* sheet177 – Backpack: match Equip Slots right edge + responsive item field (100–350px) */
|
||
|
||
/* Match Backpack subcard right edge to Equip Slots (which is 30px thinner) */
|
||
.gear-equipment .backpack-card{
|
||
box-sizing: border-box;
|
||
width: calc(100% - 30px);
|
||
}
|
||
|
||
/* Make Backpack rows use the same overall column geometry as Equip Slots:
|
||
label 90px, item flexible, wt 60px */
|
||
.gear-equipment .backpack-card .inv-row,
|
||
.gear-equipment .backpack-card .inv-total-row{
|
||
grid-template-columns: 90px minmax(100px, 1fr) 60px !important;
|
||
gap: 6px;
|
||
}
|
||
|
||
/* Backpack Item fields: shrink to 100px, grow with column, but cap at 350px */
|
||
.gear-equipment .backpack-card input[placeholder="Backpack Item"]{
|
||
min-width: 100px !important;
|
||
max-width: 350px !important;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Keep Wt fields sized to the 60px column */
|
||
.gear-equipment .backpack-card input[placeholder^="Wt"]{
|
||
width: 100%;
|
||
max-width: 60px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet178 – Backpack: hug content (<=5px extra) and prevent Item/Wt overlap */
|
||
|
||
/* Make Backpack subcard size to its contents instead of stretching */
|
||
.gear-equipment .backpack-card{
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
width: fit-content;
|
||
max-width: 100%;
|
||
padding-right: 5px; /* <=5px beyond contents */
|
||
}
|
||
|
||
/* Lock row geometry so item column cannot spill into Wt column */
|
||
.gear-equipment .backpack-card .inv-row,
|
||
.gear-equipment .backpack-card .inv-total-row{
|
||
grid-template-columns: 90px minmax(100px, 350px) 60px !important;
|
||
column-gap: 6px;
|
||
}
|
||
|
||
/* Critical: allow grid items to shrink within their column (prevents overlap in CSS grid) */
|
||
.gear-equipment .backpack-card .inv-row > *,
|
||
.gear-equipment .backpack-card .inv-total-row > *{
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Inputs fill their own columns, never exceeding them */
|
||
.gear-equipment .backpack-card input[placeholder="Backpack Item"]{
|
||
width: 100%;
|
||
min-width: 100px !important;
|
||
max-width: 350px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.gear-equipment .backpack-card input[placeholder^="Wt"]{
|
||
width: 100%;
|
||
max-width: 60px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet179 – Backpack: 10px gap between Item and Wt; right edge within 10px of Wt column */
|
||
|
||
/* Set the gap between Backpack Item and Wt columns to 10px (between col 2 and col 3) */
|
||
.gear-equipment .backpack-card .inv-row,
|
||
.gear-equipment .backpack-card .inv-total-row{
|
||
column-gap: 10px;
|
||
}
|
||
|
||
/* Keep Backpack card right padding to 10px so right edge is within 10px of Wt column */
|
||
.gear-equipment .backpack-card{
|
||
padding-right: 10px;
|
||
}
|
||
|
||
|
||
/* sheet181 – Backpack Test: remove label column, hug content, keep inputs near left edge */
|
||
.gear-equipment .backpack-test{
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
width: fit-content;
|
||
max-width: 100%;
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
.gear-equipment .backpack-test .equip-row{
|
||
grid-template-columns: 1fr 60px;
|
||
gap: 6px;
|
||
justify-content: start;
|
||
}
|
||
|
||
/* Ensure inputs shrink properly inside CSS grid (prevents overlap) */
|
||
.gear-equipment .backpack-test .equip-row > *{
|
||
min-width: 0;
|
||
}
|
||
|
||
.gear-equipment .backpack-test .equip-row input{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet183 – Backpack Test: fix header row to 2 columns (no wrapped header labels) */
|
||
.gear-equipment .backpack-test .equip-row.equip-header-row{
|
||
grid-template-columns: 1fr 60px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.gear-equipment .backpack-test .equip-row.equip-header-row .equip-col-header{
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
/* sheet189 – Backpack Test: total row spans full width (no extra columns) */
|
||
.gear-equipment .backpack-test .equip-row.backpack-total-row{
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
|
||
/* sheet197a – Backpack: repeating rows without affecting card width/layout */
|
||
.gear-equipment .backpack-test fieldset.repeating_backpack{
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
.gear-equipment .backpack-test .repcontainer,
|
||
.gear-equipment .backpack-test .repitem{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Keep repeating row aligned with existing grid */
|
||
.gear-equipment .backpack-test fieldset.repeating_backpack .equip-row{
|
||
grid-template-columns: 1fr 60px;
|
||
gap: 6px;
|
||
}
|
||
|
||
|
||
/* sheet198a – Gold & Money card uses existing equip-grid styling; keep it compact */
|
||
.card.gold-money .equip-grid{ margin: 0; }
|
||
|
||
|
||
/* sheet199b – constrain Gold & Money card size and field widths */
|
||
.card.gold-money{
|
||
max-height: 60px;
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.card.gold-money .card-title{
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.card.gold-money .equip-grid{
|
||
gap: 4px;
|
||
}
|
||
|
||
.card.gold-money .equip-row{
|
||
grid-template-columns: 1.5fr 0.5fr;
|
||
}
|
||
|
||
.card.gold-money input[name="attr_Gold"]{
|
||
max-width: 50%;
|
||
}
|
||
|
||
.card.gold-money input[name="attr_GemsValuables"]{
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
/* sheet200a – Gold & Money moved inside Gear & Equipment as first subcard */
|
||
.gear-equipment .gold-money-subcard .equip-grid{
|
||
margin: 0;
|
||
}
|
||
|
||
.gear-equipment .gold-money-subcard .equip-row{
|
||
grid-template-columns: 1.5fr 0.5fr; /* Gems wider, Gold narrower */
|
||
gap: 6px;
|
||
}
|
||
|
||
.gear-equipment .gold-money-subcard{
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.gear-equipment .gold-money-subcard .equip-sep{
|
||
margin: 2px 0;
|
||
}
|
||
|
||
|
||
/* sheet202b – Make Gold & Money subcard width match Equip Slots at minimum size (scoped) */
|
||
.gear-equipment .gold-money-subcard{
|
||
box-sizing: border-box;
|
||
width: calc(100% - 30px);
|
||
padding-left: 5px;
|
||
padding-right: 5px;
|
||
}
|
||
|
||
|
||
/* sheet205 – Gold & Money: resizable Gems & Valuables textarea (starts taller) */
|
||
.gear-equipment .gold-money-subcard textarea.gm-gems-text{
|
||
width: 100%;
|
||
min-height: 26px;
|
||
height: 26px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet205 – Boot Sheath: remove number column */
|
||
.inv-sheaths .boot-sheath .inv-row{
|
||
grid-template-columns: 1fr 45px;
|
||
}
|
||
|
||
|
||
/* sheet206 – Boot Sheath: delete numbered squares */
|
||
.inv-sheaths .boot-sheath .inv-label{
|
||
display: none;
|
||
}
|
||
|
||
.inv-sheaths .boot-sheath .inv-row{
|
||
grid-template-columns: 1fr 45px;
|
||
}
|
||
|
||
|
||
/* sheet207 – Skills card: avoid grid row stretching and tighten height */
|
||
.skills-card{
|
||
align-self: start; /* stop CSS grid stretching this card to match neighbor height */
|
||
padding-bottom: 10px; /* keep ~10px below last content */
|
||
}
|
||
|
||
/* Total Skill Ranks box: 50% width, no impact on card width */
|
||
.skills-card input[name="attr_Total_Skill_Ranks"]{
|
||
width: 50%;
|
||
max-width: 50%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* sheet208 – Skills: shift Total Skill Ranks label + field 20px right */
|
||
.skills-card .skills-totalranks{
|
||
margin-left: 20px;
|
||
}
|
||
|
||
|
||
/* sheet211: ensure Belt Pouches item fields remain readable */
|
||
.belt-pouches input[placeholder^="Pouch Item"]{
|
||
min-width: 100px;
|
||
}
|
||
|
||
|
||
/* sheet214: Belt Pouches total weight row */
|
||
.belt-pouches .pouch-total-row{
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 45px;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
.belt-pouches .pouch-total-row input{
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet217: Total weight row (shared layout) */
|
||
.pouch-total-row{
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.pouch-total-row input{
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet217: ensure Sheaths & Bandoliers item fields remain readable (matches Boot/Belt behavior) */
|
||
.inv-sheaths .boot-sheath .inv-row input:first-child{
|
||
min-width: 100px;
|
||
}
|
||
|
||
|
||
/* sheet219: Capacity & Encumbrance header note */
|
||
.cap-grid-lefthead{
|
||
text-align: left;
|
||
}
|
||
.cap-grid-lefthead .cap-grid-note{
|
||
font-weight: normal;
|
||
font-style: italic;
|
||
font-size: 10px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
|
||
/* sheet223: Capacity & Encumbrance – widen With/Without Backpack fields by 25px (grow left, keep right edge) */
|
||
.capacity-encumbrance .cap-row{
|
||
grid-template-columns: 1fr 95px; /* was 70px */
|
||
}
|
||
|
||
/* sheet223: Skills – prevent Total column inputs from compressing below 25px */
|
||
.skill-row > input:first-child{
|
||
min-width: 25px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet224: enforce minimum width for Skills Total column */
|
||
.skill-row > input:first-child{
|
||
min-width: 35px !important;
|
||
width: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet225: Capacity & Encumbrance – combined totals grid */
|
||
.capacity-encumbrance .cap-totals-grid{
|
||
display: grid;
|
||
grid-template-columns: 1fr 95px 95px;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-totals-head{
|
||
font-weight: 700;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-totals-left{
|
||
text-align: left;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-totals-sep{
|
||
grid-column: 1 / -1;
|
||
border-top: 1px solid #000;
|
||
margin: 2px 0;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-totals-label{
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.capacity-encumbrance .cap-totals-grid input{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet226: Capacity & Encumbrance – evenly distribute totals columns (no width increase) */
|
||
.capacity-encumbrance .cap-totals-grid{
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
}
|
||
|
||
/* sheet226: make TOTALS header 2px larger */
|
||
.capacity-encumbrance .cap-totals-head.cap-totals-left{
|
||
font-size: calc(0.85em + 2px);
|
||
}
|
||
|
||
/* Skills card: physical-skill note (does not affect column sizing) */
|
||
.skills-card .skills-physnote{
|
||
font-size: 10px;
|
||
font-style: italic;
|
||
font-weight: normal;
|
||
margin: 4px 0 2px 0;
|
||
}
|
||
|
||
|
||
/* sheet231: place Total Skill Ranks input adjacent to label */
|
||
.skills-totalranks{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.skills-totalranks label{
|
||
white-space: nowrap;
|
||
}
|
||
.skills-totalranks input{
|
||
width: auto;
|
||
}
|
||
|
||
|
||
/* sheet235: Align Backpack, Sheaths & Bandoliers, and Belt Pouches cards on the same row when space allows */
|
||
.inv-sheaths{
|
||
display: contents;
|
||
}
|
||
|
||
/* Shared sizing: match max width across the three cards */
|
||
.gear-equipment .backpack-test,
|
||
.inv-sheaths .boot-sheath,
|
||
.inv-sheaths .belt-pouches{
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
width: 100%;
|
||
max-width: 340px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet236: third tab (Spells & Magic) */
|
||
#tab-magic:checked ~ .tabs label[for="tab-magic"]{
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
}
|
||
#tab-magic:checked ~ .page-magic{ display:block; }
|
||
|
||
/* Spells & Magic page styling */
|
||
|
||
.magic-card{
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.magic-subtitle{
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.magic-row{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 18px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.magic-label{
|
||
font-weight: 700;
|
||
font-variant: small-caps;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.magic-pair{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.magic-pair.wide{
|
||
flex: 1 1 260px;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.magic-group{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.magic-inline{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.magic-box{
|
||
background: #f2f2f2;
|
||
border: 2px solid #000;
|
||
height: 26px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.magic-box.small{ width: 46px; }
|
||
.magic-box.medium{ width: 90px; }
|
||
|
||
.magic-notes{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 6px 10px;
|
||
align-items: start;
|
||
}
|
||
|
||
.magic-notes-label{
|
||
font-weight: 700;
|
||
padding-top: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.magic-notes-box{
|
||
grid-column: 2 / -1;
|
||
height: 26px;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
resize: none;
|
||
padding: 2px 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet238: Spells & Magic – match card header font styling */
|
||
.page-magic .magic-card{
|
||
font-size: 13px;
|
||
}
|
||
|
||
.page-magic .magic-subtitle{
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* Match all text in the card to the header style (no small-caps treatment) */
|
||
.page-magic .magic-label{
|
||
font-weight: bold;
|
||
font-variant: normal;
|
||
letter-spacing: normal;
|
||
}
|
||
|
||
/* sheet238: remove bottom line from Spellcasting Notes boxes */
|
||
.page-magic .magic-notes-box{
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
|
||
/* sheet239: Spells & Magic layout adjustments */
|
||
.page-magic .magic-row{
|
||
flex-wrap: nowrap;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* Reduce CastingMod box width by ~35% (from 90px to 58px) */
|
||
.page-magic .magic-box.medium{ width: 58px; }
|
||
|
||
/* Let notes boxes span full card width now that label removed */
|
||
.page-magic .magic-notes{
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.page-magic .magic-notes-box{
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
|
||
/* sheet240: Spellcasting Notes single resizable box */
|
||
.page-magic .magic-notes-box{
|
||
height: 60px;
|
||
resize: vertical;
|
||
}
|
||
|
||
|
||
/* sheet241: responsive wrapping + minimum width for Spellcasting Information */
|
||
.page-magic .magic-card{
|
||
min-width: 350px;
|
||
}
|
||
|
||
.page-magic .magic-row{
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
|
||
/* sheet242: adjust Spellcasting Information card minimum width after label shortening */
|
||
.page-magic .magic-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl0-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sl0-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.sl0-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.sl0-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sl0-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sl0-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.sl0-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sl0-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sl0-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
.sl0-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sl0-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl0-spellrow.sl0-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
.sl0-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sl0-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.sl0-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl0-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl0-title{ display: none; }
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl0-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl0-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl0-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl0-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl0-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl0-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
.sl0-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl0-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
.sl0-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl0-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl0-line{
|
||
height: 20px;
|
||
}
|
||
|
||
.sl0-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl0-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
.sl0-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl0-card textarea.sl0-knownarea,
|
||
.page-magic .sl0-card textarea.sl0-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl0-card textarea.sl0-knownarea,
|
||
.page-magic .sl0-card textarea.sl0-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet250: restore tab selected (white/pressed) vs unselected (grey) styling */
|
||
.tabs{
|
||
gap: 8px !important;
|
||
margin-bottom: 10px !important;
|
||
}
|
||
|
||
.tabs .tabbtn{
|
||
border: 1px solid #333 !important;
|
||
padding: 6px 10px !important;
|
||
border-radius: 6px !important;
|
||
cursor: pointer !important;
|
||
user-select: none !important;
|
||
font-weight: 700 !important;
|
||
background: #e0e0e0 !important; /* unselected grey */
|
||
position: relative !important;
|
||
top: 0 !important;
|
||
}
|
||
|
||
/* Active tab: white + looks pressed */
|
||
#tab-front:checked ~ .tabs label[for="tab-front"],
|
||
#tab-back:checked ~ .tabs label[for="tab-back"],
|
||
#tab-magic:checked ~ .tabs label[for="tab-magic"]{
|
||
background: #fff !important;
|
||
top: 1px !important;
|
||
}
|
||
|
||
|
||
/* sheet251: Spellcasting Information - Spells Known min-height +5px */
|
||
.page-magic .magic-notes-box{
|
||
min-height: 65px; /* was 60px in sheet240 */
|
||
}
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl0-card textarea.sl0-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl0-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl0-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl0-card textarea.sl0-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet258: Spell Info card (extracted from SL0 spell box) */
|
||
.page-magic .spellinfo-card{
|
||
min-width: 335px; /* match magic-card and sl0-card */
|
||
}
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl0-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl0-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.page-magic .sl0-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl0-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl0-spellrow-name .sl0-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl0-card, .sl0-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl0-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl0-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl0-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl0-topitem .sl0-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl0-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.sl0-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sl0-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl0-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sl0-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl0-spellrow input.sl0-line,
|
||
.sl0-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl0-spellrow-name input.sl0-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl0-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl0-spellbox,
|
||
.sl0-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl0-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
.sl0-spellrow-name .sl0-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
.sl0-spellrow-name .sl0-line.time,
|
||
.sl0-spellrow-name .sl0-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl0-card, .sl0-card * { box-sizing: border-box; }
|
||
|
||
.sl0-card,
|
||
.sl0-spellbox,
|
||
.sl0-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
.sl0-spellrow,
|
||
.sl0-knownrow,
|
||
.sl0-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.sl0-spellrow input,
|
||
.sl0-spellrow textarea,
|
||
.sl0-knownrow textarea,
|
||
.sl0-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl0-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
/* If the window becomes too narrow to honor min-widths + labels,
|
||
allow wrapping within the Spell Info row instead of overflowing. */
|
||
@media (max-width: 700px) {
|
||
.sl0-spellrow-name { flex-wrap: wrap; }
|
||
.sl0-spellrow-name .sl0-spelllabel { white-space: nowrap; }
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl0-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Allow the row to wrap by pair when needed, without breaking pairs */
|
||
@media (max-width: 700px){
|
||
.sl0-spellrow-name{ flex-wrap: wrap; }
|
||
}
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl0-spellpair .sl0-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl0-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl0-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl0-spellpair.pair-name{ flex:3 1 0; }
|
||
.sl0-spellpair.pair-time{ flex:2 1 0; }
|
||
.sl0-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl0-spellpair .sl0-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
/* Responsive: if too narrow, wrap by PAIR (never split label from field) */
|
||
@media (max-width: 700px){
|
||
.sl0-spellrow-name{ flex-wrap:wrap; }
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl0-spellrow-name{ flex-wrap: wrap; }
|
||
.sl0-spellpair.namepair{ flex: 3 1 0; }
|
||
.sl0-spellpair.timepair{ flex: 2 1 0; }
|
||
.sl0-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl0-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.sl0-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl0-spellpair-name{ flex: 3 1 0; }
|
||
.sl0-spellpair-time{ flex: 2 1 0; }
|
||
.sl0-spellpair-range{ flex: 2 1 0; }
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl0-spellpair .sl0-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl0-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl0-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl0-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl0-spellpair-name{ min-width: 320px; }
|
||
.sl0-spellpair-time{ min-width: 220px; }
|
||
.sl0-spellpair-range{ min-width: 200px; }
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl0-spellpair-name{ flex: 3 0 auto; }
|
||
.sl0-spellpair-time,
|
||
.sl0-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
/* Spell Info – force Casting Time + Range pairs to drop to new rows on narrow widths */
|
||
@media (max-width: 620px){
|
||
.sl0-spellpair-time,
|
||
.sl0-spellpair-range{
|
||
flex-basis: 100% !important; /* each pair becomes a full row */
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* Keep each label+field together */
|
||
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name .sl0-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name .sl0-spellpair .sl0-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* On narrow widths, force Casting Time + Range pairs onto their own rows */
|
||
@media (max-width: 700px){
|
||
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name .timepair,
|
||
.sl0-spellbox .sl0-spellrow.sl0-spellrow-name .rangepair{
|
||
flex-basis: 100% !important;
|
||
width: 100% !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
/* ===== Collapsible Spell Level 0 Card (SL0) ===== */
|
||
.sl0-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
/* Button styled like Identity & XP */
|
||
.sl0-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px; /* room for arrow */
|
||
}
|
||
|
||
.sl0-toggle-btn::after{
|
||
content: "◀"; /* collapsed */
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl0-toggle:checked + .sl0-toggle-btn::after{
|
||
content: "▼"; /* expanded */
|
||
color: #000;
|
||
}
|
||
|
||
.sl0-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
/* Collapse/expand: checkbox and label directly before .sl0-body */
|
||
.sl0-toggle:not(:checked) + .sl0-toggle-btn + .sl0-body{
|
||
display: none;
|
||
}
|
||
|
||
|
||
|
||
/* ===== Collapsible Spell Level 1 Card (SL1) ===== */
|
||
.sl1-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl1-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px; /* room for arrow */
|
||
}
|
||
|
||
.sl1-toggle-btn::after{
|
||
content: "◀"; /* collapsed */
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl1-toggle:checked + .sl1-toggle-btn::after{
|
||
content: "▼"; /* expanded */
|
||
color: #000;
|
||
}
|
||
|
||
.sl1-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl1-toggle:not(:checked) + .sl1-toggle-btn + .sl1-body{
|
||
display: none;
|
||
}
|
||
|
||
|
||
/* ===== SL1 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl1-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl1-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl1-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl1-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl1-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl1-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl1-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl1-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl1-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl1-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl1-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl1-spellrow.sl1-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl1-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl1-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl1-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl1-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl1-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl1-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl1-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl1-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl1-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl1-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl1-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl1-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl1-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl1-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl1-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl1-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl1-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl1-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl1-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl1-card textarea.sl1-knownarea,
|
||
.page-magic .sl1-card textarea.sl1-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl1-card textarea.sl1-knownarea,
|
||
.page-magic .sl1-card textarea.sl1-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl1-card textarea.sl1-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl1-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl1-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl1-card textarea.sl1-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl1-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl1-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl1-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl1-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl1-spellrow-name .sl1-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl1-card, .sl1-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl1-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl1-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl1-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl1-topitem .sl1-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl1-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl1-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl1-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl1-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl1-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl1-spellrow input.sl1-line,
|
||
.sl1-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl1-spellrow-name input.sl1-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl1-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl1-spellbox,
|
||
.sl1-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl1-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl1-spellrow-name .sl1-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl1-spellrow-name .sl1-line.time,
|
||
.sl1-spellrow-name .sl1-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl1-card, .sl1-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl1-card,
|
||
.sl1-spellbox,
|
||
.sl1-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl1-spellrow,
|
||
.sl1-knownrow,
|
||
.sl1-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl1-spellrow input,
|
||
.sl1-spellrow textarea,
|
||
.sl1-knownrow textarea,
|
||
.sl1-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl1-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl1-spellrow-name .sl1-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl1-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl1-spellpair .sl1-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl1-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl1-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl1-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl1-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl1-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl1-spellpair .sl1-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl1-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl1-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl1-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl1-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl1-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl1-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl1-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl1-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl1-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl1-spellpair .sl1-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl1-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl1-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl1-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl1-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl1-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl1-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl1-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl1-spellpair-time,
|
||
.sl1-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl1-spellbox .sl1-spellrow.sl1-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl1-spellbox .sl1-spellrow.sl1-spellrow-name .sl1-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl1-spellbox .sl1-spellrow.sl1-spellrow-name .sl1-spellpair .sl1-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Bulk Spell Level Cards SL2-SL9 ===== */
|
||
|
||
/* ===== Collapsible Spell Level 2 Card (SL2) ===== */
|
||
.sl2-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl2-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl2-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl2-toggle:checked + .sl2-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl2-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl2-toggle:not(:checked) + .sl2-toggle-btn + .sl2-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL2 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl2-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl2-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl2-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl2-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl2-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl2-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl2-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl2-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl2-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl2-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl2-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl2-spellrow.sl2-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl2-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl2-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl2-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl2-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl2-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl2-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl2-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl2-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl2-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl2-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl2-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl2-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl2-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl2-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl2-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl2-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl2-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl2-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl2-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl2-card textarea.sl2-knownarea,
|
||
.page-magic .sl2-card textarea.sl2-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl2-card textarea.sl2-knownarea,
|
||
.page-magic .sl2-card textarea.sl2-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl2-card textarea.sl2-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl2-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl2-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl2-card textarea.sl2-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl2-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl2-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl2-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl2-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl2-spellrow-name .sl2-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl2-card, .sl2-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl2-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl2-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl2-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl2-topitem .sl2-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl2-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl2-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl2-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl2-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl2-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl2-spellrow input.sl2-line,
|
||
.sl2-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl2-spellrow-name input.sl2-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl2-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl2-spellbox,
|
||
.sl2-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl2-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl2-spellrow-name .sl2-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl2-spellrow-name .sl2-line.time,
|
||
.sl2-spellrow-name .sl2-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl2-card, .sl2-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl2-card,
|
||
.sl2-spellbox,
|
||
.sl2-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl2-spellrow,
|
||
.sl2-knownrow,
|
||
.sl2-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl2-spellrow input,
|
||
.sl2-spellrow textarea,
|
||
.sl2-knownrow textarea,
|
||
.sl2-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl2-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl2-spellrow-name .sl2-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl2-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl2-spellpair .sl2-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl2-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl2-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl2-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl2-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl2-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl2-spellpair .sl2-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl2-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl2-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl2-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl2-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl2-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl2-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl2-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl2-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl2-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl2-spellpair .sl2-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl2-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl2-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl2-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl2-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl2-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl2-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl2-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl2-spellpair-time,
|
||
.sl2-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl2-spellbox .sl2-spellrow.sl2-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl2-spellbox .sl2-spellrow.sl2-spellrow-name .sl2-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl2-spellbox .sl2-spellrow.sl2-spellrow-name .sl2-spellpair .sl2-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Collapsible Spell Level 3 Card (SL3) ===== */
|
||
.sl3-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl3-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl3-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl3-toggle:checked + .sl3-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl3-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl3-toggle:not(:checked) + .sl3-toggle-btn + .sl3-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL3 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl3-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl3-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl3-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl3-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl3-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl3-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl3-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl3-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl3-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl3-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl3-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl3-spellrow.sl3-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl3-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl3-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl3-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl3-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl3-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl3-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl3-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl3-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl3-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl3-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl3-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl3-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl3-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl3-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl3-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl3-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl3-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl3-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl3-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl3-card textarea.sl3-knownarea,
|
||
.page-magic .sl3-card textarea.sl3-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl3-card textarea.sl3-knownarea,
|
||
.page-magic .sl3-card textarea.sl3-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl3-card textarea.sl3-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl3-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl3-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl3-card textarea.sl3-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl3-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl3-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl3-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl3-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl3-spellrow-name .sl3-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl3-card, .sl3-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl3-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl3-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl3-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl3-topitem .sl3-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl3-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl3-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl3-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl3-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl3-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl3-spellrow input.sl3-line,
|
||
.sl3-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl3-spellrow-name input.sl3-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl3-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl3-spellbox,
|
||
.sl3-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl3-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl3-spellrow-name .sl3-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl3-spellrow-name .sl3-line.time,
|
||
.sl3-spellrow-name .sl3-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl3-card, .sl3-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl3-card,
|
||
.sl3-spellbox,
|
||
.sl3-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl3-spellrow,
|
||
.sl3-knownrow,
|
||
.sl3-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl3-spellrow input,
|
||
.sl3-spellrow textarea,
|
||
.sl3-knownrow textarea,
|
||
.sl3-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl3-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl3-spellrow-name .sl3-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl3-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl3-spellpair .sl3-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl3-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl3-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl3-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl3-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl3-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl3-spellpair .sl3-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl3-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl3-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl3-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl3-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl3-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl3-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl3-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl3-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl3-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl3-spellpair .sl3-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl3-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl3-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl3-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl3-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl3-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl3-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl3-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl3-spellpair-time,
|
||
.sl3-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl3-spellbox .sl3-spellrow.sl3-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl3-spellbox .sl3-spellrow.sl3-spellrow-name .sl3-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl3-spellbox .sl3-spellrow.sl3-spellrow-name .sl3-spellpair .sl3-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Collapsible Spell Level 4 Card (SL4) ===== */
|
||
.sl4-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl4-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl4-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl4-toggle:checked + .sl4-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl4-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl4-toggle:not(:checked) + .sl4-toggle-btn + .sl4-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL4 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl4-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl4-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl4-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl4-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl4-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl4-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl4-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl4-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl4-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl4-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl4-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl4-spellrow.sl4-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl4-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl4-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl4-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl4-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl4-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl4-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl4-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl4-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl4-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl4-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl4-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl4-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl4-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl4-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl4-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl4-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl4-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl4-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl4-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl4-card textarea.sl4-knownarea,
|
||
.page-magic .sl4-card textarea.sl4-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl4-card textarea.sl4-knownarea,
|
||
.page-magic .sl4-card textarea.sl4-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl4-card textarea.sl4-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl4-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl4-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl4-card textarea.sl4-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl4-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl4-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl4-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl4-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl4-spellrow-name .sl4-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl4-card, .sl4-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl4-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl4-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl4-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl4-topitem .sl4-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl4-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl4-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl4-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl4-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl4-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl4-spellrow input.sl4-line,
|
||
.sl4-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl4-spellrow-name input.sl4-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl4-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl4-spellbox,
|
||
.sl4-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl4-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl4-spellrow-name .sl4-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl4-spellrow-name .sl4-line.time,
|
||
.sl4-spellrow-name .sl4-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl4-card, .sl4-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl4-card,
|
||
.sl4-spellbox,
|
||
.sl4-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl4-spellrow,
|
||
.sl4-knownrow,
|
||
.sl4-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl4-spellrow input,
|
||
.sl4-spellrow textarea,
|
||
.sl4-knownrow textarea,
|
||
.sl4-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl4-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl4-spellrow-name .sl4-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl4-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl4-spellpair .sl4-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl4-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl4-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl4-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl4-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl4-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl4-spellpair .sl4-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl4-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl4-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl4-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl4-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl4-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl4-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl4-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl4-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl4-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl4-spellpair .sl4-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl4-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl4-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl4-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl4-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl4-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl4-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl4-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl4-spellpair-time,
|
||
.sl4-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl4-spellbox .sl4-spellrow.sl4-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl4-spellbox .sl4-spellrow.sl4-spellrow-name .sl4-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl4-spellbox .sl4-spellrow.sl4-spellrow-name .sl4-spellpair .sl4-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Collapsible Spell Level 5 Card (SL5) ===== */
|
||
.sl5-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl5-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl5-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl5-toggle:checked + .sl5-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl5-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl5-toggle:not(:checked) + .sl5-toggle-btn + .sl5-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL5 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl5-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl5-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl5-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl5-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl5-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl5-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl5-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl5-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl5-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl5-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl5-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl5-spellrow.sl5-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl5-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl5-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl5-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl5-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl5-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl5-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl5-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl5-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl5-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl5-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl5-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl5-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl5-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl5-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl5-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl5-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl5-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl5-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl5-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl5-card textarea.sl5-knownarea,
|
||
.page-magic .sl5-card textarea.sl5-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl5-card textarea.sl5-knownarea,
|
||
.page-magic .sl5-card textarea.sl5-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl5-card textarea.sl5-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl5-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl5-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl5-card textarea.sl5-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl5-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl5-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl5-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl5-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl5-spellrow-name .sl5-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl5-card, .sl5-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl5-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl5-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl5-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl5-topitem .sl5-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl5-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl5-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl5-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl5-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl5-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl5-spellrow input.sl5-line,
|
||
.sl5-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl5-spellrow-name input.sl5-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl5-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl5-spellbox,
|
||
.sl5-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl5-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl5-spellrow-name .sl5-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl5-spellrow-name .sl5-line.time,
|
||
.sl5-spellrow-name .sl5-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl5-card, .sl5-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl5-card,
|
||
.sl5-spellbox,
|
||
.sl5-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl5-spellrow,
|
||
.sl5-knownrow,
|
||
.sl5-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl5-spellrow input,
|
||
.sl5-spellrow textarea,
|
||
.sl5-knownrow textarea,
|
||
.sl5-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl5-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl5-spellrow-name .sl5-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl5-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl5-spellpair .sl5-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl5-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl5-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl5-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl5-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl5-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl5-spellpair .sl5-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl5-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl5-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl5-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl5-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl5-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl5-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl5-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl5-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl5-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl5-spellpair .sl5-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl5-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl5-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl5-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl5-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl5-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl5-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl5-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl5-spellpair-time,
|
||
.sl5-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl5-spellbox .sl5-spellrow.sl5-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl5-spellbox .sl5-spellrow.sl5-spellrow-name .sl5-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl5-spellbox .sl5-spellrow.sl5-spellrow-name .sl5-spellpair .sl5-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Collapsible Spell Level 6 Card (SL6) ===== */
|
||
.sl6-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl6-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl6-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl6-toggle:checked + .sl6-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl6-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl6-toggle:not(:checked) + .sl6-toggle-btn + .sl6-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL6 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl6-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl6-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl6-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl6-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl6-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl6-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl6-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl6-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl6-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl6-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl6-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl6-spellrow.sl6-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl6-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl6-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl6-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl6-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl6-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl6-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl6-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl6-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl6-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl6-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl6-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl6-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl6-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl6-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl6-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl6-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl6-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl6-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl6-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl6-card textarea.sl6-knownarea,
|
||
.page-magic .sl6-card textarea.sl6-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl6-card textarea.sl6-knownarea,
|
||
.page-magic .sl6-card textarea.sl6-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl6-card textarea.sl6-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl6-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl6-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl6-card textarea.sl6-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl6-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl6-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl6-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl6-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl6-spellrow-name .sl6-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl6-card, .sl6-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl6-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl6-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl6-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl6-topitem .sl6-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl6-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl6-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl6-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl6-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl6-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl6-spellrow input.sl6-line,
|
||
.sl6-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl6-spellrow-name input.sl6-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl6-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl6-spellbox,
|
||
.sl6-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl6-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl6-spellrow-name .sl6-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl6-spellrow-name .sl6-line.time,
|
||
.sl6-spellrow-name .sl6-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl6-card, .sl6-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl6-card,
|
||
.sl6-spellbox,
|
||
.sl6-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl6-spellrow,
|
||
.sl6-knownrow,
|
||
.sl6-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl6-spellrow input,
|
||
.sl6-spellrow textarea,
|
||
.sl6-knownrow textarea,
|
||
.sl6-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl6-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl6-spellrow-name .sl6-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl6-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl6-spellpair .sl6-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl6-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl6-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl6-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl6-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl6-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl6-spellpair .sl6-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl6-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl6-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl6-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl6-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl6-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl6-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl6-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl6-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl6-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl6-spellpair .sl6-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl6-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl6-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl6-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl6-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl6-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl6-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl6-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl6-spellpair-time,
|
||
.sl6-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl6-spellbox .sl6-spellrow.sl6-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl6-spellbox .sl6-spellrow.sl6-spellrow-name .sl6-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl6-spellbox .sl6-spellrow.sl6-spellrow-name .sl6-spellpair .sl6-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Collapsible Spell Level 7 Card (SL7) ===== */
|
||
.sl7-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl7-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl7-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl7-toggle:checked + .sl7-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl7-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl7-toggle:not(:checked) + .sl7-toggle-btn + .sl7-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL7 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl7-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl7-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl7-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl7-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl7-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl7-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl7-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl7-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl7-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl7-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl7-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl7-spellrow.sl7-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl7-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl7-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl7-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl7-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl7-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl7-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl7-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl7-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl7-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl7-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl7-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl7-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl7-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl7-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl7-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl7-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl7-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl7-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl7-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl7-card textarea.sl7-knownarea,
|
||
.page-magic .sl7-card textarea.sl7-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl7-card textarea.sl7-knownarea,
|
||
.page-magic .sl7-card textarea.sl7-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl7-card textarea.sl7-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl7-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl7-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl7-card textarea.sl7-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl7-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl7-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl7-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl7-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl7-spellrow-name .sl7-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl7-card, .sl7-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl7-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl7-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl7-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl7-topitem .sl7-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl7-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl7-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl7-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl7-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl7-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl7-spellrow input.sl7-line,
|
||
.sl7-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl7-spellrow-name input.sl7-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl7-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl7-spellbox,
|
||
.sl7-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl7-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl7-spellrow-name .sl7-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl7-spellrow-name .sl7-line.time,
|
||
.sl7-spellrow-name .sl7-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl7-card, .sl7-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl7-card,
|
||
.sl7-spellbox,
|
||
.sl7-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl7-spellrow,
|
||
.sl7-knownrow,
|
||
.sl7-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl7-spellrow input,
|
||
.sl7-spellrow textarea,
|
||
.sl7-knownrow textarea,
|
||
.sl7-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl7-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl7-spellrow-name .sl7-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl7-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl7-spellpair .sl7-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl7-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl7-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl7-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl7-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl7-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl7-spellpair .sl7-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl7-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl7-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl7-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl7-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl7-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl7-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl7-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl7-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl7-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl7-spellpair .sl7-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl7-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl7-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl7-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl7-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl7-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl7-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl7-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl7-spellpair-time,
|
||
.sl7-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl7-spellbox .sl7-spellrow.sl7-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl7-spellbox .sl7-spellrow.sl7-spellrow-name .sl7-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl7-spellbox .sl7-spellrow.sl7-spellrow-name .sl7-spellpair .sl7-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Collapsible Spell Level 8 Card (SL8) ===== */
|
||
.sl8-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl8-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl8-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl8-toggle:checked + .sl8-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl8-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl8-toggle:not(:checked) + .sl8-toggle-btn + .sl8-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL8 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl8-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl8-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl8-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl8-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl8-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl8-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl8-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl8-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl8-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl8-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl8-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl8-spellrow.sl8-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl8-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl8-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl8-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl8-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl8-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl8-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl8-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl8-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl8-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl8-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl8-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl8-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl8-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl8-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl8-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl8-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl8-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl8-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl8-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl8-card textarea.sl8-knownarea,
|
||
.page-magic .sl8-card textarea.sl8-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl8-card textarea.sl8-knownarea,
|
||
.page-magic .sl8-card textarea.sl8-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl8-card textarea.sl8-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl8-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl8-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl8-card textarea.sl8-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl8-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl8-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl8-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl8-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl8-spellrow-name .sl8-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl8-card, .sl8-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl8-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl8-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl8-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl8-topitem .sl8-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl8-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl8-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl8-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl8-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl8-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl8-spellrow input.sl8-line,
|
||
.sl8-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl8-spellrow-name input.sl8-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl8-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl8-spellbox,
|
||
.sl8-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl8-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl8-spellrow-name .sl8-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl8-spellrow-name .sl8-line.time,
|
||
.sl8-spellrow-name .sl8-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl8-card, .sl8-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl8-card,
|
||
.sl8-spellbox,
|
||
.sl8-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl8-spellrow,
|
||
.sl8-knownrow,
|
||
.sl8-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl8-spellrow input,
|
||
.sl8-spellrow textarea,
|
||
.sl8-knownrow textarea,
|
||
.sl8-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl8-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl8-spellrow-name .sl8-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl8-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl8-spellpair .sl8-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl8-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl8-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl8-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl8-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl8-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl8-spellpair .sl8-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl8-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl8-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl8-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl8-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl8-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl8-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl8-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl8-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl8-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl8-spellpair .sl8-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl8-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl8-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl8-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl8-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl8-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl8-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl8-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl8-spellpair-time,
|
||
.sl8-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl8-spellbox .sl8-spellrow.sl8-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl8-spellbox .sl8-spellrow.sl8-spellrow-name .sl8-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl8-spellbox .sl8-spellrow.sl8-spellrow-name .sl8-spellpair .sl8-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* ===== Collapsible Spell Level 9 Card (SL9) ===== */
|
||
.sl9-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.sl9-toggle-btn{
|
||
display: inline-block;
|
||
border: 1px solid #333;
|
||
border-radius: 6px;
|
||
padding: 4px 8px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
margin: 0 0 6px 0;
|
||
background: #fff;
|
||
position: relative;
|
||
top: 1px;
|
||
padding-right: 22px;
|
||
}
|
||
|
||
.sl9-toggle-btn::after{
|
||
content: "◀";
|
||
position: absolute;
|
||
right: 28px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #000;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.sl9-toggle:checked + .sl9-toggle-btn::after{
|
||
content: "▼";
|
||
color: #000;
|
||
}
|
||
|
||
.sl9-toggle-btn:hover{
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.sl9-toggle:not(:checked) + .sl9-toggle-btn + .sl9-body{
|
||
display: none;
|
||
}
|
||
|
||
/* ===== SL9 structural style mirror (from SL0) ===== */
|
||
|
||
|
||
|
||
/* sheet243: Spell Level 0 (SL0) card (Arial only) */
|
||
.sl9-card{
|
||
position: relative;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 20px 14px 12px 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl9-title{
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 10px;
|
||
background: #fff;
|
||
padding: 2px 10px;
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
.sl9-toprow{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 22px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
|
||
.sl9-topitem{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl9-box{
|
||
width: 58px;
|
||
height: 30px;
|
||
border: 2px solid #000;
|
||
background: #f2f2f2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl9-knownrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
|
||
.sl9-knownlabel{
|
||
font-weight: 700;
|
||
font-size: 16px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl9-knownline{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl9-sep{
|
||
border-top: 2px solid #000;
|
||
margin: 8px 0 14px 0;
|
||
}
|
||
|
||
|
||
.sl9-spellbox{
|
||
border: 2px solid #000;
|
||
border-radius: 4px;
|
||
padding: 10px 10px 6px 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl9-spellrow{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 10px;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
|
||
/* Spell Info: Spell Name row adds Casting Time on the same line */
|
||
.sl9-spellrow.sl9-spellrow-name{
|
||
grid-template-columns: auto 1fr auto 1fr;
|
||
}
|
||
|
||
|
||
.sl9-spelllabel{
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
|
||
.sl9-line{
|
||
width: 100%;
|
||
border: none;
|
||
border-bottom: 2px solid #000;
|
||
background: transparent;
|
||
height: 22px;
|
||
padding: 0 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.sl9-line.short{
|
||
max-width: 240px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet244: SL0 card border thickness + layout fixes */
|
||
.sl9-card{
|
||
border: 1px solid #777; /* match other cards */
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
position: static;
|
||
}
|
||
|
||
|
||
/* Remove the prior floating title styling if still present */
|
||
.sl9-title{ display: none; }
|
||
|
||
|
||
/* Force top row to stay on one line */
|
||
.sl9-toprow{
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
|
||
/* Reduce the three small boxes by ~65% (58px -> ~20px) */
|
||
.sl9-box{
|
||
width: 20px;
|
||
height: 26px;
|
||
}
|
||
|
||
|
||
/* Resizable Spells Known box */
|
||
.sl9-knownarea{
|
||
width: 100%;
|
||
min-height: 28px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Resizable Spell Description box */
|
||
.sl9-descarea{
|
||
width: 100%;
|
||
min-height: 32px;
|
||
border: 1px solid #777;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 4px 6px;
|
||
resize: vertical;
|
||
box-sizing: border-box;
|
||
font: inherit;
|
||
}
|
||
|
||
|
||
/* Keep Spell Name line as underline but align nicely with textarea below */
|
||
.sl9-spellrow{
|
||
align-items: start;
|
||
}
|
||
|
||
|
||
|
||
/* sheet245: refine SL0 borders + field default heights + label sizing */
|
||
|
||
/* match normal thin borders for separator and spell entry box */
|
||
.sl9-sep{
|
||
border-top: 1px solid #777;
|
||
}
|
||
|
||
|
||
.sl9-spellbox{
|
||
border: 1px solid #777;
|
||
}
|
||
|
||
|
||
/* default (collapsed) heights before user expands */
|
||
.sl9-knownarea{
|
||
min-height: 25px;
|
||
height: 25px;
|
||
}
|
||
|
||
|
||
.sl9-descarea{
|
||
min-height: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
/* Spell Name / Spell Description label font size -2px */
|
||
.sl9-spelllabel{
|
||
font-size: 16px;
|
||
}
|
||
|
||
|
||
/* Adjust associated inputs to visually match the smaller labels */
|
||
.sl9-line{
|
||
height: 20px;
|
||
}
|
||
|
||
|
||
.sl9-line.short{
|
||
max-width: 210px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet246: enforce max collapsed height for SL0 textareas */
|
||
.sl9-knownarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
.sl9-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet248: allow user resize to change height (do NOT lock height with !important) */
|
||
.page-magic .sl9-card textarea.sl9-knownarea,
|
||
.page-magic .sl9-card textarea.sl9-descarea{
|
||
height: 20px; /* initial visible height */
|
||
min-padding: 0 4px !important;
|
||
line-height: 18px !important;
|
||
box-sizing: border-box !important;
|
||
resize: vertical !important;
|
||
}
|
||
|
||
|
||
|
||
/* sheet249: SL0 textareas start at 20px but remain user-resizable */
|
||
.page-magic .sl9-card textarea.sl9-knownarea,
|
||
.page-magic .sl9-card textarea.sl9-descarea{
|
||
height: 20px;
|
||
min-height: 20px;
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet251: SL0 card - Spells Known min-height +5px */
|
||
.page-magic .sl9-card textarea.sl9-knownarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* sheet251: match SL0 card min-width to Spellcasting Information card (magic-card) */
|
||
.page-magic .sl9-card{
|
||
min-width: 335px;
|
||
}
|
||
|
||
|
||
/* sheet251: prevent SL0 top-row small boxes from compressing under 25px */
|
||
.page-magic .sl9-box{
|
||
min-width: 25px;
|
||
}
|
||
|
||
|
||
|
||
/* sheet252: SL0 Spell Description height matches Spells Known */
|
||
.page-magic .sl9-card textarea.sl9-descarea{
|
||
min-height: 25px;
|
||
}
|
||
|
||
|
||
/* Match SL0 textarea initial height/resizing behavior inside Spell Info */
|
||
.page-magic .spellinfo-card textarea.sl9-descarea{
|
||
height: 20px;
|
||
min-height: 25px; /* match SL0 Spell Description min-height (sheet252) */
|
||
resize: vertical;
|
||
overflow: auto;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* sheet260: SL0 Spell Info repeating section (+Add) */
|
||
.page-magic .sl9-spellinfo-repeat-note{
|
||
margin-top: 6px;
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
line-height: 1.2;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
|
||
.page-magic .sl9-addhint{
|
||
font-weight: 700;
|
||
}
|
||
|
||
|
||
/* Slight separation between repeating Spell Info entries */
|
||
.page-magic .sl9-spellbox-repeat{
|
||
margin-top: 6px;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – minimum width for Spell Name and Casting Time */
|
||
.sl9-spellrow-name .sl9-line.short {
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Responsive containment fixes
|
||
Spell Level 0 + Spell Info
|
||
========================= */
|
||
|
||
/* Ensure all SL0 elements size within their containers */
|
||
.sl9-card, .sl9-card * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* Prevent any child content from visually spilling out of the card */
|
||
.sl9-card {
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
/* Allow top-row items to wrap inside the card instead of overflowing */
|
||
.sl9-toprow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
/* Make each top item flexible and allow it to shrink within the card */
|
||
.sl9-topitem {
|
||
flex: 1 1 240px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep the little number boxes from forcing overflow */
|
||
.sl9-topitem .sl9-box {
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spells Known row: allow textarea to shrink/wrap within card */
|
||
.sl9-knownrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
|
||
.sl9-knownlabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl9-knownarea {
|
||
flex: 1 1 260px;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Info rows: wrap on narrow screens, keep fields inside */
|
||
.sl9-spellrow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 10px;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl9-spelllabel {
|
||
flex: 0 0 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Inputs should be allowed to shrink instead of overflowing */
|
||
.sl9-spellrow input.sl9-line,
|
||
.sl9-spellrow textarea {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Spell Name + Casting Time line: make inputs share space and wrap cleanly */
|
||
.sl9-spellrow-name input.sl9-line.short {
|
||
flex: 1 1 240px; /* grows, shrinks, wraps */
|
||
min-width: 60px; /* your requested minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Description textarea should always stay within the card */
|
||
.sl9-descarea {
|
||
flex: 1 1 100%;
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Repeat spell boxes should also clip/wrap properly */
|
||
.sl9-spellbox,
|
||
.sl9-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – lock Name / Casting Time / Range on one row with proportional widths */
|
||
.sl9-spellrow-name {
|
||
display: flex;
|
||
flex-wrap: nowrap; /* stay on one row */
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.sl9-spellrow-name .sl9-line.name {
|
||
flex: 3 1 0; /* 50% wider */
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
.sl9-spellrow-name .sl9-line.time,
|
||
.sl9-spellrow-name .sl9-line.range {
|
||
flex: 2 1 0;
|
||
min-width: 60px;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* =========================
|
||
Spell Info containment (responsive)
|
||
Keeps content inside Spell Info card on narrow widths
|
||
========================= */
|
||
.sl9-card, .sl9-card * { box-sizing: border-box; }
|
||
|
||
|
||
.sl9-card,
|
||
.sl9-spellbox,
|
||
.sl9-spellbox-repeat {
|
||
max-width: 100%;
|
||
overflow: hidden; /* prevent spill outside card */
|
||
}
|
||
|
||
|
||
.sl9-spellrow,
|
||
.sl9-knownrow,
|
||
.sl9-toprow {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
.sl9-spellrow input,
|
||
.sl9-spellrow textarea,
|
||
.sl9-knownrow textarea,
|
||
.sl9-toprow input {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Default: keep Name/Time/Range inputs on one row (your preferred layout) */
|
||
.sl9-spellrow-name { flex-wrap: nowrap; }
|
||
|
||
.sl9-spellrow-name .sl9-spelllabel { white-space: nowrap; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – keep each label+field together as a unit */
|
||
.sl9-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* prevents label and its input from splitting lines */
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Ensure inputs inside pairs can still shrink within the card */
|
||
.sl9-spellpair .sl9-line{
|
||
min-width: 60px; /* your minimum */
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* Spell Info – keep each label with its field, and preserve 3:2:2 width distribution */
|
||
.sl9-spellrow-name{
|
||
display:flex;
|
||
gap: 6px 10px;
|
||
align-items:center;
|
||
max-width:100%;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Each label+input pair stays together */
|
||
.sl9-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
white-space:nowrap;
|
||
min-width:0;
|
||
}
|
||
|
||
|
||
/* Proportional widths (Spell Name 50% wider than Time/Range) */
|
||
.sl9-spellpair.pair-name{ flex:3 1 0; }
|
||
|
||
.sl9-spellpair.pair-time{ flex:2 1 0; }
|
||
|
||
.sl9-spellpair.pair-range{ flex:2 1 0; }
|
||
|
||
|
||
/* Inputs shrink inside their pair; keep your minimum */
|
||
.sl9-spellpair .sl9-line{
|
||
flex:1 1 0;
|
||
min-width:60px;
|
||
max-width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* Spell Info – final overrides for pair classes used in HTML */
|
||
.sl9-spellrow-name{ flex-wrap: wrap; }
|
||
|
||
.sl9-spellpair.namepair{ flex: 3 1 0; }
|
||
|
||
.sl9-spellpair.timepair{ flex: 2 1 0; }
|
||
|
||
.sl9-spellpair.rangepair{ flex: 2 1 0; }
|
||
|
||
|
||
|
||
|
||
/* Spell Info – wrap by label+field pair (Casting Time & Range may drop, but never split from their label) */
|
||
.sl9-spellrow-name{
|
||
display:flex;
|
||
flex-wrap: wrap; /* allow pairs to wrap to lower rows */
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
.sl9-spellpair{
|
||
display:flex;
|
||
align-items:center;
|
||
gap: 6px;
|
||
white-space: nowrap; /* label and its field stay on same line */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Proportional widths by PAIR so the whole unit wraps together */
|
||
.sl9-spellpair-name{ flex: 3 1 0; }
|
||
|
||
.sl9-spellpair-time{ flex: 2 1 0; }
|
||
|
||
.sl9-spellpair-range{ flex: 2 1 0; }
|
||
|
||
|
||
/* Inputs inside pairs can shrink but respect your minimum */
|
||
.sl9-spellpair .sl9-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX: actually allow Casting Time / Range PAIRS to wrap when narrow */
|
||
.sl9-spellrow-name{
|
||
flex-wrap: wrap !important;
|
||
}
|
||
|
||
|
||
/* Prevent pairs from shrinking to avoid suppressing wrapping */
|
||
.sl9-spellpair{
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* FIX v2: enforce wrapping by giving each label+field pair a real minimum width.
|
||
This makes Casting Time / Range drop to a new row when the window is narrow,
|
||
while keeping each label attached to its field. */
|
||
.sl9-spellrow-name{
|
||
width: 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Minimum widths are set to the pair (label+field), not just the input,
|
||
so pairs stop compressing and instead wrap. */
|
||
.sl9-spellpair-name{ min-width: 320px; }
|
||
|
||
.sl9-spellpair-time{ min-width: 220px; }
|
||
|
||
.sl9-spellpair-range{ min-width: 200px; }
|
||
|
||
|
||
/* Keep 50% wider intent while still permitting wrap by pair */
|
||
.sl9-spellpair-name{ flex: 3 0 auto; }
|
||
|
||
.sl9-spellpair-time,
|
||
.sl9-spellpair-range{ flex: 2 0 auto; }
|
||
|
||
|
||
|
||
|
||
/* ===== Spell Info wrap fix (authoritative) =====
|
||
Problem: earlier rules target non-existent classes (sl0-spellpair-time/range),
|
||
and older grid/flex rules conflict. These rules are appended LAST and use
|
||
high specificity/!important so the Spell Info row actually wraps by pair. */
|
||
|
||
/* Ensure the Spell Name row is flex (not grid) and can wrap */
|
||
.sl9-spellbox .sl9-spellrow.sl9-spellrow-name{
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
align-items: center;
|
||
gap: 6px 10px;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
|
||
/* Keep each label+field together */
|
||
.sl9-spellbox .sl9-spellrow.sl9-spellrow-name .sl9-spellpair{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0; /* don't compress forever; wrap instead */
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* Inputs still respect your minimum and stay within the card */
|
||
.sl9-spellbox .sl9-spellrow.sl9-spellrow-name .sl9-spellpair .sl9-line{
|
||
min-width: 60px;
|
||
max-width: 100%;
|
||
}
|
||
|
||
|
||
/* === Sheet280: Calculated vs User-Entered Field Coloring === */
|
||
/* Calculated / auto-filled fields (readonly) */
|
||
.sheet-roll20 input[readonly],
|
||
.sheet-roll20 textarea[readonly] {
|
||
color: #4a4a4a; /* dark grey */
|
||
}
|
||
|
||
/* User-entered fields */
|
||
.sheet-roll20 input:not([readonly]),
|
||
.sheet-roll20 textarea:not([readonly]) {
|
||
color: #0b1f3a; /* dark navy blue */
|
||
}
|
||
|
||
/* === Sheet281: Correct selector for this sheet (.lfg-sheet) === */
|
||
/* Calculated / auto-filled fields (readonly) */
|
||
.lfg-sheet input[readonly],
|
||
.lfg-sheet textarea[readonly] {
|
||
color: #4a4a4a !important; /* dark grey */
|
||
}
|
||
|
||
/* User-entered fields */
|
||
.lfg-sheet input:not([readonly]),
|
||
.lfg-sheet textarea:not([readonly]) {
|
||
color: #0b1f3a !important; /* dark navy blue */
|
||
}
|
||
|
||
|
||
/* === Sheet292: Weapons & Attacks - Attack Roll button === */
|
||
.weapons-card-full .wt-head.wt-attackbonus {
|
||
position: relative;
|
||
}
|
||
|
||
/* Place the button inside the same square under the Attack Bonus field without resizing the cell */
|
||
.weapons-card-full .wt-attackroll-btn {
|
||
position: absolute;
|
||
left: 4px;
|
||
right: 4px;
|
||
bottom: 3px;
|
||
height: 16px;
|
||
line-height: 14px;
|
||
font-size: 10px;
|
||
padding: 0;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
/* remove d20 icon / normalize save roll button */
|
||
/* Clean save button styling that RETAINS the Roll20 dice icon */
|
||
.save-roll-btn{
|
||
border: 1px solid rgba(0,0,0,0.55);
|
||
border-radius: 3px;
|
||
padding: 0 4px 0 18px;
|
||
margin-left: -10px;
|
||
display: inline-block;
|
||
height: 16px;
|
||
line-height: 14px;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
position: relative;
|
||
left: -10px;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
min-width: 54px;
|
||
|
||
/* keep Roll20 dice icon */
|
||
background-size: 14px 14px;
|
||
background-position: 3px center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.save-roll-btn:hover{
|
||
opacity: 0.92;
|
||
}
|
||
|
||
/* Slightly tighten separator spacing in Saves */
|
||
.save-plus,
|
||
.save-eq{
|
||
margin-left: 2px;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
/* === Sheet307: Save buttons positioned to card edge and widened === */
|
||
/* Shift the entire Saves header + rows left so labels sit ~3px from the card edge
|
||
(armor-saves-card has 12px left padding, so -9px => 3px effective inset) */
|
||
.saving-header,
|
||
.save-row{
|
||
margin-left: -9px;
|
||
}
|
||
|
||
/* Keep dice icon, make the button fit its widened first column */
|
||
.save-roll-btn{
|
||
height: 24px;
|
||
line-height: 22px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
|
||
/* keep Roll20 dice icon */
|
||
background-size: 14px 14px;
|
||
background-position: 3px center;
|
||
|
||
padding-left: 20px;
|
||
padding-right: 6px;
|
||
|
||
border: 1px solid rgba(0,0,0,0.7);
|
||
border-radius: 3px;
|
||
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
|
||
/* === Sheet308: Saving Throws grid shifted & save buttons widened === */
|
||
|
||
/* Shift the entire Saving Throws header and rows left so first column is 3px from card edge */
|
||
.saving-header,
|
||
.save-row {
|
||
margin-left: -9px; /* 12px card padding minus 3px desired inset */
|
||
}
|
||
|
||
/* Expand Save buttons by 15px */
|
||
.save-roll-btn {
|
||
width: calc(100% + 15px);
|
||
}
|
||
|
||
|
||
/* === Sheet309: Save button + column refinements === */
|
||
|
||
/* 1) Increase Save button width by additional 5px (total +20px from base) */
|
||
.save-roll-btn {
|
||
width: calc(100% + 20px);
|
||
}
|
||
|
||
/* 2) Move Total Save column 15px to the right WITHOUT expanding card width
|
||
Achieved by shifting the Total Save column itself */
|
||
.save-row .save-total,
|
||
.saving-header .save-total {
|
||
margin-left: 15px;
|
||
}
|
||
|
||
/* 3) Reduce width of each save fillable field by 3px
|
||
and shift right by the same amount to preserve spacing */
|
||
.save-row input[type="text"],
|
||
.save-row input[type="number"] {
|
||
width: calc(100% - 3px);
|
||
margin-left: 3px;
|
||
}
|
||
|
||
|
||
/* === Sheet310: Compress AC & Saves field spacing by 20% === */
|
||
|
||
/* Compress spacing between save-related columns evenly */
|
||
.saving-header,
|
||
.save-row {
|
||
column-gap: 8px; /* was effectively ~10px, now ~20% tighter */
|
||
}
|
||
|
||
/* Slightly reduce internal padding of save input fields */
|
||
.save-row input[type="text"],
|
||
.save-row input[type="number"] {
|
||
padding-left: 3px;
|
||
padding-right: 3px;
|
||
}
|
||
|
||
/* Ensure columns distribute evenly after compression */
|
||
.saving-header,
|
||
.save-row {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
/* === Sheet311: Compressed save field spacing (separators and gaps) === */
|
||
|
||
|
||
/* === Sheet312: Total Save column shifted right 15px, width redistributed === */
|
||
|
||
|
||
/* === Sheet313: Saving Throws columns compressed 50%, Total Save shifted right === */
|
||
|
||
|
||
/* The sheet had multiple .save-row blocks; this scoped rule ensures the intended layout wins in Roll20. */
|
||
.armor-saves-card .saving-header {
|
||
grid-template-columns: 96px 37px 15px 37px 2px 37px 2px 40px !important;
|
||
column-gap: 3px !important; /* ~50% tighter than prior 6px */
|
||
}
|
||
|
||
.armor-saves-card .save-row {
|
||
grid-template-columns: 111px 37px 15px 37px 2px 37px 2px 40px !important; /* Total Save shifted right by widening button col */
|
||
column-gap: 3px !important; /* ~50% tighter */
|
||
}
|
||
|
||
|
||
/* === Sheet315: Fix Save button size + even symbol spacing (no card width increase) === */
|
||
/* Scoped overrides so they win over earlier duplicate .save-row rules */
|
||
.armor-saves-card .saving-header {
|
||
/* Button col widened (+15) to push Total Save right; other value cols reduced (-5 each) to keep total width stable */
|
||
grid-template-columns: 96px 37px 12px 32px 12px 32px 12px 32px !important;
|
||
column-gap: 3px !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
.armor-saves-card .save-row {
|
||
grid-template-columns: 111px 37px 12px 32px 12px 32px 12px 32px !important;
|
||
column-gap: 3px !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
/* Keep FORT/REF/WILL buttons compact (don’t stretch to fill widened column) */
|
||
.armor-saves-card .save-roll-btn {
|
||
width: 58px !important; /* fits FORT/REF/WILL + icon */
|
||
max-width: 58px !important;
|
||
box-sizing: border-box !important;
|
||
margin: 0 !important;
|
||
justify-self: start !important;
|
||
}
|
||
|
||
/* Center the + and = symbols evenly in their spacer columns */
|
||
.armor-saves-card .save-plus,
|
||
.armor-saves-card .save-eq {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet316: Wider Save buttons (+25px) and header/row realignment === */
|
||
|
||
/* Header and rows MUST share identical grid math */
|
||
.armor-saves-card .saving-header,
|
||
.armor-saves-card .save-row {
|
||
grid-template-columns: 121px 36px 12px 36px 12px 36px 12px 36px !important;
|
||
column-gap: 3px !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
/* Save buttons widened by +25px, but do not stretch */
|
||
.armor-saves-card .save-roll-btn {
|
||
width: 83px !important;
|
||
max-width: 83px !important;
|
||
box-sizing: border-box !important;
|
||
justify-self: start !important;
|
||
}
|
||
|
||
/* Center + and = symbols perfectly */
|
||
.armor-saves-card .save-plus,
|
||
.armor-saves-card .save-eq {
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
}\n\n
|
||
/* === Sheet317: Fine positional tweaks for Saving Throws === */
|
||
|
||
/* Shift all save input fields 3px to the left */
|
||
.armor-saves-card .save-row input[type="text"],
|
||
.armor-saves-card .save-row input[type="number"] {
|
||
margin-left: -3px !important;
|
||
}
|
||
|
||
/* Move the three save buttons 10px to the right */
|
||
.armor-saves-card .save-roll-btn {
|
||
margin-left: 10px !important;
|
||
}
|
||
|
||
|
||
/* === Sheet318: Core Stats field width adjustments === */
|
||
|
||
/* Hit Rating field: reduce width by ~55% and keep centered */
|
||
.core-stats-card .hit-rating input[type="text"],
|
||
.core-stats-card .hit-rating input[type="number"] {
|
||
width: 45% !important; /* 100% - 55% */
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
display: block;
|
||
}
|
||
|
||
/* Ability Mod fields: reduce width by ~40% and keep centered under header */
|
||
.core-stats-card .ability-mod input[type="text"],
|
||
.core-stats-card .ability-mod input[type="number"] {
|
||
width: 60% !important; /* 100% - 40% */
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
display: block;
|
||
}
|
||
|
||
|
||
/* === Sheet319: Core Stats width tweaks (Hit Rating + Ability Mod) === */
|
||
.core-stats-card .corestat-row.hr-row {
|
||
grid-template-columns: 1fr 39px;
|
||
}
|
||
.core-stats-card .corestat-row.hr-row .corestat-box {
|
||
width: 39px !important;
|
||
}
|
||
|
||
|
||
/* === Sheet320: Core Stats Ability Mod fields width -40% and centered === */
|
||
/* Force header+rows to keep the Ability Mod column aligned */
|
||
.core-stats-card .ability-header,
|
||
.core-stats-card .ability-row{
|
||
grid-template-columns: 70px 1fr 1fr !important; /* keep column structure stable */
|
||
}
|
||
|
||
/* Reduce ONLY the Ability Mod input boxes by 40% (i.e., to 60% width) and center them */
|
||
.core-stats-card .ability-row input.ability-box[readonly]{
|
||
width: 60% !important;
|
||
justify-self: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet321: Core Stats Ability Mod boxes truly -40% width and centered === */
|
||
/* Target ONLY the Ability Mod (readonly) boxes in the ability grid and override fixed width rules */
|
||
.core-stats-card .ability-row input.ability-box[readonly]{
|
||
width: 43px !important;
|
||
min-width: 43px !important;
|
||
max-width: 43px !important;
|
||
justify-self: center !important;
|
||
display: block !important;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
}
|
||
|
||
|
||
/* === Sheet322: AC & Saves – Total Save fields +5px width, centered === */
|
||
/* Increase only the Total Save calculated fields without changing grid or card width */
|
||
.armor-saves-card .save-row input.total-save,
|
||
.armor-saves-card .save-row input[name^="attr_TotalSave"]{
|
||
width: calc(100% + 5px) !important;
|
||
max-width: calc(100% + 5px) !important;
|
||
justify-self: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet323: AC & Saves – Total Save column +5px, redistributed (no card width change) === */
|
||
/* Strong, scoped overrides to avoid collisions with earlier .save-row blocks */
|
||
.armor-saves-card .saving-header {
|
||
grid-template-columns: 81px 42px 29px 35px 4px 35px 4px 36px !important;
|
||
align-items: center !important;
|
||
}
|
||
.armor-saves-card .save-row {
|
||
grid-template-columns: 96px 42px 29px 35px 4px 35px 4px 36px !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
/* Ensure Total Save input stays centered under its header */
|
||
.armor-saves-card .save-cell {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
}
|
||
.armor-saves-card input.save-box.save-total {
|
||
width: 100% !important;
|
||
}
|
||
|
||
|
||
/* === Sheet324: Re-align Saving Throws headers above their columns (no field movement) === */
|
||
/* Match header grid math to the save-row grid so labels sit directly above inputs. */
|
||
.armor-saves-card .saving-header {
|
||
grid-template-columns: 96px 37px 29px 37px 4px 37px 4px 37px !important;
|
||
column-gap: 6px !important;
|
||
align-items: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet325: Nudge Saving Throws input fields 3px left (no card width change) === */
|
||
/* Apply only to inputs, not headers or grid */
|
||
.armor-saves-card .save-row input[type="text"],
|
||
.armor-saves-card .save-row input[type="number"] {
|
||
position: relative !important;
|
||
left: -3px !important;
|
||
}
|
||
|
||
|
||
/* === Sheet328: Equip Slots – TOTAL EQUIPPED WEIGHT width -20% and right-aligned (no layout changes) === */
|
||
.equip-slots input.equip-total-weight{
|
||
width: 64px !important; /* 80px * 0.8 */
|
||
min-width: 64px !important;
|
||
max-width: 64px !important;
|
||
display: block !important;
|
||
margin-left: auto !important; /* right align inside its grid cell */
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
|
||
/* === Sheet330: Keep TOTAL EQUIPPED WEIGHT on one horizontal line === */
|
||
.equip-slots .equip-row.equip-total-row .equip-label{
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
|
||
/* === Sheet331: TOTAL EQUIPPED WEIGHT label spans row to prevent stacking === */
|
||
.equip-slots .equip-row.equip-total-row .equip-label{
|
||
white-space: nowrap !important;
|
||
grid-column: 1 / span 2 !important;
|
||
}
|
||
|
||
.equip-slots .equip-row.equip-total-row .equip-total-weight{
|
||
grid-column: 3 !important;
|
||
}
|
||
|
||
|
||
/* === Sheet333: TOTAL EQUIPPED WEIGHT label and field on same row === */
|
||
/* Let the label span columns 1-2, and force the weight field into column 3 */
|
||
.equip-slots .equip-row.equip-total-row .equip-label{
|
||
white-space: nowrap !important;
|
||
grid-column: 1 / 3 !important; /* span label across label+item columns */
|
||
}
|
||
|
||
.equip-slots .equip-row.equip-total-row input.equip-total-weight{
|
||
grid-column: 3 !important; /* keep aligned with Weight column */
|
||
margin-left: auto !important; /* right-align within the weight cell */
|
||
}
|
||
|
||
|
||
/* === Sheet335: Center-align specified fields (Back tab Weights, Skills card, Gold GP) === */
|
||
|
||
/* Back tab: center-align ALL Weight-related fields (Wt column + totals) */
|
||
.page-back input[placeholder="Wt"],
|
||
.page-back input[placeholder*="WEIGHT"],
|
||
.page-back input.equip-total-weight,
|
||
.page-back input.backpack-total-weight{
|
||
text-align: center !important;
|
||
}
|
||
|
||
/* Skills card: center-align all fillable fields */
|
||
.skills-card input[type="text"],
|
||
.skills-card input[type="number"]{
|
||
text-align: center !important;
|
||
}
|
||
|
||
/* Gold (GP) field */
|
||
input[name="attr_Gold"]{
|
||
text-align: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet337: Center-align Sheaths & Bandoliers weight fields === */
|
||
.subcard.sheaths-bandoliers input[placeholder^="Wt"]{
|
||
text-align: center !important;
|
||
}
|
||
.repeating_sheathsbandoliers input[placeholder^="Wt"]{
|
||
text-align: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet338: Center-align Belt Pouches weight fields === */
|
||
.subcard.belt-pouches input[placeholder^="Wt"]{
|
||
text-align: center !important;
|
||
}
|
||
.repeating_beltpouches input[placeholder^="Wt"]{
|
||
text-align: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet339: Standardize total weight field widths + center totals (no card size changes) === */
|
||
/* Baseline is Total Equipped Weight width: 64px */
|
||
|
||
/* Match total weight fields to baseline width and keep right-aligned in their weight column */
|
||
.page-back input.backpack-total-weight,
|
||
.page-back input.sheath-total-weight,
|
||
.page-back input.pouch-total-weight{
|
||
width: 64px !important;
|
||
min-width: 64px !important;
|
||
max-width: 64px !important;
|
||
display: block !important;
|
||
margin-left: auto !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
/* Center-align the numeric value inside total fields (Sheaths & Belt Pouches) */
|
||
.page-back input.sheath-total-weight,
|
||
.page-back input.pouch-total-weight{
|
||
text-align: center !important;
|
||
}
|
||
|
||
|
||
/* === Sheet343: Backpack TOTAL BACKPACK WEIGHT visible label on same row (no card size changes) === */
|
||
.backpack-total-row{
|
||
display: grid !important;
|
||
grid-template-columns: 1fr auto !important;
|
||
align-items: center !important;
|
||
column-gap: 6px !important;
|
||
}
|
||
|
||
.backpack-total-row .backpack-total-label{
|
||
white-space: nowrap !important;
|
||
}
|
||
|
||
/* keep the total field aligned with the weight column/right edge */
|
||
.backpack-total-row input.backpack-total-weight{
|
||
justify-self: end !important;
|
||
}
|
||
|
||
.sheath-total-label{
|
||
font-weight: bold;
|
||
font-size: 0.8em;
|
||
padding-right: 6px;
|
||
}
|
||
|
||
/* sheet345: Sheaths & Bandoliers total row label + field on same line without impacting other cards */
|
||
.sheath-total-row{
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
align-items: center;
|
||
}
|
||
.sheath-total-row input{
|
||
width: 100%;
|
||
min-width: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* sheet345: Belt Pouches total row label (keeps total field aligned under weight column) */
|
||
.pouch-total-label{
|
||
font-weight: bold;
|
||
font-size: 0.8em;
|
||
text-align: right;
|
||
padding-right: 6px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* sheet346: Belt Pouches total row label (aligns with Pouch Item fields) */
|
||
.belt-pouches .pouch-total-label{
|
||
font-weight: bold;
|
||
font-size: 0.8em;
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
justify-self: start;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* sheet346 override: ensure left alignment wins */
|
||
.belt-pouches .pouch-total-label{ text-align: left; padding-right: 0; justify-self: start; }
|
||
|
||
/* sheet347: ensure label aligns with Pouch Item fields */
|
||
.belt-pouches .pouch-total-label{
|
||
text-align: left;
|
||
justify-self: start;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* sheet348: tighten visual alignment of TOTAL POUCH WEIGHT with Pouch Item fields */
|
||
.belt-pouches .pouch-total-label{
|
||
padding-left: 0;
|
||
}
|
||
|
||
/* sheet349: Belt Pouches - right-align Total Pouch Weight field with Wt inputs */
|
||
.belt-pouches .pouch-total-row input.pouch-total-weight{
|
||
width: 45px;
|
||
min-width: 45px;
|
||
box-sizing: border-box;
|
||
justify-self: end;
|
||
}
|
||
|
||
/* sheet350: Belt Pouches - make Total Pouch Weight field match Wt input width & alignment */
|
||
.page-back .belt-pouches input.pouch-total-weight{
|
||
width: 45px !important;
|
||
min-width: 45px !important;
|
||
max-width: 45px !important;
|
||
margin-left: 0 !important;
|
||
margin-right: 0 !important;
|
||
justify-self: stretch;
|
||
}
|
||
|
||
/* sheet357: Modified Light Load label styling */
|
||
.cap-grid-label.mod-light{
|
||
font-size: 0.85em;
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
/* sheet359: header line title + logo (inline, no layout disruption) */
|
||
.lfg-sheet-titlebar{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 0 0 6px 0;
|
||
padding: 0;
|
||
}
|
||
.lfg-sheet-title{
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
.lfg-sheet-logo{
|
||
height: 18px;
|
||
width: auto;
|
||
opacity: 0.9;
|
||
pointer-events: none;
|
||
display: block;
|
||
}
|
||
|
||
|
||
|
||
/* sheet362: header logo size adjustment */
|
||
.lfg-sheet-logo{
|
||
width: 300px;
|
||
height: auto;
|
||
}
|
||
|
||
/* sheet363: align logo under main title and remove duplicate title */
|
||
.lfg-sheet-titlebar{
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* sheet364: Option B - logo only (remove header text) */
|
||
.lfg-sheet-title{ display: none !important; }
|
||
.lfg-sheet-titlebar{ justify-content: flex-start; }
|
||
|
||
|
||
/* sheet370: Initiative card (Front tab) */
|
||
.initiative-card{
|
||
padding-top: 5px;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
/* Anchor for absolute-positioned toggle button without shifting existing elements */
|
||
.initiative-card .initiative-row{
|
||
position: relative;
|
||
}
|
||
|
||
.initiative-card .init-ready-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
.initiative-card .init-ready-btn{
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 0;
|
||
|
||
width: 95px;
|
||
height: 22px;
|
||
border: 1px solid #999;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
font-weight: bold;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.initiative-card .init-ready-btn::after{
|
||
content: "I'M READY";
|
||
color: #1a8f2a;
|
||
}
|
||
|
||
.initiative-card .init-ready-toggle:checked + .init-ready-btn::after{
|
||
content: "I'M DONE";
|
||
color: #b11a1a;
|
||
}
|
||
|
||
/* sheet371: Initiative button without moving label/input styles */
|
||
.initiative-card .initiative-row{
|
||
display: flex;
|
||
align-items: flex-start; /* align to top of initiative field */
|
||
flex-wrap: nowrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
/* hide checkbox but keep it functional */
|
||
.initiative-card .init-ready-toggle{
|
||
position: absolute;
|
||
left: -9999px;
|
||
}
|
||
|
||
/* button sits immediately to the right of the initiative field (no overlap) */
|
||
.initiative-card .init-ready-btn{
|
||
width: 110px;
|
||
height: 22px;
|
||
border: 1px solid #999;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
font-weight: bold;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
|
||
box-sizing: border-box;
|
||
white-space: nowrap; /* always one line */
|
||
line-height: 22px;
|
||
}
|
||
|
||
/* Default state */
|
||
.initiative-card .init-ready-btn::after{
|
||
content: "I'M READY";
|
||
color: #1a8f2a;
|
||
}
|
||
|
||
/* Toggled state */
|
||
.initiative-card .init-ready-toggle:checked + .init-ready-btn::after{
|
||
content: "I'M DONE";
|
||
color: #b11a1a;
|
||
}
|
||
|
||
/* sheet372: nudge initiative formula down to avoid overlap */
|
||
.initiative-card .initiative-formula{
|
||
margin-top: 7px;
|
||
}
|
||
|
||
/* sheet379: Initiative reactions line (absolute, no layout impact) */
|
||
.initiative-card{
|
||
position: relative;
|
||
}
|
||
|
||
.initiative-card .initiative-reactions{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.initiative-card .initiative-reactions-label{
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.initiative-card .initiative-reactions-box{
|
||
width: 14px;
|
||
border: none;
|
||
border-bottom: 1px solid #000;
|
||
text-align: center;
|
||
font-size: 11px;
|
||
background: transparent;
|
||
}
|
||
|
||
/* sheet381 regen: Reactions styling + alignment tweaks */
|
||
.initiative-card .initiative-reactions{
|
||
font-size: 13px;
|
||
}
|
||
.initiative-card .initiative-reactions-label{
|
||
color: #000;
|
||
font-size: 13px;
|
||
}
|
||
.initiative-card .initiative-reactions-box{
|
||
width: 22px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* sheet391: Balance Core Stats bottom spacing (HP -> Hit Rating -> Move Speed -> card bottom) */
|
||
.core-stats-card .hp-panel{
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.core-stats-card .corestat-row.hr-row{
|
||
margin-top: 0px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.core-stats-card .corestat-row{
|
||
margin-top: 0px;
|
||
}
|
||
|
||
.core-stats-card{
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
|
||
.core-stats-card .corestat-row.hr-row {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.core-stats-card .corestat-row.movespeed-row {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* sheet393: move ONLY Move Speed down 5px */
|
||
.core-stats-card .corestat-row.movespeed-row {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* sheet395: Core Stats spacing adjustments (from sheet393 baseline)
|
||
- Increase gap between Hit Rating and Move Speed by 5px (without moving Hit Rating closer to Hit Points)
|
||
- Reduce overall Core Stats card height by 5px
|
||
*/
|
||
.core-stats-card .corestat-row.hr-row{
|
||
margin-bottom: 23px; /* 18px default + 5px */
|
||
}
|
||
|
||
.core-stats-card .corestat-row.movespeed-row{
|
||
margin-top: 18px; /* keep default top spacing */
|
||
margin-bottom: 8px; /* 18px default - 10px => net card height -5px after HR +5 */
|
||
}
|
||
|
||
/* sheet396: Hit Rating color + spacing */
|
||
|
||
|
||
/* sheet397: exact Initiative-blue for Hit Rating */
|
||
.core-stats-card .corestat-row.hr-row .corestat-label{
|
||
color: #1e4db7;
|
||
}
|
||
|
||
/* sheet410: test roll button styling for Acrobatics skill label */
|
||
.skill-roll-btn{
|
||
background: transparent !important;
|
||
border: 0 !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
width: auto !important;
|
||
min-width: 0 !important;
|
||
text-align: left !important;
|
||
font: inherit !important;
|
||
color: inherit !important;
|
||
cursor: pointer;
|
||
}
|
||
.skill-roll-btn:hover{
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* sheet411: remove Roll20 d20 icon from skill roll buttons to save horizontal space */
|
||
button[type="roll"].skill-roll-btn::before{
|
||
display: none;
|
||
}
|