65 lines
1.3 KiB
SCSS
65 lines
1.3 KiB
SCSS
:host {
|
|
display: contents;
|
|
}
|
|
|
|
.screen-share-source-picker__body {
|
|
max-height: min(36rem, calc(100vh - 15rem));
|
|
overflow: auto;
|
|
}
|
|
|
|
.screen-share-source-picker__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
|
gap: 0.75rem;
|
|
align-content: start;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.screen-share-source-picker__grid--screen {
|
|
grid-template-columns: repeat(auto-fill, minmax(12.5rem, 15rem));
|
|
justify-content: start;
|
|
}
|
|
|
|
.screen-share-source-picker__grid--window {
|
|
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
|
|
}
|
|
|
|
.screen-share-source-picker__source {
|
|
cursor: pointer;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.screen-share-source-picker__source:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.screen-share-source-picker__preview {
|
|
display: block;
|
|
position: relative;
|
|
aspect-ratio: 16 / 10;
|
|
overflow: hidden;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.875rem;
|
|
background: hsl(var(--secondary) / 0.45);
|
|
}
|
|
|
|
.screen-share-source-picker__preview img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
background: hsl(var(--secondary) / 0.3);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.screen-share-source-picker__body {
|
|
max-height: calc(100vh - 22rem);
|
|
}
|
|
|
|
.screen-share-source-picker__grid {
|
|
grid-template-columns: 1fr;
|
|
padding: 1rem;
|
|
}
|
|
}
|