gemma/arcana-fx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add atmosphere audio filters

Browse Source
This commit is contained in:
Hermes Agent
2026-05-21 09:23:49 +02:00
parent 17bf8d4e3a
commit 94d7a411da
5 changed files with 255 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/styles.css
View File

@@ -74,6 +74,15 @@ input[type="search"]:focus { border-color: var(--accent); }
.variant-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 6px; }
.variant-btn { padding: 3px 8px; font-size: 11px; border-radius: 6px; min-width: 26px; background: rgba(179,136,255,.08); border: 1px solid rgba(179,136,255,.28); color: var(--ink-dim); }
.variant-btn:hover { background: rgba(179,136,255,.20); color: var(--ink); border-color: var(--accent); }
.filter-panel .panel-head { align-items: flex-start; justify-content: space-between; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.filter-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.filter-card.active { border-color: rgba(110,255,200,.7); background: radial-gradient(260px 110px at 20% 0%, rgba(110,255,200,.14), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(110,255,200,.12); }
.filter-card strong { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.filter-card span { display: block; color: var(--ink-dim); font-size: 12px; line-height: 1.35; }
.filter-actions { display: flex; gap: 6px; flex-shrink: 0; }
.momentary.holding { color: #06140f; background: linear-gradient(135deg, var(--accent-2), #a5ffe1); border-color: rgba(110,255,200,.8); }
.badge.filter-active { color: var(--accent-2); background: rgba(110,255,200,.12); border-color: rgba(110,255,200,.5); }
.active-row.is-loop { border-color: rgba(255,180,84,.45); background: rgba(255,180,84,.06); }
.active-row .loop-glyph { font-weight: 700; }
.empty { margin: 16px 4px 0; color: var(--ink-dim); font-style: italic; }