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

Redesign Framework7 and Bento search actions

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-13 08:08:23 +08:00
parent 2fe453bfb9
commit 49c7ce9403
3 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.impeccable/config.json
View File

@@ -27,6 +27,12 @@
"value": "plus jakarta sans",
"createdAt": "2026-10-11T09:31:13.372Z",
"reason": "Existing Bento Hub layout intentionally declares Plus Jakarta Sans in theme-bento-hub.css; the Search redesign preserves that established layout typography."
},
{
"rule": "overused-font",
"value": "plus jakarta sans",
"createdAt": "2026-10-13T00:04:58.925Z",
"reason": "Existing Bento Hub brand typeface retained; this scoped search-action change does not alter its typography."
}
]
}

22
frontend/theme-bento-hub.css
View File

@@ -51,7 +51,19 @@ html[data-layout="bento-hub"] .sidebar-footer { border-top:1px solid var(--line)
html[data-layout="bento-hub"] .topbar { background:var(--bg-1); border-bottom:1px solid var(--line); padding:12px 20px; gap:12px; backdrop-filter:none; }
html[data-layout="bento-hub"] .search-form { max-width:640px; gap:8px; }
html[data-layout="bento-hub"] #searchInput { border:1px solid var(--line); border-radius:999px; background:var(--bg-2); padding:12px 18px; font-size:14px; min-height:44px; box-shadow:none; }
html[data-layout="bento-hub"] .search-btn { min-width:44px; border:1px solid color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); border-radius:999px; min-height:44px; background:var(--search-action-surface); color:var(--search-action-foreground); font:700 13px var(--ui); box-shadow:none; }
html[data-layout="bento-hub"] #searchForm .search-btn { width:auto; min-width:96px; min-height:44px; flex:0 1 auto; padding:0 13px; gap:8px; border:1px solid var(--accent); border-radius:12px; background:var(--accent); color:var(--on-accent); font:700 13px/1 var(--ui); box-shadow:var(--shadow-sm); }
html[data-layout="bento-hub"] #searchForm .search-btn:hover { background:var(--accent-bright); border-color:var(--accent-bright); color:var(--on-accent); transform:none; }
html[data-layout="bento-hub"] #searchForm .search-btn:active { transform:translateY(1px); box-shadow:none; }
html[data-layout="bento-hub"] #searchForm .search-btn:focus-visible { outline:2px solid var(--accent-sec); outline-offset:3px; }
html[data-layout="bento-hub"][data-theme="light"] #searchForm .search-btn { background:var(--accent-deep); border-color:var(--accent-deep); }
html[data-layout="bento-hub"][data-theme="light"] #searchForm .search-btn:hover { background:var(--bg-3); border-color:var(--accent-deep); color:var(--text); }
html[data-layout="bento-hub"] #searchForm .search-btn:disabled { background:var(--bg-2); border-color:var(--line-bright); color:var(--text-2); box-shadow:none; cursor:not-allowed; }
html[data-layout="bento-hub"] #searchForm .bento-search-icon { width:18px; height:18px; display:block; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
html[data-layout="bento-hub"] #searchForm .bento-search-label { display:inline; position:static; width:auto; height:auto; padding:0; margin:0; overflow:visible; clip:auto; white-space:nowrap; }
@media(max-width:860px) {
html[data-layout="bento-hub"] #searchForm .search-btn { min-width:44px; width:44px; flex:0 0 44px; padding:0; border-radius:14px; }
html[data-layout="bento-hub"] #searchForm .bento-search-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
html[data-layout="bento-hub"] :is(.sidebar-toggle,.icon-btn,.update-icon-btn) { min-width:44px; width:44px; min-height:44px; border-radius:10px; background:var(--bg-2); color:var(--text-2); }
html[data-layout="bento-hub"] .bottom-nav { height:calc(64px + env(safe-area-inset-bottom)); background:var(--bg-glass); border-top:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:0 4px env(safe-area-inset-bottom); }
html[data-layout="bento-hub"] .bottom-nav-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 0; min-height:64px; color:var(--text-2); }
@@ -329,8 +341,8 @@ html[data-layout="bento-hub"] .shortcut-overlay { background:rgba(0,0,0,.75); ba
html[data-layout="bento-hub"] .shortcut-panel { border:1px solid var(--line); border-radius:16px; background:var(--bg-1); }
html[data-layout="bento-hub"] .shortcut-key { border-radius:6px; background:var(--bg-2); color:var(--text); font:500 12px var(--mono); }
html[data-layout="bento-hub"] :is(.modal-list button,.mc-row,.export-actions .btn) { min-height:44px; border-radius:10px; background:var(--bg-2); color:var(--text); border-color:var(--line); }
html[data-layout="bento-hub"] .bento-search-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
html[data-layout="bento-hub"] .bento-search-icon { display:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html[data-layout="bento-hub"] .bento-search-label { position:static; width:auto; height:auto; padding:0; margin:0; clip-path:none; overflow:visible; white-space:nowrap; }
html[data-layout="bento-hub"] .bento-search-icon { display:block; width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
html[data-layout="bento-hub"] .saved-badge .glass-control-icon { width:14px; height:14px; }
html[data-layout="bento-hub"] .card.downloading .saved-badge::before { content:''; }
@media(max-width:1023px) {
@@ -348,8 +360,8 @@ html[data-layout="bento-hub"] .card.downloading .saved-badge::before { content:'
html[data-layout="bento-hub"] .list-pane { flex:none!important; min-height:100%; overflow:visible; padding-bottom:16px; }
html[data-layout="bento-hub"] .cards { flex:none; overflow:visible; }
html[data-layout="bento-hub"] .player-pane.empty.home-playlists .player-stage { max-height:none; }
html[data-layout="bento-hub"] .search-btn { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; padding:0; border-radius:999px; }
html[data-layout="bento-hub"] .bento-search-icon { display:block; }
html[data-layout="bento-hub"] .search-btn { display:grid; place-items:center; flex:0 0 44px; width:44px; min-width:44px; padding:0; border-radius:12px; }
html[data-layout="bento-hub"] .bento-search-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
html[data-layout="bento-hub"] .search-form { min-width:0; flex:1; gap:8px; }
html[data-layout="bento-hub"] #searchInput { min-width:0; padding-inline:12px; }
html[data-layout="bento-hub"] .home-pl-grid { grid-template-columns:1fr; }

13
frontend/theme-f7.css
View File

@@ -206,8 +206,17 @@ html[data-layout="f7-swipe"] #searchInput {
box-shadow: none; font: 400 17px/1.25 var(--ui, system-ui, sans-serif);
}
html[data-layout="f7-swipe"] .search-form::before { content: ''; position: absolute; left: 13px; top: 12px; z-index: 1; width: 18px; height: 18px; background: var(--text-dim); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; }
html[data-layout="f7-swipe"] .search-btn { min-width: 64px; min-height: 44px; padding: 0 10px; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--search-action-foreground) 45%, var(--accent-deep)); border-radius: 5px 5px 2px 2px; background: transparent; color: var(--search-action-foreground); font-size: 16px; font-weight: 600; box-shadow: none; }
html[data-layout="f7-swipe"] .search-btn:hover { border-bottom-color: var(--accent); background: var(--bg-2); color: var(--search-action-foreground); }
html[data-layout="f7-swipe"] #searchForm .search-btn {
min-width:64px; min-height:44px; padding:0 10px; border:0; border-radius:9px;
background:transparent; color:var(--accent-bright); font:600 17px/1 var(--ui,system-ui,sans-serif);
box-shadow:none; transform:none; transition:background-color .14s ease,color .14s ease;
}
html[data-layout="f7-swipe"][data-theme="light"] #searchForm .search-btn { color:var(--accent-deep); }
html[data-layout="f7-swipe"] #searchForm .search-btn:hover { background:color-mix(in srgb,var(--accent) 12%,transparent); }
html[data-layout="f7-swipe"] #searchForm .search-btn:active { background:color-mix(in srgb,var(--accent) 20%,transparent); transform:none; }
html[data-layout="f7-swipe"] #searchForm .search-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
html[data-layout="f7-swipe"] #searchForm .search-btn:disabled { color:var(--text); background:var(--bg-2); border:0; cursor:not-allowed; }
@media (prefers-reduced-motion: reduce) { html[data-layout="f7-swipe"] #searchForm .search-btn { transition:none; } }
html[data-layout="f7-swipe"] #updateIconBtn { width: 40px; height: 40px; }
html[data-layout="f7-swipe"] .search-recent { top: calc(100% + 8px); border: 1px solid var(--f7-hairline); border-radius: 14px; background: var(--bg-1); box-shadow: 0 12px 36px rgb(0 0 0 / .22); overflow: hidden; }
html[data-layout="f7-swipe"] .search-recent > * { border-radius: 0; border: 0; border-bottom: 1px solid var(--f7-hairline); background: transparent; min-height: 48px; }