matteoscrugli
04a0fe4b27
- Add backdrop-filter blur effects to sidebar, cards, and dropdowns - Replace flat button colors with gradients - Implement softer multi-layer shadows - Add new CSS variables: --color-overlay, --color-card-outline, --color-focus-ring - Modernize transitions with smoother easing curves - Add loading spinner animation - Add hexToRgbString() for --color-accent-rgb variable 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1066 lines
23 KiB
CSS
1066 lines
23 KiB
CSS
.sidebar {
|
|
width: 260px;
|
|
height: calc(100vh - 2rem);
|
|
/* Floating height */
|
|
max-height: calc(100vh - 2rem);
|
|
background: var(--color-bg-sidebar);
|
|
color: var(--color-text-sidebar);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
left: 1rem;
|
|
/* Floating position */
|
|
top: 1rem;
|
|
bottom: 1rem;
|
|
box-shadow: var(--shadow-xl);
|
|
/* Enhanced shadow for floating effect */
|
|
z-index: 1000;
|
|
transition: width 0.3s ease, transform 0.3s ease;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: var(--radius-lg);
|
|
/* Matched to page-tabs-slider */
|
|
border: 1px solid var(--color-sidebar-border);
|
|
/* Subtle border */
|
|
}
|
|
|
|
@supports (color: color-mix(in srgb, black, transparent)) {
|
|
.sidebar {
|
|
background: color-mix(in srgb, var(--color-bg-sidebar) 88%, transparent);
|
|
}
|
|
|
|
/* Avoid backdrop-filter on collapsed sidebar: it can break fixed-position dropdowns */
|
|
.sidebar:not(.collapsed),
|
|
.sidebar.dynamic.collapsed.expanded-force,
|
|
.sidebar.open {
|
|
backdrop-filter: blur(18px) saturate(1.15);
|
|
}
|
|
}
|
|
|
|
.sidebar.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Dark mode overrides for softer shadow */
|
|
[data-theme='dark'] .sidebar {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
|
|
/* Softer, more diffuse shadow */
|
|
}
|
|
|
|
.sidebar.collapsed {
|
|
width: 80px;
|
|
/* Slightly wider for better floating look */
|
|
}
|
|
|
|
/* Dynamic Sidebar Mode */
|
|
.sidebar.dynamic.collapsed {
|
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 1001;
|
|
/* Ensure it floats above content */
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force {
|
|
width: 260px;
|
|
}
|
|
|
|
/* Base state for content in dynamic collapsed mode (hidden) */
|
|
/* Base state for content in dynamic collapsed mode (hidden) */
|
|
/* Base state for content in dynamic collapsed mode (hidden) */
|
|
.sidebar.dynamic.collapsed .sidebar-tagline,
|
|
.sidebar.dynamic.collapsed .nav-label,
|
|
.sidebar.dynamic.collapsed .user-name,
|
|
.sidebar.dynamic.collapsed .badge-compact,
|
|
.sidebar.dynamic.collapsed .nav-section-title,
|
|
.sidebar.dynamic.collapsed .sidebar-header h2,
|
|
.sidebar.dynamic.collapsed .view-mode-label,
|
|
.sidebar.dynamic.collapsed .chevron,
|
|
.sidebar.dynamic.collapsed .sidebar-title,
|
|
.sidebar.dynamic.collapsed .btn-collapse {
|
|
display: block;
|
|
/* Keep in layout but hidden */
|
|
opacity: 0;
|
|
max-width: 0;
|
|
max-height: 0;
|
|
/* Collapse height to prevent vertical shifts */
|
|
margin: 0;
|
|
/* Reset margins to prevent shifts */
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
transition: opacity 0.2s ease, max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Hover state for content in dynamic collapsed mode (visible) */
|
|
/* Hover state for content in dynamic collapsed mode (visible) */
|
|
.sidebar.dynamic.collapsed.expanded-force .sidebar-tagline,
|
|
.sidebar.dynamic.collapsed.expanded-force .nav-label,
|
|
.sidebar.dynamic.collapsed.expanded-force .user-name,
|
|
.sidebar.dynamic.collapsed.expanded-force .badge-compact,
|
|
.sidebar.dynamic.collapsed.expanded-force .nav-section-title,
|
|
.sidebar.dynamic.collapsed.expanded-force .sidebar-header h2,
|
|
.sidebar.dynamic.collapsed.expanded-force .view-mode-label,
|
|
.sidebar.dynamic.collapsed.expanded-force .sidebar-title {
|
|
opacity: 1;
|
|
max-width: 200px;
|
|
max-height: 50px;
|
|
/* Restore height */
|
|
/* Enough to show content */
|
|
transition-delay: 0.05s;
|
|
/* Slight delay to match width expansion */
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .btn-collapse {
|
|
opacity: 1;
|
|
max-width: 40px;
|
|
/* Restore button width */
|
|
max-height: 40px;
|
|
margin: 0;
|
|
transition-delay: 0.05s;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .chevron {
|
|
opacity: 1;
|
|
max-width: 24px;
|
|
margin-left: auto;
|
|
/* Restore margin for chevron */
|
|
transition-delay: 0.05s;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .sidebar-header-content {
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .nav-item {
|
|
justify-content: flex-start;
|
|
padding: 0.75rem 1rem;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .view-mode-toggle {
|
|
justify-content: flex-start;
|
|
padding: 0.75rem;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .user-info-compact {
|
|
justify-content: flex-start;
|
|
padding: 0.5rem;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .user-initial {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .sidebar-actions {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .btn-icon {
|
|
flex: 1;
|
|
width: auto;
|
|
}
|
|
|
|
/* Reset gaps in collapsed dynamic mode to prevent off-center icons */
|
|
/* Reset gaps in collapsed dynamic mode to prevent off-center icons */
|
|
.sidebar.dynamic.collapsed .nav-item,
|
|
.sidebar.dynamic.collapsed .view-mode-toggle,
|
|
.sidebar.dynamic.collapsed .user-info-compact {
|
|
gap: 0;
|
|
justify-content: center;
|
|
/* Disable transition for gap/padding when NOT hovering to prevent glitch on mode switch */
|
|
transition: none;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .sidebar-header-content {
|
|
gap: 0;
|
|
justify-content: center;
|
|
transition: none;
|
|
}
|
|
|
|
/* Match standard collapsed padding exactly */
|
|
.sidebar.dynamic.collapsed .nav-item {
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .user-info-compact {
|
|
padding: 0.65rem 0.5rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .view-mode-toggle {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
/* Re-enable transitions ONLY on hover or when forced expanded */
|
|
.sidebar.dynamic.collapsed.expanded-force .nav-item,
|
|
.sidebar.dynamic.collapsed.expanded-force .view-mode-toggle,
|
|
.sidebar.dynamic.collapsed.expanded-force .user-info-compact,
|
|
.sidebar.dynamic.collapsed.expanded-force .sidebar-header-content {
|
|
transition: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Hide toggle button in dynamic mode */
|
|
.sidebar.dynamic .sidebar-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-tagline,
|
|
.sidebar.collapsed .nav-label,
|
|
.sidebar.collapsed .user-name,
|
|
.sidebar.collapsed .badge-compact,
|
|
.sidebar.collapsed .nav-section-title {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--color-sidebar-border);
|
|
height: 70px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-header-content {
|
|
justify-content: center;
|
|
gap: 0;
|
|
/* Ensure no gap affects centering */
|
|
}
|
|
|
|
.sidebar-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-text-sidebar);
|
|
}
|
|
|
|
.sidebar-tagline {
|
|
margin: 0.125rem 0 0 0;
|
|
font-size: 0.75rem;
|
|
opacity: 0.9;
|
|
transition: opacity 0.3s ease, width 0.3s ease;
|
|
white-space: nowrap;
|
|
color: var(--color-text-sidebar);
|
|
}
|
|
|
|
/* Sidebar Logo */
|
|
.sidebar-logo {
|
|
height: 32px;
|
|
width: auto;
|
|
flex-shrink: 0;
|
|
transition: height 0.3s ease;
|
|
}
|
|
|
|
/* Logo centered when sidebar is collapsed */
|
|
.sidebar.collapsed .sidebar-logo {
|
|
height: 28px;
|
|
}
|
|
|
|
/* Dynamic mode logo handling */
|
|
.sidebar.dynamic.collapsed .sidebar-logo {
|
|
height: 28px;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed.expanded-force .sidebar-logo {
|
|
height: 32px;
|
|
}
|
|
|
|
.btn-collapse {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
color: white;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
transition: var(--transition);
|
|
min-width: var(--btn-icon-md);
|
|
height: var(--btn-icon-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-collapse .material-symbols-outlined {
|
|
font-size: var(--icon-md);
|
|
}
|
|
|
|
.btn-collapse:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.sidebar-nav {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0.5rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.nav-section {
|
|
padding: 0 0.75rem;
|
|
/* Increased padding */
|
|
}
|
|
|
|
.nav-section-bottom {
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid var(--color-sidebar-border);
|
|
}
|
|
|
|
.nav-section-title {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
opacity: 0.9;
|
|
font-weight: 600;
|
|
color: var(--color-text-sidebar);
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
/* Slightly larger padding */
|
|
margin: 0.25rem 0;
|
|
color: var(--color-text-sidebar);
|
|
text-decoration: none;
|
|
border-radius: var(--radius-md);
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
min-height: 44px;
|
|
/* Taller touch target */
|
|
}
|
|
|
|
.sidebar.collapsed .nav-item {
|
|
justify-content: center;
|
|
padding: 0.75rem 0.5rem;
|
|
gap: 0;
|
|
/* Ensure no gap affects centering */
|
|
}
|
|
|
|
.sidebar.collapsed .nav-item.active::before {
|
|
display: none;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: rgba(var(--color-accent-rgb), 0.10);
|
|
color: var(--color-text-sidebar) !important;
|
|
}
|
|
|
|
.nav-item:hover .nav-icon,
|
|
.nav-item:hover .nav-label {
|
|
color: var(--color-text-sidebar) !important;
|
|
}
|
|
|
|
.sidebar:not(.collapsed) .nav-item:hover {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: rgba(var(--color-accent-rgb), 0.16);
|
|
border: 1px solid rgba(var(--color-accent-rgb), 0.22);
|
|
font-weight: 650;
|
|
color: var(--color-text-sidebar) !important;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.nav-item.active .nav-icon,
|
|
.nav-item.active .nav-label {
|
|
color: var(--color-text-sidebar) !important;
|
|
}
|
|
|
|
.nav-item.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 3px;
|
|
height: 58%;
|
|
border-radius: 999px;
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 22px;
|
|
/* Slightly larger icons */
|
|
line-height: 1;
|
|
min-width: 24px;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-label {
|
|
font-size: 0.95rem;
|
|
transition: opacity 0.3s ease, width 0.3s ease;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--color-sidebar-border);
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
margin-top: auto;
|
|
/* Push to bottom */
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sidebar-footer>*:not(:last-child) {
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
/* View Mode Toggle Button */
|
|
.view-mode-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-sidebar);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.view-mode-toggle:hover {
|
|
background: rgba(var(--color-accent-rgb), 0.10);
|
|
border-color: rgba(var(--color-accent-rgb), 0.18);
|
|
color: var(--color-text-sidebar) !important;
|
|
}
|
|
|
|
.view-mode-toggle .material-symbols-outlined {
|
|
font-size: var(--icon-md);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.view-mode-toggle .view-mode-label {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.view-mode-toggle.user-mode {
|
|
background: rgba(var(--color-accent-rgb), 0.16);
|
|
border-color: rgba(var(--color-accent-rgb), 0.22);
|
|
}
|
|
|
|
.view-mode-toggle.user-mode:hover {
|
|
background: rgba(var(--color-accent-rgb), 0.20);
|
|
border-color: rgba(var(--color-accent-rgb), 0.28);
|
|
}
|
|
|
|
.sidebar.collapsed .view-mode-toggle {
|
|
justify-content: center;
|
|
padding: 0.75rem;
|
|
gap: 0;
|
|
/* Ensure no gap affects centering */
|
|
}
|
|
|
|
.user-info-compact {
|
|
padding: 0.5rem;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid var(--color-sidebar-border);
|
|
border-radius: var(--radius-md);
|
|
margin: 0;
|
|
transition: padding 0.3s ease;
|
|
min-height: 48px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .user-info-compact {
|
|
transition: none;
|
|
/* Prevent padding animation on mode switch */
|
|
}
|
|
|
|
.sidebar.collapsed .user-info-compact {
|
|
padding: 0.65rem 0.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
gap: 0;
|
|
/* Ensure no gap affects centering */
|
|
}
|
|
|
|
.user-name {
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
transition: opacity 0.3s ease;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: var(--color-text-sidebar);
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.user-initial {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
background: rgba(var(--color-accent-rgb), 0.25);
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
color: var(--color-text-sidebar);
|
|
}
|
|
|
|
.sidebar.collapsed .user-initial {
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.badge-compact {
|
|
display: inline-block;
|
|
background: rgba(255, 255, 255, 0.35);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
transition: opacity 0.3s ease, width 0.3s ease;
|
|
color: var(--color-text-sidebar);
|
|
}
|
|
|
|
.sidebar-actions {
|
|
display: flex;
|
|
gap: 0.15rem;
|
|
flex-wrap: nowrap;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-actions {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: auto;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.btn-icon {
|
|
flex: 1;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40px;
|
|
min-width: 40px;
|
|
}
|
|
|
|
.sidebar.collapsed .btn-icon {
|
|
flex: none;
|
|
width: 100%;
|
|
height: 40px;
|
|
}
|
|
|
|
.btn-icon .material-symbols-outlined {
|
|
font-size: var(--icon-sm);
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Mobile sidebar - Reset to full screen */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
transform: translateX(-110%);
|
|
/* Ensure fully hidden */
|
|
width: 280px;
|
|
z-index: 1001;
|
|
height: calc(100dvh - 2rem);
|
|
/* Floating height on mobile too */
|
|
max-height: calc(100dvh - 2rem);
|
|
left: 1rem;
|
|
top: 1rem;
|
|
bottom: 1rem;
|
|
border-radius: var(--radius-lg);
|
|
/* Rounded on mobile */
|
|
margin: 0;
|
|
background: var(--color-bg-sidebar);
|
|
/* Use theme color */
|
|
backdrop-filter: blur(12px);
|
|
/* Blur effect */
|
|
border: 1px solid var(--color-sidebar-border);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.sidebar-nav {
|
|
max-height: calc(100dvh - 180px);
|
|
}
|
|
|
|
.sidebar.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Reset ALL collapsed styles on mobile - sidebar should always be fully expanded when open */
|
|
.sidebar.collapsed {
|
|
width: 280px;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-tagline,
|
|
.sidebar.collapsed .nav-label,
|
|
.sidebar.collapsed .user-name,
|
|
.sidebar.collapsed .badge-compact,
|
|
.sidebar.collapsed .nav-section-title {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-header-content {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sidebar.collapsed .nav-item {
|
|
justify-content: flex-start;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.sidebar.collapsed .view-mode-toggle {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.sidebar.collapsed .user-info-compact {
|
|
justify-content: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.sidebar.collapsed .user-initial {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.sidebar.collapsed .sidebar-actions {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sidebar.collapsed .btn-icon {
|
|
flex: 1;
|
|
width: auto;
|
|
}
|
|
|
|
.sidebar-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--color-overlay);
|
|
backdrop-filter: blur(6px);
|
|
z-index: 1000;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
}
|
|
|
|
.sidebar-overlay.visible {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
.sidebar-nav::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.sidebar-nav::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.sidebar-nav::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sidebar-nav::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* User Menu Styles */
|
|
.user-menu-container {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.user-menu-trigger {
|
|
width: 100%;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
border-radius: 8px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .user-menu-trigger {
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.user-menu-trigger:hover,
|
|
.user-menu-trigger.active {
|
|
background: rgba(var(--color-accent-rgb), 0.10);
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .user-menu-trigger:hover,
|
|
.sidebar.dynamic.collapsed .user-menu-trigger.active {
|
|
background: transparent;
|
|
/* Let the inner user-info-compact handle hover */
|
|
}
|
|
|
|
.user-menu-trigger .user-info-compact {
|
|
background: transparent;
|
|
/* Override default */
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .user-menu-trigger .user-info-compact {
|
|
background: transparent;
|
|
/* Remove background as requested */
|
|
padding: 0.65rem 0.5rem !important;
|
|
/* Keep padding for alignment */
|
|
}
|
|
|
|
.sidebar.dynamic.collapsed .user-menu-trigger .user-info-compact:hover {
|
|
background: rgba(var(--color-accent-rgb), 0.10);
|
|
}
|
|
|
|
.user-menu-trigger .chevron {
|
|
margin-left: auto;
|
|
font-size: 1.2rem;
|
|
color: var(--color-text-sidebar);
|
|
/* Match sidebar icon color */
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.user-menu-trigger.active .chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.user-menu-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 8px);
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
background: var(--color-bg-card);
|
|
border: 1px solid var(--color-card-outline);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xl);
|
|
z-index: 1100;
|
|
overflow: hidden;
|
|
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
width: 244px;
|
|
}
|
|
|
|
@supports (color: color-mix(in srgb, black, transparent)) {
|
|
.user-menu-dropdown {
|
|
background: color-mix(in srgb, var(--color-bg-card) 86%, transparent);
|
|
backdrop-filter: blur(16px) saturate(1.15);
|
|
}
|
|
}
|
|
|
|
.sidebar.collapsed .user-menu-dropdown {
|
|
position: fixed;
|
|
left: calc(80px + 2rem);
|
|
/* Sidebar width (80px) + Sidebar Left (1rem) + Gap (1rem) */
|
|
bottom: 1rem;
|
|
/* Align with bottom of sidebar */
|
|
top: auto;
|
|
transform: none;
|
|
transform-origin: left bottom;
|
|
animation: slideFromLeftFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
width: 244px;
|
|
}
|
|
|
|
/* Reset dropdown to standard position when dynamic sidebar is expanded (hover or forced) */
|
|
.sidebar.dynamic.collapsed.expanded-force .user-menu-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 8px);
|
|
top: auto;
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
@keyframes slideUpFade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(10px) scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideFromLeftFade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-10px) scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Sidebar JS Tooltip */
|
|
.sidebar-tooltip {
|
|
position: fixed;
|
|
transform: translateY(-50%);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text-primary);
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: var(--radius-md);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
box-shadow: var(--shadow-md);
|
|
border: 1px solid var(--color-card-outline);
|
|
z-index: 1100;
|
|
pointer-events: none;
|
|
animation: tooltipFadeIn 0.2s ease forwards;
|
|
}
|
|
|
|
.sidebar-tooltip::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-width: 5px 5px 5px 0;
|
|
border-style: solid;
|
|
border-color: transparent var(--color-card-outline) transparent transparent;
|
|
}
|
|
|
|
.sidebar-tooltip::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: -4px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-width: 5px 5px 5px 0;
|
|
border-style: solid;
|
|
border-color: transparent var(--color-bg-card) transparent transparent;
|
|
}
|
|
|
|
@keyframes tooltipFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-50%) translateX(-5px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(-50%) translateX(0);
|
|
}
|
|
}
|
|
|
|
.user-menu-header {
|
|
padding: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
background: var(--color-bg-elevated);
|
|
}
|
|
|
|
.user-initial-large {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.user-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.user-name-large {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 0.85rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.user-menu-divider {
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.user-menu-nav {
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.user-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--color-text-primary);
|
|
text-decoration: none;
|
|
border-radius: var(--radius-md);
|
|
transition: all 0.2s ease;
|
|
background: transparent;
|
|
border: none;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.user-menu-item .material-symbols-outlined {
|
|
font-size: 1.25rem;
|
|
color: var(--color-text-primary);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.user-menu-item:hover {
|
|
background: rgba(var(--color-accent-rgb), 0.08);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.user-menu-item:hover .material-symbols-outlined {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Danger item (logout) */
|
|
.user-menu-item.danger {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.user-menu-item.danger .material-symbols-outlined {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.user-menu-item.danger:hover {
|
|
background: rgba(220, 38, 38, 0.1);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.user-menu-item.danger:hover .material-symbols-outlined {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.user-menu-actions {
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
/* Mobile menu dropdown adjustments */
|
|
@media (max-width: 768px) {
|
|
.user-menu-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 8px);
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
width: 244px;
|
|
}
|
|
|
|
.sidebar.open .user-menu-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 8px);
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.sidebar.collapsed .user-menu-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 8px);
|
|
transform: translateX(-50%);
|
|
transform-origin: bottom center;
|
|
animation: slideUpFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
/* ========== DARK THEME + AUTO ACCENT OVERRIDES ========== */
|
|
|
|
/* Nav items with auto accent in dark mode: use off-white background with dark text */
|
|
[data-theme='dark'][data-accent='auto'] .nav-item.active {
|
|
background: #e5e7eb;
|
|
color: #111827 !important;
|
|
box-shadow: 0 0 20px 2px rgba(229, 231, 235, 0.4);
|
|
}
|
|
|
|
[data-theme='dark'][data-accent='auto'] .nav-item.active .nav-icon,
|
|
[data-theme='dark'][data-accent='auto'] .nav-item.active .nav-label {
|
|
color: #111827 !important;
|
|
}
|