paulmataruso/qbtmud
1
0
Fork 0
mirror of https://github.com/lantean-code/qbtmud.git synced 2025-11-02 21:13:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix statusbar on ios

Browse Source
This commit is contained in:
ahjephson
2025-10-20 18:44:18 +01:00
parent d8b4e932d1
commit 9113fb90ee
1 changed files with 39 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
Lantean.QBTMud/wwwroot/css/app.css
View File

@@ -1,4 +1,4 @@
#blazor-error-ui { #blazor-error-ui {
background: lightyellow; background: lightyellow;
bottom: 0; bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
@@ -65,16 +65,11 @@ code {
} }
.mud-appbar.mud-appbar-fixed-bottom { .mud-appbar.mud-appbar-fixed-bottom {
height: var(--app-status-bar-height); height: calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
}
.mud-main-content {
padding: var(--mud-appbar-height) 0 var(--app-status-bar-height);
box-sizing: border-box;
} }
.mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never), .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always { .mud-drawer-fixed.mud-drawer-mini.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-persistent:not(.mud-drawer-clipped-never), .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always, .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
height: calc(100% - var(--mud-appbar-height) - var(--app-status-bar-height)); height: calc(100% - var(--mud-appbar-height) - (var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px)));
} }
.w-100 { .w-100 {
@@ -301,7 +296,13 @@ td .folder-button {
--app-status-bar-height: 35px; --app-status-bar-height: 35px;
} }
@supports (height: 100dvh) { @supports (height: 100svh) {
:root {
--app-viewport-height: 100svh;
}
}
@supports ((height: 100dvh) and (not (height: 100svh))) {
:root { :root {
--app-viewport-height: 100dvh; --app-viewport-height: 100dvh;
} }
@@ -328,8 +329,8 @@ body {
.app-shell { .app-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: var(--app-viewport-height);
min-height: 0; min-height: var(--app-viewport-height);
overflow: hidden; overflow: hidden;
} }
@@ -350,19 +351,42 @@ body {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
overflow: hidden; overflow: hidden;
padding: var(--mud-appbar-height) 0 var(--app-status-bar-height); padding: var(--mud-appbar-height) 0 calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
box-sizing: border-box; box-sizing: border-box;
} }
.app-shell__status-bar.mud-appbar { .app-shell__status-bar.mud-appbar {
flex: 0 0 var(--app-status-bar-height); flex: 0 0 calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
height: var(--app-status-bar-height); height: calc(var(--app-status-bar-height) + env(safe-area-inset-bottom, 0px));
width: 100%; width: 100%;
background-color: var(--mud-palette-dark-lighten); background-color: var(--mud-palette-dark-lighten);
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
box-sizing: border-box;
} }
.app-shell__status-bar .mud-toolbar { .app-shell__status-bar .mud-toolbar {
width: 100%; width: 100%;
height: 100%;
padding-bottom: env(safe-area-inset-bottom, 0px);
background-color: inherit;
box-sizing: border-box;
} }
@supports (-webkit-touch-callout: none) {
:root {
--app-viewport-height: -webkit-fill-available;
}
html,
body {
height: -webkit-fill-available;
min-height: -webkit-fill-available;
}
.app-shell {
height: -webkit-fill-available;
min-height: -webkit-fill-available;
}
}