diff --git a/website/public/shell.css b/website/public/shell.css index 032d9e1e..3c5262fa 100644 --- a/website/public/shell.css +++ b/website/public/shell.css @@ -73,7 +73,7 @@ body.rspace-banner-visible .rstack-header { top: 36px; } body.rspace-banner-visible .rstack-tab-row { - top: 92px; /* 36px banner + 56px header */ + top: 91px; /* 36px banner + 56px header - 1px overlap */ } body.rspace-banner-visible #app { padding-top: 128px; /* 36px banner + 92px normal */ @@ -209,7 +209,7 @@ body.rspace-banner-visible #app { .rstack-tab-row { position: fixed; - top: 56px; + top: 55px; /* overlap header border by 1px to close gap */ left: 0; right: 0; z-index: 9998; @@ -224,7 +224,7 @@ body.rspace-banner-visible #app { /* ── Main content area ── */ #app { - padding-top: 92px; /* Below fixed header (56px) + tab row (36px) */ + padding-top: 91px; /* Below fixed header (56px) + tab row (36px) - 1px overlap */ height: 100vh; display: flex; flex-direction: column; @@ -604,7 +604,7 @@ body.rspace-headers-minimized .rapp-minimize-btn svg { transform: rotate(180deg); } -/* Minimized state: hide header + tab row, subnav becomes thin restore strip */ +/* Minimized state: hide all 3 header bars, floating restore button */ body.rspace-headers-minimized .rstack-header { transform: translateY(-100%); pointer-events: none; @@ -613,17 +613,36 @@ body.rspace-headers-minimized .rstack-tab-row { transform: translateY(-100%); pointer-events: none; } +body.rspace-headers-minimized .rapp-subnav { + transform: translateY(-100%); + pointer-events: none; + opacity: 0; +} body.rspace-headers-minimized #app { padding-top: 0; } body.rspace-headers-minimized #app.canvas-layout { padding-top: 0; } -body.rspace-headers-minimized .rapp-subnav { +/* Floating restore button when all headers minimized */ +body.rspace-headers-minimized .rapp-minimize-btn { + position: fixed; + top: 6px; + right: 12px; + z-index: 10000; + pointer-events: auto; + width: 28px; height: 28px; - padding: 2px 8px; - overflow: hidden; - justify-content: flex-end; + background: var(--rs-glass-bg); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid var(--rs-border); + border-radius: 8px; + opacity: 0.6; + transition: opacity 0.15s; +} +body.rspace-headers-minimized .rapp-minimize-btn:hover { + opacity: 1; } /* Smooth transitions for header minimize/restore */ @@ -633,6 +652,9 @@ body.rspace-headers-minimized .rapp-subnav { .rstack-tab-row { transition: margin-left 0.25s ease, left 0.25s ease, transform 0.25s ease, top 0.3s ease-out; } +.rapp-subnav { + transition: transform 0.25s ease, opacity 0.25s ease; +} #app { transition: margin-left 0.25s ease, left 0.25s ease, padding-top 0.3s ease-out; } @@ -650,6 +672,12 @@ body.rspace-headers-minimized .rapp-subnav { overflow: hidden; transform: none; } + body.rspace-headers-minimized .rapp-subnav { + max-height: 0; + overflow: hidden; + transform: none; + opacity: 0; + } } /* ── Flex gap fallback for Safari <14.1 ── */