| |
| |
| |
| |
| |
| |
|
|
| |
| |
| |
|
|
| .desktop-nav { |
| position: fixed; |
| top: calc(var(--header-height) + var(--status-bar-height)); |
| left: 0; |
| right: 0; |
| background: var(--surface-glass); |
| border-bottom: 1px solid var(--border-light); |
| backdrop-filter: var(--blur-lg); |
| z-index: var(--z-sticky); |
| padding: 0 var(--space-6); |
| overflow-x: auto; |
| } |
|
|
| .nav-tabs { |
| display: flex; |
| align-items: center; |
| gap: var(--space-2); |
| min-height: 56px; |
| } |
|
|
| .nav-tab { |
| list-style: none; |
| } |
|
|
| .nav-tab-btn { |
| display: flex; |
| align-items: center; |
| gap: var(--space-2); |
| padding: var(--space-3) var(--space-5); |
| font-size: var(--fs-sm); |
| font-weight: var(--fw-semibold); |
| color: var(--text-soft); |
| background: transparent; |
| border: none; |
| border-bottom: 3px solid transparent; |
| cursor: pointer; |
| transition: all var(--transition-fast); |
| position: relative; |
| white-space: nowrap; |
| } |
|
|
| .nav-tab-btn:hover { |
| color: var(--text-normal); |
| background: var(--surface-glass); |
| border-radius: var(--radius-sm) var(--radius-sm) 0 0; |
| } |
|
|
| .nav-tab-btn.active { |
| color: var(--brand-cyan); |
| border-bottom-color: var(--brand-cyan); |
| box-shadow: 0 -2px 12px rgba(6, 182, 212, 0.30); |
| } |
|
|
| .nav-tab-icon { |
| font-size: 18px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .nav-tab-label { |
| font-weight: var(--fw-semibold); |
| } |
|
|
| |
| |
| |
|
|
| .mobile-nav { |
| display: none; |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: var(--mobile-nav-height); |
| background: var(--surface-glass-stronger); |
| border-top: 1px solid var(--border-medium); |
| backdrop-filter: var(--blur-xl); |
| z-index: var(--z-fixed); |
| padding: 0 var(--space-2); |
| box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.40); |
| } |
|
|
| .mobile-nav-tabs { |
| display: grid; |
| grid-template-columns: repeat(5, 1fr); |
| height: 100%; |
| gap: var(--space-1); |
| } |
|
|
| .mobile-nav-tab { |
| list-style: none; |
| } |
|
|
| .mobile-nav-tab-btn { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: var(--space-1); |
| padding: var(--space-2); |
| font-size: var(--fs-xs); |
| font-weight: var(--fw-semibold); |
| color: var(--text-muted); |
| background: transparent; |
| border: none; |
| border-radius: var(--radius-sm); |
| cursor: pointer; |
| transition: all var(--transition-fast); |
| height: 100%; |
| width: 100%; |
| position: relative; |
| } |
|
|
| .mobile-nav-tab-btn:hover { |
| color: var(--text-normal); |
| background: var(--surface-glass); |
| } |
|
|
| .mobile-nav-tab-btn.active { |
| color: var(--brand-cyan); |
| background: rgba(6, 182, 212, 0.15); |
| box-shadow: inset 0 0 0 2px var(--brand-cyan), var(--glow-cyan); |
| } |
|
|
| .mobile-nav-tab-icon { |
| font-size: 22px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .mobile-nav-tab-label { |
| font-size: var(--fs-xs); |
| font-weight: var(--fw-semibold); |
| letter-spacing: var(--tracking-wide); |
| } |
|
|
| |
| |
| |
|
|
| @media (max-width: 768px) { |
| .desktop-nav { |
| display: none; |
| } |
|
|
| .mobile-nav { |
| display: block; |
| } |
|
|
| .dashboard-main { |
| margin-top: calc(var(--header-height) + var(--status-bar-height)); |
| margin-bottom: var(--mobile-nav-height); |
| } |
| } |
|
|
| |
| |
| |
|
|
