diff --git a/lightsync/frontend/style.css b/lightsync/frontend/style.css index 250408b..f6c046e 100644 --- a/lightsync/frontend/style.css +++ b/lightsync/frontend/style.css @@ -3,10 +3,11 @@ --bg-panel: #0f0f0f; --bg-panel-dark: #080808; --border-dim: #1a4a4a; - --border-bright: #00ffff; + --accent: #00ffff; + --border-bright: var(--accent); --text-primary: #cccccc; --text-dim: #555555; - --text-accent: #00ffff; + --text-accent: var(--accent); --text-warning: #ff6600; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --font-size: 13px; @@ -142,15 +143,23 @@ body { /* Device list rows */ .device-row { display: flex; - flex-direction: column; + align-items: center; + justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--bg-panel-dark); - gap: 2px; + gap: 8px; } .device-row:last-child { border-bottom: none; } +.device-row-info { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; +} + /* Form elements */ input, select, button { background: var(--bg-panel); @@ -167,3 +176,36 @@ button:hover { color: var(--text-accent); cursor: pointer; } + +/* Device form */ +.device-form { + display: flex; + flex-direction: column; + gap: 4px; + padding: 8px 12px; + border-top: 1px solid var(--border-dim); +} + +.device-form button[type="submit"] { + margin-top: 4px; + text-transform: uppercase; + letter-spacing: 0.08em; +} + +/* Device remove button */ +.device-remove { + background: none; + border: none; + color: var(--text-dim); + font-family: var(--font-mono); + font-size: 16px; + cursor: pointer; + padding: 0 4px; + line-height: 1; + flex-shrink: 0; +} + +.device-remove:hover { + color: #ff3333; + border: none; +}