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