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

Respect the notch in the Framework7 top bar, sidebar and full sheet

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-06 09:16:49 +08:00
parent 63ff2173d8
commit 128f8e95e3
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/theme-f7.css
View File

@@ -191,7 +191,9 @@ html[data-layout="f7-swipe"] ::-webkit-scrollbar-thumb { background: var(--line)
/* Navigation/search navbar */
html[data-layout="f7-swipe"] .topbar {
position: relative; z-index: 20; min-height: 64px; padding: 9px 16px;
position: relative; z-index: 20; min-height: 64px;
/* Clear the notch / status bar (viewport-fit=cover + black-translucent status bar). */
padding: calc(9px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px));
background: var(--f7-glass); border-bottom: 1px solid var(--f7-hairline);
-webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
}
@@ -210,7 +212,7 @@ html[data-layout="f7-swipe"] .search-recent { top: calc(100% + 8px); border: 1px
html[data-layout="f7-swipe"] .search-recent > * { border-radius: 0; border: 0; border-bottom: 1px solid var(--f7-hairline); background: transparent; min-height: 48px; }
/* Sidebar panel and grouped destinations */
html[data-layout="f7-swipe"] #sidebar { background: var(--bg-1); border-right: 1px solid var(--f7-hairline); padding: 24px 12px max(16px, env(safe-area-inset-bottom)); }
html[data-layout="f7-swipe"] #sidebar { background: var(--bg-1); border-right: 1px solid var(--f7-hairline); padding: calc(24px + env(safe-area-inset-top, 0px)) 12px max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left, 0px)); }
html[data-layout="f7-swipe"] #sidebar .brand { font: 700 22px/1.2 var(--ui, system-ui, sans-serif); padding: 4px 12px 24px; }
html[data-layout="f7-swipe"] #sidebar .sidebar-section-title,
html[data-layout="f7-swipe"] #sidebar .pl-header,
@@ -320,7 +322,7 @@ html[data-layout="f7-swipe"] #modalBody { box-shadow: none; }
html[data-layout="f7-swipe"] #modalActions button { min-height: 48px; border-radius: 12px; }
html[data-layout="f7-swipe"] #modal .modal { background: var(--bg-1); }
html[data-layout="f7-swipe"] .f7s-sheet { box-shadow: none; border-radius: 18px 18px 0 0; }
html[data-layout="f7-swipe"] .f7s-sheet.f7s-full { top: 0; bottom: 0; height: 100dvh; max-height: none; border-radius: 0; }
html[data-layout="f7-swipe"] .f7s-sheet.f7s-full { top: 0; bottom: 0; height: 100dvh; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box; }
html[data-layout="f7-swipe"] #sectionRail { top: auto; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); transform: none; border: 1px solid var(--f7-hairline); border-radius: 22px; background: var(--f7-glass); box-shadow: 0 4px 16px rgb(0 0 0 / .12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html[data-layout="f7-swipe"] #sectionRail button { min-width: 44px; min-height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); }
html[data-layout="f7-swipe"] #sectionRail button.active { color: var(--accent); }
@@ -328,7 +330,7 @@ html[data-layout="f7-swipe"] #serviceMode, html[data-layout="f7-swipe"] #partyPa
html[data-layout="f7-swipe"] #remoteView, html[data-layout="f7-swipe"] #presenterView { color: var(--text); font-family: var(--ui, system-ui, sans-serif); }
@media (max-width: 860px) {
html[data-layout="f7-swipe"] .topbar { padding-inline: 10px; }
html[data-layout="f7-swipe"] .topbar { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
html[data-layout="f7-swipe"] .body { touch-action: pan-y; }
html[data-layout="f7-swipe"] #cards { margin-inline: 10px; }
html[data-layout="f7-swipe"] .bottom-nav { display: flex; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }