diff --git a/assets/ledlab.png b/assets/ledlab.png index c2e273c..1efe44d 100644 Binary files a/assets/ledlab.png and b/assets/ledlab.png differ diff --git a/public/index.html b/public/index.html index fa4fd93..a4ff2d6 100644 --- a/public/index.html +++ b/public/index.html @@ -60,20 +60,16 @@

Animation Preset

-
- -
+
-
- -
+
diff --git a/public/styles/main.css b/public/styles/main.css index 2aa9523..8d5887e 100644 --- a/public/styles/main.css +++ b/public/styles/main.css @@ -455,11 +455,11 @@ body { position: absolute; top: 1rem; right: 1rem; - width: 380px; + width: 320px; max-width: calc(100vw - 4rem); max-height: calc(100vh - 12rem); background: var(--bg-secondary); - border-radius: 16px; + border-radius: 12px; border: 1px solid var(--border-primary); padding: 0; display: flex; @@ -486,18 +486,18 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 1.25rem 1.5rem; + padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-primary); background: var(--bg-tertiary); } .control-title { - font-size: 1rem; + font-size: 0.9rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; - gap: 0.75rem; + gap: 0.5rem; margin: 0; } @@ -529,10 +529,10 @@ body { .floating-controls-content { flex: 1; overflow-y: auto; - padding: 1.5rem; + padding: 0.75rem; display: flex; flex-direction: column; - gap: 1.5rem; + gap: 0.75rem; } /* Old Control panel section - kept for backwards compatibility */ @@ -553,16 +553,25 @@ body { } .control-group { - background: var(--control-bg); - border-radius: 12px; - padding: 1.25rem; - border: 1px solid var(--border-secondary); + background: transparent; + border-radius: 8px; + padding: 0.5rem 0; + border: none; + border-bottom: 1px solid var(--border-primary); transition: all 0.2s ease; } +.control-group:last-child { + border-bottom: none; +} + .control-group:hover { - border-color: var(--border-tertiary); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + background: rgba(255, 255, 255, 0.02); +} + +.control-group > .btn { + width: 100%; + margin-top: 0.25rem; } .control-group-title { @@ -584,21 +593,23 @@ body { } .control-group-subtitle { - font-size: 0.875rem; + font-size: 0.75rem; font-weight: 600; - color: var(--text-primary); - margin-bottom: 0.75rem; + color: var(--text-secondary); + margin-bottom: 0.5rem; display: flex; align-items: center; - gap: 0.5rem; + gap: 0.375rem; + text-transform: uppercase; + letter-spacing: 0.05em; } .control-group-subtitle::before { content: ''; - width: 3px; - height: 14px; + width: 2px; + height: 10px; background: var(--accent-primary); - border-radius: 2px; + border-radius: 1px; } /* Node list */ @@ -672,21 +683,18 @@ body { } /* Preset controls */ -.preset-selector-wrapper { - margin-bottom: 1.25rem; -} - .preset-select { width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); - border-radius: 8px; - padding: 0.75rem; + border-radius: 6px; + padding: 0.5rem; color: var(--text-primary); - font-size: 0.875rem; + font-size: 0.8rem; font-weight: 500; transition: all 0.2s ease; cursor: pointer; + margin-bottom: 0.5rem; } .preset-select option { @@ -710,9 +718,9 @@ body { .preset-controls { display: flex; flex-direction: column; - gap: 0.75rem; - margin-bottom: 1.25rem; - min-height: 2rem; + gap: 0.5rem; + margin-bottom: 0.5rem; + min-height: 1.5rem; position: relative; } @@ -735,7 +743,7 @@ body { .preset-control { display: flex; flex-direction: column; - gap: 0.4rem; + gap: 0.3rem; } .preset-label { @@ -750,10 +758,10 @@ body { width: 100%; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); - border-radius: 6px; - padding: 0.625rem; + border-radius: 4px; + padding: 0.4rem 0.5rem; color: var(--text-primary); - font-size: 0.875rem; + font-size: 0.8rem; font-weight: 500; transition: all 0.2s ease; } @@ -833,17 +841,17 @@ body { background: transparent; color: var(--text-primary); border: 1px solid var(--border-secondary); - border-radius: 8px; - padding: 0.625rem 1.25rem; - font-size: 0.875rem; + border-radius: 6px; + padding: 0.5rem 1rem; + font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; - gap: 0.5rem; - min-height: 2.75rem; + gap: 0.4rem; + min-height: 2.25rem; white-space: nowrap; backdrop-filter: var(--backdrop-blur); } @@ -941,7 +949,7 @@ body { .btn-container { display: flex; - gap: 0.75rem; + gap: 0.5rem; flex-wrap: wrap; }