|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar-modern { |
|
|
position: fixed; |
|
|
left: 0; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
width: var(--sidebar-width); |
|
|
background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); |
|
|
border-right: 1px solid var(--border-primary); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
z-index: var(--z-sidebar); |
|
|
transition: width var(--transition-base), transform var(--transition-base); |
|
|
box-shadow: var(--shadow-lg); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed { |
|
|
width: var(--sidebar-collapsed-width); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar-toggle-btn { |
|
|
position: absolute; |
|
|
right: -12px; |
|
|
top: 20px; |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: var(--radius-full); |
|
|
background: var(--surface-primary); |
|
|
border: 1px solid var(--border-primary); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
z-index: 10; |
|
|
transition: all var(--transition-fast); |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.sidebar-toggle-btn:hover { |
|
|
background: var(--accent-primary); |
|
|
border-color: var(--accent-primary); |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.sidebar-toggle-btn:hover .icon-chevron { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.sidebar-toggle-btn .icon-chevron { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
color: var(--text-tertiary); |
|
|
transition: transform var(--transition-base), color var(--transition-fast); |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .sidebar-toggle-btn .icon-chevron { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar-brand-modern { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-3); |
|
|
padding: var(--space-5) var(--space-4); |
|
|
border-bottom: 1px solid var(--border-primary); |
|
|
background: linear-gradient(135deg, rgba(34, 211, 238, 0.05), rgba(99, 102, 241, 0.05)); |
|
|
min-height: 72px; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.brand-logo-container { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
flex-shrink: 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: var(--accent-gradient); |
|
|
border-radius: var(--radius-lg); |
|
|
box-shadow: 0 4px 14px rgba(34, 211, 238, 0.3); |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.sidebar-modern:hover .brand-logo-container { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4); |
|
|
} |
|
|
|
|
|
.brand-logo-svg { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.brand-text-modern { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 2px; |
|
|
opacity: 1; |
|
|
transition: opacity var(--transition-fast); |
|
|
min-width: 0; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .brand-text-modern { |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.brand-name-modern { |
|
|
font-size: var(--text-lg); |
|
|
font-weight: var(--font-bold); |
|
|
background: var(--accent-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
letter-spacing: -0.02em; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.brand-tagline-modern { |
|
|
font-size: var(--text-xs); |
|
|
font-weight: var(--font-semibold); |
|
|
color: var(--text-tertiary); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.08em; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-menu-modern { |
|
|
flex: 1; |
|
|
padding: var(--space-4) var(--space-3); |
|
|
overflow-y: auto; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.nav-menu-modern::-webkit-scrollbar { |
|
|
width: 4px; |
|
|
} |
|
|
|
|
|
.nav-menu-modern::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.nav-menu-modern::-webkit-scrollbar-thumb { |
|
|
background: var(--border-secondary); |
|
|
border-radius: var(--radius-full); |
|
|
} |
|
|
|
|
|
.nav-menu-modern::-webkit-scrollbar-thumb:hover { |
|
|
background: var(--text-tertiary); |
|
|
} |
|
|
|
|
|
.nav-list-modern { |
|
|
list-style: none; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--space-2); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-item-modern { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link-modern { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-3); |
|
|
padding: var(--space-3); |
|
|
color: var(--text-secondary); |
|
|
font-size: var(--text-sm); |
|
|
font-weight: var(--font-medium); |
|
|
border-radius: var(--radius-lg); |
|
|
text-decoration: none; |
|
|
transition: all var(--transition-base); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
|
|
|
.nav-link-modern::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
width: 3px; |
|
|
height: 0; |
|
|
background: var(--accent-gradient); |
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0; |
|
|
transition: height var(--transition-base); |
|
|
} |
|
|
|
|
|
.nav-link-modern:hover { |
|
|
background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(99, 102, 241, 0.04)); |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.nav-link-modern:hover::before { |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
|
|
|
.nav-link-modern.active { |
|
|
background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(99, 102, 241, 0.08)); |
|
|
color: var(--accent-primary); |
|
|
font-weight: var(--font-semibold); |
|
|
box-shadow: var(--shadow-sm); |
|
|
} |
|
|
|
|
|
.nav-link-modern.active::before { |
|
|
height: 32px; |
|
|
} |
|
|
|
|
|
|
|
|
.nav-icon-modern { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
flex-shrink: 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(99, 102, 241, 0.05)); |
|
|
border-radius: var(--radius-md); |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.nav-link-modern:hover .nav-icon-modern, |
|
|
.nav-link-modern.active .nav-icon-modern { |
|
|
background: var(--accent-gradient); |
|
|
box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3); |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.nav-icon-modern svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
color: var(--accent-primary); |
|
|
transition: color var(--transition-fast); |
|
|
} |
|
|
|
|
|
.nav-link-modern:hover .nav-icon-modern svg, |
|
|
.nav-link-modern.active .nav-icon-modern svg { |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.nav-label-modern { |
|
|
flex: 1; |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
text-overflow: ellipsis; |
|
|
opacity: 1; |
|
|
transition: opacity var(--transition-fast); |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .nav-label-modern { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.nav-badge-modern { |
|
|
min-width: 20px; |
|
|
height: 20px; |
|
|
padding: 0 var(--space-2); |
|
|
background: var(--color-danger); |
|
|
color: white; |
|
|
font-size: var(--text-xs); |
|
|
font-weight: var(--font-bold); |
|
|
border-radius: var(--radius-full); |
|
|
display: none; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
opacity: 1; |
|
|
transition: opacity var(--transition-fast); |
|
|
} |
|
|
|
|
|
.nav-badge-modern:not(:empty) { |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .nav-badge-modern { |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-divider-modern { |
|
|
margin: var(--space-4) 0; |
|
|
} |
|
|
|
|
|
.nav-divider-modern hr { |
|
|
border: none; |
|
|
height: 1px; |
|
|
background: linear-gradient(90deg, transparent, var(--border-primary), transparent); |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar-footer-modern { |
|
|
padding: var(--space-4); |
|
|
border-top: 1px solid var(--border-primary); |
|
|
background: linear-gradient(180deg, transparent, rgba(34, 211, 238, 0.03)); |
|
|
} |
|
|
|
|
|
.system-status-modern { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: var(--space-2); |
|
|
} |
|
|
|
|
|
.status-indicator-modern { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: var(--space-3); |
|
|
padding: var(--space-3); |
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(34, 211, 238, 0.05)); |
|
|
border-radius: var(--radius-md); |
|
|
font-size: var(--text-sm); |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.status-dot-modern { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: var(--radius-full); |
|
|
background: var(--text-disabled); |
|
|
flex-shrink: 0; |
|
|
transition: all var(--transition-base); |
|
|
} |
|
|
|
|
|
.status-dot-modern.online { |
|
|
background: var(--color-success); |
|
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 8px rgba(16, 185, 129, 0.4); |
|
|
animation: pulse-status 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse-status { |
|
|
0%, 100% { |
|
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 8px rgba(16, 185, 129, 0.4); |
|
|
} |
|
|
50% { |
|
|
box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.15), 0 0 12px rgba(16, 185, 129, 0.3); |
|
|
} |
|
|
} |
|
|
|
|
|
.status-text-modern { |
|
|
color: var(--text-secondary); |
|
|
font-weight: var(--font-medium); |
|
|
opacity: 1; |
|
|
transition: opacity var(--transition-fast); |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .status-text-modern { |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.status-details-modern { |
|
|
padding-left: var(--space-3); |
|
|
font-size: var(--text-xs); |
|
|
color: var(--text-tertiary); |
|
|
opacity: 1; |
|
|
transition: opacity var(--transition-fast); |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .status-details-modern { |
|
|
opacity: 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar-overlay-modern { |
|
|
position: fixed; |
|
|
inset: 0; |
|
|
background: var(--bg-overlay); |
|
|
z-index: calc(var(--z-sidebar) - 1); |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity var(--transition-base); |
|
|
} |
|
|
|
|
|
.sidebar-overlay-modern.active { |
|
|
opacity: 1; |
|
|
pointer-events: auto; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.sidebar-modern.collapsed .nav-link-modern { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .nav-link-modern::after { |
|
|
content: attr(title); |
|
|
position: absolute; |
|
|
left: calc(100% + 12px); |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
padding: var(--space-2) var(--space-3); |
|
|
background: var(--surface-primary); |
|
|
color: var(--text-primary); |
|
|
font-size: var(--text-sm); |
|
|
font-weight: var(--font-medium); |
|
|
border-radius: var(--radius-md); |
|
|
box-shadow: var(--shadow-lg); |
|
|
white-space: nowrap; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity var(--transition-fast); |
|
|
z-index: 1000; |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed .nav-link-modern:hover::after { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.sidebar-modern { |
|
|
transform: translateX(-100%); |
|
|
} |
|
|
|
|
|
.sidebar-modern.open { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.sidebar-toggle-btn { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.sidebar-modern { |
|
|
width: 280px; |
|
|
box-shadow: var(--shadow-2xl); |
|
|
} |
|
|
|
|
|
.sidebar-modern.collapsed { |
|
|
width: 280px; |
|
|
} |
|
|
|
|
|
.nav-icon-modern { |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
} |
|
|
|
|
|
.nav-icon-modern svg { |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
} |
|
|
|
|
|
.brand-logo-container { |
|
|
width: 36px; |
|
|
height: 36px; |
|
|
} |
|
|
|
|
|
.brand-logo-svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-link-modern:focus-visible { |
|
|
outline: 2px solid var(--border-focus); |
|
|
outline-offset: 2px; |
|
|
} |
|
|
|
|
|
.sidebar-toggle-btn:focus-visible { |
|
|
outline: 2px solid var(--border-focus); |
|
|
outline-offset: 2px; |
|
|
} |
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) { |
|
|
.sidebar-modern, |
|
|
.sidebar-toggle-btn, |
|
|
.nav-link-modern, |
|
|
.nav-icon-modern, |
|
|
.brand-logo-container, |
|
|
.status-dot-modern { |
|
|
transition: none; |
|
|
animation: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
[data-theme="dark"] .sidebar-modern { |
|
|
background: linear-gradient(180deg, #0f1419 0%, #1a1f2e 100%); |
|
|
box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .sidebar-toggle-btn { |
|
|
background: var(--surface-secondary); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .nav-link-modern:hover { |
|
|
background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(99, 102, 241, 0.08)); |
|
|
} |
|
|
|
|
|
[data-theme="dark"] .nav-link-modern.active { |
|
|
background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(99, 102, 241, 0.12)); |
|
|
} |
|
|
|
|
|
|
