/* 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; } .btab:is(.bcatalog-tab,.bmood-tab){ width:120px; min-width:120px; height:28px; padding:0 12px; border-radius:8px 8px 4px 4px; background:var(--surface); white-space:nowrap; } #board .btab.active, #board .btab.active:hover{ color:#062532 !important; border-color:#70dddc !important; background:#70dddc !important; } /* selected board = filled aquarium tint (stays on hover) */ html[data-theme="light"] #board .btab.active, html[data-theme="light"] #board .btab.active:hover{ color:#fff !important; border-color:#0d688b !important; background:#0d688b !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(112,221,220,.28); box-shadow:inset 0 0 0 1px rgba(53,194,160,.07); } html[data-theme="light"] #bsvg{ border-color:rgba(13,104,139,.24); box-shadow:inset 0 0 0 1px rgba(13,104,139,.035); } .catalog-browser{ width:100%; height:100%; min-height:320px; overflow:auto; box-sizing:border-box; border:1px solid var(--border); border-radius:10px; background:var(--board); color:var(--text); } .catalog-browser[hidden]{ display:none !important; } .catalog-browser-bar{ position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid var(--border); background:var(--board); background:color-mix(in srgb,var(--board) 92%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .catalog-browser-bar strong{ display:block; font-size:16px; line-height:1.25; } .catalog-browser-bar>div:first-child{ flex:1 1 auto; min-width:0; } .catalog-browser-query{ margin-top:4px; color:var(--muted); font-size:13px; line-height:1.4; } /* Shown only when a card actually carries a price: the figure is the product page's online price, and nothing in this path knows the visitor's store. Quiet, but never hidden behind a hover. */ .catalog-browser-note{ margin-top:3px; color:var(--muted); font-size:12px; line-height:1.35; opacity:.85; } .catalog-site-link{ flex:0 0 auto; padding:8px 11px; border-radius:7px; background:#f96302; color:#fff; font-size:13px; font-weight:700; text-decoration:none; } .catalog-site-link:hover{ background:#df5700; color:#fff; } .catalog-search{ width:min(440px,100%); height:38px; display:flex; align-items:center; gap:8px; box-sizing:border-box; margin-top:11px; padding:3px 3px 3px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--muted); box-shadow:0 2px 9px rgba(0,0,0,.06); } .catalog-search:focus-within{ border-color:#0d688b; box-shadow:0 0 0 3px rgba(13,104,139,.12); } .catalog-search svg{ flex:0 0 17px; width:17px; height:17px; } .catalog-search input{ flex:1 1 auto; width:0; min-width:0; padding:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:14px; } .catalog-search input::placeholder{ color:var(--muted); } #board .catalog-search button{ flex:0 0 auto; height:30px; padding:0 13px; border:0; border-radius:8px; background:#0d688b; color:#fff; font-size:12px; font-weight:750; cursor:pointer; } #board .catalog-search button:hover{ border:0; background:#095774; color:#fff; } #board .catalog-search button:disabled{ opacity:.55; cursor:wait; } .catalog-browser-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; } .catalog-card{ min-width:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 4px 15px rgba(0,0,0,.09); transition:border-color .15s ease,box-shadow .15s ease; } .catalog-card.selected{ border-color:#f96302; box-shadow:0 0 0 2px color-mix(in srgb,#f96302 28%,transparent),0 4px 15px rgba(0,0,0,.09); } .catalog-card-media{ width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--surface-2); color:var(--muted); } .catalog-card-media img{ width:100%; height:100%; object-fit:contain; background:#fff; } .catalog-card-placeholder{ width:44px; height:44px; opacity:.55; } .catalog-card-body{ flex:1; display:flex; flex-direction:column; gap:7px; padding:12px; } .catalog-card-title{ margin:0; font-size:15px; line-height:1.35; font-weight:700; } .catalog-card-price{ color:#f96302; font-size:14px; font-weight:800; } .catalog-card-snippet{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .catalog-card-actions{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; } .catalog-card-select{ appearance:none; border:1px solid #f96302; border-radius:7px; padding:6px 9px; background:transparent; color:#c54f00; font:700 12px/1 inherit; cursor:pointer; } .catalog-card-select:hover,.catalog-card-select.selected{ background:#f96302; color:#fff; } .catalog-card-link{ align-self:center; color:#0d688b; font-size:13px; font-weight:700; text-decoration:none; } .catalog-card-link:hover{ text-decoration:underline; } html[data-theme="dark"] .catalog-card-link{ color:#70dddc; } .catalog-browser-empty{ grid-column:1/-1; padding:70px 24px; color:var(--muted); text-align:center; font-size:14px; } .catalog-browser-more-wrap{ display:flex; justify-content:center; padding:0 14px 18px; } #board .catalog-browser-more{ min-width:180px; padding:9px 16px; border:1px solid #0d688b; border-radius:8px; background:var(--surface); color:#0d688b; font-size:13px; font-weight:750; cursor:pointer; } #board .catalog-browser-more:hover{ background:#0d688b; color:#fff; } #board .catalog-browser-more:disabled{ opacity:.55; cursor:wait; } html[data-theme="dark"] #board .catalog-browser-more{ border-color:#70dddc; color:#70dddc; } html[data-theme="dark"] #board .catalog-browser-more:hover{ background:#70dddc; color:#062532; } #board.catalog-active #bsvg{ display:none !important; } #board.catalog-active #bModeDraw, #board.catalog-active #bModeNav, #board.catalog-active #bZoomGroup, #board.catalog-active #bMaxTools{ display:none !important; } /* Mood board: an image-led, pinboard-style composition. Varying card sizes and gentle rotations make the products read as a coordinated finish story, while category tags keep enough structure for practical project decisions. */ #board.mood-active #bsvg{ display:none !important; } #board.mood-active #bModeDraw, #board.mood-active #bModeNav, #board.mood-active #bZoomGroup, #board.mood-active #bMaxTools{ display:none !important; } .mood-board{ background-color:#e9e1d3; background-image:radial-gradient(circle at 14% 9%,rgba(255,255,255,.82) 0 1px,transparent 2px),linear-gradient(118deg,rgba(117,83,44,.08),transparent 38%),linear-gradient(25deg,rgba(255,255,255,.32),transparent 55%); background-size:18px 18px,100% 100%,100% 100%; } html[data-theme="dark"] .mood-board{ background-color:#192126; background-image:radial-gradient(circle at 14% 9%,rgba(255,255,255,.12) 0 1px,transparent 2px),linear-gradient(118deg,rgba(112,221,220,.06),transparent 38%); } .mood-board-grid{ display:flex; flex-direction:column; gap:18px; min-height:300px; padding:18px 16px 24px; container-type:inline-size; } /* ONE visual canvas, not category rows: two across in the narrow Browse pane, three across when the pane is wide (container query below), and every fifth tile a larger hero so the board has rhythm. Photos sit on white and the product carries the look. Fonts are set longhand: the old `font:750 9px/1 inherit` shorthand is INVALID (inherit cannot be a family inside it), so browsers dropped the whole declaration and the finish chip and buttons rendered at the inherited 16px uppercase, covering the photos. */ .mood-board-collage{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:row dense; gap:12px; align-items:start; } .mood-board-tile{ position:relative; min-width:0; overflow:hidden; display:flex; flex-direction:column; border-radius:12px; background:#fffdf8; color:#28231d; box-shadow:0 1px 2px rgba(44,35,24,.12),0 8px 20px rgba(44,35,24,.10); transition:transform .18s ease,box-shadow .18s ease; } .mood-board-tile:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(44,35,24,.12),0 14px 28px rgba(44,35,24,.16); } .mood-board-tile:nth-child(5n+3), .mood-board-tile:only-child{ grid-column:1/-1; } /* scale variety: a hero breaks the rhythm */ .mood-board-tile:nth-child(5n+3) .mood-board-media{ aspect-ratio:16/10; } html[data-theme="dark"] .mood-board-tile{ background:#f5efe4; color:#28231d; } .mood-board-media{ position:relative; width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; color:#776f64; } .mood-board-media img{ width:100%; height:100%; padding:10px; box-sizing:border-box; object-fit:contain; background:#fff; } .mood-board-category{ position:absolute; left:8px; bottom:8px; padding:4px 8px; border-radius:999px; background:rgba(255,253,248,.94); color:#5e4c39; box-shadow:0 1px 3px rgba(44,35,24,.18); font-size:10px; font-weight:750; line-height:1; letter-spacing:.06em; text-transform:uppercase; } .mood-board-badge{ position:absolute; z-index:2; top:8px; left:8px; padding:4px 8px; border-radius:999px; background:#f96302; color:#fff; font-size:10px; font-weight:750; line-height:1; letter-spacing:.05em; text-transform:uppercase; } #board .mood-board-remove{ position:absolute; z-index:2; top:8px; right:8px; width:28px; height:28px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,253,248,.94); color:#5e544a; box-shadow:0 1px 4px rgba(44,35,24,.22); cursor:pointer; transition:color .15s ease,background .15s ease; } #board .mood-board-remove svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; } #board .mood-board-remove:hover, #board .mood-board-remove:focus-visible{ background:#fff; color:#b42318; } .mood-board-body{ display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; border-top:1px solid rgba(44,35,24,.07); } .mood-board-title{ font-size:13px; font-weight:650; line-height:1.35; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mood-board-tile .mood-board-title{ color:#28231d; } .mood-board-title:hover{ text-decoration:underline; } .mood-board-body .catalog-card-price{ color:#b44700; font-size:13px; font-weight:750; } .mood-board-empty{ padding:16px; border:1px dashed var(--border); border-radius:12px; color:var(--muted); font-size:13px; text-align:center; } .mood-board-empty-hero{ min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:rgba(255,255,255,.38); } .mood-board-empty-hero strong{ color:var(--text); font-size:18px; } .mood-board-empty-hero span{ max-width:330px; line-height:1.5; } .mood-board-palette{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:12px; border:1px dashed rgba(117,83,44,.28); border-radius:14px; background:rgba(255,255,255,.28); } .mood-board-palette>span{ margin-right:3px; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; } #board .mood-board-add{ padding:6px 10px; border:1px solid rgba(117,83,44,.3); border-radius:999px; background:rgba(255,255,255,.54); color:#5e4c39; font-size:11px; font-weight:700; cursor:pointer; } #board .mood-board-add:hover{ border-color:#f96302; background:#fff; color:#c54f00; } /* Suggestions: the panel proposes, the visitor disposes. An orange ring and badge, and Keep / Dismiss under the title. */ .mood-board-tile.suggested{ box-shadow:0 0 0 2px #f96302,0 8px 20px rgba(44,35,24,.10); } .mood-board-actions{ display:flex; align-items:center; gap:6px; margin-top:6px; } .mood-board-actions:empty{ display:none; } /* "Explore another finish" leads the board as one slim row of chips, not a dashed box under the last tile. Longhand sizes with #board specificity: the generic board button styles otherwise render these chips at 16px uppercase. */ #board .mood-board-palette{ justify-content:flex-start; gap:6px; padding:0; border:0; border-radius:0; background:transparent; } #board .mood-board-palette>span{ margin-right:2px; color:#6d6256; font-size:10px; font-weight:750; line-height:1; letter-spacing:.07em; text-transform:uppercase; } #board .mood-board-palette button.mood-board-add{ padding:6px 11px; border:1px solid rgba(117,83,44,.28); border-radius:999px; background:rgba(255,253,248,.8); color:#5e4c39; font-size:12px; font-weight:650; line-height:1; letter-spacing:0; text-transform:none; box-shadow:none; } #board .mood-board-palette button.mood-board-add:hover{ border-color:#f96302; background:#fff; color:#c54f00; } #board .mood-board-keep, #board .mood-board-dismiss{ flex:1 1 0; min-width:0; padding:7px 8px; border-radius:999px; font-size:11px; font-weight:750; line-height:1; letter-spacing:.03em; cursor:pointer; } #board .mood-board-keep{ border:1px solid #f96302; background:#f96302; color:#fff; } #board .mood-board-keep:hover{ border-color:#df5700; background:#df5700; } #board .mood-board-dismiss{ border:1px solid #cdbfac; background:transparent; color:#6d6256; } #board .mood-board-dismiss:hover{ border-color:#7d6f60; color:#28231d; } @container (min-width:560px){ .mood-board-collage{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .mood-board-tile:nth-child(5n+3), .mood-board-tile:only-child{ grid-column:span 2; } } #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, #06445c 0%, var(--board) 56%, #00141f 100%); border:1px solid rgba(112,221,220,.10); } /* dark: same deep-water teal/navy gradient as the app cards */ html[data-theme="light"] #board.board-max{ background:linear-gradient(155deg, #edf6fc 0%, var(--board) 52%, #dbe8f1 100%); border:1px solid rgba(13,104,139,.12); } /* light: cool aquarium-blue frame without the previous neutral-grey cast */ html:not(.tenant-portal)[data-theme="dark"] #board.board-max{ background:linear-gradient(155deg,#172126 0%,var(--board) 56%,#050a0d 100%); border-color:rgba(176,195,202,.10); } /* main Huddle: blue-charcoal frame sampled from the dark architectural backdrop */ html:not(.tenant-portal)[data-theme="light"] #board.board-max{ background:linear-gradient(155deg, #fbf6ed 0%, var(--board) 52%, #eadfce 100%); border-color:rgba(152,126,91,.18); } /* main Huddle: warm beige frame matching the shared app surfaces */ /* 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; } #board.board-max .catalog-browser{ align-self:stretch; min-height:0; } /* 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) */ /* Inside the Home Depot workspace shell, Browse/Mood board is the connected right pane. Its outer edge is rounded by the shared frame; its left edge is a simple divider against the live panel. */ @media screen{ html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max, html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max.positioned{ position:relative !important; inset:auto !important; grid-column:3; grid-row:1; width:auto !important; min-width:0 !important; height:100% !important; max-height:none !important; margin:0 !important; transform:none !important; padding:14px; border:0; border-left:1px solid var(--border); border-radius:0 15px 15px 0; box-shadow:none; overflow:hidden; z-index:1; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .brzh{ display:none !important; } /* Frosted pane (see the #chat rule in app.css): tinted glass instead of an opaque gradient. The results list and the mood board surface go transparent so the glass shows through; their sticky headers are thinner glass on top. */ html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max{ background:linear-gradient(155deg,rgba(251,246,237,.62) 0%,rgba(251,247,239,.54) 52%,rgba(234,223,206,.62) 100%) !important; -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15); } html.tenant-fixed-workspace[data-theme="dark"] #tenantWorkspaceShell>#board.board-max{ background:linear-gradient(155deg,rgba(20,30,35,.66) 0%,rgba(13,22,26,.60) 52%,rgba(5,10,13,.68) 100%) !important; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max :is(.catalog-browser,.mood-board){ background-color:transparent; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-browser-bar, html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max #bHeadMax{ background:color-mix(in srgb,var(--surface) 42%,transparent); } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max #bHeadMax{ display:flex; flex:0 0 56px; flex-direction:row !important; align-items:stretch; gap:0 !important; margin:-14px -14px 0 !important; padding:0 8px !important; border-bottom:1px solid var(--border); border-radius:0 15px 0 0; background:color-mix(in srgb,var(--surface) 94%,transparent); cursor:default; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max #bHeadMax::before{ display:none; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:first-child{ order:2; flex:0 0 auto; min-height:0 !important; margin-left:auto; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:first-child>.wbtint{ display:none; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:first-child>div{ position:static !important; transform:none !important; height:100%; align-items:center !important; gap:4px !important; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:nth-child(2){ order:1; flex:1 1 auto; min-width:0; justify-content:flex-start !important; align-items:stretch; gap:6px !important; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:nth-child(n+3){ display:none !important; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax .btab[data-b]{ display:none; } html.tenant-fixed-workspace #tenantWorkspaceShell #board #bHeadMax .btab:is(.bcatalog-tab,.bmood-tab){ flex:1 1 0; width:auto; min-width:0; height:56px; padding:0 3px; border:0 !important; border-radius:0; background:transparent !important; color:var(--text) !important; font-size:9px; font-weight:750; letter-spacing:0; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; } html.tenant-fixed-workspace #tenantWorkspaceShell #board #bHeadMax .btab:is(.bcatalog-tab,.bmood-tab).active{ color:var(--text) !important; box-shadow:inset 0 -3px var(--tenant-workspace-accent); } html.tenant-fixed-workspace #tenantWorkspaceShell #board #bHeadMax button:is(#bPipBtn,#bMin,#bCloseMax){ width:30px; height:30px; padding:0 !important; display:grid !important; place-items:center; border-radius:8px; } /* Home Depot is a permanent attached workspace, not three floating windows. */ html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:first-child{ display:none !important; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:nth-child(2){ flex-basis:100%; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max #bWrap{ margin:0 -14px -14px; border-radius:0 0 13px 13px !important; } /* Portrait workspace (app.css, board.js _syncTenantWorkspacePortrait): Browse / Mood board is a tab under the pinned live panel. The bottom tab bar replaces this header's tabs, so the header goes, and the pane has no frame of its own. */ html.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait>#board.board-max, html.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait>#board.board-max.positioned{ grid-column:1; grid-row:2; padding:0; border-left:0; border-radius:0; } html.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait[data-pane="chat"]>#board{ display:none !important; } html.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait>#board.board-max #bHeadMax{ display:none !important; } html.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait>#board.board-max #bWrap{ margin:0; border-radius:0 !important; } html.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait>#board.board-max .catalog-browser{ border-radius:0; } @media (min-width:640px){ /* a tablet-width pane fits two compact card rows side by side */ html.tenant-fixed-workspace #tenantWorkspaceShell.workspace-portrait>#board.board-max .catalog-browser-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-browser{ border:0; border-radius:0 0 13px 13px; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-browser-grid{ grid-template-columns:1fr; gap:10px; padding:10px; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card{ display:grid; grid-template-columns:92px minmax(0,1fr); min-height:124px; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-media{ width:92px; height:100%; min-height:124px; aspect-ratio:auto; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-body{ gap:5px; padding:9px; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-title{ font-size:12px; line-height:1.25; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-price{ font-size:12px; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-snippet{ display:none; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-actions{ gap:6px; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-select{ padding:5px 6px; font-size:10px; } html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max .catalog-card-link{ font-size:11px; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized>#board.board-max, html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized>#board.board-max.positioned{ padding:0; border-left:1px solid var(--border); border-radius:0 15px 15px 0; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized>#board.board-max #bWrap{ display:none !important; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized>#board.board-max #bHeadMax{ display:flex; width:100%; height:100%; flex:1 1 auto; margin:0 !important; padding:0 !important; border:0; border-radius:0 15px 15px 0; align-items:flex-start; justify-content:center; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized #bHeadMax>div:first-child{ display:flex !important; order:1; width:100%; height:auto; min-height:52px !important; margin:0; align-items:center; justify-content:center; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized #bHeadMax>div:first-child>div{ position:static !important; width:100%; height:52px; display:flex; align-items:center !important; justify-content:center; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized #bHeadMax>div:nth-child(n+2){ display:none !important; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized #board #bHeadMax button:is(#bPipBtn,#bCloseMax){ display:none !important; } html.tenant-fixed-workspace #tenantWorkspaceShell.browser-pane-minimized #board #bHeadMax #bMin{ display:grid !important; width:36px; height:36px; padding:0 !important; place-items:center; } } html.tenant-rh.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max{ background:rgba(248,244,237,.86) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } html.tenant-rh.tenant-fixed-workspace[data-theme="dark"] #tenantWorkspaceShell>#board.board-max{ background:var(--surface) !important; } @media(max-width:1179px){ html.tenant-fixed-workspace #tenantWorkspaceShell>#board.board-max #bHeadMax{ padding-inline:8px !important; } html.tenant-fixed-workspace #tenantWorkspaceShell #bHeadMax>div:first-child>div{ gap:4px !important; } html.tenant-fixed-workspace #tenantWorkspaceShell #board #bHeadMax .btab:is(.bcatalog-tab,.bmood-tab){ padding-inline:3px; font-size:9px; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; } html.tenant-fixed-workspace #tenantWorkspaceShell #board #bHeadMax button:is(#bPipBtn,#bMin,#bCloseMax){ width:30px; height:30px; border-radius:8px; } } @media(max-width:759px){ html.tenant-homedepot:not(.tenant-workspace-attached).board-workspace-open #board.board-max, html.tenant-homedepot:not(.tenant-workspace-attached).board-workspace-open #board.board-max.positioned{ inset:8px !important; width:calc(100vw - 16px) !important; min-width:0 !important; height:calc(100dvh - 16px) !important; max-height:none !important; margin:0 !important; transform:none !important; } html.tenant-homedepot:not(.tenant-workspace-attached).board-workspace-open #board.board-max .brzh{ display:none !important; } html.tenant-homedepot:not(.tenant-workspace-attached).board-workspace-open #board.catalog-active #bHeadMax .wbtint{ display:none; } html.tenant-homedepot:not(.tenant-workspace-attached).board-workspace-open #board #bHeadMax .bcatalog-tab{ width:132px; min-width:132px; padding-inline:6px; font-size:11px; } html.tenant-homedepot:not(.tenant-workspace-attached).board-workspace-open #board #bHeadMax .bmood-tab{ width:110px; min-width:110px; padding-inline:6px; } } /* --- Popped out (Document Picture-in-Picture): the OS window IS the frame, so the in-page floating-panel geometry (docked right, drag handle, resize grips, minimize) is disabled and the board simply fills the pip window. Rotate is pointless there (resize the window instead). */ #board.board-max.board-pip{ position:fixed; inset:0; transform:none; right:auto; left:0; top:0; width:100% !important; min-width:0; height:100%; max-height:none; margin:0; border-radius:0; box-shadow:none; border:none; } #board.board-pip .brzh, #board.board-pip #bMin, #board.board-pip #bPipBtn, #board.board-pip #bRotate{ display:none !important; } #board.board-pip #bHeadMax{ cursor:default; } #board.board-pip #bHeadMax::before{ display:none; } /* no drag grip — the OS title strip moves the window */ #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:#70dddc; border-color:#70dddc; } /* minimize: aquarium tint + outline */ #board #bMin:hover{ background:rgba(112,221,220,.14); color:#70dddc; border-color:#70dddc; } html[data-theme="light"] #board #bMin{ color:#0d688b; border-color:#0d688b; } html[data-theme="light"] #board #bMin:hover{ background:rgba(13,104,139,.13); color:#0d688b; border-color:#0d688b; } #board button.berase{ color:#70dddc; border-color:transparent; background:transparent; } /* eraser: icon only, no outline box */ #board button.berase:hover{ background:rgba(112,221,220,.14); color:#70dddc; 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:#70dddc; } /* aquarium tint on the tabs */ html[data-theme="light"] .btab{ color:#0d688b; } .wbtint{ color:#70dddc; } /* WHITEBOARD title in the aquarium tint */ html[data-theme="light"] .wbtint{ color:#0d688b; } #board button.bpan{ color:#70dddc; border-color:transparent; background:transparent; } /* pan/hand tool: icon only, no outline box */ #board button.bpan:hover{ background:rgba(112,221,220,.14); color:#70dddc; 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(53,194,160,.24); box-shadow:0 0 0 4px rgba(53,194,160,.24); 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)); } } @media (max-width:560px){ .catalog-browser-grid{ grid-template-columns:1fr; } .catalog-browser-bar{ padding:13px 14px; flex-wrap:wrap; } .catalog-site-link{ margin-left:auto; } .mood-board-grid{ padding:14px 12px 20px; } .mood-board-collage{ gap:10px; } }