josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign search action across layouts and themes

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-11 17:36:45 +08:00
parent a22b8b44c9
commit 3c68e56b21
9 changed files with 168 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/theme-classic.css
View File

@@ -65,8 +65,6 @@ html[data-layout="classic"] .topbar {
}
html[data-layout="classic"] .search-form { width: 100%; min-width: 0; max-width: 860px; gap: 8px; }
html[data-layout="classic"] #searchInput { min-width: 0; font-size: 16px; padding: 11px 14px; min-height: 46px; border-radius: 8px; background: var(--bg-1); box-shadow: none; }
html[data-layout="classic"] .search-btn { min-height: 46px; padding: 0 22px; border-radius: 8px; background: var(--bg-3); color: var(--text); box-shadow: none; transform: none; }
html[data-layout="classic"] .search-btn:hover { background: var(--accent-deep); color: #fff; }
html[data-layout="classic"] .sidebar-toggle { min-width: 44px; min-height: 44px; border-radius: 8px; box-shadow: none; }
html[data-layout="classic"] .player-pane {
container-type: inline-size;
@@ -236,10 +234,6 @@ html[data-layout="classic"] .card:has(.card-note-btn) .card-menu { grid-column:
html[data-layout="classic"] .card:has(.card-note-btn) .card-del { grid-column: 4; grid-row: 2; }
html[data-layout="classic"] .card:has(.card-note-btn) { column-gap: 8px; }
/* Search button: outlined rectangle that fills with the accent on hover. */
html[data-layout="classic"] .search-btn { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
html[data-layout="classic"] .search-btn:hover { background: var(--accent); color: #fff; transform: none; box-shadow: none; }
html[data-layout="classic"][data-theme="contrast"] .search-btn { background: #fff; color: #000; border-color: #fff; }
html[data-layout="classic"][data-theme="contrast"] .search-btn:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #000; }
html[data-layout="classic"][data-theme="light"] .search-btn { color: var(--accent-deep); border-color: var(--accent-deep); }
html[data-layout="classic"][data-theme="light"] .search-btn:hover { background: var(--accent-deep); color: #fff; }
/* Search action stays outlined, with its label on the theme surface. */
html[data-layout="classic"] .search-btn { background: transparent; color: var(--search-action-foreground); border: 1.5px solid color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); box-shadow: none; }
html[data-layout="classic"] .search-btn:hover { background: var(--search-action-surface); border-color: var(--accent); color: var(--search-action-foreground); transform: none; box-shadow: none; }