55 lines
1.4 KiB
SCSS
55 lines
1.4 KiB
SCSS
@use './button.scss';
|
|
|
|
:host {
|
|
--frigate-card-next-prev-size: 48px;
|
|
--frigate-card-next-prev-size-hover: calc(var(--frigate-card-next-prev-size) * 2);
|
|
--frigate-card-prev-position: 45px;
|
|
--frigate-card-next-position: 45px;
|
|
--mdc-icon-button-size: var(--frigate-card-next-prev-size);
|
|
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
.controls.previous {
|
|
left: var(--frigate-card-prev-position);
|
|
}
|
|
.controls.next {
|
|
right: var(--frigate-card-next-position);
|
|
}
|
|
|
|
.controls.icons {
|
|
top: calc(50% - (40px / 2));
|
|
}
|
|
|
|
.controls.thumbnails {
|
|
border-radius: 50%;
|
|
height: var(--frigate-card-next-prev-size);
|
|
top: calc(50% - (var(--frigate-card-next-prev-size) / 2));
|
|
box-shadow: 0px 0px 20px 5px black;
|
|
transition: all 0.2s ease-out;
|
|
opacity: 0.8;
|
|
}
|
|
.controls.thumbnails:hover {
|
|
opacity: 1 !important;
|
|
height: var(--frigate-card-next-prev-size-hover);
|
|
top: calc(50% - (var(--frigate-card-next-prev-size-hover) / 2));
|
|
}
|
|
|
|
.controls.previous.thumbnails:hover {
|
|
left: calc(
|
|
var(--frigate-card-prev-position) -
|
|
(var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
|
|
);
|
|
}
|
|
|
|
.controls.next.thumbnails:hover {
|
|
right: calc(
|
|
var(--frigate-card-next-position) -
|
|
(var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
|
|
);
|
|
}
|