diff --git a/deck-frontend/index.html b/deck-frontend/index.html index ae18091..8881f20 100644 --- a/deck-frontend/index.html +++ b/deck-frontend/index.html @@ -17,9 +17,6 @@ - - -
@@ -60,11 +57,17 @@
+
+ + + +
+
diff --git a/deck-frontend/src/styles/main.css b/deck-frontend/src/styles/main.css index 12fed62..84d3791 100644 --- a/deck-frontend/src/styles/main.css +++ b/deck-frontend/src/styles/main.css @@ -58,7 +58,6 @@ body { .btn:hover { border-color: var(--accent); color: var(--text); } .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-sm { padding: 5px 10px; font-size: 0.75em; } -.sel-count { font-size: 0.7em; margin-left: 4px; opacity: 0.8; } .search-input { width: 300px; @@ -94,9 +93,38 @@ body { border-bottom: 1px solid var(--border); display: flex; align-items: center; - justify-content: center; + justify-content: space-between; padding: 0 16px; - gap: 8px; +} +.view-bar-spacer { width: 120px; } + +/* === SEL/GET GROUP === */ +.sel-group { + display: flex; + align-items: center; + gap: 2px; + background: var(--bg-card); + border-radius: 6px; + padding: 3px; +} +.sel-btn { + padding: 5px 12px; + background: transparent; + border: none; + border-radius: 4px; + color: var(--text-muted); + cursor: pointer; + font-size: 0.75em; + font-weight: 600; + transition: all 0.15s ease; +} +.sel-btn:hover { color: var(--text); background: rgba(255,255,255,0.05); } +.sel-btn.active { background: var(--accent); color: #fff; } +#sel-count { + font-size: 0.7em; + color: var(--accent); + margin-left: 6px; + font-weight: 600; } /* === GROUPS BAR === */