84 lines
1.9 KiB
CSS
84 lines
1.9 KiB
CSS
:root {
|
|
/* Colors */
|
|
--color-bg: #ffffff;
|
|
--color-text: #1a1a1a;
|
|
--color-muted: #666666;
|
|
--color-video-bg: #0a0a1a;
|
|
--color-badge-bg: rgba(99, 102, 241, 0.9); /* #6366f1 @ 0.9 */
|
|
|
|
--color-mic-bg: #f8f9fa;
|
|
--color-muted-light: #e8e8e8;
|
|
--color-mic-from: #22c55e;
|
|
--color-mic-to: #86efac;
|
|
|
|
--color-control-border: #e5e5e5;
|
|
--color-control-hover-bg: #fee2e2;
|
|
--color-control-disabled-bg: #fecaca;
|
|
--color-control-disabled-text: #dc2626;
|
|
|
|
--color-kbd-bg: #374151;
|
|
--color-info: #3b82f6;
|
|
|
|
--color-input-border: #d1d5db;
|
|
--color-input-placeholder: #9ca3af;
|
|
|
|
--color-submit: #2563eb;
|
|
--color-submit-hover: #1d4ed8;
|
|
--color-submit-active: #1e40af;
|
|
|
|
/* Typography */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--fs-h1: 1.75rem; /* 28px */
|
|
--fs-body: 0.875rem; /* 14px */
|
|
--fs-small: 0.6875rem; /* 11px */
|
|
--fs-btn: 0.8125rem; /* 13px */
|
|
--fs-submit: 0.9375rem; /* 15px */
|
|
|
|
/* Radii */
|
|
--radius-lg: 12px;
|
|
--radius-md: 8px;
|
|
--radius-pill: 20px;
|
|
--radius-meter: 16px;
|
|
|
|
/* Layout */
|
|
--container-max-width: 628px;
|
|
--gap-default: 16px;
|
|
|
|
/* Shadows */
|
|
--shadow-controls: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
|
|
/* Misc */
|
|
--kbd-padding: 2px 6px;
|
|
}
|
|
|
|
/* Small helper utilities used by avanza-ui components when not using Tailwind */
|
|
.avz-kbd {
|
|
background-color: var(--color-kbd-bg);
|
|
padding: var(--kbd-padding);
|
|
border-radius: 3px;
|
|
font-family: monospace;
|
|
font-size: var(--fs-small);
|
|
color: #fff;
|
|
}
|
|
|
|
.avz-badge {
|
|
background: var(--color-badge-bg);
|
|
color: #fff;
|
|
padding: 8px 20px;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.avz-preview {
|
|
background: var(--color-video-bg);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.avz-control-shadow {
|
|
box-shadow: var(--shadow-controls);
|
|
}
|
|
|