diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/style.css | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index f426f8d..975f47c 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -1859,6 +1859,13 @@ a.transfer-name { /* The actions sit on their own line under the toggle, and wrap within it. */ .tb-actions { width: 100%; } + /* video-app.js's toolbar isn't built from .toolbar-group (nothing else in + it needs a right-hand group), so it never got the row-per-group + treatment above — mode buttons + the All/Movies/Series control left no + room at all for the filter field once both were on the same line. */ + .video-toolbar { flex-wrap: wrap; } + .video-toolbar .tb-search { flex-basis: 100%; margin-left: 0; } + /* Every pixel here is one the conversation does not get. */ .group-header { margin-bottom: 10px; gap: 8px; } .group-tabs { margin-bottom: 10px; } @@ -2563,6 +2570,38 @@ a.transfer-name { } .video-toolbar .tb-search { margin-left: auto; } +/* All/Movies/Series — a segmented control, not three separate .tb-btn: the + three are mutually exclusive (unlike the view-mode buttons, which read + fine standalone), and grouping them under one shared border is what says + so at a glance. */ +.tb-typefilter { + display: inline-flex; + height: 32px; + border: 1px solid var(--border); + border-radius: 6px; + overflow: hidden; + flex-shrink: 0; +} +.tb-typefilter button { + display: inline-flex; + align-items: center; + height: 100%; + padding: 0 12px; + border: none; + background: var(--bg-surface); + color: var(--text-dim); + font-size: 0.83em; + white-space: nowrap; + cursor: pointer; + transition: background 0.12s, color 0.12s; +} +.tb-typefilter button + button { border-left: 1px solid var(--border); } +.tb-typefilter button:hover { color: var(--accent); } +.tb-typefilter button.active { + background: var(--accent); + color: var(--accent-text); +} + /* Mode A — poster grid */ .video-grid { |