Spaces:
Sleeping
Sleeping
| @import './fonts.css'; | |
| :root { | |
| /* Colors */ | |
| --color-bg-base: #0e0e10; | |
| --color-bg-card: #18181b; | |
| --color-bg-card-hover: #26262c; | |
| --color-bg-active: #32323c; | |
| --color-border: #2f2f35; | |
| --color-brand: #9146ff; | |
| --color-brand-hover: #772ce8; | |
| --color-brand-active: #5c16c5; | |
| --color-brand-glow: rgba(145, 70, 255, 0.15); | |
| --color-text-main: #efeff1; | |
| --color-text-muted: #adadb8; | |
| --color-text-accent: #00ff7f; /* Neon green */ | |
| --color-text-neon-blue: #00e5ff; | |
| /* Badges */ | |
| --color-badge-streamer: #ff7f50; | |
| --color-badge-mod: #00f5d4; | |
| --color-badge-sub: #e91e63; | |
| --color-badge-vip: #e0b0ff; | |
| /* Fonts */ | |
| --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif; | |
| --font-family-display: 'Outfit', var(--font-family-sans); | |
| /* Shadows & Radius */ | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| --shadow-brand: 0 0 20px 0 rgba(145, 70, 255, 0.25); | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-full: 9999px; | |
| /* Transitions */ | |
| --transition-fast: 0.15s ease; | |
| --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Reset and base styles */ | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: var(--color-bg-base); | |
| color: var(--color-text-main); | |
| font-family: var(--font-family-sans); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--color-bg-base); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--color-border); | |
| border-radius: var(--radius-full); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--color-text-muted); | |
| } | |
| /* Layout */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| width: 100%; | |
| overflow-x: hidden; | |
| } | |
| /* Header */ | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.25rem 2.25rem; | |
| background-color: var(--color-bg-card); | |
| border-bottom: 1px solid var(--color-border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .brand-section { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .brand-logo { | |
| color: var(--color-brand); | |
| animation: logo-glow 3s infinite alternate; | |
| } | |
| .brand-name { | |
| font-family: var(--font-family-display); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.025em; | |
| background: linear-gradient(135deg, #fff 30%, var(--color-brand) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .channel-tag { | |
| background-color: var(--color-brand-glow); | |
| border: 1px solid rgba(145, 70, 255, 0.4); | |
| color: var(--color-text-main); | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: var(--radius-full); | |
| margin-left: 0.5rem; | |
| } | |
| .header-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.25rem; | |
| } | |
| /* Stream selector inside the header brand section */ | |
| .header-stream-selector { | |
| margin-left: 1rem; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .select-input--compact { | |
| appearance: none; /* Hide default native arrow */ | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23adadb8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>"); | |
| background-repeat: no-repeat; | |
| background-position: right 0.75rem center; | |
| background-size: 12px; | |
| padding: 0.4rem 2.2rem 0.4rem 0.75rem; /* Additional padding on right for arrow */ | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| min-width: 160px; | |
| max-width: 320px; | |
| background-color: var(--color-bg-base); | |
| border: 1px solid rgba(145, 70, 255, 0.4); | |
| color: var(--color-text-main); | |
| height: 34px; | |
| border-radius: var(--radius-md); | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| } | |
| .select-input--compact:hover { | |
| background-color: var(--color-bg-card-hover); | |
| border-color: var(--color-brand); | |
| box-shadow: 0 0 10px rgba(145, 70, 255, 0.2); | |
| } | |
| .select-input--compact:focus { | |
| border-color: var(--color-brand); | |
| box-shadow: 0 0 0 2px var(--color-brand-glow); | |
| outline: none; | |
| } | |
| .select-input--compact option { | |
| background-color: var(--color-bg-card); | |
| color: var(--color-text-main); | |
| } | |
| /* Navigation & Tabs */ | |
| .nav-tabs { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .tab-btn { | |
| background: transparent; | |
| border: none; | |
| color: var(--color-text-muted); | |
| font-family: var(--font-family-sans); | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| padding: 0.5rem 0.75rem; | |
| cursor: pointer; | |
| border-radius: var(--radius-md); | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.35rem; | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { | |
| color: var(--color-text-main); | |
| background-color: var(--color-bg-card-hover); | |
| } | |
| .tab-btn.active { | |
| color: var(--color-text-main); | |
| background-color: var(--color-brand-glow); | |
| box-shadow: inset 0 0 0 1px rgba(145, 70, 255, 0.3); | |
| } | |
| /* User Profile & Auth Button */ | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .user-info { | |
| text-align: right; | |
| } | |
| .user-name { | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| } | |
| .user-role { | |
| font-size: 0.75rem; | |
| color: var(--color-brand); | |
| text-transform: capitalize; | |
| } | |
| .btn { | |
| background-color: var(--color-brand); | |
| color: #fff; | |
| border: none; | |
| font-family: var(--font-family-sans); | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| padding: 0.6rem 1.2rem; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| text-decoration: none; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn:hover { | |
| background-color: var(--color-brand-hover); | |
| box-shadow: var(--shadow-brand); | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background-color: transparent; | |
| border: 1px solid var(--color-border); | |
| color: var(--color-text-main); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--color-bg-card-hover); | |
| box-shadow: none; | |
| transform: none; | |
| } | |
| /* Refresh button in header — small, glowing on hover */ | |
| .btn-refresh { | |
| background: rgba(145, 70, 255, 0.08); | |
| border: 1px solid rgba(145, 70, 255, 0.5); | |
| color: var(--color-text-main); | |
| font-weight: 500; | |
| font-size: 0.78rem; | |
| padding: 0.3rem 0.7rem; | |
| gap: 0.4rem; | |
| box-shadow: 0 0 8px rgba(145, 70, 255, 0.1); | |
| } | |
| .btn-refresh:hover { | |
| background: var(--color-brand-glow); | |
| border-color: var(--color-brand); | |
| color: var(--color-text-main); | |
| box-shadow: 0 0 12px var(--color-brand-glow); | |
| transform: none; | |
| } | |
| .btn-refresh:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-danger { | |
| background-color: #eb0400; | |
| } | |
| .btn-danger:hover { | |
| background-color: #c20300; | |
| box-shadow: 0 0 15px rgba(235, 4, 0, 0.3); | |
| } | |
| /* Main Dashboard Layout */ | |
| .dashboard-content { | |
| flex: 1; | |
| padding: 1.5rem 2rem; | |
| max-width: 1400px; | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| /* KPI Grid */ | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .grid-4col { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1.5rem; | |
| } | |
| @media (max-width: 1200px) { | |
| .grid-4col { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .grid-4col { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Stat Cards (Overview KPI) */ | |
| .stat-card { | |
| position: relative; | |
| overflow: hidden; | |
| background-color: var(--color-bg-card); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-lg); | |
| padding: 1.5rem; | |
| transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| .stat-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 3px; | |
| height: 100%; | |
| background: var(--accent-color, var(--color-brand)); | |
| opacity: 0.7; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-3px); | |
| border-color: var(--accent-color, rgba(145, 70, 255, 0.4)); | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .stat-card:hover::before { | |
| opacity: 1; | |
| } | |
| /* Inner layout helper for stat cards */ | |
| .stat-card-inner { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .stat-label { | |
| color: var(--color-text-muted); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 0.25rem; | |
| } | |
| .stat-value { | |
| font-family: var(--font-family-display); | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--color-text-main); | |
| line-height: 1.2; | |
| } | |
| .stat-icon-wrapper { | |
| background-color: var(--color-bg-base); | |
| border: 1px solid var(--color-border); | |
| padding: 0.65rem; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .kpi-card { | |
| background-color: var(--color-bg-card); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-lg); | |
| padding: 1.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| transition: transform var(--transition-fast), border-color var(--transition-fast); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .kpi-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 100%; | |
| background-color: var(--color-brand); | |
| opacity: 0; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .kpi-card:hover { | |
| transform: translateY(-2px); | |
| border-color: rgba(145, 70, 255, 0.4); | |
| } | |
| .kpi-card:hover::before { | |
| opacity: 1; | |
| } | |
| .kpi-card-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.35rem; | |
| } | |
| .kpi-card-title { | |
| color: var(--color-text-muted); | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .kpi-card-value { | |
| font-family: var(--font-family-display); | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--color-text-main); | |
| } | |
| .kpi-card-icon { | |
| background-color: var(--color-bg-base); | |
| border: 1px solid var(--color-border); | |
| color: var(--color-brand); | |
| padding: 0.75rem; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Stream Status Widget */ | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: var(--radius-full); | |
| } | |
| .status-dot.live { | |
| background-color: #ff0000; | |
| box-shadow: 0 0 10px #ff0000; | |
| animation: pulse-dot 1.5s infinite; | |
| } | |
| .status-dot.offline { | |
| background-color: var(--color-text-muted); | |
| } | |
| /* Grid Layouts for Sections */ | |
| .grid-2col { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .grid-equal-2col { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| @media (max-width: 992px) { | |
| .grid-2col, | |
| .grid-4col, | |
| .grid-equal-2col, | |
| [style*="grid-template-columns"] { | |
| grid-template-columns: 1fr ; | |
| } | |
| } | |
| @media (max-width: 1100px) { | |
| .tab-btn svg { | |
| display: none; | |
| } | |
| } | |
| .panel { | |
| background-color: var(--color-bg-card); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-lg); | |
| padding: 1.5rem; | |
| min-width: 0; | |
| } | |
| .panel-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| border-bottom: 1px solid var(--color-border); | |
| padding-bottom: 0.75rem; | |
| } | |
| .panel-title { | |
| font-family: var(--font-family-display); | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .panel-controls { | |
| display: flex; | |
| gap: 0.75rem; | |
| align-items: center; | |
| } | |
| /* Dropdown styling */ | |
| .select-input { | |
| background-color: var(--color-bg-base); | |
| border: 1px solid var(--color-border); | |
| color: var(--color-text-main); | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius-md); | |
| font-family: var(--font-family-sans); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| outline: none; | |
| transition: border-color var(--transition-fast); | |
| } | |
| .select-input:focus { | |
| border-color: var(--color-brand); | |
| } | |
| /* Dark-themed inputs for admin panel */ | |
| .dark-input { | |
| width: 100%; | |
| background-color: var(--color-bg-base); | |
| border: 1px solid var(--color-border); | |
| color: var(--color-text-main); | |
| padding: 0.6rem 0.75rem; | |
| border-radius: var(--radius-md); | |
| font-family: var(--font-family-sans); | |
| font-size: 0.875rem; | |
| outline: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .dark-input:focus { | |
| border-color: var(--color-brand); | |
| box-shadow: 0 0 0 2px var(--color-brand-glow); | |
| } | |
| .dark-input::placeholder { | |
| color: var(--color-text-muted); | |
| opacity: 0.6; | |
| } | |
| /* Charts Wrapper */ | |
| .chart-container { | |
| position: relative; | |
| height: 320px; | |
| width: 100%; | |
| } | |
| /* Tables */ | |
| .table-wrapper { | |
| overflow-x: auto; | |
| } | |
| .data-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| text-align: left; | |
| font-size: 0.9rem; | |
| } | |
| .data-table th { | |
| color: var(--color-text-muted); | |
| font-weight: 600; | |
| padding: 0.75rem 1rem; | |
| border-bottom: 1px solid var(--color-border); | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .data-table td { | |
| padding: 1rem; | |
| border-bottom: 1px solid var(--color-border); | |
| color: var(--color-text-main); | |
| transition: background-color var(--transition-fast); | |
| } | |
| .data-table tr:hover td { | |
| background-color: var(--color-bg-card-hover); | |
| } | |
| .data-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* Search input */ | |
| .search-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 300px; | |
| margin-bottom: 1rem; | |
| } | |
| .search-input { | |
| width: 100%; | |
| background-color: var(--color-bg-base); | |
| border: 1px solid var(--color-border); | |
| color: var(--color-text-main); | |
| padding: 0.6rem 1rem 0.6rem 2.5rem; | |
| border-radius: var(--radius-md); | |
| font-family: var(--font-family-sans); | |
| font-size: 0.875rem; | |
| outline: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .search-input:focus { | |
| border-color: var(--color-brand); | |
| box-shadow: 0 0 0 2px var(--color-brand-glow); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: 0.75rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--color-text-muted); | |
| pointer-events: none; | |
| } | |
| /* Badges */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| padding: 0.15rem 0.45rem; | |
| border-radius: 4px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.025em; | |
| } | |
| .badge-streamer { | |
| background-color: rgba(255, 127, 80, 0.12); | |
| border: 1px solid rgba(255, 127, 80, 0.4); | |
| color: var(--color-badge-streamer); | |
| } | |
| .badge-mod { | |
| background-color: rgba(0, 245, 212, 0.12); | |
| border: 1px solid rgba(0, 245, 212, 0.4); | |
| color: var(--color-badge-mod); | |
| } | |
| .badge-sub { | |
| background-color: rgba(233, 30, 99, 0.12); | |
| border: 1px solid rgba(233, 30, 99, 0.4); | |
| color: var(--color-badge-sub); | |
| } | |
| .badge-vip { | |
| background-color: rgba(224, 176, 255, 0.12); | |
| border: 1px solid rgba(224, 176, 255, 0.4); | |
| color: var(--color-badge-vip); | |
| } | |
| /* Mod Action Styles */ | |
| .action-card { | |
| display: flex; | |
| gap: 1rem; | |
| padding: 1rem; | |
| border-bottom: 1px solid var(--color-border); | |
| transition: background-color var(--transition-fast); | |
| align-items: flex-start; | |
| } | |
| .action-card:hover { | |
| background-color: var(--color-bg-card-hover); | |
| } | |
| .action-card:last-child { | |
| border-bottom: none; | |
| } | |
| .action-icon { | |
| padding: 0.5rem; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .action-icon.ban { | |
| background-color: rgba(235, 4, 0, 0.12); | |
| border: 1px solid rgba(235, 4, 0, 0.3); | |
| color: #eb0400; | |
| } | |
| .action-icon.timeout { | |
| background-color: rgba(255, 165, 0, 0.12); | |
| border: 1px solid rgba(255, 165, 0, 0.3); | |
| color: orange; | |
| } | |
| .action-icon.delete { | |
| background-color: rgba(0, 229, 255, 0.12); | |
| border: 1px solid rgba(0, 229, 255, 0.3); | |
| color: var(--color-text-neon-blue); | |
| } | |
| .action-icon.unban { | |
| background-color: rgba(0, 255, 127, 0.12); | |
| border: 1px solid rgba(0, 255, 127, 0.3); | |
| color: var(--color-text-accent); | |
| } | |
| .action-details { | |
| flex: 1; | |
| } | |
| .action-header-info { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| align-items: center; | |
| margin-bottom: 0.25rem; | |
| } | |
| .action-time { | |
| font-size: 0.75rem; | |
| color: var(--color-text-muted); | |
| margin-left: auto; | |
| } | |
| .action-target { | |
| font-weight: 700; | |
| color: var(--color-text-main); | |
| } | |
| .action-by { | |
| font-size: 0.85rem; | |
| color: var(--color-text-muted); | |
| } | |
| .action-by strong { | |
| color: var(--color-text-main); | |
| } | |
| .action-reason { | |
| font-size: 0.85rem; | |
| background-color: var(--color-bg-base); | |
| border: 1px solid var(--color-border); | |
| padding: 0.5rem 0.75rem; | |
| border-radius: var(--radius-sm); | |
| margin-top: 0.5rem; | |
| font-style: italic; | |
| color: var(--color-text-muted); | |
| } | |
| .action-quote { | |
| font-size: 0.85rem; | |
| border-left: 3px solid var(--color-text-neon-blue); | |
| padding-left: 0.75rem; | |
| color: var(--color-text-muted); | |
| margin-top: 0.5rem; | |
| } | |
| /* Word Cloud / Grid list */ | |
| .word-cloud-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| } | |
| .word-tag { | |
| background-color: var(--color-bg-base); | |
| border: 1px solid var(--color-border); | |
| padding: 0.5rem 0.85rem; | |
| border-radius: var(--radius-md); | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: all var(--transition-fast); | |
| } | |
| .word-tag:hover { | |
| border-color: var(--color-brand); | |
| transform: scale(1.03); | |
| } | |
| .word-tag-text { | |
| font-weight: 600; | |
| } | |
| .word-tag-count { | |
| background-color: var(--color-brand-glow); | |
| color: var(--color-brand); | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| padding: 0.1rem 0.4rem; | |
| border-radius: 4px; | |
| } | |
| /* Centered status message for loading or empty states */ | |
| .status-msg { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| color: var(--color-text-muted); | |
| gap: 1rem; | |
| } | |
| .status-msg-icon { | |
| color: var(--color-brand); | |
| opacity: 0.5; | |
| } | |
| /* Tab content fade animation */ | |
| .tab-content { | |
| animation: fadeSlideIn 0.25s ease-out; | |
| } | |
| @keyframes fadeSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Login Page Overlay */ | |
| .login-overlay { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 70vh; | |
| gap: 1.5rem; | |
| } | |
| .login-card { | |
| background-color: var(--color-bg-card); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-lg); | |
| padding: 3rem; | |
| max-width: 480px; | |
| width: 100%; | |
| text-align: center; | |
| box-shadow: var(--shadow-lg); | |
| border-top: 4px solid var(--color-brand); | |
| } | |
| .login-title { | |
| font-family: var(--font-family-display); | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: 0.75rem; | |
| } | |
| .login-description { | |
| color: var(--color-text-muted); | |
| font-size: 0.9rem; | |
| margin-bottom: 2rem; | |
| line-height: 1.5; | |
| } | |
| /* Animations */ | |
| @keyframes logo-glow { | |
| 0% { | |
| filter: drop-shadow(0 0 2px rgba(145, 70, 255, 0.2)); | |
| } | |
| 100% { | |
| filter: drop-shadow(0 0 10px rgba(145, 70, 255, 0.7)); | |
| } | |
| } | |
| @keyframes pulse-dot { | |
| 0% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); | |
| } | |
| 70% { | |
| transform: scale(1); | |
| box-shadow: 0 0 0 6px rgba(255, 0, 0, 0); | |
| } | |
| 100% { | |
| transform: scale(0.95); | |
| box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); | |
| } | |
| } | |
| /* Planetary Word Galaxy */ | |
| .word-galaxy-container { | |
| position: relative; | |
| width: 100%; | |
| height: min(70vh, 700px); | |
| background-color: #060608; | |
| background-image: | |
| linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| background-position: center center; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--color-border); | |
| overflow: hidden; | |
| box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| user-select: none; | |
| } | |
| .word-galaxy-tag { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| user-select: none; | |
| font-family: var(--font-family-display), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| animation: word-float var(--float-duration, 5s) ease-in-out infinite; | |
| animation-delay: var(--float-delay, 0s); | |
| transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease, opacity 0.2s ease; | |
| transform-origin: center center; | |
| } | |
| @keyframes word-float { | |
| 0%, 100% { | |
| transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) translateY(0); | |
| } | |
| 50% { | |
| transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) translateY(var(--float-amount, -5px)); | |
| } | |
| } | |
| .word-galaxy-tag:hover { | |
| transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.1) translateY(var(--float-amount, -5px)) ; | |
| filter: brightness(1.3) drop-shadow(0 0 10px currentColor); | |
| z-index: 50; | |
| } | |
| /* Custom Tooltip */ | |
| .word-tooltip { | |
| position: absolute; | |
| bottom: -22px; | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.85); | |
| background: #09090b; | |
| border: 1px solid rgba(138, 92, 245, 0.85); | |
| color: #efeff1; | |
| padding: 3px 7px; | |
| border-radius: 4px; | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65), 0 0 8px rgba(138, 92, 245, 0.35); | |
| z-index: 60; | |
| font-family: var(--font-family-sans); | |
| } | |
| .word-galaxy-tag:hover .word-tooltip { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* Responsive adjustments for header controls and stream selector */ | |
| @media (max-width: 1450px) { | |
| .app-header { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 1.25rem; | |
| padding: 1.25rem 1.5rem; | |
| } | |
| .brand-section { | |
| justify-content: space-between; | |
| width: 100%; | |
| } | |
| .header-controls { | |
| justify-content: space-between; | |
| width: 100%; | |
| gap: 1.5rem; | |
| } | |
| } | |
| @media (max-width: 950px) { | |
| .header-controls { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 1rem; | |
| } | |
| .nav-tabs { | |
| justify-content: flex-start; | |
| overflow-x: auto; | |
| padding-bottom: 0.5rem; | |
| gap: 0.5rem; | |
| /* Custom scrollbar for tabs on mobile if needed */ | |
| scrollbar-width: thin; | |
| } | |
| .user-profile { | |
| justify-content: space-between; | |
| width: 100%; | |
| } | |
| } | |
| /* Connection Status Animations */ | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| /* ========================================================================== | |
| Mobile Responsiveness | |
| ========================================================================== */ | |
| @media (max-width: 768px) { | |
| /* Header */ | |
| .app-header { | |
| flex-direction: column; | |
| align-items: stretch; | |
| padding: 1rem; | |
| gap: 1rem; | |
| } | |
| .brand-section { | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| } | |
| .header-stream-selector { | |
| margin-left: 0; | |
| margin-top: 0.75rem; | |
| width: 100%; | |
| } | |
| .select-input--compact { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| /* Controls and Navigation */ | |
| .header-controls { | |
| flex-direction: column-reverse; | |
| align-items: stretch; | |
| gap: 1rem; | |
| } | |
| .user-profile { | |
| justify-content: space-between; | |
| } | |
| /* Swipe-navigation (tabs) */ | |
| .nav-tabs { | |
| overflow-x: auto; | |
| padding-bottom: 0.5rem; | |
| justify-content: flex-start; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; /* Firefox */ | |
| flex-wrap: nowrap; | |
| } | |
| .nav-tabs > * { | |
| flex-shrink: 0; | |
| } | |
| .tab-content p { | |
| padding: 0 0.5rem; | |
| } | |
| .nav-tabs::-webkit-scrollbar { | |
| display: none; /* Chrome/Safari */ | |
| } | |
| /* Dashboard Content Padding */ | |
| .dashboard-content { | |
| padding: 1rem 0.5rem; | |
| } | |
| .panel { | |
| padding: 1rem; | |
| } | |
| .panel-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1rem; | |
| } | |
| .panel-controls, .search-container { | |
| width: 100%; | |
| max-width: 100%; | |
| } | |
| } | |