| |
| |
| |
| |
| |
|
|
|
|
| |
| |
|
|
|
|
| .dashboard-layout {
|
| display: flex;
|
| flex-direction: column;
|
| min-height: 100vh;
|
| }
|
|
|
| |
| |
|
|
|
|
| .dashboard-header {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| height: var(--header-height);
|
| background: var(--surface-glass-strong);
|
| border-bottom: 1px solid var(--border-light);
|
| backdrop-filter: var(--blur-lg);
|
| box-shadow: var(--shadow-md);
|
| z-index: var(--z-fixed);
|
| display: flex;
|
| align-items: center;
|
| padding: 0 var(--space-6);
|
| gap: var(--space-6);
|
| }
|
|
|
| .header-left {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-4);
|
| flex: 1;
|
| }
|
|
|
| .header-logo {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-3);
|
| font-size: var(--fs-xl);
|
| font-weight: var(--fw-extrabold);
|
| color: var(--text-strong);
|
| text-decoration: none;
|
| }
|
|
|
| .header-logo-icon {
|
| font-size: 28px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .header-center {
|
| flex: 2;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .header-right {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-3);
|
| flex: 1;
|
| justify-content: flex-end;
|
| }
|
|
|
| .header-search {
|
| position: relative;
|
| max-width: 420px;
|
| width: 100%;
|
| }
|
|
|
| .header-search input {
|
| width: 100%;
|
| padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
|
| border: 1px solid var(--border-light);
|
| border-radius: var(--radius-full);
|
| background: var(--input-bg);
|
| backdrop-filter: var(--blur-md);
|
| font-size: var(--fs-sm);
|
| color: var(--text-normal);
|
| transition: all var(--transition-fast);
|
| }
|
|
|
| .header-search input:focus {
|
| border-color: var(--brand-cyan);
|
| box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25), var(--glow-cyan);
|
| background: rgba(15, 23, 42, 0.80);
|
| }
|
|
|
| .header-search-icon {
|
| position: absolute;
|
| left: var(--space-4);
|
| top: 50%;
|
| transform: translateY(-50%);
|
| color: var(--text-muted);
|
| pointer-events: none;
|
| }
|
|
|
| .theme-toggle {
|
| width: 44px;
|
| height: 44px;
|
| border-radius: var(--radius-md);
|
| background: var(--surface-glass);
|
| border: 1px solid var(--border-light);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| color: var(--text-normal);
|
| transition: all var(--transition-fast);
|
| }
|
|
|
| .theme-toggle:hover {
|
| background: var(--surface-glass-strong);
|
| color: var(--text-strong);
|
| transform: translateY(-1px);
|
| }
|
|
|
| .theme-toggle-icon {
|
| font-size: 20px;
|
| }
|
|
|
| |
| |
|
|
|
|
| .connection-status-bar {
|
| position: fixed;
|
| top: var(--header-height);
|
| left: 0;
|
| right: 0;
|
| height: var(--status-bar-height);
|
| background: var(--surface-glass);
|
| border-bottom: 1px solid var(--border-subtle);
|
| backdrop-filter: var(--blur-md);
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| padding: 0 var(--space-6);
|
| font-size: var(--fs-xs);
|
| z-index: var(--z-sticky);
|
| }
|
|
|
| .connection-info {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-2);
|
| color: var(--text-normal);
|
| font-weight: var(--fw-medium);
|
| }
|
|
|
| .online-users {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-2);
|
| color: var(--text-soft);
|
| }
|
|
|
| |
| |
|
|
|
|
| .dashboard-main {
|
| flex: 1;
|
| margin-top: calc(var(--header-height) + var(--status-bar-height));
|
| padding: var(--space-6);
|
| max-width: var(--max-content-width);
|
| width: 100%;
|
| margin-left: auto;
|
| margin-right: auto;
|
| }
|
|
|
| |
| |
|
|
|
|
| .tab-content {
|
| display: none;
|
| }
|
|
|
| .tab-content.active {
|
| display: block;
|
| animation: tab-fade-in 0.25s var(--ease-out);
|
| }
|
|
|
| @keyframes tab-fade-in {
|
| from {
|
| opacity: 0;
|
| transform: translateY(8px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
|
|
| .tab-header {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| margin-bottom: var(--space-6);
|
| padding-bottom: var(--space-4);
|
| border-bottom: 2px solid var(--border-subtle);
|
| }
|
|
|
| .tab-title {
|
| font-size: var(--fs-3xl);
|
| font-weight: var(--fw-extrabold);
|
| color: var(--text-strong);
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-3);
|
| margin: 0;
|
| }
|
|
|
| .tab-actions {
|
| display: flex;
|
| align-items: center;
|
| gap: var(--space-3);
|
| }
|
|
|
| .tab-body {
|
|
|
| }
|
|
|
| |
| |
|
|
|
|
| @media (max-width: 768px) {
|
| .dashboard-header {
|
| padding: 0 var(--space-4);
|
| gap: var(--space-3);
|
| }
|
|
|
| .header-center {
|
| display: none;
|
| }
|
|
|
| .dashboard-main {
|
| padding: var(--space-4);
|
| margin-bottom: var(--mobile-nav-height);
|
| }
|
|
|
| .tab-title {
|
| font-size: var(--fs-2xl);
|
| }
|
| }
|
|
|
| @media (max-width: 480px) {
|
| .dashboard-header {
|
| padding: 0 var(--space-3);
|
| }
|
|
|
| .dashboard-main {
|
| padding: var(--space-3);
|
| }
|
|
|
| .header-logo-text {
|
| display: none;
|
| }
|
| }
|
|
|
| |
| |
|
|
|
|
