| |
| |
| |
| |
| |
|
|
|
|
| |
| |
|
|
|
|
| .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);
|
| }
|
| }
|
|
|
| |
| |
|
|
|
|
