let users opera patch everything and add hiding to nav bar
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user