mirror of
https://github.com/fluxerapp/fluxer
synced 2026-10-18 21:45:31 +09:00
1565 lines
35 KiB
CSS
1565 lines
35 KiB
CSS
/* SPDX-License-Identifier: AGPL-3.0-or-later */
|
|
|
|
:global(.lk-grid-layout) {
|
|
--lk-col-count: 1;
|
|
--lk-row-count: 1;
|
|
--grid-gap: 0.75rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--lk-col-count), 1fr);
|
|
gap: var(--grid-gap);
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
padding: 0;
|
|
place-items: center;
|
|
align-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
:global(.lk-grid-layout[data-lk-pagination='true']) {
|
|
padding-bottom: calc(var(--grid-gap) * 2);
|
|
}
|
|
|
|
:global(:root) {
|
|
--voice-surface-0: #0d0d0f;
|
|
--voice-surface-1: #151517;
|
|
--voice-surface-2: #1c1c1e;
|
|
--voice-surface-3: #232326;
|
|
--voice-surface-4: #2a2a2d;
|
|
--voice-surface-5: #353539;
|
|
--voice-overlay-base: #000;
|
|
--voice-overlay-strong: rgba(0, 0, 0, 0.78);
|
|
--voice-overlay: rgba(0, 0, 0, 0.62);
|
|
--voice-overlay-soft: rgba(0, 0, 0, 0.46);
|
|
--voice-overlay-subtle: rgba(0, 0, 0, 0.32);
|
|
--voice-overlay-light: rgba(255, 255, 255, 0.12);
|
|
--voice-overlay-light-strong: rgba(255, 255, 255, 0.2);
|
|
--voice-overlay-light-bold: rgba(255, 255, 255, 0.48);
|
|
--voice-text-strong: #fff;
|
|
--voice-text-muted: rgba(255, 255, 255, 0.72);
|
|
--voice-text-subtle: rgba(255, 255, 255, 0.52);
|
|
--voice-shadow-base: #000;
|
|
--voice-shadow-strong: color-mix(in srgb, var(--voice-shadow-base) 40%, transparent);
|
|
--voice-shadow-medium: color-mix(in srgb, var(--voice-shadow-base) 30%, transparent);
|
|
--voice-shadow-soft: color-mix(in srgb, var(--voice-shadow-base) 20%, transparent);
|
|
--voice-status-success: var(--status-online);
|
|
--voice-status-success-bg: color-mix(in srgb, var(--voice-status-success) 20%, transparent);
|
|
--voice-status-success-bg-solid: color-mix(in srgb, var(--voice-status-success) 20%, var(--voice-surface-2));
|
|
--voice-status-success-bg-strong: color-mix(in srgb, var(--voice-status-success) 30%, transparent);
|
|
--voice-status-success-bg-strong-solid: color-mix(in srgb, var(--voice-status-success) 30%, var(--voice-surface-2));
|
|
--voice-status-warning: var(--status-warning);
|
|
--voice-status-warning-alt: var(--status-idle);
|
|
--voice-status-caution: var(--alert-caution-color);
|
|
--voice-status-warning-bg: color-mix(in srgb, var(--voice-status-warning-alt) 20%, transparent);
|
|
--voice-status-danger: var(--status-danger);
|
|
--voice-status-danger-bg: color-mix(in srgb, var(--voice-status-danger) 20%, transparent);
|
|
--voice-status-danger-bg-solid: color-mix(in srgb, var(--voice-status-danger) 20%, var(--voice-surface-2));
|
|
--voice-status-danger-bg-strong: color-mix(in srgb, var(--voice-status-danger) 30%, transparent);
|
|
--voice-status-danger-bg-strong-solid: color-mix(in srgb, var(--voice-status-danger) 30%, var(--voice-surface-2));
|
|
--voice-hud-material-top: #000;
|
|
--voice-hud-material-bottom: #000;
|
|
--voice-hud-material-highlight: transparent;
|
|
--voice-hud-material-border: rgba(255, 255, 255, 0.1);
|
|
--voice-hud-material-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.24);
|
|
--voice-hud-material-blur: none;
|
|
--voice-hud-button-bg: #000;
|
|
--voice-hud-button-bg-hover: #111;
|
|
--voice-edge-gradient-extension: 2.5rem;
|
|
--voice-edge-gradient-base: rgba(0, 0, 0, 0.84);
|
|
--voice-edge-gradient-mid: rgba(0, 0, 0, 0.58);
|
|
--voice-edge-gradient-feather: rgba(0, 0, 0, 0.24);
|
|
--voice-header-gradient: linear-gradient(
|
|
to bottom,
|
|
var(--voice-edge-gradient-base) 0%,
|
|
var(--voice-edge-gradient-mid) 38%,
|
|
var(--voice-edge-gradient-feather) 70%,
|
|
transparent 100%
|
|
);
|
|
--voice-footer-gradient: linear-gradient(
|
|
to top,
|
|
var(--voice-edge-gradient-base) 0%,
|
|
var(--voice-edge-gradient-mid) 38%,
|
|
var(--voice-edge-gradient-feather) 70%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.lkParticipantTile {
|
|
--speaking-indicator-width: 0.21875rem;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
container-type: size;
|
|
overflow: hidden;
|
|
border-radius: 0.75rem;
|
|
background-color: var(--voice-surface-2);
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.lkParticipantTile::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: var(--radius-lg);
|
|
border: 0 solid var(--voice-status-success);
|
|
transition-property: border;
|
|
transition-delay: 0.1s;
|
|
transition-duration: 0.2s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pinnedParticipant::after {
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
.lkParticipantTile[data-speaking='true']::after {
|
|
transition-delay: 0s;
|
|
transition-duration: 0.2s;
|
|
border-width: var(--speaking-indicator-width);
|
|
}
|
|
|
|
.lkParticipantTile video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
background-color: var(--voice-surface-0);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.lkParticipantTile[data-source='screen_share'] {
|
|
background-color: var(--voice-surface-0);
|
|
}
|
|
|
|
.lkParticipantTile[data-source='screen_share'] video {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.lkParticipantPlaceholder {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--voice-surface-3);
|
|
opacity: 0;
|
|
transition: none;
|
|
pointer-events: none;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.lkParticipantTile[data-video-muted='true'] .lkParticipantPlaceholder {
|
|
opacity: 1;
|
|
}
|
|
|
|
.lkParticipantPlaceholder .avatar {
|
|
font-size: 3rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.lkParticipantMetadata {
|
|
position: absolute;
|
|
inset: 0.375rem;
|
|
display: block;
|
|
line-height: 1.2;
|
|
z-index: 10;
|
|
min-width: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.participantMetadataLabel {
|
|
--participant-metadata-max-width: min(34ch, calc(100cqw - 1rem));
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.1875rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
max-width: var(--participant-metadata-max-width);
|
|
margin-left: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.participantName {
|
|
margin-left: 0.1875rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.participantConn {
|
|
margin-left: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.lkParticipantMetadataItem {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding: 0.1875rem 0.375rem;
|
|
border: 0.0625rem solid var(--voice-hud-material-border);
|
|
border-radius: 0.5625rem;
|
|
background: #000;
|
|
box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.18);
|
|
color: var(--voice-text-strong);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
min-width: 0;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.lkParticipantIcons {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.participantMetadataMenuButton {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin: -0.125rem 0.1875rem -0.125rem -0.1875rem;
|
|
border-radius: 0.4375rem;
|
|
color: rgba(255, 255, 255, 0.78);
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
transition:
|
|
background-color 80ms linear,
|
|
color 80ms linear;
|
|
}
|
|
|
|
.participantMetadataMenuButton:hover,
|
|
.participantMetadataMenuButton:focus-visible,
|
|
.participantMetadataMenuButton[data-context-menu-open='true'] {
|
|
background-color: #111;
|
|
color: #fff;
|
|
}
|
|
|
|
.participantMetadataMenuButton svg {
|
|
width: 0.9375rem;
|
|
height: 0.9375rem;
|
|
}
|
|
|
|
.lkParticipantMetadataItem > span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.lkParticipantMetadataItem:first-child {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
max-width: min(100%, calc(100cqw - 0.75rem));
|
|
}
|
|
|
|
.tileControlPill {
|
|
position: absolute;
|
|
top: 0.375rem;
|
|
left: 0.375rem;
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
height: 1.5rem;
|
|
background: #000;
|
|
border-radius: 0.5rem;
|
|
color: var(--voice-text-strong);
|
|
opacity: 0;
|
|
border: 0.0625rem solid var(--voice-hud-material-border);
|
|
box-shadow: var(--voice-hud-material-shadow);
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 80ms linear,
|
|
background-color 80ms linear;
|
|
}
|
|
|
|
.tileControlPill.tileControlPillPersistent {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.tileControlPillSlot {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.5rem;
|
|
height: 100%;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
transition: background-color 80ms linear;
|
|
}
|
|
|
|
.tileControlPillSlot + .tileControlPillSlot {
|
|
border-left: 0.0625rem solid var(--voice-hud-material-border);
|
|
}
|
|
|
|
.tileControlPillSlot:hover {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%);
|
|
}
|
|
|
|
.tileControlPillViewerSlot {
|
|
gap: 0.1875rem;
|
|
padding: 0 0.375rem;
|
|
cursor: pointer;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.tileControlPillViewerSlot:hover {
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%);
|
|
}
|
|
|
|
.lkParticipantTile:hover .tileControlPill,
|
|
.lkParticipantTile:focus-within .tileControlPill {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.gridLayoutWrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
padding: 1rem 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.gridLayoutWrapperCompact {
|
|
padding: max(clamp(0.25rem, 1.6cqh, 0.4rem), var(--compact-call-content-safe-top, 0px)) 0
|
|
max(clamp(0.35rem, 2cqh, 0.65rem), var(--compact-call-content-safe-bottom, 0px));
|
|
}
|
|
|
|
.focusLayoutContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.focusLayoutScroller {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.focusLayoutScrollerContent {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.gridLayoutScroller {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.gridLayoutStaticViewport {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gridLayoutScrollerContent {
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gridLayoutScrollBody {
|
|
min-height: 100%;
|
|
height: 100%;
|
|
flex: 1 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.gridLayoutScrollBodyCompact {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.focusLayoutScrollBody {
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
gap: 1rem;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.focusExpandedScrollBody {
|
|
--focus-expanded-mini-columns: 1;
|
|
--focus-expanded-mini-grid-gap: var(--focus-mini-grid-gap, 0.75rem);
|
|
--focus-expanded-mini-tile-max-width: var(--focus-mini-tile-max-width, 23.75rem);
|
|
--focus-expanded-mini-section-width: min(96cqw, 105rem);
|
|
--focus-expanded-mini-section-padding-inline: clamp(0.5rem, 1.2vw, 1.25rem);
|
|
--focus-expanded-mini-content-width: max(
|
|
0px,
|
|
calc(var(--focus-expanded-mini-section-width) - (2 * var(--focus-expanded-mini-section-padding-inline)))
|
|
);
|
|
--focus-expanded-mini-column-width: max(
|
|
0px,
|
|
calc(
|
|
(
|
|
var(--focus-expanded-mini-content-width) -
|
|
((var(--focus-expanded-mini-columns) - 1) * var(--focus-expanded-mini-grid-gap))
|
|
) /
|
|
var(--focus-expanded-mini-columns)
|
|
)
|
|
);
|
|
--focus-expanded-mini-row-height: calc(
|
|
min(var(--focus-expanded-mini-tile-max-width), var(--focus-expanded-mini-column-width)) *
|
|
9 / 16
|
|
);
|
|
--focus-expanded-reserved-bottom-height: calc(44px + 2.5rem + var(--focus-expanded-mini-row-height));
|
|
--focus-expanded-main-max-height: max(180px, calc(100cqh - var(--focus-expanded-reserved-bottom-height)));
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
gap: 0.75rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.focusExpandedMainSection {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 0.125rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.focusExpandedMainGridViewport {
|
|
width: min(100%, calc(var(--focus-expanded-main-max-height) * 16 / 9));
|
|
max-width: 95rem;
|
|
aspect-ratio: 16 / 9;
|
|
min-height: min(180px, var(--focus-expanded-main-max-height));
|
|
max-height: var(--focus-expanded-main-max-height);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.focusExpandedMainGridViewport > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.focusExpandedToggleRow {
|
|
width: min(96%, 105rem);
|
|
max-width: 105rem;
|
|
margin-inline: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 0.125rem;
|
|
padding-bottom: 0.25rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.carouselToggleWrap {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: var(--voice-participants-toggle-bottom, 0.5rem);
|
|
transform: translateX(-50%);
|
|
width: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
z-index: 60;
|
|
}
|
|
|
|
.carouselToggle {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
min-width: 2.5rem;
|
|
min-height: 2.5rem;
|
|
padding: 0;
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000;
|
|
color: var(--text-primary);
|
|
border-radius: 0.9375rem;
|
|
cursor: pointer;
|
|
border: 0.0625rem solid var(--voice-hud-material-border);
|
|
box-shadow: var(--voice-hud-material-shadow);
|
|
z-index: 1;
|
|
transition: background-color 80ms linear;
|
|
}
|
|
|
|
.carouselToggle:hover {
|
|
background: #111;
|
|
}
|
|
|
|
.focusLayoutMainWrapper {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.focusLayoutMembersRow {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: var(--voice-focus-members-row-bottom, 0px);
|
|
width: 100%;
|
|
height: var(--voice-focus-members-row-height, 7.25rem);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem clamp(0.75rem, 2vw, 1.5rem);
|
|
box-sizing: border-box;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.focusLayoutMembersRow::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.focusLayoutMembersRowInner {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
min-width: max-content;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.focusLayoutMembersRowTile {
|
|
flex: 0 0 auto;
|
|
width: min(clamp(7rem, 10vw, 9.75rem), calc((var(--voice-focus-members-row-height, 7rem) - 0.75rem) * 16 / 9));
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.focusLayoutMembersRowTile .lkParticipantTile {
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.focusMembersToggleWrap {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: var(--voice-focus-members-toggle-bottom, var(--voice-focus-control-clearance, 4.5rem));
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: auto;
|
|
z-index: 40;
|
|
}
|
|
|
|
.focusLayoutContentFullscreenMembersVisible .focusMembersToggleWrap {
|
|
--voice-focus-members-toggle-bottom: calc(
|
|
var(--voice-focus-control-clearance, 4.5rem) +
|
|
var(--voice-focus-members-row-height, 7.25rem) +
|
|
0.5rem
|
|
);
|
|
}
|
|
|
|
.focusMembersToggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
height: 2rem;
|
|
padding: 0 0.75rem;
|
|
border-radius: 62.4375rem;
|
|
border: 0.0625rem solid var(--voice-hud-material-border);
|
|
background: #000;
|
|
color: var(--voice-text-strong);
|
|
cursor: pointer;
|
|
box-shadow: var(--voice-hud-material-shadow);
|
|
transition: background-color 80ms linear;
|
|
}
|
|
|
|
.focusMembersToggle:hover {
|
|
background: #111;
|
|
}
|
|
|
|
.focusMembersToggleIcon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.focusMembersToggleFocusRing {
|
|
border-radius: 624.9375rem;
|
|
}
|
|
|
|
.focusMiniGridSection {
|
|
width: min(96%, 105rem);
|
|
max-width: 105rem;
|
|
margin-inline: auto;
|
|
padding: 0 var(--focus-expanded-mini-section-padding-inline, clamp(0.5rem, 1.2vw, 1.25rem)) 1rem;
|
|
box-sizing: border-box;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.focusMiniGrid {
|
|
--focus-mini-columns: 1;
|
|
--focus-mini-grid-gap: 0.75rem;
|
|
--focus-mini-tile-max-width: 23.75rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: flex-start;
|
|
width: 100%;
|
|
gap: var(--focus-mini-grid-gap);
|
|
}
|
|
|
|
.focusMiniGridTile {
|
|
width: min(
|
|
calc((100% - (var(--focus-mini-columns) - 1) * var(--focus-mini-grid-gap)) / var(--focus-mini-columns)),
|
|
var(--focus-mini-tile-max-width)
|
|
);
|
|
max-width: min(
|
|
calc((100% - (var(--focus-mini-columns) - 1) * var(--focus-mini-grid-gap)) / var(--focus-mini-columns)),
|
|
var(--focus-mini-tile-max-width)
|
|
);
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.focusMiniGridTile .lkParticipantTile {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.focusLayoutMain {
|
|
position: relative;
|
|
--focus-main-aspect-ratio-value: 1.7777777778;
|
|
width: 100%;
|
|
max-width: min(100%, calc(min(76dvh, calc(100cqh - 3rem)) * var(--focus-main-aspect-ratio-value)));
|
|
height: auto;
|
|
max-height: min(76dvh, calc(100cqh - 3rem));
|
|
aspect-ratio: var(--focus-main-aspect-ratio-value);
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile[data-source='screen_share'] {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile::after {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile[data-source='screen_share']::after {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile video {
|
|
border-radius: 0;
|
|
object-fit: contain;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile[data-source='screen_share'] video {
|
|
border-radius: 0;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantPlaceholder {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile[data-source='screen_share'] .lkParticipantPlaceholder {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.lkParticipantTile[data-source='screen_share'] .lkParticipantPlaceholder {
|
|
background-color: var(--voice-surface-0) !important;
|
|
}
|
|
|
|
.focusLayoutContent {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
padding: 1rem 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
gap: 0;
|
|
box-sizing: border-box;
|
|
container-type: size;
|
|
|
|
--content-padding: 2rem;
|
|
}
|
|
|
|
.focusLayoutContentCompact {
|
|
padding: 0;
|
|
--content-padding: clamp(0.25rem, 1.6cqh, 0.5rem);
|
|
}
|
|
|
|
.focusLayoutContentCompact .focusLayoutScrollBody {
|
|
gap: clamp(0.25rem, 1.6cqh, 0.5rem);
|
|
}
|
|
|
|
.focusLayoutContentCompact .focusLayoutMainWrapper {
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.focusLayoutContentCompact .focusLayoutMain {
|
|
width: 100%;
|
|
max-width: min(100%, calc(min(90dvh, calc(100cqh - 0.5rem)) * var(--focus-main-aspect-ratio-value)));
|
|
max-height: min(90dvh, calc(100cqh - 0.5rem));
|
|
border-radius: 0;
|
|
}
|
|
|
|
.focusLayoutContentCompact .focusLayoutMain .lkParticipantTile,
|
|
.focusLayoutContentCompact .focusLayoutMain .lkParticipantTile::after,
|
|
.focusLayoutContentCompact .focusLayoutMain .lkParticipantPlaceholder,
|
|
.focusLayoutContentCompact .focusLayoutMain .lkParticipantTile video {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.focusLayoutContentCompact .focusMiniGrid {
|
|
--focus-mini-grid-gap: clamp(0.25rem, 1.6cqh, 0.5rem);
|
|
--focus-mini-tile-max-width: clamp(9rem, 58cqh, 13.25rem);
|
|
}
|
|
|
|
.focusLayoutContentCompact .focusMiniGridSection {
|
|
width: 100%;
|
|
padding: 0 var(--content-padding) var(--content-padding);
|
|
}
|
|
|
|
.focusLayoutContentNoParticipants {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.focusLayoutContentNoParticipants .focusLayoutScrollBody {
|
|
height: 100%;
|
|
}
|
|
|
|
.focusLayoutContentNoParticipants .focusLayoutMain {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.focusLayoutContentCompact.focusLayoutContentNoParticipants .focusLayoutMain {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.focusLayoutParticipantsExpanded .focusLayoutMain {
|
|
max-height: min(68dvh, calc(100cqh - 8rem));
|
|
}
|
|
|
|
.focusLayoutParticipantsExpanded .focusLayoutScroller {
|
|
min-height: 0;
|
|
}
|
|
|
|
.focusLayoutContentFullscreen {
|
|
padding: 0;
|
|
--content-padding: 0px;
|
|
--voice-focus-control-clearance: 0px;
|
|
--voice-focus-members-row-height: 0px;
|
|
--voice-focus-members-row-bottom: 0px;
|
|
}
|
|
|
|
.focusLayoutContentFullscreen .focusLayoutMainWrapper {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.focusLayoutContentFullscreen .focusLayoutMain {
|
|
position: relative;
|
|
inset: auto;
|
|
width: min(100%, calc(100cqh * var(--focus-main-aspect-ratio-value)));
|
|
height: auto;
|
|
max-width: none;
|
|
max-height: 100%;
|
|
aspect-ratio: var(--focus-main-aspect-ratio-value);
|
|
margin-inline: 0;
|
|
box-sizing: border-box;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
background-color: var(--voice-surface-0);
|
|
}
|
|
|
|
.focusLayoutContentFullscreen .focusLayoutMain .lkParticipantTile {
|
|
position: relative;
|
|
inset: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.focusLayoutContentFullscreen .focusLayoutScrollBody {
|
|
height: 100%;
|
|
min-height: 0;
|
|
gap: 0;
|
|
padding-bottom: 0;
|
|
justify-content: stretch;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.focusLayoutContentAppFullscreen {
|
|
--voice-focus-control-clearance: calc(4.5rem + env(safe-area-inset-bottom, 0px));
|
|
--voice-focus-members-row-height: clamp(5.375rem, 13cqh, 7rem);
|
|
--voice-focus-members-row-bottom: var(--voice-focus-control-clearance);
|
|
--voice-focus-members-toggle-bottom: calc(var(--voice-focus-control-clearance) + 0.5rem);
|
|
}
|
|
|
|
.focusLayoutContentAppFullscreen .focusLayoutMain {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.focusLayoutContentAppFullscreen.focusLayoutContentFullscreenMembersVisible {
|
|
--voice-focus-safe-bottom: calc(
|
|
var(--voice-focus-members-row-height, 7.25rem) +
|
|
var(--voice-focus-control-clearance)
|
|
);
|
|
}
|
|
|
|
.focusLayoutContentFullscreenMembersVisible::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: calc(var(--voice-focus-members-row-bottom, 0px) + var(--voice-focus-members-row-height, 7.25rem) + 2.5rem);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
background: linear-gradient(to top, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0) 100%);
|
|
}
|
|
|
|
@container (min-width: 620px) {
|
|
.focusExpandedScrollBody {
|
|
--focus-expanded-mini-columns: 2;
|
|
}
|
|
|
|
.focusMiniGrid {
|
|
--focus-mini-columns: 2;
|
|
}
|
|
}
|
|
|
|
@container (min-width: 760px) {
|
|
.focusExpandedScrollBody {
|
|
--focus-expanded-mini-columns: 3;
|
|
}
|
|
|
|
.focusMiniGrid {
|
|
--focus-mini-columns: 3;
|
|
}
|
|
}
|
|
|
|
@container (min-width: 1040px) {
|
|
.focusExpandedScrollBody {
|
|
--focus-expanded-mini-columns: 4;
|
|
}
|
|
|
|
.focusMiniGrid {
|
|
--focus-mini-columns: 4;
|
|
}
|
|
}
|
|
|
|
.voiceCallFullscreen {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
z-index: 39999;
|
|
background-color: #000;
|
|
}
|
|
|
|
.voiceCallFullscreen::backdrop {
|
|
background-color: #000;
|
|
}
|
|
|
|
:global(:root[data-voice-call-fullscreen='true']),
|
|
:global(:root[data-voice-call-fullscreen='true'] body) {
|
|
background-color: #000;
|
|
}
|
|
|
|
.voiceRoot {
|
|
position: relative;
|
|
--voice-hud-opacity: 0;
|
|
--voice-hud-pointer-events: none;
|
|
--voice-hud-transition-duration: 220ms;
|
|
--voice-hud-transition-easing: cubic-bezier(0.2, 0, 0, 1);
|
|
}
|
|
|
|
.voiceRoot.forceHudVisible {
|
|
--voice-hud-opacity: 1;
|
|
--voice-hud-pointer-events: auto;
|
|
}
|
|
|
|
.voiceRoot.pointerActive,
|
|
.voiceRoot:not(.voiceCallFullscreen):focus-within,
|
|
.voiceRoot.contextMenuActive,
|
|
.voiceRoot.keyboardModeActive,
|
|
.voiceRoot.containerResizing,
|
|
.voiceRoot.interactionActive {
|
|
--voice-hud-opacity: 1;
|
|
--voice-hud-pointer-events: auto;
|
|
}
|
|
|
|
.voiceRoot
|
|
:where(
|
|
.voiceChrome,
|
|
.carouselToggleWrap,
|
|
.focusMembersToggleWrap,
|
|
.lkParticipantMetadata,
|
|
.lkParticipantTile .tileControlPill
|
|
) {
|
|
opacity: var(--voice-hud-opacity);
|
|
pointer-events: var(--voice-hud-pointer-events);
|
|
transition: opacity var(--voice-hud-transition-duration) var(--voice-hud-transition-easing);
|
|
}
|
|
|
|
.voiceRoot .lkParticipantMetadata {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.lkParticipantTile[data-tile-presentation='focus-main'] .lkParticipantMetadataItem,
|
|
.lkParticipantTile[data-tile-presentation='focus-secondary'] .lkParticipantMetadataItem {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.voiceRoot .lkParticipantTile .tileControlPill.tileControlPillPersistent {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.voiceRoot .lkParticipantTile:is(:hover, :focus-within) .tileControlPill {
|
|
opacity: var(--voice-hud-opacity);
|
|
pointer-events: var(--voice-hud-pointer-events);
|
|
}
|
|
|
|
.tileContextMenuActive {
|
|
--voice-hud-opacity: 1;
|
|
--voice-hud-pointer-events: auto;
|
|
}
|
|
|
|
@container (max-width: 280px) {
|
|
.lkParticipantMetadata {
|
|
inset: 0.3125rem;
|
|
}
|
|
|
|
.lkParticipantMetadataItem {
|
|
padding: 0.125rem 0.3125rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.6875rem;
|
|
}
|
|
|
|
.participantMetadataMenuButton {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
margin-right: 0.125rem;
|
|
}
|
|
|
|
.tileControlPill {
|
|
top: 0.3125rem;
|
|
left: 0.3125rem;
|
|
height: 1.375rem;
|
|
border-radius: 0.4375rem;
|
|
}
|
|
|
|
.tileControlPillSlot {
|
|
min-width: 1.375rem;
|
|
}
|
|
}
|
|
|
|
@container (max-width: 220px) {
|
|
.participantMetadataMenuButton {
|
|
display: none;
|
|
}
|
|
|
|
.lkParticipantIcons {
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
|
|
.voiceHeader {
|
|
grid-area: header;
|
|
z-index: 25;
|
|
--channel-header-text-primary: #fff;
|
|
--channel-header-text-muted: #fff;
|
|
--channel-header-text-tertiary: #fff;
|
|
--channel-header-divider-color: #fff;
|
|
--channel-header-hover-background: rgb(255 255 255 / 0.16);
|
|
--channel-header-update-icon-color: #fff;
|
|
--voice-call-header-text: #fff;
|
|
background: transparent !important;
|
|
border-bottom: none !important;
|
|
box-shadow: none !important;
|
|
color: var(--channel-header-text-primary);
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.voiceEdgeFadeTop,
|
|
.voiceEdgeFadeBottom {
|
|
isolation: isolate;
|
|
}
|
|
|
|
.voiceEdgeFadeTop::before,
|
|
.voiceEdgeFadeBottom::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--voice-edge-gradient);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.voiceEdgeFadeTop::before {
|
|
--voice-edge-gradient: var(--voice-header-gradient);
|
|
top: 0;
|
|
bottom: calc(0px - var(--voice-edge-gradient-extension));
|
|
z-index: -1;
|
|
}
|
|
|
|
.voiceEdgeFadeBottom::before {
|
|
--voice-edge-gradient: var(--voice-footer-gradient);
|
|
bottom: 0;
|
|
height: calc(100% + var(--voice-edge-gradient-extension));
|
|
z-index: 0;
|
|
}
|
|
|
|
.voiceEdgeFadeBottom > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.mobileFocusMembersVisible .voiceEdgeFadeBottom::before {
|
|
height: calc(100% + clamp(8.25rem, 20dvh, 13.75rem));
|
|
}
|
|
|
|
.voiceHeaderBackButton,
|
|
.voiceHeaderIconButton {
|
|
width: 2.125rem;
|
|
height: 2.125rem;
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 0.8125rem;
|
|
background-color: var(--voice-hud-button-bg);
|
|
box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.055);
|
|
color: rgba(255, 255, 255, 0.84);
|
|
transition:
|
|
background-color 80ms linear,
|
|
border-color 80ms linear,
|
|
color 80ms linear;
|
|
}
|
|
|
|
.voiceHeaderBackButton:hover,
|
|
.voiceHeaderIconButton:hover,
|
|
.voiceHeaderIconButton[aria-pressed='true'],
|
|
.voiceHeaderIconButton[aria-expanded='true'] {
|
|
border-color: rgba(255, 255, 255, 0.14);
|
|
background-color: var(--voice-hud-button-bg-hover);
|
|
color: #fff;
|
|
}
|
|
|
|
.voiceHeaderBackButton > svg,
|
|
.voiceHeaderIconButton > svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
:global(.lk-pagination-indicator) {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0.75rem;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
border: 0.0625rem solid var(--voice-hud-material-border);
|
|
border-radius: 62.4375rem;
|
|
background: #000;
|
|
box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.18);
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
:global(.lk-pagination-indicator > span) {
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
border-radius: 624.9375rem;
|
|
background: var(--voice-overlay-light-bold);
|
|
}
|
|
|
|
:global(.lk-pagination-indicator > span[data-lk-active]) {
|
|
background: var(--voice-text-strong);
|
|
}
|
|
|
|
:global(.lk-pagination-control) {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0.75rem;
|
|
transform: translateX(-50%);
|
|
border: 0.0625rem solid var(--voice-hud-material-border);
|
|
border-radius: 62.4375rem;
|
|
background: #000;
|
|
box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.18);
|
|
padding: 0.25rem 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--voice-text-strong);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
:global(.lk-pagination-control .lk-pagination-count) {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mainContent {
|
|
--voice-call-horizontal-padding: 1rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
justify-content: flex-start;
|
|
align-items: stretch;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.focusLayoutMain {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.focusLayoutMain .lkParticipantTile {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.focusMiniGrid {
|
|
--focus-mini-tile-size: clamp(var(--focus-mini-tile-min-width), 24vw, var(--focus-mini-tile-max-width));
|
|
--focus-mini-grid-gap: 0.5rem;
|
|
}
|
|
|
|
.focusMiniGridTile {
|
|
max-width: var(--focus-mini-tile-max-width);
|
|
}
|
|
|
|
.gridLayoutWrapper {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.focusLayoutContent {
|
|
--content-padding: 1.5rem;
|
|
}
|
|
|
|
.carouselToggleWrap {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.voiceRoot {
|
|
--voice-hud-opacity: 1;
|
|
--voice-hud-pointer-events: auto;
|
|
}
|
|
|
|
.controlBarContainer {
|
|
--voice-control-horizontal-padding: 1rem;
|
|
--voice-control-top-padding: 0.5rem;
|
|
--voice-control-bottom-padding: calc(0.75rem + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.fullscreenButtonWrap {
|
|
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
|
|
right: 1rem;
|
|
}
|
|
}
|
|
|
|
.screenshareGridLayout {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.screenshareGridLayout .lkParticipantTile {
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.root {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
grid-template-areas: 'header' 'main' 'footer';
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #000;
|
|
--voice-focus-safe-top: 4rem;
|
|
--voice-focus-safe-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
|
|
}
|
|
|
|
.rootFocused .mainContent {
|
|
grid-row: 1 / -1;
|
|
grid-column: 1 / -1;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rootFocused .voiceHeader {
|
|
grid-area: header;
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
z-index: 25;
|
|
}
|
|
|
|
.rootFocused .controlBarContainer {
|
|
grid-row: 3;
|
|
z-index: 30;
|
|
}
|
|
|
|
.connectionStatusContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
border-radius: 62.4375rem;
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
border: 0.0625rem solid color-mix(in srgb, currentColor 18%, transparent);
|
|
background: #000;
|
|
box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.06);
|
|
font-weight: 600;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.statusConnecting {
|
|
background-color: #000;
|
|
color: var(--voice-status-warning);
|
|
}
|
|
|
|
.statusReconnecting {
|
|
background-color: #000;
|
|
color: var(--voice-status-warning);
|
|
}
|
|
|
|
.statusDisconnected {
|
|
background-color: #000;
|
|
color: var(--voice-status-danger);
|
|
}
|
|
|
|
.statusConnected {
|
|
background-color: #000;
|
|
color: var(--voice-status-success);
|
|
}
|
|
|
|
.connectionStatusDot {
|
|
height: 0.5rem;
|
|
width: 0.5rem;
|
|
border-radius: 624.9375rem;
|
|
background-color: currentColor;
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.mainContent {
|
|
grid-area: main;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
--voice-call-horizontal-padding: clamp(1rem, 8vw, 14rem);
|
|
--voice-call-safe-top-padding: max(
|
|
clamp(1.25rem, 3.5dvh, 2.25rem),
|
|
calc(var(--voice-edge-gradient-extension) + 0.5rem)
|
|
);
|
|
--voice-call-safe-bottom-padding: max(
|
|
clamp(1.25rem, 3.5dvh, 2.25rem),
|
|
calc(var(--voice-edge-gradient-extension) + 0.5rem)
|
|
);
|
|
padding-left: var(--voice-call-horizontal-padding);
|
|
padding-right: var(--voice-call-horizontal-padding);
|
|
padding-top: var(--voice-call-safe-top-padding);
|
|
padding-bottom: var(--voice-call-safe-bottom-padding);
|
|
min-height: 0;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
container-type: size;
|
|
}
|
|
|
|
.mainContentGrid {
|
|
--voice-call-horizontal-padding: 0px;
|
|
}
|
|
|
|
.mainContentFocusFullscreen {
|
|
--voice-call-horizontal-padding: 0px;
|
|
--voice-call-safe-top-padding: 0px;
|
|
--voice-call-safe-bottom-padding: 0px;
|
|
position: relative;
|
|
inset: auto;
|
|
height: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.audioAvatarFallback {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 clamp(1rem, 6vw, 4rem);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.audioAvatarFallbackList {
|
|
--avatar-voice-indicator-cutout-surface: #000;
|
|
max-width: 56rem;
|
|
}
|
|
|
|
.voiceCallPendingMain {
|
|
grid-area: main;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
background: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.controlBarContainer {
|
|
grid-area: footer;
|
|
position: relative;
|
|
z-index: 30;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: transparent;
|
|
--voice-control-horizontal-padding: 1.5rem;
|
|
--voice-control-top-padding: 0.5rem;
|
|
--voice-control-bottom-padding: calc(0.75rem + env(safe-area-inset-bottom, 0px));
|
|
padding-left: var(--voice-control-horizontal-padding);
|
|
padding-right: var(--voice-control-horizontal-padding);
|
|
padding-top: var(--voice-control-top-padding);
|
|
padding-bottom: var(--voice-control-bottom-padding);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.fullscreenButtonWrap {
|
|
position: absolute;
|
|
right: clamp(1rem, 2vw, 2rem);
|
|
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
|
|
z-index: 35;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-2);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.fullscreenButtonWrap button,
|
|
.fullscreenButtonWrap button:hover,
|
|
.fullscreenButtonWrap button[aria-pressed='true'],
|
|
.fullscreenButtonWrap button[aria-expanded='true'] {
|
|
width: 2.625rem;
|
|
height: 2.625rem;
|
|
border: 0.0625rem solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 0.875rem;
|
|
background-color: #000;
|
|
box-shadow:
|
|
0 0.1875rem 0.625rem rgba(0, 0, 0, 0.26),
|
|
inset 0 0.0625rem 0 rgba(255, 255, 255, 0.08);
|
|
color: var(--voice-text-strong);
|
|
transform: none;
|
|
transition:
|
|
background-color 140ms linear,
|
|
border-color 140ms linear,
|
|
color 140ms linear;
|
|
}
|
|
|
|
.fullscreenButtonWrap button > svg {
|
|
width: 1.3rem;
|
|
height: 1.3rem;
|
|
}
|
|
|
|
.fullscreenButtonWrap button:hover {
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
background-color: #111;
|
|
color: #fff;
|
|
}
|
|
|
|
.srOnly {
|
|
position: absolute;
|
|
width: 0.0625rem;
|
|
height: 0.0625rem;
|
|
padding: 0;
|
|
margin: -0.0625rem;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
.iconMedium {
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
}
|
|
|
|
.carouselToggleFocusRing {
|
|
border-radius: 624.9375rem;
|
|
}
|
|
|
|
.voiceCallSheetContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.voiceCallSheetCompact {
|
|
width: 100%;
|
|
min-height: 0;
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.streamFocusInfo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
height: 2rem;
|
|
min-width: 0;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.streamFocusStreamer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
height: 100%;
|
|
min-width: 0;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.streamFocusStreamerName {
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
font-weight: 500;
|
|
color: var(--voice-call-header-text, var(--text-primary));
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.streamFocusTrackInfo {
|
|
flex-shrink: 0;
|
|
transform: scale(0.92);
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.streamFocusSpectators {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
height: 2rem;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.streamFocusSpectators [data-flx='ui.avatars.avatar-stack.container'] {
|
|
height: calc(var(--avatar-size) + (2 * var(--avatar-outline, 0.125rem)));
|
|
padding-block: var(--avatar-outline, 0.125rem);
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.headerStreamInfo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
:global([data-voice-popout-window='true']) .voiceRoot {
|
|
--voice-hud-opacity: 1;
|
|
--voice-hud-pointer-events: auto;
|
|
}
|
|
|
|
:global([data-voice-popout-window='true']) .lkParticipantTile .tileControlPill {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|