let users opera patch everything and add hiding to nav bar

This commit is contained in:
KingKDot
2026-04-17 18:43:16 -05:00
parent 4a062e3a19
commit d41607782a
11 changed files with 223 additions and 21 deletions
+99
View File
@@ -2609,3 +2609,102 @@ body.sb-collapsed .sb-link-child {
.sb-badge:not(.hidden) {
display: inline-flex;
}
/* ============================================================
NAV HIDE / REVEAL
============================================================ */
/* ---- Shared reveal pill ---- */
#nav-reveal-btn {
position: fixed;
z-index: 60;
display: none; /* hidden until nav-hidden */
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #64748b;
font-size: 0.7rem;
cursor: pointer;
opacity: 0;
transition: opacity 0.25s ease, color 0.15s, background 0.15s, transform 0.2s ease;
pointer-events: none;
}
#nav-reveal-btn:hover {
background: rgba(30, 41, 59, 0.95);
color: #e2e8f0;
transform: scale(1.08);
}
#nav-reveal-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* ---- Topbar hidden state ---- */
body.nav-hidden:not(.sb-ready) #top-nav {
transform: translateY(-100%);
pointer-events: none;
transition: transform 0.3s var(--sb-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
body.nav-hidden:not(.sb-ready) #nav-reveal-btn {
display: flex;
opacity: 1;
pointer-events: auto;
top: 8px;
left: 8px;
}
/* ---- Sidebar hidden state ---- */
body.sb-ready.nav-hidden {
padding-left: 0 !important;
transition: padding-left 0.3s var(--sb-ease);
}
body.sb-ready.nav-hidden #top-nav {
transform: translateX(calc(-1 * var(--sb-w) - 2px));
pointer-events: none;
transition: transform 0.3s var(--sb-ease), width var(--sb-speed) var(--sb-ease);
}
body.sb-ready.nav-hidden #sb-mobile-bar {
transform: translateY(-100%);
pointer-events: none;
transition: transform 0.3s var(--sb-ease);
}
body.sb-ready.nav-hidden #nav-reveal-btn {
display: flex;
opacity: 1;
pointer-events: auto;
top: 8px;
left: 8px;
}
/* ---- Reveal-on-hover edge strip (sidebar mode) ---- */
body.sb-ready.nav-hidden #nav-reveal-btn {
transition: opacity 0.3s ease 0.1s, color 0.15s, background 0.15s, transform 0.2s ease;
}
/* Tooltip on reveal button */
#nav-reveal-btn::after {
content: attr(data-tooltip);
position: absolute;
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-size: 0.7rem;
color: #94a3b8;
background: rgba(15, 23, 42, 0.92);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
padding: 4px 8px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
#nav-reveal-btn:hover::after {
opacity: 1;
}