Robin
f093946a29
By adding viewport-fit=cover to the <meta name="viewport"> header, the page now requests to be displayed edge-to-edge across the entire screen. This gives us control over what we display around camera cut-outs and system navigation UI, if the user agent supports it. I then adjusted the styles of various UI elements to ensure that they still lie within the screen's safe area.
90 lines
1.3 KiB
CSS
90 lines
1.3 KiB
CSS
/*
|
|
Copyright 2021-2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
.headline {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.callEndedContent {
|
|
text-align: center;
|
|
max-width: 450px;
|
|
}
|
|
.callEndedContent p {
|
|
font-size: var(--font-size-subtitle);
|
|
}
|
|
.callEndedContent h3 {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.disconnectedButtons {
|
|
display: grid;
|
|
gap: 50px;
|
|
}
|
|
|
|
.rageshakeButton {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.callEndedButton {
|
|
margin: auto;
|
|
margin-top: 54px;
|
|
}
|
|
|
|
.submitButton {
|
|
width: 100%;
|
|
margin-top: 54px;
|
|
margin-left: 30px;
|
|
margin-right: 30px !important;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
min-height: calc(100% - 64px);
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.main {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-left: var(--content-inset-left);
|
|
padding-right: var(--content-inset-right);
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
margin-bottom: 54px;
|
|
}
|
|
|
|
.headline {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.footer {
|
|
margin-bottom: 44px;
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.logo {
|
|
display: none;
|
|
}
|
|
|
|
.container {
|
|
min-height: calc(100% - 76px);
|
|
}
|
|
|
|
.main {
|
|
justify-content: center;
|
|
}
|
|
}
|