nngo/PassKeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

04/18 fix toggle button of sidebar 3

Browse Source
This commit is contained in:
nngo
2026-04-18 14:57:21 -04:00
parent 86d69d7b83
commit 20d1d08b5e
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/app.css
+28 -16
View File
@@ -303,7 +303,7 @@ ul {
/* ── Sidebar ─────────────────────────────────────────────────────── */ /* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar { .sidebar {
width: 220px; width: 240px;
flex-shrink: 0; flex-shrink: 0;
background: var(--color-sidebar-bg); background: var(--color-sidebar-bg);
color: var(--color-sidebar-text); color: var(--color-sidebar-text);
@@ -314,7 +314,7 @@ ul {
} }
.sidebar.collapsed { .sidebar.collapsed {
width: 56px; width: 72px;
} }
/* Sidebar must not clip its children when collapsed — tooltips need to escape */ /* Sidebar must not clip its children when collapsed — tooltips need to escape */
@@ -433,39 +433,46 @@ ul {
color: #fff; color: #fff;
} }
.sidebar-icon { .sidebar-icon {
font-size: 16px; font-size: 20px;
flex-shrink: 0; flex-shrink: 0;
width: 22px;
text-align: center;
} }
/* Labels — fade out when collapsed */ /* Labels — fade out when collapsed; use max-width so icon stays visible */
.sidebar-label { .sidebar-label {
transition: opacity 0.15s ease; transition:
opacity 0.15s ease,
max-width 0.22s ease;
max-width: 200px;
overflow: hidden;
} }
.sidebar.collapsed .sidebar-label { .sidebar.collapsed .sidebar-label {
opacity: 0; opacity: 0;
max-width: 0;
} }
.sidebar.collapsed .sidebar-item { .sidebar.collapsed .sidebar-item {
justify-content: center; justify-content: center;
padding: 9px 0; padding: 10px 0;
overflow: visible; /* allow tooltip to escape */ overflow: visible;
} }
/* Tooltip — shown on hover in collapsed state */ /* Tooltip — appears to the right of the 72px rail */
.sidebar.collapsed .sidebar-item::after { .sidebar.collapsed .sidebar-item::after {
content: attr(data-tooltip); content: attr(data-tooltip);
position: fixed; position: fixed;
left: 64px; left: 80px;
background: #111827; background: #111827;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
padding: 4px 10px; padding: 5px 10px;
border-radius: 4px; border-radius: 5px;
white-space: nowrap; white-space: nowrap;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity 0.12s ease; transition: opacity 0.12s ease;
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
} }
.sidebar.collapsed .sidebar-item:hover::after { .sidebar.collapsed .sidebar-item:hover::after {
opacity: 1; opacity: 1;
@@ -1342,18 +1349,23 @@ ul {
/* ── Responsive ──────────────────────────────────────────────────── */ /* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) { @media (max-width: 640px) {
.sidebar { .sidebar {
width: 56px; width: 72px;
overflow-y: visible; overflow-y: visible;
} }
.sidebar-header .logo-text, .sidebar-header .logo-text,
.sidebar-label, .sidebar-label {
opacity: 0;
max-width: 0;
}
.sidebar-section-header { .sidebar-section-header {
opacity: 0; opacity: 0;
width: 0; pointer-events: none;
height: 0;
padding: 0;
} }
.sidebar-item { .sidebar-item {
justify-content: center; justify-content: center;
padding: 12px 0; padding: 10px 0;
} }
.vault-header { .vault-header {
padding: 12px 16px; padding: 12px 16px;