/* board.css — Whiteboard styles, extracted from pod_api.html. Loaded via in the page . Uses the page's :root CSS custom properties (--board, --ink, --border, etc.), which cascade across stylesheets, so they don't need to be redefined here. Deployed alongside index.html by admin do_deploy (Page component). */ .btab{ width:40px; height:24px; padding:0; border-radius:7px; font-size:12px; font-weight:600; line-height:1; color:var(--muted); background:transparent; border:1px solid var(--border); cursor:pointer; } #board .btab.active, #board .btab.active:hover{ color:#1b2330 !important; border-color:#c4b79e !important; background:#c4b79e !important; } /* selected board = filled tint (stays on hover) */ html[data-theme="light"] #board .btab.active, html[data-theme="light"] #board .btab.active:hover{ color:#fff !important; border-color:#908267 !important; background:#908267 !important; } .btab:hover{ color:var(--text); border-color:var(--border-2); } #bsvg{ display:block; width:100%; aspect-ratio:10/7; background:var(--board); border:1px solid var(--border); border-radius:10px; touch-action:none; cursor:crosshair; } html[data-theme="dark"] #bsvg{ border-color:rgba(74,155,230,.24); box-shadow:inset 0 0 0 1px rgba(53,194,160,.045); } #bFloatTabs{ position:absolute; top:6px; left:50%; transform:translateX(-50%); background:rgba(20,26,34,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:999px; padding:3px 6px; } html[data-theme="light"] #bFloatTabs{ background:rgba(255,255,255,.7); backdrop-filter:none; -webkit-backdrop-filter:none; } /* avoid a dark shadow-box over the white board */ #board #bMaxBtn:hover{ background:rgba(0,0,0,.72); color:#fff; } /* maximize: darken the circle on hover (both themes) */ /* #board-prefixed so these win over the generic `#board button` color/hover rules below */ #board .bmode{ padding:6px 20px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s, color .15s, border-color .15s; } #board .bmode:hover{ background:transparent; color:var(--text); border-color:var(--border-2); } /* subtle hover — must NOT mimic the selected look */ #board .bmode.active{ background:#2b80a1; color:#fff; border-color:#2b80a1; box-shadow:0 2px 8px rgba(43,128,161,.45); } /* selected mode: solid teal fill so it's unmistakable */ #board .bmode.active:hover{ background:#2f8fb4; color:#fff; border-color:#2f8fb4; } /* maximized whiteboard — docked to the right by JS using a viewport-scaled split-layout rectangle */ #bHeadMax{ display:none; } /* width + display use !important to beat the inline style JS sets on #board (width:min(680px,94vw) + display:block), otherwise the box isn't a flex container and the board can't be height-constrained -> it overflows the viewport. */ /* z-index 48: floats above app menus but BELOW the end-meeting (50) / limit (55) / pause (70) overlays, so those still cover the board when they open (matches the pop-out chat). */ /* CSS fallback if JS hasn't applied geometry yet; JS normally writes exact left/top/width/height. */ #board.board-max{ position:fixed; top:50%; right:clamp(12px,1.8vw,40px); left:auto; transform:translateY(-50%); margin:0; width:min(34vw,720px) !important; min-width:min(92vw,500px); height:min(84vh,860px); max-height:none; z-index:48; background:var(--board); padding:14px; box-sizing:border-box; display:flex !important; flex-direction:column; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.55); } html[data-theme="dark"] #board.board-max{ background:linear-gradient(155deg, #022d43 0%, var(--board) 56%, #00070f 100%); border:1px solid rgba(74,155,230,.055); } /* dark: frame matches the body gradient palette; border dimmed (was .10) */ html[data-theme="light"] #board.board-max{ background:linear-gradient(155deg, #e9edf4 0%, var(--board) 52%, #e2e7f0 100%); } /* light: subtle grey-blue gradient framing the white board (mid-stop = --board so the canvas blends in) */ /* Once dragged/resized, JS sets inline left/top + !important width/height and adds .positioned — drop the centering transform so those coordinates win (width in the base rule is !important, so JS uses !important too). */ #board.board-max.positioned{ transform:none; right:auto; min-width:0; } /* dragged/resized -> inline left/width win; drop the docked right + min-width */ #board.board-max #bHeadMax{ cursor:move; } /* the max header doubles as the drag-to-move title bar */ #board.board-max #bHeadMax button, #board.board-max #bHeadMax .bcol{ cursor:pointer; } /* ...but its controls stay clickable, not move-cursor */ /* Edge / corner resize grips — only present + hit-testable when maximized. */ .brzh{ display:none; } #board.board-max .brzh{ display:block; position:absolute; z-index:5; touch-action:none; } .brzh-n{ top:-4px; left:12px; right:12px; height:10px; cursor:ns-resize; } .brzh-s{ bottom:-4px; left:12px; right:12px; height:10px; cursor:ns-resize; } .brzh-e{ right:-4px; top:12px; bottom:12px; width:10px; cursor:ew-resize; } .brzh-w{ left:-4px; top:12px; bottom:12px; width:10px; cursor:ew-resize; } .brzh-ne{ top:-5px; right:-5px; width:16px; height:16px; cursor:nesw-resize; } .brzh-nw{ top:-5px; left:-5px; width:16px; height:16px; cursor:nwse-resize; } .brzh-se{ bottom:-5px; right:-5px; width:16px; height:16px; cursor:nwse-resize; } .brzh-sw{ bottom:-5px; left:-5px; width:16px; height:16px; cursor:nesw-resize; } #board.board-max #bHeadMax{ display:flex; order:-1; position:relative; z-index:2; padding-top:12px; } /* mode toggle + minimize sit at the very top — above the canvas layer; padding-top leaves room for the drag handle */ #board.board-max #bHeadMax::before{ content:""; position:absolute; top:3px; left:50%; transform:translateX(-50%); width:34px; height:4px; border-radius:999px; background:var(--border); opacity:.7; pointer-events:none; } /* drag-to-move handle, matching the maximized chat log's #logMoveBar */ html[data-theme="dark"] #board.board-max #bHeadMax::before{ background:rgba(243,236,201,.85); opacity:1; } /* yellowish-white grip on the dark theme */ /* z-index:1 + isolation keep the (transformed/composited) canvas BELOW the header on iOS Safari, so a drawing or a rotated board never paints over the tabs / Draw·Navigate / tools. */ #board.board-max #bWrap{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; isolation:isolate; } /* With the wrap now flex-constrained, contain a clean 10:7 board within it by BOTH dimensions (max-width + max-height) so it scales to fit and never overflows on a short viewport. */ #board.board-max #bsvg{ width:auto; height:auto; max-width:100%; max-height:100%; aspect-ratio:10/7; margin:auto; } #board.board-max #bMaxBtn, #board.board-max #bClose{ display:none; } #boardMaxBack{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:79; } #boardMaxBack.show{ display:block; } #board.board-max #bHeadInline, #board.board-max #bFloatTabs{ display:none; } /* in max, tabs live in the header (under the title) */ #board button{ color:var(--text); border-color:var(--border); transition:background .15s, color .15s, border-color .15s; } #board button:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border-2); } /* hover on all board buttons */ #board #bRotate.active, #board #bRotate.active:hover{ background:#2b80a1; color:#fff; border-color:#2b80a1; box-shadow:0 2px 8px rgba(43,128,161,.45); } /* rotated = teal fill (matches the Draw/Navigate selected look) */ #board #bUndo, #board #bUndoMax{ color:#4a9be6; border-color:#4a9be6; } /* undo blue icon + blue outline */ #board #bUndo:hover, #board #bUndoMax:hover{ background:rgba(74,155,230,.14); color:#4a9be6; border-color:#4a9be6; } #board #bClear, #board #bClearMax, #board #bClose, #board #bCloseMax{ color:#e9554a; border-color:var(--border-red); } /* clear + close = red */ #board #bClear:hover, #board #bClearMax:hover, #board #bClose:hover, #board #bCloseMax:hover{ background:var(--hover-red); color:#ff6a5c; border-color:#9a3329; } #board #bMin{ color:#c4b79e; border-color:#c4b79e; } /* minimize: yellow tint + outline */ #board #bMin:hover{ background:rgba(196,183,158,.14); color:#c4b79e; border-color:#c4b79e; } html[data-theme="light"] #board #bMin{ color:#908267; border-color:#908267; } html[data-theme="light"] #board #bMin:hover{ background:rgba(144,130,103,.16); color:#908267; border-color:#908267; } #board button.berase{ color:#c4b79e; border-color:transparent; background:transparent; } /* eraser: icon only, no outline box */ #board button.berase:hover{ background:rgba(196,183,158,.14); color:#c4b79e; border-color:transparent; } html[data-theme="light"] #board button.berase{ color:#1b2330; border-color:transparent; } /* white theme: black eraser */ html[data-theme="light"] #board button.berase:hover{ background:var(--surface-2); color:#1b2330; border-color:transparent; } html[data-theme="light"] #board button.berase svg path:first-child{ fill:#1b2330; } /* fill the eraser body black */ .bcol{ transition:transform .12s ease; } .bcol:hover{ transform:scale(1.14); } /* color swatches react on hover */ .btab{ color:#c4b79e; } /* yellowish bar tint on the tabs */ html[data-theme="light"] .btab{ color:#908267; } .wbtint{ color:#c4b79e; } /* WHITEBOARD title in the bar tint */ html[data-theme="light"] .wbtint{ color:#908267; } #board button.bpan{ color:#c4b79e; border-color:transparent; background:transparent; } /* pan/hand tool: icon only, no outline box */ #board button.bpan:hover{ background:rgba(196,183,158,.14); color:#c4b79e; border-color:transparent; } html[data-theme="light"] #board button.bpan{ color:#1b2330; border-color:transparent; } html[data-theme="light"] #board button.bpan:hover{ background:var(--surface-2); color:#1b2330; border-color:transparent; } /* one selection at a time — pencil / highlighter / eraser / pan share this filled-tile selected look */ #board .bcol.sel, #board button.berase.live, #board button.bpan.live{ background:rgba(143,182,230,.30); box-shadow:0 0 0 4px rgba(143,182,230,.30); border-radius:6px; outline:none; } /* centered clear-confirm dialog */ #bConfirm{ display:none; position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.6); align-items:center; justify-content:center; } #bConfirm.show{ display:flex; } /* the card itself is styled inline + the shared .gradCard class, exactly like the logout popup */ #bConfirmCancel:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border-2); } #bConfirmOk:hover{ background:#b0483f; border-color:#b0483f; } #board .bload{ color:#4fd18a; border-color:#387c59; } #board .bload:hover{ background:rgba(79,209,138,.13); color:#4fd18a; border-color:#4fd18a; } html[data-theme="light"] #board .bload{ color:#1b7a43; border-color:#1b7a43; } #bLoadDialog{ display:none; position:fixed; inset:0; z-index:94; background:rgba(0,0,0,.68); align-items:center; justify-content:center; padding:20px; box-sizing:border-box; } #bLoadDialog.show{ display:flex; } .bload-card{ width:min(560px,94vw); max-height:min(720px,88vh); overflow:hidden; border-radius:14px; padding:20px; box-sizing:border-box; box-shadow:0 18px 55px rgba(0,0,0,.65); color:var(--text); } .bload-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; } #bLoadTitle{ font-size:17px; font-weight:700; } .bload-sub{ color:var(--muted); font-size:12px; margin-top:4px; } #bLoadClose{ border:0; background:transparent; color:var(--muted); font-size:25px; line-height:1; padding:0 4px; cursor:pointer; } .bload-local{ display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px dashed #4fd18a; border-radius:10px; cursor:pointer; background:rgba(79,209,138,.07); } .bload-local span{ color:#4fd18a; font-size:14px; font-weight:700; } html[data-theme="light"] .bload-local span{ color:#1b7a43; } .bload-local small{ color:var(--muted); } .bload-divider{ display:flex; align-items:center; gap:10px; margin:18px 0 10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; } .bload-divider::before, .bload-divider::after{ content:""; height:1px; background:var(--border); flex:1; } .bload-saved{ max-height:390px; overflow:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .bload-item{ border:1px solid var(--border); background:var(--surface-2); border-radius:9px; padding:0; overflow:hidden; cursor:pointer; color:var(--text); text-align:left; } .bload-item:hover{ border-color:#4fd18a; } .bload-item img{ width:100%; height:92px; object-fit:cover; display:block; background:var(--board); } .bload-meta{ display:block; padding:8px; min-width:0; } .bload-name{ display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bload-folder{ display:block; color:var(--muted); font-size:10px; margin-top:2px; } .bload-empty{ grid-column:1/-1; color:var(--muted); font-size:13px; text-align:center; padding:28px 10px; } @media (max-width:560px){ .bload-saved{ grid-template-columns:repeat(2,minmax(0,1fr)); } }