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

Align toolbar controls and provide full touch targets

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-08 12:04:56 +08:00
parent 21c12733d3
commit 3de4cba402
2 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/car-mode.css
View File

@@ -4,4 +4,3 @@
.car-controls button { min-height: 110px; font: 650 clamp(22px, 3vw, 36px)/1.2 system-ui; background: #fff; color: #050607; border: 3px solid #fff; border-radius: 16px; } .car-controls button { min-height: 110px; font: 650 clamp(22px, 3vw, 36px)/1.2 system-ui; background: #fff; color: #050607; border: 3px solid #fff; border-radius: 16px; }
.car-exit { align-self: flex-start; min-height: 52px; padding: 12px 20px; background: #070809; color: #fff; border: 2px solid #fff; border-radius: 8px; } .car-exit { align-self: flex-start; min-height: 52px; padding: 12px 20px; background: #070809; color: #fff; border: 2px solid #fff; border-radius: 8px; }
.car-mode button:focus-visible { outline: 4px solid #61caff; outline-offset: 4px; } .car-mode button:focus-visible { outline: 4px solid #61caff; outline-offset: 4px; }
.voice-search { flex-shrink: 0; min-width: 44px; min-height: 44px; }

26
frontend/styles.css
View File

@@ -273,7 +273,7 @@ body::after {
background: linear-gradient(180deg, rgba(16,16,19,0.7), transparent); background: linear-gradient(180deg, rgba(16,16,19,0.7), transparent);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
.search-form { flex: 1; display: flex; gap: 10px; max-width: 760px; position: relative; } .search-form { flex: 1; display: flex; align-items: center; gap: 10px; max-width: 760px; position: relative; }
/* Recent-searches dropdown — device-local, kept in localStorage (RecentSearches in app.js) */ /* Recent-searches dropdown — device-local, kept in localStorage (RecentSearches in app.js) */
.search-recent { .search-recent {
@@ -4257,6 +4257,30 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
.search-form { min-width: 0; } .search-form { min-width: 0; }
.search-form #searchInput { flex: 1 1 auto; min-width: 0; } .search-form #searchInput { flex: 1 1 auto; min-width: 0; }
/* Eager toolbar geometry: these buttons exist before Car mode is loaded. */
.topbar :is(#voiceSearchBtn, #carModeBtn, #updateIconBtn) {
flex: none;
width: 44px; height: 44px; min-width: 44px; min-height: 44px;
padding: 0;
align-items: center; justify-content: center;
display: inline-flex;
}
.topbar #updateIconBtn.hidden { display: none; }
.topbar :is(#voiceSearchBtn, #carModeBtn) svg { width: 22px; height: 22px; flex: none; }
.topbar :is(#voiceSearchBtn, #carModeBtn):hover { transform: none; }
@media (max-width: 430px) {
html[data-layout] .topbar, html[data-layout] #searchForm { gap: 4px; }
html[data-layout] #searchForm .search-btn { flex: none; padding-inline: 8px; }
html[data-layout="f7-swipe"] #searchInput { padding-right: 6px; }
}
@media (max-width: 860px) {
html[data-layout="bento-hub"] .topbar {
padding-top: calc(12px + env(safe-area-inset-top, 0px));
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
}
}
/* iPhone/iPad: no double-tap page zoom (scrolling unaffected) */ /* iPhone/iPad: no double-tap page zoom (scrolling unaffected) */
html.ios-nozoom, html.ios-nozoom body { touch-action: manipulation; } html.ios-nozoom, html.ios-nozoom body { touch-action: manipulation; }