mirror of
https://github.com/element-hq/matrix-authentication-service.git
synced 2026-10-15 13:21:44 +00:00
135 lines
3.4 KiB
CSS
135 lines
3.4 KiB
CSS
/* Copyright 2024, 2025 New Vector Ltd.
|
|
* Copyright 2024 The Matrix.org Foundation C.I.C.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
.overlay,
|
|
.scroll-container {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(3 12 27 / 52.8%);
|
|
}
|
|
|
|
.scroll-container {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100svh;
|
|
}
|
|
|
|
.dialog {
|
|
/* To position the close icon */
|
|
position: relative;
|
|
margin: var(--cpd-space-4x);
|
|
min-width: 0;
|
|
flex: 0 1 520px;
|
|
}
|
|
|
|
.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--cpd-space-4x);
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
}
|
|
|
|
.title {
|
|
font: var(--cpd-font-heading-md-semibold);
|
|
letter-spacing: var(--cpd-font-letter-spacing-heading-md);
|
|
color: var(--cpd-color-text-primary);
|
|
margin-block-start: var(--cpd-space-4x);
|
|
}
|
|
|
|
.dialog .body {
|
|
padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
|
|
}
|
|
|
|
.dialog .title {
|
|
/* This adds a padding to the title to make sure it overflows correctly
|
|
* and not behind the close button */
|
|
padding-inline-end: var(--cpd-space-7x);
|
|
}
|
|
|
|
.dialog .close {
|
|
position: absolute;
|
|
inset-block-start: var(--cpd-space-7x);
|
|
inset-inline-end: var(--cpd-space-7x);
|
|
padding: var(--cpd-space-1x);
|
|
border-radius: var(--cpd-radius-pill-effect);
|
|
background: var(--cpd-color-bg-subtle-secondary);
|
|
color: var(--cpd-color-icon-secondary);
|
|
|
|
& > svg {
|
|
inline-size: var(--cpd-space-5x);
|
|
block-size: var(--cpd-space-5x);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--cpd-color-bg-subtle-primary);
|
|
color: var(--cpd-color-icon-primary);
|
|
}
|
|
}
|
|
|
|
.drawer {
|
|
position: fixed;
|
|
background: var(--cpd-color-bg-canvas-default);
|
|
inset-block-end: 0;
|
|
inset-inline: 0;
|
|
|
|
/* Cap the inline content size at 520px, filling the rest of the space with
|
|
padding */
|
|
padding-inline: max(0px, calc((100% - 520px) / 2));
|
|
border-start-start-radius: var(--border-radius);
|
|
border-start-end-radius: var(--border-radius);
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
/* Make sure the border radius cuts the content */
|
|
overflow: hidden;
|
|
contain: paint;
|
|
|
|
/* Cap the block size */
|
|
max-block-size: calc(100vh - var(--cpd-space-4x));
|
|
/* biome-ignore lint/suspicious/noDuplicateProperties: this isn't a real duplicate */
|
|
max-block-size: calc(100svh - var(--cpd-space-4x));
|
|
|
|
/* Drawer comes in the Android style by default */
|
|
--border-radius: 28px;
|
|
--handle-block-size: 4px;
|
|
--handle-inline-size: 32px;
|
|
--handle-inset-block-start: var(--cpd-space-4x);
|
|
--handle-inset-block-end: 0px;
|
|
}
|
|
|
|
.drawer[data-platform="ios"] {
|
|
--border-radius: 10px;
|
|
--handle-block-size: 5px;
|
|
--handle-inline-size: 36px;
|
|
--handle-inset-block-start: var(--cpd-space-1-5x);
|
|
--handle-inset-block-end: 1px;
|
|
}
|
|
|
|
.drawer .body {
|
|
overflow-y: auto;
|
|
scrollbar-width: none;
|
|
padding-inline: var(--cpd-space-4x);
|
|
margin-block-start: var(--cpd-space-2x);
|
|
padding-block-start: var(--cpd-space-4x);
|
|
padding-block-end: var(--cpd-space-12x);
|
|
}
|
|
|
|
.drawer .handle {
|
|
align-self: center;
|
|
block-size: var(--handle-block-size);
|
|
inline-size: var(--handle-inline-size);
|
|
margin-block-start: var(--handle-inset-block-start);
|
|
margin-block-end: var(--handle-inset-block-end);
|
|
background: var(--cpd-color-icon-secondary);
|
|
border-radius: var(--cpd-radius-pill-effect);
|
|
}
|