/* ═══════════════════════════════════════════════════════════════════════════ bepa-shell.css — Structural layout for the BepaTextEditor shell This file is theme-agnostic. It only defines layout, geometry, and structural rules. All colours come from CSS custom properties defined in themes/dark.css and themes/light.css. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Reset / Base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; width: 100%; overflow: hidden; /* shell handles scrolling per-region */ margin: 0; padding: 0; } /* ─── Dot-matrix background ───────────────────────────────────────────────── Applied via .has-dotmatrix on or the .page wrapper. Colour is driven by --bepa-dot-color from the active theme. ─────────────────────────────────────────────────────────────────────────── */ .dotmatrix-bg::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, var(--bepa-dot-color, rgba(128,128,128,0.15)) 1px, transparent 1px); background-size: 22px 22px; } /* ─── Shell grid ──────────────────────────────────────────────────────────── */ .bepa-shell { position: relative; --bepa-nav-width: 60px; --bepa-left-gap: 28px; --bepa-right-toolbar-width: 46px; --bepa-right-gap: 28px; --bepa-shell-edge-gap: 14px; --bepa-ad-rail-width: 296px; --bepa-ad-gap: 14px; --bepa-shell-ad-space: calc(var(--bepa-ad-rail-width) + var(--bepa-ad-gap)); display: flex; height: 100vh; width: 100vw; background: var(--bepa-bg); color: var(--bepa-text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 14px; overflow: hidden; } /* ─── Left navigation bar ────────────────────────────────────────────────── */ .app-nav { position: fixed; left: var(--bepa-shell-edge-gap); top: 50%; transform: translateY(-50%); z-index: 200; width: var(--bepa-nav-width); background: var(--bepa-nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--bepa-border); border-radius: 22px; box-shadow: var(--bepa-shadow-nav), inset 0 1px 0 rgba(255,255,255,0.04); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 3px; } /* Logo box */ .nav-logo { width: 30px; height: 30px; background: var(--bepa-accent); border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; text-decoration: none; box-shadow: 0 0 16px var(--bepa-accent-glow); flex-shrink: 0; transition: box-shadow 0.2s; } .nav-logo:hover { box-shadow: 0 0 20px var(--bepa-accent-glow); } .nav-logo svg { width: 16px; height: 16px; stroke: #fff; } /* Dividers */ .nav-divider { width: 28px; height: 1px; background: var(--bepa-border); margin: 5px 0; flex-shrink: 0; } /* Nav items */ .nav-item { position: relative; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; color: var(--bepa-nav-icon); border: none; background: transparent; flex-shrink: 0; transition: background 0.18s, color 0.18s, border-color 0.18s; -webkit-tap-highlight-color: transparent; } .nav-item svg { width: 19px; height: 19px; } .nav-item:hover { background: var(--bepa-nav-hover-bg); color: var(--bepa-nav-hover-icon); } .nav-item--active { background: var(--bepa-nav-active-bg); color: var(--bepa-nav-active-icon); border: 1px solid var(--bepa-nav-active-border); } /* Tooltip */ .nav-item::after { content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--bepa-tooltip-bg); color: var(--bepa-tooltip-text); border: 1px solid var(--bepa-border); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 5px 11px; border-radius: 9px; white-space: nowrap; pointer-events: none; opacity: 0; box-shadow: var(--bepa-shadow-sm); transition: opacity 0.15s; z-index: 300; } .nav-item:hover::after { opacity: 1; } /* Theme toggle button (no tooltip — it's a functional button) */ .nav-theme-btn { cursor: pointer; color: var(--bepa-nav-icon); } .nav-theme-btn:hover { background: var(--bepa-nav-hover-bg); color: var(--bepa-nav-hover-icon); } /* Progress dots */ .nav-progress { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 8px; flex-shrink: 0; } .prog-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--bepa-nav-icon); opacity: 0.35; transition: all 0.25s; cursor: pointer; } .prog-dot--active { height: 18px; border-radius: 4px; background: var(--bepa-accent); opacity: 1; box-shadow: 0 0 8px var(--bepa-accent-glow); } /* ─── Right toolbar ───────────────────────────────────────────────────────── */ .right-toolbar { position: fixed; right: calc(var(--bepa-shell-edge-gap) + var(--bepa-shell-ad-space)); top: 50%; transform: translateY(-50%); z-index: 200; width: var(--bepa-right-toolbar-width); background: var(--bepa-nav-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--bepa-border); border-radius: 22px; box-shadow: var(--bepa-shadow-nav); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 2px; } .bepa-ad-rail { position: fixed; top: 16px; right: var(--bepa-shell-edge-gap); bottom: 44px; width: var(--bepa-ad-rail-width); z-index: 150; display: flex; align-items: stretch; } .bepa-ad-rail-card { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-radius: 24px; border: 1px solid var(--bepa-border); background: var(--bepa-nav-bg); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--bepa-shadow-nav); color: var(--bepa-text); overflow: auto; } .bepa-ad-rail-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bepa-text-muted); } .bepa-ad-rail-card strong { font-size: 16px; line-height: 1.2; } .bepa-ad-rail-card p { margin: 0; color: var(--bepa-text-muted); font-size: 12px; line-height: 1.5; } .bepa-ad-slot { flex: 1; min-height: 280px; border-radius: 18px; border: 1px dashed var(--bepa-border-strong); background: var(--bepa-surface); position: relative; overflow: hidden; } .bepa-ad-slot:empty::before { content: 'Ads render here in production'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--bepa-text-muted); font-size: 12px; line-height: 1.5; } .tool-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bepa-nav-icon); flex-shrink: 0; transition: background 0.18s, color 0.18s, box-shadow 0.18s; -webkit-tap-highlight-color: transparent; } .tool-btn svg { width: 17px; height: 17px; } .tool-btn:hover { background: var(--bepa-nav-hover-bg); color: var(--bepa-nav-hover-icon); } .tool-btn--active { background: var(--bepa-accent); color: #fff; box-shadow: 0 0 12px var(--bepa-accent-glow); } .tool-btn--danger { color: var(--bepa-danger); } .tool-btn--danger:hover { background: rgba(239,68,68,0.08); } .toolbar-sep { width: 24px; height: 1px; background: var(--bepa-border); margin: 3px 0; flex-shrink: 0; } /* ─── Main content area ───────────────────────────────────────────────────── */ .bepa-main { position: fixed; left: calc(var(--bepa-nav-width) + var(--bepa-left-gap)); right: calc(var(--bepa-right-toolbar-width) + var(--bepa-right-gap) + var(--bepa-shell-ad-space)); top: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; } /* ─── Page header bar ─────────────────────────────────────────────────────── */ .bepa-page-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px 12px; flex-shrink: 0; gap: 12px; } .bepa-page-title { display: flex; align-items: center; gap: 10px; } .bepa-page-chip { background: var(--bepa-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; box-shadow: 0 0 10px var(--bepa-accent-glow); white-space: nowrap; } .bepa-h1 { font-size: 19px; font-weight: 800; color: var(--bepa-text); letter-spacing: -0.025em; margin: 0; } .bepa-header-actions { display: flex; align-items: center; gap: 8px; } /* Generic button variants */ .bepa-btn { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border: none; transition: all 0.18s; white-space: nowrap; } .bepa-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .bepa-btn-ghost { background: transparent; color: var(--bepa-text-muted); border: 1px solid var(--bepa-border); } .bepa-btn-ghost:hover { background: var(--bepa-surface); color: var(--bepa-text); border-color: var(--bepa-border-strong); } .bepa-btn-primary { background: var(--bepa-accent); color: #fff; box-shadow: 0 0 12px var(--bepa-accent-glow); } .bepa-btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 18px var(--bepa-accent-glow); } /* ─── Scrollable content body ─────────────────────────────────────────────── */ .bepa-content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 32px; } .bepa-content::-webkit-scrollbar { width: 4px; } .bepa-content::-webkit-scrollbar-thumb { background: var(--bepa-scrollbar-thumb); border-radius: 4px; } .bepa-content::-webkit-scrollbar-track { background: transparent; } .bepa-shell--workspace .bepa-content { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 40px; } .bepa-shell--workspace .bepa-content > * { flex: 1 1 auto; min-height: 0; } /* ─── Surface cards ───────────────────────────────────────────────────────── */ .bepa-card { background: var(--bepa-surface); border: 1px solid var(--bepa-border); border-radius: 14px; box-shadow: var(--bepa-shadow-sm); } /* ─── Shared dialog chrome ────────────────────────────────────────────────── */ .mud-overlay.mud-overlay-dialog { backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } .mud-overlay.mud-overlay-dialog .mud-overlay-scrim, .mud-overlay-scrim.mud-overlay-dark { background: rgba(7, 10, 14, 0.74) !important; } .bepa-dialog { position: relative; overflow: hidden !important; border-radius: 26px !important; border: 1px solid var(--bepa-border) !important; background: radial-gradient(circle at top left, rgba(124, 106, 247, 0.18), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), var(--bepa-surface) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.42), var(--bepa-shadow-nav) !important; } .bepa-dialog::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px); background-size: 22px 22px; opacity: 0.32; } .bepa-dialog .mud-dialog-title, .bepa-dialog .mud-dialog-content, .bepa-dialog .mud-dialog-actions { position: relative; z-index: 1; } .bepa-dialog .mud-dialog-title { padding: 24px 28px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); } .bepa-dialog .mud-dialog-content { padding: 22px 28px; background: transparent; } .bepa-dialog .mud-dialog-actions { padding: 16px 28px 24px; border-top: 1px solid rgba(255,255,255,0.05); gap: 10px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.03)); } .bepa-dialog .mud-button-close { top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05); } .bepa-dialog .mud-button-close .mud-icon-root { color: var(--bepa-text-muted); } .bepa-dialog .mud-input-control-input-container, .bepa-dialog .mud-input, .bepa-dialog .mud-input-slot, .bepa-dialog .mud-input > input, .bepa-dialog .mud-input > textarea, .bepa-dialog .mud-input-label { color: var(--bepa-text) !important; } .bepa-dialog .mud-input-outlined-border { border-color: rgba(255,255,255,0.14) !important; } .bepa-dialog .mud-input-adornment .mud-icon-root, .bepa-dialog .mud-input-label { color: var(--bepa-text-muted) !important; } .bepa-dialog .mud-input-adornment .mud-icon-root { color: var(--bepa-accent) !important; } .bepa-dialog-title-stack { display: flex; align-items: center; gap: 16px; } .bepa-dialog-title-icon { width: 46px; height: 46px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(124, 106, 247, 0.14); border: 1px solid rgba(124, 106, 247, 0.2); } .bepa-dialog-title-icon .mud-icon-root { color: var(--bepa-accent) !important; font-size: 22px !important; } .bepa-dialog-title-copy { display: flex; flex-direction: column; gap: 4px; } .bepa-dialog-title-copy .mud-typography { margin: 0; } .bepa-dialog-title-copy .mud-typography-caption { color: var(--bepa-text-muted); } .bepa-dialog-footnote { display: flex; align-items: center; gap: 10px; color: var(--bepa-text-muted); } .bepa-dialog-footnote .mud-icon-root { color: var(--bepa-accent) !important; font-size: 18px !important; } /* ─── Footer (minimal fixed strip) ───────────────────────────────────────── */ .bepa-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 32px; z-index: 100; background: var(--bepa-footer-bg); border-top: 1px solid var(--bepa-border); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 24px; font-size: 11px; color: var(--bepa-text-muted); } .bepa-footer a { color: var(--bepa-text-muted); text-decoration: none; transition: color 0.15s; } .bepa-footer a:hover { color: var(--bepa-accent); } .bepa-footer-sep { opacity: 0.4; } /* ─── Hide MudBlazor tab headers (nav replaces tabs) ─────────────────────── */ /* The existing TextEditor.razor uses MudTabs — we keep the logic but hide the visual tab bar since the left nav drives feature switching via routing. */ .bepa-shell .mud-tabs-tabbar, .bepa-shell .mud-tabs-tabbar-wrapper { display: none !important; } /* Make MudBlazor tabs fill the available vertical space */ .bepa-shell .mud-tabs { display: flex !important; flex-direction: column !important; height: 100% !important; } .bepa-shell .mud-tabs-panels { flex: 1 !important; min-height: 0 !important; } /* ─── Legacy overrides: top-row is hidden in new shell ───────────────────── */ .bepa-shell .top-row { display: none !important; } .bepa-shell .footer-bar { display: none !important; } .bepa-shell .ad-banner { display: none !important; } /* ─── Responsive: collapse nav on small screens ──────────────────────────── */ @media (max-width: 1260px) { .bepa-shell { --bepa-shell-ad-space: 0px; } .bepa-ad-rail { display: none; } } @media (max-width: 768px) { .bepa-shell { --bepa-nav-width: 50px; --bepa-left-gap: 20px; --bepa-right-toolbar-width: 40px; --bepa-right-gap: 20px; --bepa-shell-edge-gap: 8px; --bepa-shell-ad-space: 0px; } .app-nav { left: var(--bepa-shell-edge-gap); } .right-toolbar { right: var(--bepa-shell-edge-gap); } } @media (max-width: 480px) { .bepa-shell { --bepa-left-gap: 16px; --bepa-right-toolbar-width: 0px; --bepa-right-gap: 8px; } .right-toolbar { display: none; } .bepa-dialog { border-radius: 20px !important; } .bepa-dialog .mud-dialog-title, .bepa-dialog .mud-dialog-content, .bepa-dialog .mud-dialog-actions { padding-left: 18px; padding-right: 18px; } }