@import './styles/utilities.css';
/* Optionally import all component styles for CSS overview */
/* @import './styles/components.css'; */
/* ===== CSS CUSTOM PROPERTIES (Design System) ===== */
:root {
/* Color Palette - Dark Theme */
--color-dark-bg: #12121e;
--color-panel-bg: #1c1c2a;
--color-header-bg: #171725;
--color-border: #2c2c40;
--color-text-primary: #e0e0f0;
--color-text-secondary: #a0a0c0;
--color-primary-blue: #007acc;
--color-success: #2ecc71;
--color-warning: #f1c40f;
--color-error: #e74c3c;
/* Spacing Scale */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 0.75rem; /* 12px */
--spacing-lg: 1rem; /* 16px */
--spacing-xl: 1.5rem; /* 24px */
--spacing-2xl: 2rem; /* 32px */
--spacing-3xl: 3rem; /* 48px */
/* Typography Scale */
--font-xs: 0.75rem; /* 12px */
--font-sm: 0.85rem; /* 14px */
--font-base: 1rem; /* 16px */
--font-lg: 1.1rem; /* 18px */
--font-xl: 1.25rem; /* 20px */
--font-2xl: 1.5rem; /* 24px */
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 18px;
--radius-2xl: 20px;
--radius-full: 50%;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 4px 30px rgba(0, 0, 0, 0.6);
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;
/* Z-Index Scale */
--z-base: 1;
--z-overlay: 10;
--z-modal: 20;
--z-tooltip: 30;
}
/* ===== GLOBAL RESET & BASE STYLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
background: var(--color-dark-bg);
color: var(--color-text-primary);
height: 100vh;
overflow: hidden;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#root {
height: 100%;
width: 100%;
}
/* ===== UTILITY CLASSES ===== */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-1 {
flex: 1;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-sm {
gap: var(--spacing-sm);
}
.gap-md {
gap: var(--spacing-md);
}
.gap-lg {
gap: var(--spacing-lg);
}
.text-center {
text-align: center;
}
.text-secondary {
color: var(--color-text-secondary);
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-600 {
font-weight: 600;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
/* ===== SHARED ANIMATIONS ===== */
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
@keyframes statusPulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.02);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== BUTTON SYSTEM ===== */
.btn {
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-weight: 500;
transition: all var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
outline: none;
font-family: inherit;
line-height: 1;
position: relative;
overflow: hidden;
}
.btn:focus-visible {
outline: 2px solid var(--color-primary-blue);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 122, 204, 0.2);
}
.btn:disabled {
cursor: not-allowed;
opacity: 0.6;
}
/* Button Variants */
.btn-primary {
background: var(--color-primary-blue);
color: white;
box-shadow: var(--shadow-sm);
}
.btn-empty {
background: transparent !important;
color: var(--color-text-primary) !important;
box-shadow: none !important;
padding: var(--spacing-sm) !important;
border-radius: var(--radius-full) !important;
width: auto !important;
aspect-ratio: 1 !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: auto !important;
min-height: auto !important;
padding: 0 0 0 0 !important;
border: none !important;
font-size: var(--font-lg) !important;
}
.btn-primary:hover:not(:disabled) {
background: #005f99;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
}
.btn-secondary {
background: var(--color-header-bg);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
background: #242435;
border-color: var(--color-primary-blue);
color: var(--color-primary-blue);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-clear {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
box-shadow: var(--shadow-sm);
}
.btn-clear:hover:not(:disabled) {
background: linear-gradient(135deg, #ff5252, #e53935);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-refresh {
background: linear-gradient(135deg, #4ecdc4, #44b3c2);
color: white;
box-shadow: var(--shadow-sm);
}
.btn-refresh:hover:not(:disabled) {
background: linear-gradient(135deg, #26a69a, #00acc1);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn-danger {
background: var(--color-error);
color: white;
box-shadow: var(--shadow-sm);
}
.btn-danger:hover:not(:disabled) {
background: #c62828;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* Button Sizes */
.btn-sm {
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-sm);
border-radius: var(--radius-lg);
gap: var(--spacing-xs);
}
.btn-md {
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-base);
gap: var(--spacing-sm);
}
.btn-lg {
padding: var(--spacing-lg) var(--spacing-2xl);
font-size: var(--font-lg);
border-radius: var(--radius-lg);
gap: var(--spacing-sm);
}
/* Button with icons */
.btn-icon {
padding: var(--spacing-sm);
width: auto;
aspect-ratio: 1;
}
.btn-icon.btn-sm {
padding: var(--spacing-xs);
}
.btn-icon.btn-lg {
padding: var(--spacing-md);
}
/* Special button styles */
.btn-round {
border-radius: var(--radius-2xl);
}
/* Button animations */
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left var(--transition-slow);
}
.btn:hover::before {
left: 100%;
}
/* Button loading state */
.btn-loading {
position: relative;
color: transparent;
}
.btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ===== STATUS INDICATORS ===== */
.status-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
}
.status-dot.ready {
background: var(--color-success);
animation: pulse 2s infinite;
}
.status-dot.loading {
background: var(--color-warning);
animation: pulse 1s infinite;
}
.status-dot.error {
background: var(--color-error);
animation: none;
}
/* ===== FORM ELEMENTS ===== */
.input {
padding: var(--spacing-md);
border: 1px solid #444455;
border-radius: var(--radius-lg);
outline: none;
font-size: var(--font-base);
background: #242435;
color: var(--color-text-primary);
transition: border-color var(--transition-fast);
}
.input:focus {
border-color: var(--color-primary-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.4);
}
.input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ===== PANEL SYSTEM ===== */
.panel {
background: var(--color-panel-bg);
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
}
.panel-header {
background: var(--color-header-bg);
border-bottom: 1px solid var(--color-border);
padding: calc(var(--spacing-lg) + 2px) calc(var(--spacing-xl) + 4px);
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-header h2 {
font-size: var(--font-lg);
font-weight: 600;
color: var(--color-text-primary);
}
form label {
display: flex;
align-items: center;
justify-content: center;
}
form select {
cursor: pointer;
}
.panel-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 1200px) {
:root {
--spacing-xl: 1.25rem;
--spacing-2xl: 1.75rem;
}
}
@media (max-width: 768px) {
:root {
--spacing-lg: 0.75rem;
--spacing-xl: 1rem;
--font-2xl: 1.2rem;
}
.panel-header {
padding: var(--spacing-md) var(--spacing-lg);
}
}
