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

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; }