init
This commit is contained in:
482
static/css/components.css
Normal file
482
static/css/components.css
Normal file
@@ -0,0 +1,482 @@
|
||||
/*
|
||||
* static/css/components.css
|
||||
* Reusable UI components: buttons, inputs, badges, status indicators,
|
||||
* instruction cards, and animations.
|
||||
*/
|
||||
|
||||
/* ── Status indicator (LED dot) ─────────────────────────────────────────── */
|
||||
|
||||
.led {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.led__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.led--green .led__dot { background: var(--green); box-shadow: 0 0 6px var(--green), 0 0 12px var(--green-glow); }
|
||||
.led--amber .led__dot { background: var(--amber); box-shadow: 0 0 6px var(--amber), 0 0 12px var(--amber-glow); }
|
||||
.led--red .led__dot { background: var(--red); box-shadow: 0 0 6px var(--red), 0 0 12px var(--red-glow); }
|
||||
.led--muted .led__dot { background: var(--text-muted); box-shadow: none; }
|
||||
.led--cyan .led__dot { background: var(--cyan); box-shadow: 0 0 6px var(--cyan), 0 0 12px var(--cyan-glow); }
|
||||
|
||||
.led--green .led__label { color: var(--green); }
|
||||
.led--amber .led__label { color: var(--amber); }
|
||||
.led--red .led__label { color: var(--red); }
|
||||
.led--muted .led__label { color: var(--text-muted); }
|
||||
.led--cyan .led__label { color: var(--cyan); }
|
||||
|
||||
/* Pulse for "connected" / "active" */
|
||||
.led--pulse .led__dot {
|
||||
animation: pulse 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(0.85); }
|
||||
}
|
||||
|
||||
/* ── Queue count badge ───────────────────────────────────────────────────── */
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 var(--space-2);
|
||||
border-radius: 10px;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.badge--cyan { background: var(--cyan-glow); color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); }
|
||||
.badge--amber { background: var(--amber-glow); color: var(--amber); border: 1px solid rgba(255,190,11,0.3); }
|
||||
.badge--muted { background: var(--bg-overlay); color: var(--text-muted); border: 1px solid var(--border-subtle); }
|
||||
|
||||
/* ── Buttons ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background var(--duration-fast) var(--ease-in-out),
|
||||
border-color var(--duration-fast) var(--ease-in-out),
|
||||
box-shadow var(--duration-fast) var(--ease-in-out),
|
||||
transform var(--duration-fast) var(--ease-in-out);
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn:active:not(:disabled) {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
/* Primary – cyan */
|
||||
.btn--primary {
|
||||
background: var(--cyan);
|
||||
border-color: var(--cyan);
|
||||
color: #000;
|
||||
}
|
||||
.btn--primary:hover {
|
||||
background: #1de9ff;
|
||||
box-shadow: 0 0 16px var(--cyan-glow);
|
||||
}
|
||||
|
||||
/* Ghost */
|
||||
.btn--ghost {
|
||||
background: transparent;
|
||||
border-color: var(--border-muted);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.btn--ghost:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-strong);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Danger */
|
||||
.btn--danger {
|
||||
background: transparent;
|
||||
border-color: var(--red-dim);
|
||||
color: var(--red);
|
||||
}
|
||||
.btn--danger:hover {
|
||||
background: var(--red-glow);
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
/* Icon-only */
|
||||
.btn--icon {
|
||||
padding: var(--space-2);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Small */
|
||||
.btn--sm {
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-size: var(--text-xs);
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* ── Form elements ──────────────────────────────────────────────────────── */
|
||||
|
||||
.input, .textarea {
|
||||
width: 100%;
|
||||
background: var(--bg-overlay);
|
||||
border: 1px solid var(--border-muted);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-base);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
transition:
|
||||
border-color var(--duration-fast) var(--ease-in-out),
|
||||
box-shadow var(--duration-fast) var(--ease-in-out);
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.input::placeholder, .textarea::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.input:focus, .textarea:focus {
|
||||
border-color: var(--cyan-dim);
|
||||
box-shadow: 0 0 0 3px rgba(0,212,255,0.08);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 88px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.form-row .textarea { flex: 1; }
|
||||
|
||||
/* ── Instruction card ─────────────────────────────────────────────────────── */
|
||||
|
||||
.instruction-card {
|
||||
padding: var(--space-4) var(--space-5);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--space-2) var(--space-4);
|
||||
align-items: start;
|
||||
transition: background var(--duration-fast) var(--ease-in-out);
|
||||
animation: card-in var(--duration-slow) var(--ease-out-expo) both;
|
||||
}
|
||||
|
||||
@keyframes card-in {
|
||||
from { opacity: 0; transform: translateY(-8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.instruction-card:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.instruction-card:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.instruction-card__meta {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.instruction-card__pos {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--cyan);
|
||||
background: var(--cyan-glow);
|
||||
border: 1px solid rgba(0,212,255,0.25);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1px 6px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.instruction-card__content {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.65;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.instruction-card__time {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.instruction-card__actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Edit mode */
|
||||
.instruction-card__edit-area {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-end;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.instruction-card__edit-area .textarea {
|
||||
flex: 1;
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
/* Consumed card */
|
||||
.instruction-card--consumed {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.instruction-card--consumed .instruction-card__content {
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: var(--amber-dim);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.instruction-card--consumed .instruction-card__pos {
|
||||
background: var(--amber-glow);
|
||||
border-color: rgba(255,190,11,0.2);
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.instruction-card--consumed:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.instruction-card__consumed-by {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--amber);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* ── Empty state ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.empty-state {
|
||||
padding: var(--space-10) var(--space-6);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.empty-state__icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: var(--space-3);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* ── Status panel items ──────────────────────────────────────────────────── */
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-2) 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.stat-row:last-child { border-bottom: none; }
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-value--cyan { color: var(--cyan); }
|
||||
.stat-value--amber { color: var(--amber); }
|
||||
|
||||
/* ── Config form ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.config-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.config-field:last-child { margin-bottom: 0; }
|
||||
|
||||
.config-label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.config-hint {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.input--sm {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* ── Toast notification ──────────────────────────────────────────────────── */
|
||||
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
bottom: var(--space-6);
|
||||
right: var(--space-6);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: var(--bg-overlay);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3) var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-primary);
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: toast-in var(--duration-normal) var(--ease-out-expo) both;
|
||||
pointer-events: auto;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.toast--success { border-color: var(--green-dim); color: var(--green); }
|
||||
.toast--error { border-color: var(--red-dim); color: var(--red); }
|
||||
.toast--info { border-color: var(--cyan-dim); color: var(--cyan); }
|
||||
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateY(12px) scale(0.95); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
@keyframes toast-out {
|
||||
from { opacity: 1; transform: translateY(0) scale(1); }
|
||||
to { opacity: 0; transform: translateY(4px) scale(0.97); }
|
||||
}
|
||||
|
||||
/* ── Theme toggle (header) ────────────────────────────────────────────────── */
|
||||
|
||||
#theme-toggle {
|
||||
color: var(--text-secondary);
|
||||
border-color: transparent;
|
||||
transition: color var(--duration-fast) var(--ease-in-out),
|
||||
background var(--duration-fast) var(--ease-in-out);
|
||||
}
|
||||
|
||||
#theme-toggle:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
/* ── SVG icons ───────────────────────────────────────────────────────────── */
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
stroke-width: 2;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.icon--sm { width: 12px; height: 12px; }
|
||||
|
||||
/* ── Page load animation ─────────────────────────────────────────────────── */
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in var(--duration-slow) var(--ease-out-expo) both;
|
||||
}
|
||||
|
||||
.fade-in--delay-1 { animation-delay: 60ms; }
|
||||
.fade-in--delay-2 { animation-delay: 120ms; }
|
||||
.fade-in--delay-3 { animation-delay: 200ms; }
|
||||
.fade-in--delay-4 { animation-delay: 300ms; }
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ── Loading spinner ─────────────────────────────────────────────────────── */
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid var(--border-muted);
|
||||
border-top-color: var(--cyan);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user