/* ===== Widget Grid VIX styles (V8 codebase, rebrand 2026-05-28) =====
WGI-M5 (2026-05-27): wrapped in @scope (.character-page) so VIX rules only
match inside the mount-root. The :root block was replaced by a
theme-bridge that maps VIX tokens onto D&D Within's design system —
including --char-accent (per-character) flowing into VIX's accent + tile-dash. */
/* Theme-bridge: V8 → D&D Within tokens. Stays outside @scope so the custom
props are inherited by everything inside .character-page. */
.character-page {
/* Bridge to D&D Within's design tokens — alleen tokens zonder palette-equivalent.
--user-*, --tile-*, --info-font-*, --tick/--handle/--guide/--alert worden
door applyPalette() op gezet en erven naar binnen .character-page in.
Hier defaulten breekt dat over (CSS specificity: .character-page wint van
inline style voor descendants). */
--bg: var(--bg-dark, #161618);
--panel: var(--bg-card, #1f1f23);
--text: var(--text-main, #e8e8ec);
--muted: var(--text-dim, #8a8a96);
--border: var(--border-light, #2a2a30);
--accent: var(--char-accent, var(--accent, #6cf));
--tile-dash: var(--char-accent, #6cf);
/* Layout-root: vult viewport in standalone, body in D&D Within (waar body
al fills via DnD CSS). @scope (.character-page) regel `body { ... }`
matcht NIET — body is ancestor — dus de daadwerkelijke layout-styling
hoort op .character-page zelf. */
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--user-bg-page, var(--bg-dark, #161618));
}
/* Standalone V8: zorg dat body geen marge of foreground-bg toont onder
.character-page. Targets alleen pages waarvan body een character-page
bevat (geen impact op DnD's eigen body styling waar character-page niet
de directe child is). */
body:has(> .character-page) {
margin: 0;
background: var(--user-bg-page, var(--bg-dark, #161618));
}
/* WGI-M7: verberg V8's eigen char-switcher UI wanneer V8 inline draait in
D&D Within (DnD's navbar is daar de char-switcher). Standalone V8 zet geen
body[data-route] dus de dropdown blijft daar zichtbaar. */
body[data-route^="characters/"] .character-page .rs-char-section,
body[data-route^="characters/"] .character-page #rs-char-toggle {
display: none;
}
@scope (.character-page) {
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
/* V11 phase 3.5 — full-width topbar with situation tabs.
Layout is: body = flex-column with .app-topbar on row 1 and .app-row on row 2.
.app-row is the original flex-row containing left sidebar / main / right sidebar. */
.app-topbar {
display: flex;
flex-shrink: 0;
border-bottom: 1px solid var(--user-border-soft, var(--border));
background: var(--user-bg-2, var(--panel));
}
.topbar-spacer-left,
.topbar-spacer-right {
width: 56px;
flex-shrink: 0;
}
.topbar-spacer-left { border-right: 1px solid var(--user-border, var(--border)); }
.topbar-spacer-right { border-left: 1px solid var(--user-border, var(--border)); }
.app-topbar .dash-tabs {
flex: 1;
margin: 0;
border-bottom: none;
overflow: hidden;
}
.app-row {
display: flex;
flex: 1;
min-height: 0;
align-items: stretch;
}
main.app-main {
flex: 1;
min-width: 0;
padding: 24px;
display: flex;
flex-direction: column;
}
@media (max-width: 600px) {
main.app-main { padding: 12px; }
}
/* ----- Left sidebar ----- */
aside.sidebar {
width: 56px;
flex-shrink: 0;
background: var(--user-bg-2, var(--panel));
border-right: 1px solid var(--user-border, var(--border));
display: flex;
flex-direction: column;
position: relative; /* anchor voor uitschuif-panel */
z-index: 40;
}
/* Uitschuif-panel ligt OVER de main content (verschuift de grid niet) */
.sidebar-panel {
position: absolute;
left: 100%;
top: 0;
width: 240px;
height: 100%;
background: var(--user-bg-2, var(--panel));
border-right: 1px solid var(--user-border, var(--border));
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transform: translateX(-8px);
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 50;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}
aside.sidebar:hover .sidebar-panel,
aside.sidebar.pinned .sidebar-panel {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
@media (hover: none) {
/* Op touch geen hover-uitschuif; alleen .pinned (klik op categorie) */
aside.sidebar:hover .sidebar-panel {
opacity: 0; pointer-events: none; transform: translateX(-8px);
}
aside.sidebar.pinned .sidebar-panel {
opacity: 1; pointer-events: auto; transform: translateX(0);
}
}
.sidebar-search {
padding: 12px;
border-bottom: 1px solid var(--user-border, var(--border));
flex-shrink: 0;
}
.sidebar-search input {
width: 100%;
background: var(--user-bg-1, var(--bg));
border: 1px solid var(--user-border, var(--border));
color: var(--user-text-regular, var(--text));
padding: 7px 10px;
border-radius: 6px;
font-size: 13px;
font-family: var(--info-font-body, inherit);
}
.sidebar-search input:focus { outline: none; border-color: var(--user-text-highlight, var(--accent)); }
.sidebar-categories { display: flex; flex-direction: column; padding: 8px 0; flex-shrink: 0; }
.cat-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0;
background: transparent;
border: none;
color: var(--user-text-regular, var(--muted));
cursor: pointer;
font-size: 20px;
border-left: 2px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cat-item:hover { background: rgba(255,255,255,0.04); color: var(--user-text-highlight, var(--text)); }
.cat-item.active {
color: var(--user-text-highlight, var(--accent));
border-left-color: var(--user-text-highlight, var(--accent));
background: rgba(255,255,255,0.03);
}
/* V9: ingeklapte sidebar → geen actieve-categorie-markering */
aside.sidebar:not(:hover):not(.pinned) .cat-item.active {
color: var(--user-text-regular, var(--muted));
border-left-color: transparent;
background: transparent;
}
@media (hover: none) {
/* touch: alleen .pinned telt — :hover blijft hangen op touch-devices */
aside.sidebar:not(.pinned) .cat-item.active {
color: var(--user-text-regular, var(--muted));
border-left-color: transparent;
background: transparent;
}
}
.cat-icon { display: inline-block; }
/* ----- Right sidebar ----- */
aside.sidebar.right-sidebar {
border-right: none;
border-left: 1px solid var(--user-border, var(--border));
order: 3;
}
aside.sidebar#leftSidebar { order: 1; }
main.app-main { order: 2; }
aside.sidebar.right-sidebar .sidebar-panel {
left: auto;
right: 100%;
border-right: none;
border-left: 1px solid var(--user-border, var(--border));
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
transform: translateX(8px);
}
aside.sidebar.right-sidebar:hover .sidebar-panel,
aside.sidebar.right-sidebar.pinned .sidebar-panel {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
@media (hover: none) {
aside.sidebar.right-sidebar:hover .sidebar-panel {
opacity: 0; pointer-events: none; transform: translateX(8px);
}
aside.sidebar.right-sidebar.pinned .sidebar-panel {
opacity: 1; pointer-events: auto; transform: translateX(0);
}
}
/* Right-sidebar action buttons */
.rs-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0;
background: transparent;
border: none;
color: var(--user-text-regular, var(--muted));
cursor: pointer;
font-size: 20px;
border-left: 2px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rs-btn:hover:not(:disabled) { background: rgba(255,255,255,0.04); color: var(--user-text-highlight, var(--text)); }
.rs-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.rs-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Character-select inside right sidebar panel */
.rs-char-section { padding: 8px 12px; }
.rs-char-section .sidebar-section-label { padding: 4px 0 8px; }
.rs-char-section select {
width: 100%;
background: var(--user-bg-1, var(--bg));
border: 1px solid var(--user-border, var(--border));
color: var(--user-text-regular, var(--text));
padding: 7px 10px;
border-radius: 6px;
font-size: 13px;
font-family: var(--info-font-body, inherit);
cursor: pointer;
}
.rs-char-section select:focus { outline: none; border-color: var(--user-text-highlight, var(--accent)); }
/* ----- Edit-values mode (V11 Phase 3.2) ----- */
body.edit-values-active svg.dashboard g.editable-cell { cursor: pointer; pointer-events: all; }
body.edit-values-active svg.dashboard g.editable-cell:hover path {
filter: drop-shadow(0 0 5px var(--user-text-highlight, var(--accent)));
}
body.edit-values-active svg.dashboard g.editable-cell:hover path.info-box-cell {
stroke: var(--user-text-highlight, var(--accent));
stroke-width: 1.5;
fill-opacity: 0.55;
}
.edit-input-overlay {
position: absolute;
background: var(--user-bg-2, var(--panel, #2a2318));
border: 2px solid var(--user-text-highlight, var(--accent, #c9a961));
color: var(--user-text-regular, var(--text, #e8dcc8));
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
font-family: var(--info-font-body, inherit);
z-index: 200;
text-align: center;
box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.edit-input-overlay:focus { outline: none; }
/* ----- Always-editable cells (wg-widgets-extra: HP/Conditions/Slots/Resources/Currency) ----- */
/* Klikbaar zonder editValuesMode-toggle voor mode:'always' widgets. */
svg.dashboard g.editable-cell.wgx-hp-main,
svg.dashboard g.editable-cell.wgx-temp-hp,
svg.dashboard g.editable-cell.wgx-deathsave,
svg.dashboard g.editable-cell.wgx-pill,
svg.dashboard g.editable-cell.wgx-exhaustion,
svg.dashboard g.editable-cell.wgx-bubble,
svg.dashboard g.editable-cell.wgx-list-pill {
cursor: pointer;
pointer-events: all;
}
/* Hover-feedback */
svg.dashboard g.editable-cell.wgx-pill:hover rect,
svg.dashboard g.editable-cell.wgx-bubble:hover circle,
svg.dashboard g.editable-cell.wgx-deathsave:hover circle,
svg.dashboard g.editable-cell.wgx-exhaustion:hover circle,
svg.dashboard g.editable-cell.wgx-list-pill:hover rect {
filter: drop-shadow(0 0 4px var(--user-text-highlight, var(--accent, #c9a961)));
}
svg.dashboard g.editable-cell.wgx-hp-main:hover text,
svg.dashboard g.editable-cell.wgx-temp-hp:hover text {
filter: drop-shadow(0 0 3px var(--user-text-highlight, var(--accent, #c9a961)));
}
.sidebar-widgets {
padding: 4px 8px 12px;
overflow-y: auto;
flex: 1;
}
.sidebar-section-label {
font-size: 10px;
color: var(--user-text-regular, var(--muted));
opacity: 0.55;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 10px 12px 4px;
font-family: var(--info-font-display, inherit);
}
.widget-item {
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
color: var(--user-text-regular, var(--text));
font-size: 13px;
font-family: var(--info-font-body, inherit);
transition: background 0.15s, color 0.15s;
border-left: 2px solid transparent;
}
.widget-item:hover {
background: rgba(255,255,255,0.04);
color: var(--user-text-highlight, var(--accent));
}
.widget-item.active {
color: var(--user-text-highlight, var(--accent));
border-left-color: var(--user-text-highlight, var(--accent));
background: rgba(255,255,255,0.03);
}
.widget-item.empty { opacity: 0.5; cursor: default; font-style: italic; }
h1 {
font-weight: 500;
font-size: 20px;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.subtitle {
color: var(--muted);
font-size: 13px;
margin: 0 0 20px;
}
.topbar-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
}
.topbar-row > div { flex: 1; min-width: 0; }
.topbar-row .subtitle { margin: 0; }
.top-buttons {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.icon-button {
width: 44px; height: 44px;
background: var(--panel);
border: 1px solid var(--border);
color: var(--text);
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-button:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.icon-button[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.icon-button svg { width: 22px; height: 22px; }
/* V9: settings-knop in widget-scope (een widget is geselecteerd) */
.icon-button.widget-scope {
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 0 1px var(--accent),
0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.icon-button.widget-scope:hover { background: var(--accent); color: var(--bg); }
/* V9 — character-select in topbar (dashboard-breed) */
.character-select {
background: var(--panel);
border: 1px solid var(--border);
color: var(--text);
border-radius: 10px;
height: 44px;
padding: 0 34px 0 14px;
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
min-width: 140px;
max-width: 200px;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color 0.15s, color 0.15s;
}
.character-select:hover { border-color: var(--accent); color: var(--accent); }
.character-select:focus { outline: none; border-color: var(--accent); }
.settings-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
z-index: 99;
}
.settings-overlay.open { opacity: 1; pointer-events: auto; }
.settings-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 380px;
max-width: 92vw;
background: var(--panel);
border-left: 1px solid var(--border);
box-shadow: -8px 0 32px rgba(0,0,0,0.4);
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(.4,0,.2,1);
z-index: 100;
display: flex;
flex-direction: column;
}
.settings-panel.open { transform: translateX(0); }
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.settings-header h2 {
margin: 0;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.settings-close {
width: 36px; height: 36px;
background: transparent;
border: 1px solid var(--border);
color: var(--text);
border-radius: 8px;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.settings-close:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.settings-tabs {
display: flex;
gap: 2px;
padding: 0 12px;
border-bottom: 1px solid var(--border);
flex: 0 0 auto;
}
.settings-tab {
flex: 1;
padding: 12px 8px;
background: transparent;
border: none;
color: var(--muted);
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.settings-body {
overflow-y: auto;
overflow-x: hidden;
padding: 16px 20px;
flex: 1;
}
.settings-pane { display: none; }
.settings-pane.active { display: block; }
.control input[type="color"] {
width: 100%;
height: 36px;
padding: 2px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
}
.control-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.radio-group {
display: flex;
gap: 2px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 3px;
}
.radio-group label {
flex: 1;
text-align: center;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
color: var(--muted);
font-weight: 500;
text-transform: none;
letter-spacing: normal;
transition: background 0.15s, color 0.15s;
}
.radio-group label:has(input:checked) {
background: var(--accent);
color: var(--bg);
}
.radio-group input { display: none; }
.controls {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
@media (min-width: 500px) {
.settings-panel .controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.control {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
/* Type-afhankelijke controls verbergen (conditional forms). */
.kind-hidden { display: none !important; }
.control label {
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
.control input {
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 10px;
border-radius: 6px;
font: inherit;
/* 16px voorkomt iOS auto-zoom op focus */
font-size: 16px;
font-variant-numeric: tabular-nums;
}
.control input:focus {
outline: none;
border-color: var(--accent);
}
.readout {
background: var(--bg);
border: 1px solid var(--border);
color: var(--accent);
padding: 8px 10px;
border-radius: 6px;
font: 500 14px system-ui;
font-variant-numeric: tabular-nums;
min-height: 36px;
display: flex;
align-items: center;
gap: 8px;
}
.readout .mode-pill {
background: var(--accent);
color: var(--bg);
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.range-inputs {
display: flex;
gap: 6px;
min-width: 0;
}
.range-inputs input {
flex: 1;
width: 0;
min-width: 0;
text-align: center;
/* 16px voorkomt iOS auto-zoom op focus */
font-size: 16px;
}
.range-tags {
display: flex;
gap: 6px;
margin-top: -2px;
}
.range-tags span {
flex: 1;
text-align: center;
color: var(--muted);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.range-curr {
margin-top: 2px;
color: var(--accent);
font-size: 11px;
font-weight: 600;
text-align: center;
font-variant-numeric: tabular-nums;
}
.canvas-wrap {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
padding: 4px 8px;
overflow: hidden; /* V9: discrete paginering i.p.v. scrollen */
margin-bottom: 0; /* symmetric: top gap (main padding) = bottom gap */
}
/* V10 — situatie-dashboard tabs (Character / Social / …) bovenaan het canvas.
Scaffolding-only: visueel actief-state, geen content per tab. */
.dash-tabs {
display: flex;
gap: 2px;
margin: 0;
border-bottom: 1px solid var(--user-border-soft, var(--border));
overflow: hidden;
}
.dash-tab {
padding: 10px 16px;
background: transparent;
border: none;
color: var(--user-text-regular);
font: inherit;
font-family: var(--info-font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.dash-tab:hover { color: var(--user-text-highlight); }
.dash-tab.active {
color: var(--user-text-highlight);
border-bottom-color: var(--user-border-glow, var(--user-text-highlight));
}
/* V11 — sidebar pulse op lege tab-switch */
@keyframes sidebar-pulse-amber {
0% { box-shadow: none; }
40% { box-shadow: 0 0 0 3px rgba(251,191,36,0.7), inset 0 0 12px rgba(251,191,36,0.15); }
100% { box-shadow: none; }
}
#leftSidebar.pulse-empty {
animation: sidebar-pulse-amber 0.6s ease-out forwards;
}
/* V9 — paginanavigatie */
.page-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: -4px 0 16px;
}
.page-arrow {
width: 36px; height: 36px;
background: var(--user-bg-1, var(--panel));
border: 1px solid var(--user-border, var(--border));
color: var(--user-text-highlight, var(--text));
border-radius: 8px;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, opacity 0.15s;
}
.page-arrow:hover:not(:disabled) { background: var(--user-bg-2, var(--bg)); }
.page-arrow:disabled { opacity: 0.3; cursor: default; }
.page-dots { display: flex; gap: 8px; align-items: center; }
.page-dot {
width: 9px; height: 9px;
border-radius: 50%;
border: 1px solid var(--user-border, var(--border));
background: transparent;
padding: 0;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.page-dot:hover { background: var(--user-border, var(--muted)); }
.page-dot.active {
background: var(--user-text-highlight, var(--accent));
border-color: var(--user-text-highlight, var(--accent));
transform: scale(1.15);
}
svg {
display: block;
user-select: none;
}
/* V9: pill-resize-handle (rand-pill + drie grip-bollen, palette-warm) */
svg .resize-handle-hit {
fill: transparent;
touch-action: none;
}
svg g.resize-handle.ew .resize-handle-hit { cursor: ew-resize; }
svg g.resize-handle.ns .resize-handle-hit { cursor: ns-resize; }
svg .resize-handle-pill {
fill: var(--user-border-glow, #fbbf24);
fill-opacity: 0.42;
stroke: var(--user-border-glow, #fbbf24);
stroke-opacity: 0.65;
stroke-width: 1;
vector-effect: non-scaling-stroke;
pointer-events: none;
transition: fill-opacity 0.12s ease, stroke-opacity 0.12s ease, filter 0.18s ease;
}
svg .resize-handle-grip {
fill: var(--user-bg-2, #161311);
fill-opacity: 0.85;
pointer-events: none;
transition: fill-opacity 0.12s ease;
}
svg g.resize-handle:hover .resize-handle-pill {
fill-opacity: 0.85;
stroke-opacity: 1;
}
svg g.resize-handle:hover .resize-handle-grip { fill-opacity: 1; }
svg g.resize-handle.dragging .resize-handle-pill {
fill-opacity: 1;
stroke-opacity: 1;
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--user-border-glow, #fbbf24) 70%, transparent));
}
svg g.resize-handle.dragging .resize-handle-grip { fill-opacity: 1; }
svg .widget-topbar {
cursor: grab;
fill: rgba(255, 204, 102, 0.18);
stroke: var(--tile-widget);
stroke-width: 1;
touch-action: none;
rx: 3;
}
svg .widget-topbar:hover { fill: rgba(255, 204, 102, 0.32); }
svg .widget-topbar.dragging { cursor: grabbing; fill: rgba(255, 204, 102, 0.55); }
svg .widget-grip { stroke: var(--tile-widget); stroke-width: 1.5; pointer-events: none; }
svg .widget-onboard-rect {
fill: var(--tile-widget);
fill-opacity: 0.18;
stroke: var(--tile-widget);
stroke-width: 1.5;
pointer-events: none;
}
svg .widget-onboard-rect.alert {
fill: var(--alert);
fill-opacity: 0.22;
stroke: var(--alert);
stroke-width: 2.5;
filter: drop-shadow(0 0 8px rgba(255, 140, 51, 0.75));
}
svg .widget-onboard-topbar {
fill: var(--tile-widget);
fill-opacity: 0.5;
stroke: var(--tile-widget);
stroke-width: 1;
cursor: grab;
touch-action: none;
}
svg .widget-onboard-topbar:hover { fill-opacity: 0.7; }
svg .widget-onboard-topbar.dragging { cursor: grabbing; fill-opacity: 0.9; }
svg .widget-onboard-topbar.alert {
fill: var(--alert);
fill-opacity: 0.7;
stroke: var(--alert);
}
svg .widget-title { fill: var(--bg); font-family: system-ui, sans-serif; font-weight: 600; pointer-events: none; user-select: none; }
svg .widget-content-area { fill: var(--tile-widget); fill-opacity: 0.08; pointer-events: none; }
/* ------- Default styling = palette-driven (Positive Gold etc) -------
Edit-mode en Dev-view zijn aparte toggles via svg.is-editing /
svg.dev-view / body.dev-view classes. */
svg .info-box-2d {
stroke: var(--user-border);
stroke-opacity: 0.55;
rx: 6; ry: 6;
}
svg .info-box-cell {
fill: var(--user-bg-1);
fill-opacity: 0.35;
}
svg .info-box-outer {
fill: none;
stroke: var(--user-border-soft);
stroke-width: 1;
pointer-events: none;
transition: stroke 0.2s, filter 0.2s;
}
/* Glow alleen op de widget die zelf gedragd wordt — Amber accent.
Info-boxes glowen niet mee; andere widgets ook niet. */
svg g.widget.is-dragging-self .widget-onboard-rect {
stroke: var(--user-border-glow);
filter: drop-shadow(0 0 8px color-mix(in srgb, var(--user-border-glow) 50%, transparent));
}
svg .info-box-text { fill: var(--user-text-regular); font-family: var(--info-font-body); }
svg .info-box-text.highlight { fill: var(--user-text-highlight); }
svg .info-box-text.is-prof-col { font-size: 1.25em; }
/* Default font voor alle binnen widgets — tracker-widgets zetten geen
eigen class, dus erven ze automatisch info-font-body. .widget-title wint
via z'n explicit rule (zelfde specificity, later in cascade). */
svg g.widget text { font-family: var(--info-font-body, inherit); }
/* Tracker / extra-widget tekst — gebruikt zelfde tokens als info-box.
wgx-text-display = grote/title-achtige cijfers (display-font + highlight). */
svg .wgx-text { fill: var(--user-text-regular); font-family: var(--info-font-body); }
svg .wgx-text.muted { opacity: 0.55; }
svg .wgx-text.dim { opacity: 0.7; }
svg .wgx-text.highlight { fill: var(--user-text-highlight); }
svg .wgx-text-display { fill: var(--user-text-highlight); font-family: var(--info-font-display); letter-spacing: 0.02em; }
svg .wgx-text.inverted, svg .wgx-text-display.inverted { fill: var(--user-bg-1); }
/* Status-tokens: standaard fallback hex zodat standalone V8 zonder palette
toch correcte kleuren toont. Override mogelijk via palette --ok/--warn/--alert. */
.wgx-ok { color: var(--ok, #5cb85c); }
.wgx-warn { color: var(--warn, #e89a4f); }
.wgx-alert { color: var(--alert, #c44); }
/* Editable cells moeten in z'n geheel klikbaar zijn — ook waar inner SVG
elements fill: none hebben (lege bubbles, dunne strokes).
pointer-events: all op een erft naar children → bounding-area hit. */
svg g.editable-cell { pointer-events: all; cursor: default; }
svg g.editable-cell rect.wgx-hit { fill: transparent; pointer-events: all; }
/* Cursor-pointer alleen waar interactie werkelijk reageert:
- edit-mode (unlock-checkbox aan) → álle editable cells
- always-mode sources (HP/conditions/slots/resources/currency/hitDice/etc) → altijd */
body.edit-values-active svg g.editable-cell { cursor: pointer; }
svg g.editable-cell[data-source="hp"],
svg g.editable-cell[data-source="conditions"],
svg g.editable-cell[data-source="spellSlots"],
svg g.editable-cell[data-source="classResources"],
svg g.editable-cell[data-source="currency"],
svg g.editable-cell[data-source="restTracker"],
svg g.editable-cell[data-source="hitDice"],
svg g.editable-cell[data-source="heroicInspiration"],
svg g.editable-cell[data-source="actionEconomy"],
svg g.editable-cell[data-source="equipment"],
svg g.editable-cell[data-source="initiative"],
svg g.editable-cell[data-source="concentration"] { cursor: pointer; }
/* Tracker-panel: één info-box-paneel dat de hele content-area vult, zodat
tracker-widgets visueel matchen met de Widget > InfoBox > Content hiërarchie
van infobox-widgets (bg-1 vulling + hairline border). */
svg .wgx-panel {
fill: var(--user-bg-1);
fill-opacity: 0.35;
stroke: var(--user-border-soft);
stroke-width: 1;
pointer-events: none;
}
svg .widget-onboard-rect {
fill: var(--user-bg-2);
fill-opacity: 1;
stroke: var(--user-border);
stroke-opacity: 0.6;
transition: stroke 0.2s, filter 0.2s;
}
svg .widget-content-area { fill: transparent; }
svg .widget-onboard-topbar {
fill: var(--user-bg-1);
fill-opacity: 0.35;
stroke: var(--user-border-soft);
pointer-events: auto; /* drag altijd toegestaan via topbar */
cursor: grab;
}
svg .widget-onboard-topbar.dragging {
fill-opacity: 0.55;
cursor: grabbing;
}
svg .widget-title {
fill: var(--user-text-highlight);
font-family: var(--info-font-display);
letter-spacing: 0.08em;
}
/* V9: in-widget gear/delete verwijderd — settings via topbar-knop, delete via toets. */
/* Active-marker: amber stroke + glow op het buitenrand-rect van de actieve widget */
svg g.widget.is-active .widget-onboard-rect {
stroke-width: 3;
stroke: var(--user-border-glow, #fbbf24);
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--user-border-glow, #fbbf24) 65%, transparent));
}
/* Inactieve widgets iets gedempt zodat focus op active blijft */
svg g.widget.is-inactive .widget-onboard-rect {
fill-opacity: 0.55;
stroke-opacity: 0.5;
}
svg g.widget.is-inactive .widget-onboard-topbar {
fill-opacity: 0.7;
}
/* Dev-only SVG elements — V10: amber-grid (volledig raster) i.p.v.
rail+ticks aan de zijkant. Rail/tick CSS blijft staan voor compat. */
svg .rail,
svg .tile-dash,
svg .tile-dash-2d,
svg .tick,
svg .tick-strong,
svg .tick-info,
svg .dash-outline,
svg .label,
svg .meta,
svg .dev-grid-bg { display: none; }
svg.dev-view .tile-dash-2d,
svg.dev-view .dev-grid-bg { display: revert; }
/* Dev-grid achtergrond — doffe amber, vult het hele dashboard-vlak.
Tile-rects in bg-kleur erboven vormen de cellen; het verschil = de
tile-spacing, en die wordt automatisch het zichtbare raster. */
svg .dev-grid-bg {
fill: color-mix(in srgb, var(--user-border-glow, #fbbf24) 32%, transparent);
pointer-events: none;
}
svg.dev-view .tile-dash-2d {
fill: var(--user-bg-2);
fill-opacity: 1;
stroke: none;
}
/* Drag-handles: V10 zijn alleen zichtbaar wanneer de muis in proximity is
(of de handle zelf gedragd wordt). Edit-mode is altijd actief. */
svg g.resize-handle { display: none; }
svg g.resize-handle.proximity-near,
svg g.resize-handle.dragging { display: revert; }
/* Page styling = palette-driven (default) */
body {
background: var(--user-bg-page);
color: var(--user-text-regular);
}
body h1 {
color: var(--user-text-highlight);
font-family: var(--info-font-display);
letter-spacing: 0.06em;
}
body .subtitle { color: var(--user-text-regular); opacity: 0.7; }
body .canvas-wrap {
background: var(--user-bg-2);
border-color: var(--user-border);
}
/* Dev-only items in settings — alleen wanneer body.dev-view */
.dev-only { display: none; }
body.dev-view .dev-only { display: revert; }
/* Dashboard footer-info (Dashboard / Widget / Info boxes panels) heeft
een eigen toggle in de algemene settings — onafhankelijk van dev-view. */
.info.show-on-toggle { display: none; }
body.show-dashboard-info .info.show-on-toggle { display: grid; }
/* Display-only SVG elements — pointer-events: none zorgt dat touches niet de handles blokkeren */
svg .rail,
svg .tile-dash,
svg .tile-dash-2d,
svg .dash-outline,
svg .tile-widget,
svg .tile-info,
svg .tick,
svg .tick-strong,
svg .tick-info,
svg .guide,
svg .label,
svg .meta { pointer-events: none; }
svg .rail { stroke: var(--border); stroke-width: 1.5; }
svg .tile-dash { stroke: var(--tile-dash); stroke-width: 6; stroke-linecap: butt; }
svg .tile-dash-2d { fill: var(--tile-dash); fill-opacity: 0.22; stroke: var(--tile-dash); stroke-opacity: 0.55; stroke-width: 0.5; }
svg .dash-outline { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
svg .tile-widget { stroke: var(--tile-widget); stroke-width: 6; stroke-linecap: butt; }
svg .tile-info { stroke: var(--tile-info); stroke-width: 4; stroke-linecap: butt; }
svg .tick-info { stroke: var(--tile-info); stroke-width: 1.5; }
svg .tick { stroke: var(--tick); stroke-width: 1.5; }
svg .tick-strong { stroke: var(--text); stroke-width: 2; }
svg .guide { stroke: var(--guide); stroke-width: 1; stroke-dasharray: 2 3; }
svg .label { fill: var(--text); font: 500 12px system-ui; }
svg .meta { fill: var(--muted); font: 11px system-ui; font-variant-numeric: tabular-nums; }
.info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.info-box {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
}
.info-box h3 {
margin: 0 0 10px;
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.info-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.info-row .key { color: var(--muted); }
.info-row .val { color: var(--text); font-weight: 500; }
.info-row .val.highlight { color: var(--accent); }
.info-row .val.warn { color: #fc6; }
/* ===== Map-widget ===== */
svg .map-placeholder { fill: var(--user-bg-2, #161311); }
svg .map-status {
fill: var(--user-text-regular, #9a8e7e);
font-size: 12px;
font-family: var(--info-font-body, serif);
}
/* Pins zijn standaard onzichtbaar; bij hover verschijnt een gele shade. */
svg .map-pin {
fill: transparent;
stroke: transparent;
stroke-width: 1;
vector-effect: non-scaling-stroke;
transition: fill 0.15s ease, stroke 0.15s ease;
}
svg .map-pin.has-link { pointer-events: all; cursor: pointer; }
svg .map-pin.has-link:hover {
fill: rgba(251,191,36,0.20);
stroke: rgba(251,191,36,0.45);
}
body.edit-values-active svg .map-pin {
pointer-events: all;
cursor: pointer;
stroke: rgba(251,191,36,0.35);
stroke-width: 1.5;
}
body.edit-values-active svg .map-pin:hover {
fill: rgba(251,191,36,0.25);
stroke: rgba(251,191,36,0.70);
}
body.pin-add-mode svg .map-pin { pointer-events: none !important; }
body.pin-add-mode svg .map-image { cursor: crosshair; }
body.pin-add-mode svg rect.map-placeholder { cursor: crosshair; }
svg .map-btn { cursor: pointer; }
svg .map-btn-bg {
fill: rgba(12,10,8,0.72);
stroke: var(--user-border-soft, rgba(201,169,97,0.25));
}
svg .map-btn:hover .map-btn-bg { fill: rgba(12,10,8,0.94); }
svg .map-btn-label {
fill: var(--user-text-highlight, #c9a961);
font-size: 15px;
font-weight: 700;
}
svg .map-dim-pip {
fill: rgba(12,10,8,0.72);
stroke: var(--user-border-soft, rgba(201,169,97,0.45));
stroke-width: 1.2;
}
svg .map-dim-pip.active { fill: var(--user-border-glow, #fbbf24); }
/* ===== Map-widget edit-mode action buttons (V11 Phase 3.3) ===== */
svg .map-action-btn { cursor: pointer; }
svg .map-action-btn rect { transition: fill 0.12s; }
svg .map-action-btn rect:first-of-type { fill: rgba(12,10,8,0.72); }
svg .map-action-btn:hover rect:first-of-type { fill: rgba(251,191,36,0.18); }
svg .map-action-btn path, svg .map-action-btn circle,
svg .map-action-btn line, svg .map-action-btn polyline {
stroke: var(--user-text-highlight, #c9a961);
fill: none; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
svg .map-action-btn.active rect:first-of-type { fill: rgba(251,191,36,0.32); }
svg .map-action-btn.active circle, svg .map-action-btn.active line,
svg .map-action-btn.active path { stroke: #fbbf24; }
/* ===== Map-edit popover (HTML overlay) ===== */
.map-edit-popover {
position: fixed; z-index: 250;
background: var(--user-bg-2, var(--panel));
border: 2px solid var(--user-text-highlight, var(--accent));
border-radius: 6px; padding: 12px; min-width: 220px;
display: flex; flex-direction: column; gap: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
font-family: var(--info-font-body, sans-serif);
font-size: 13px; color: var(--user-text-regular, var(--text));
}
.map-edit-popover label {
font-size: 11px; color: var(--user-text-muted, var(--muted)); margin-bottom: -4px;
}
.map-edit-popover input, .map-edit-popover select {
background: var(--user-bg-1, var(--bg));
border: 1px solid var(--user-border, var(--border));
color: var(--user-text-regular, var(--text));
padding: 6px 8px; border-radius: 4px; font-size: 13px; width: 100%;
}
.map-edit-popover .mep-row { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.map-edit-popover button { padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; border: none; }
.map-edit-popover .btn-save { background: var(--user-text-highlight, #c9a961); color: var(--user-bg-1, #1a1208); }
.map-edit-popover .btn-save:hover { filter: brightness(1.15); }
.map-edit-popover .btn-cancel { background: transparent; color: var(--user-text-regular, var(--text)); border: 1px solid var(--user-border, var(--border)) !important; }
.map-edit-popover .btn-delete { background: #7a2020; color: #f8d0d0; margin-right: auto; }
.map-edit-popover .btn-delete:hover { background: #a03030; }
} /* end @scope (.character-page) */