Skip to content

[Mage: Will vs Paradox] Formatting Fix: Fix multi column format #14436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 14, 2025
Merged

[Mage: Will vs Paradox] Formatting Fix: Fix multi column format #14436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c4fb080
fix sheet tab formatting
FaustianDeal Oct 12, 2025
e09f086
update mage formatting fix section collapse
FaustianDeal Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 112 additions & 29 deletions MageWillvsParadoxSheet/magewillvsparadox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

/* Base */
li { list-style: none; }
.charsheet { background-color:#452182; }
.charsheet { background-color:#070707; }
.charsheet .sheet-maindiv { background-color:#070707; }

/* Labels & headings */
Expand Down Expand Up @@ -210,10 +210,20 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }
display:block;
}

/* Two-column layout (multi-column flow) */
.sheet-block {
/* These help if you ever switch to columns; harmless for grid */
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
}

/* Prefer ~420px columns; Roll20 will give you 1 or 2 depending on width */
.charsheet .sheet-columns {
column-count:2; /* two columns */
column-gap:16px; /* space between columns */
column-width: 420px;
column-gap: 16px;
}
@media (max-width: 856px) {
.charsheet .sheet-columns { column-width: auto; column-count: 1; }
}

/* Force second column to start at “Sphere” */
Expand All @@ -236,11 +246,6 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }
page-break-inside:avoid;
}

/* One-column fallback for smaller dialogs (optional) */
@media (max-width: 900px) {
.charsheet .sheet-columns { column-count:1; }
}

/* Utility clearfix */
.sheet-cf:before, .sheet-cf:after { content:" "; display:table; }
.sheet-cf:after { clear:both; }
Expand All @@ -255,6 +260,8 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }
box-sizing:border-box;
border:2px solid #452182;
border-radius:5px;
background-color:#0b0b0b;
color: white;
}

/* hide the section by default */
Expand Down Expand Up @@ -282,6 +289,14 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }
display: none;
}

.sheet-gear-section {
display: block;
}

.sheet-toggle-gear:checked ~ .sheet-gear-section {
display: none;
}

/* show the section by default */
.sheet-look-section {
display: block;
Expand Down Expand Up @@ -449,12 +464,12 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }

/* Header */
.sheet-rolltemplate-us .sheet-rt-header {
font-size: 1.5em !important
padding: 10px 5px 5px !important
color: #FFD700 !important/* gold for header */
font-size: 1.5em !important;
padding: 10px 5px 5px !important;
color: #FFD700 !important;/* gold for header */
}
.sheet-rolltemplate-us .sheet-rt-subtitle {
font-size: 0.9em;
font-size: 0.8em;
color: #8A2BE2; /* purple for subtitle */
margin-top: 2px;
border-bottom: 1px solid rgba(255,255,255,0.15);
Expand Down Expand Up @@ -503,33 +518,73 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }
font-weight: bold;
}

/* ===== SHEET TYPE SWITCHER (Mage / Vampire) ===== */
/* ===== SHEET TYPE SWITCHER (Mage / Vampire) — TABS ===== */
.charsheet .sheet-switcher {
display:flex; gap:0.5rem; align-items:center; margin:8px 0 10px;
display: contents;
align-items: flex-end;
gap: 6px;
margin: 10px 0 0;
flex-wrap: wrap;
}

/* hide radios but keep them functional */
.charsheet .sheet-tab {
appearance:none; width:0; height:0; margin:0; padding:0; border:0;
position:absolute; left:-9999px;
appearance: none; width: 0; height: 0; margin: 0; padding: 0; border: 0;
position: absolute; left: -9999px;
}

/* tab look — force inline and non-fullwidth against Roll20 defaults */
.charsheet .sheet-tab-label {
padding:4px 10px; border:1px solid #444; border-radius:6px; cursor:pointer;
background:#111; color:#ddd; user-select:none;
display: inline-flex !important;
width: auto !important;
max-width: none !important;
white-space: nowrap;
align-items: center;
padding: 6px 14px;
margin: 0; /* spacing comes from .sheet-switcher gap */
border: 1px solid #444;
border-bottom: none;
border-radius: 8px 8px 0 0;
background: #111;
color: #ddd;
cursor: pointer;
user-select: none;
line-height: 1.2;
vertical-align: bottom;
}

/* active tab */
.charsheet .sheet-tab-mage:checked + .sheet-tab-label,
.charsheet .sheet-tab-vampire:checked + .sheet-tab-label {
background:#222; color:#fff; border-color:#666;
background: #222;
color: #fff;
border-color: #666;
position: relative;
}

/* Panes default hidden; radios must be before the panes in the DOM */
.charsheet .sheet-pane { display:none; }
/* blend active tab into the pane */
.charsheet .sheet-tab-mage:checked + .sheet-tab-label::after,
.charsheet .sheet-tab-vampire:checked + .sheet-tab-label::after {
content: "";
position: absolute;
left: -1px; right: -1px; bottom: -1px;
height: 1px;
background: #070707; /* matches your .sheet-maindiv background */
}

/* When Mage tab is checked, show Mage pane; hide Vampire */
.charsheet .sheet-tab-mage:checked ~ .sheet-mage { display:block; }
.charsheet .sheet-tab-mage:checked ~ .sheet-vampire { display:none; }
/* slim rail under tabs */
.charsheet .sheet-tab-rail {
height: 1px;
background: #444;
margin: 0 0 10px 0;
}

/* When Vampire tab is checked, show Vampire pane; hide Mage */
.charsheet .sheet-tab-vampire:checked ~ .sheet-vampire { display:block; }
.charsheet .sheet-tab-vampire:checked ~ .sheet-mage { display:none; }
/* panes / visibility (same logic you already had) */
.charsheet .sheet-pane { display: none; }
.charsheet .sheet-tab-mage:checked ~ .sheet-mage { display: block; }
.charsheet .sheet-tab-mage:checked ~ .sheet-vampire { display: none; }
.charsheet .sheet-tab-vampire:checked ~ .sheet-vampire { display: block; }
.charsheet .sheet-tab-vampire:checked ~ .sheet-mage { display: none; }

/* ===== Vampire visual theme hooks ===== */
:root {
Expand Down Expand Up @@ -593,6 +648,13 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }
width:35px;
}

/* “Mage” box border */
.sheet-vampire {
border:2px solid var(--vamp-accent);
border-radius:5px;
padding:6px;
}

.charsheet .sheet-vampire textarea {
background:#0b0b0b;
color:#f5f5f5;
Expand Down Expand Up @@ -672,4 +734,25 @@ input.sheet-showhide:checked ~ .sheet-subbox { display:none; }


/* Header bar (if you want a slightly redder feel only for Vampire) */
.charsheet .sheet-vampire .sheet-header { background-color:#0b0b0b; } /* subtle */
.charsheet .sheet-vampire .sheet-header { background-color:#0b0b0b; } /* subtle */

/* layout */
.sheet-hunger-row { display:flex; gap:6px; }

/* hide the native radio, style the span as the box */
.sheet-hunger input[type=radio] { position:absolute; opacity:0; }
.sheet-hunger span {
display:inline-block;
min-width:28px; text-align:center;
padding:4px 6px; border:2px solid var(--vamp-accent);
border-radius:4px;
background:#0b0b0b; color:#fff; font-weight:bold;
user-select:none; cursor:pointer;
}

/* highlight when selected */
.sheet-hunger input[type=radio]:checked + span {
background: var(--vamp-accent);
border-color: var(--vamp-accent-dark);
box-shadow: 0 0 6px rgba(162, 24, 24, 0.6);
}
Loading