Hide content around iPhone X+ notch

This commit is contained in:
Bubka 2020-09-29 22:46:03 +02:00
parent a98e05766b
commit f80636ee6e
2 changed files with 72 additions and 4 deletions

View File

@ -6,6 +6,18 @@ a:hover {
color: hsl(204, 86%, 53%);
}
@supports (padding-top: env(safe-area-inset-top)) {
#app {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-left);
}
}
@supports (padding-top: constant(safe-area-inset-top)) {
#app {
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-left);
}
}
.main-section {
padding: 1.5rem 1rem 9rem 1rem;
}
@ -25,6 +37,20 @@ a:hover {
width: 100%;
}
@supports (padding-top: env(safe-area-inset-top)) {
.header {
--safe-area-inset-top: env(safe-area-inset-top);
padding-top: calc(1rem + var(--safe-area-inset-top));
}
}
@supports (padding-top: constant(safe-area-inset-top)) {
.header {
--safe-area-inset-top: constant(safe-area-inset-top);
padding-top: calc(1rem + var(--safe-area-inset-top));
}
}
.accounts {
margin-top: 40px;
}
@ -184,15 +210,31 @@ a:hover {
.fullscreen-streamer {
position: fixed;
top: 0;
top: 10%;
left: 0;
height: 100vh;
width: 100%;
height: 65%;
}
/* Corner borders */
.overlay {
background:
linear-gradient(to right, white 1px, transparent 1px) 0 0,
linear-gradient(to right, white 1px, transparent 1px) 0 100%,
linear-gradient(to left, white 1px, transparent 1px) 100% 0,
linear-gradient(to left, white 1px, transparent 1px) 100% 100%,
linear-gradient(to bottom, white 1px, transparent 1px) 0 0,
linear-gradient(to bottom, white 1px, transparent 1px) 100% 0,
linear-gradient(to top, white 1px, transparent 1px) 0 100%,
linear-gradient(to top, white 1px, transparent 1px) 100% 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
}
.fullscreen-alert {
position: fixed;
top: 25vh;
top: 37.5vh;
left: 0;
width: 100%;
padding: 0.75rem;
@ -338,6 +380,20 @@ footer .field.is-grouped {
padding: 0.75rem 1.5rem;
}
@supports (padding-top: env(safe-area-inset-top)) {
.notification {
--safe-area-inset-top: env(safe-area-inset-top);
padding-top: calc(0.75rem + var(--safe-area-inset-top));
}
}
@supports (padding-top: constant(safe-area-inset-top)) {
.notification {
--safe-area-inset-top: constant(safe-area-inset-top);
padding-top: calc(0.75rem + var(--safe-area-inset-top));
}
}
.notification .notification-title {
// Style for title line
}
@ -355,6 +411,18 @@ footer .field.is-grouped {
z-index: 1000;
}
@supports (padding-top: env(safe-area-inset-top)) {
.options-header {
padding-top: env(safe-area-inset-top);
}
}
@supports (padding-top: constant(safe-area-inset-top)) {
.options-header {
padding-top: constant(safe-area-inset-top);
}
}
.options-tabs {
margin-top: 80px;
}

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta name="csrf-token" content="{{csrf_token()}}">
<meta name="robots" content="noindex, nofollow">
<meta name="apple-mobile-web-app-capable" content="yes">