File size: 1,804 Bytes
a5e21d8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | :root {
--bg-primary: #09090b;
--bg-secondary: #18181b;
--bg-tertiary: #27272a;
--border: #3f3f46;
--text-primary: #f4f4f5;
--text-secondary: #a1a1aa;
--accent: #10b981; /* Emerald */
--accent-hover: #059669;
--danger: #ef4444;
--warning: #f59e0b;
}
* { box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--bg-primary); color: var(--text-primary); margin: 0; }
/* Gradio Overrides */
.gradio-container { max-width: 100% !important; padding: 0 !important; background: var(--bg-primary) !important; }
#header, #footer { padding: 20px 40px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.hidden { display: none !important; }
/* Custom UI Elements */
.btn-primary {
background-color: var(--accent) !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 6px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: 0.2s !important;
}
.btn-primary:hover { background-color: var(--accent-hover) !important; }
.card {
background-color: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 24px;
margin-bottom: 16px;
}
/* Skeleton Loader */
.skeleton {
background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
height: 20px;
border-radius: 4px;
margin-bottom: 10px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* SVG Icons */
.icon { width: 20px; height: 20px; fill: currentColor; display: inline-block; vertical-align: middle; margin-right: 8px; } |