136 lines
2.6 KiB
SCSS
136 lines
2.6 KiB
SCSS
// Modified from / inspired by:
|
|
// https://github.com/AlexxIT/WebRTC/blob/master/custom_components/webrtc/www/webrtc-camera.js
|
|
:host {
|
|
position: relative;
|
|
|
|
width: fit-content;
|
|
height: fit-content;
|
|
|
|
--frigate-card-ptz-icon-size: 24px;
|
|
}
|
|
|
|
/*****************
|
|
* Main Containers
|
|
*****************/
|
|
.ptz {
|
|
display: flex;
|
|
gap: 10px;
|
|
|
|
color: var(--light-primary-color);
|
|
opacity: 0.4;
|
|
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
:host([data-orientation='vertical']) .ptz {
|
|
flex-direction: column;
|
|
}
|
|
:host([data-orientation='horizontal']) .ptz {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.ptz:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
:host([data-orientation='vertical']) .ptz div {
|
|
width: calc(var(--frigate-card-ptz-icon-size) * 3);
|
|
}
|
|
:host([data-orientation='horizontal']) .ptz div {
|
|
height: calc(var(--frigate-card-ptz-icon-size) * 3);
|
|
}
|
|
|
|
.ptz-move,
|
|
.ptz-zoom,
|
|
.ptz-home {
|
|
position: relative;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.ptz-move {
|
|
height: calc(var(--frigate-card-ptz-icon-size) * 3);
|
|
width: calc(var(--frigate-card-ptz-icon-size) * 3);
|
|
|
|
border-radius: 50%;
|
|
}
|
|
|
|
:host([data-orientation='horizontal']) .ptz .ptz-zoom,
|
|
:host([data-orientation='horizontal']) .ptz .ptz-home {
|
|
width: calc(var(--frigate-card-ptz-icon-size) * 1.5);
|
|
}
|
|
:host([data-orientation='vertical']) .ptz .ptz-zoom,
|
|
:host([data-orientation='vertical']) .ptz .ptz-home {
|
|
height: calc(var(--frigate-card-ptz-icon-size) * 1.5);
|
|
}
|
|
|
|
.ptz-zoom,
|
|
.ptz-home {
|
|
border-radius: var(--ha-card-border-radius, 4px);
|
|
}
|
|
|
|
/***********
|
|
* PTZ Icons
|
|
***********/
|
|
ha-icon {
|
|
position: absolute;
|
|
--mdc-icon-size: var(--frigate-card-ptz-icon-size);
|
|
}
|
|
ha-icon:not(.disabled) {
|
|
cursor: pointer;
|
|
}
|
|
.disabled {
|
|
color: var(--disabled-text-color);
|
|
}
|
|
.up {
|
|
top: 5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.down {
|
|
bottom: 5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.left {
|
|
left: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.right {
|
|
right: 5px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
:host([data-orientation='vertical']) .zoom_in {
|
|
right: 5px;
|
|
top: 50%;
|
|
}
|
|
:host([data-orientation='vertical']) .zoom_out {
|
|
left: 5px;
|
|
top: 50%;
|
|
}
|
|
:host([data-orientation='horizontal']) .zoom_in {
|
|
left: 50%;
|
|
top: 5px;
|
|
}
|
|
:host([data-orientation='horizontal']) .zoom_out {
|
|
left: 50%;
|
|
bottom: 5px;
|
|
}
|
|
|
|
:host([data-orientation='vertical']) .zoom_in,
|
|
:host([data-orientation='vertical']) .zoom_out {
|
|
transform: translateY(-50%);
|
|
}
|
|
:host([data-orientation='horizontal']) .zoom_in,
|
|
:host([data-orientation='horizontal']) .zoom_out {
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.home {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|