paulmataruso/qbtmud
1
0
Fork 0
mirror of https://github.com/lantean-code/qbtmud.git synced 2025-10-22 20:42:24 +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

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

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