diff --git a/frontend/css/style.css b/frontend/css/style.css index 454a5d5..585e6d7 100644 --- a/frontend/css/style.css +++ b/frontend/css/style.css @@ -191,6 +191,53 @@ body.theme-light .top-bar { color: var(--text-primary); } +/* Recent searches, under the box. The drawers' colours, but laid over the page + background rather than letting it through: this one hangs over thumbnails, + and a title showing through a suggestion is a title you try to read. */ +.search-suggest { + position: absolute; + top: calc(100% + 8px); + left: 0; + right: 0; + z-index: 120; + padding: 6px; + border: 1px solid var(--border); + border-radius: var(--radius-lg); + background: linear-gradient(var(--bg-secondary), var(--bg-secondary)), var(--bg-primary); + box-shadow: 0 18px 40px var(--shadow); + overflow: hidden; +} + +.search-suggest-row { + display: block; + width: 100%; + padding: 9px 12px; + border: none; + border-radius: var(--radius-sm); + background: none; + color: var(--text-secondary); + font-family: inherit; + font-size: 13px; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease; +} + +.search-suggest-row:hover, +.search-suggest-row.is-active { + background: var(--bg-tertiary); + color: var(--text-primary); +} + +/* The part that matched what is typed, so the eye can see why a row is here. */ +.search-suggest-hit { + color: var(--accent); + font-weight: 600; +} + .actions { display: flex; gap: 12px; diff --git a/frontend/index.html b/frontend/index.html index b8d25d7..a9a2a60 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -15,8 +15,11 @@
- + +