55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
:host {
|
|
display: block;
|
|
--video-max-height: none;
|
|
|
|
transition: max-height 0.1s ease-in-out;
|
|
|
|
// Keep carousel controls relative to the media carousel itself.
|
|
position: relative;
|
|
|
|
// See: https://github.com/dermotduffy/advanced-camera-card/issues/2107
|
|
border-radius: var(--advanced-camera-card-border-radius-final);
|
|
overflow: hidden;
|
|
}
|
|
|
|
// When the carousel is not part of a grid ensure its height matches its
|
|
// container.
|
|
:host(:not([grid-id])) {
|
|
height: 100%;
|
|
}
|
|
|
|
// If the carousel has an unselected attribute set on it, do not let the
|
|
// pointer interact (e.g. hover, scroll) with underlying elements. This is used
|
|
// when the carousel is part of a media-grid. Without this next/prev controls
|
|
// will enlarge on hover, and the wheel-gestures plugin may block scrolling.
|
|
// See matching in live-carousel.scss .
|
|
:host([unselected]) advanced-camera-card-carousel,
|
|
:host([unselected]) .seek-warning {
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host([unseekable]) advanced-camera-card-carousel {
|
|
filter: brightness(50%);
|
|
}
|
|
:host([unseekable]) .seek-warning {
|
|
display: block;
|
|
}
|
|
|
|
.seek-warning {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
color: white;
|
|
}
|
|
|
|
.embla__slide {
|
|
display: flex;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
flex: 0 0 100%;
|
|
}
|