44 lines
1.1 KiB
CSS
44 lines
1.1 KiB
CSS
 
|
/* [cinny #43] "Share your screen?" card, drawn inside the frame just above the
|
||
|
|
host's call bar (the frame's bottom edge). */
|
||
|
|
.prompt {
|
||
|
|
position: fixed;
|
||
|
|
left: 50%;
|
||
|
|
bottom: calc(env(safe-area-inset-bottom) + var(--cpd-space-4x));
|
||
|
|
transform: translateX(-50%);
|
||
|
|
z-index: 2;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: max-content;
|
||
|
|
max-width: min(360px, calc(100% - 2 * var(--cpd-space-2x)));
|
||
|
|
padding: var(--cpd-space-4x);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--cpd-space-2x);
|
||
|
|
background: var(--cpd-color-bg-canvas-default);
|
||
|
|
border: 1px solid var(--cpd-color-border-interactive-secondary);
|
||
|
|
border-radius: var(--cpd-space-3x);
|
||
|
|
box-shadow: 0 8px 32px rgb(0 0 0 / 35%);
|
||
|
|
color: var(--cpd-color-text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: var(--cpd-space-2x);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* The call's picture-in-picture window is only ~158px tall: keep the card to
|
||
|
|
the question and the two buttons. */
|
||
|
|
@media (max-height: 240px) {
|
||
|
|
.prompt {
|
||
|
|
bottom: var(--cpd-space-2x);
|
||
|
|
padding: var(--cpd-space-2x) var(--cpd-space-3x);
|
||
|
|
gap: var(--cpd-space-1-5x);
|
||
|
|
}
|
||
|
|
.description {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|