Dermot Duffy
cc376a8be1
Whilst the Frigate support in this card is the best among camera engines, the name incorrectly suggests that Frigate is a requirement. Instead, to broaden the appeal, change to more camera agnostic name. This does not suggest any change in priority, role or support for Frigate. This change is likely to be bug prone, due to the size of the rename -- the code contains 1500+ references to "Frigate" most of which make sense to rename, some which do not, all of which needed human assessment. - Closes #1298 BREAKING CHANGE: References to `frigate-card` in all kinds of configuration need to be updated to `advanced-camera-card`. An automated config upgrade should take care of the majority of usecases (click `Edit -> Upgrade -> Save`), though may not be perfect.
199 lines
4.8 KiB
SCSS
199 lines
4.8 KiB
SCSS
@use 'vis-timeline/dist/vis-timeline-graph2d.css';
|
|
@use 'drawer';
|
|
@use 'const.scss';
|
|
|
|
:host {
|
|
width: 100%;
|
|
// Share the screen space with thumbnails that may be above/below.
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
// So that absolute sidedrawer is relative to this host.
|
|
position: relative;
|
|
|
|
background-color: var(--advanced-camera-card-timeline-background);
|
|
}
|
|
|
|
:host(:not([mini])) {
|
|
// Timeline covers 100% of the parent unless it's in mini-mode.
|
|
height: 100%;
|
|
}
|
|
|
|
advanced-camera-card-thumbnail {
|
|
height: var(--advanced-camera-card-thumbnail-size);
|
|
width: var(--advanced-camera-card-thumbnail-size);
|
|
}
|
|
advanced-camera-card-thumbnail[details] {
|
|
width: var(--advanced-camera-card-thumbnail-details-width);
|
|
}
|
|
|
|
div.timeline {
|
|
flex: 1;
|
|
}
|
|
|
|
.vis-text {
|
|
color: var(--advanced-camera-card-timeline-text-color) !important;
|
|
}
|
|
|
|
.vis-timeline {
|
|
border: none;
|
|
}
|
|
|
|
.vis-labelset .vis-label {
|
|
// Group labels.
|
|
color: var(--advanced-camera-card-timeline-text-color);
|
|
}
|
|
|
|
:host([ribbon]:not([groups])) .vis-item:not(.vis-background) {
|
|
// When a ribbon timeline is used without groups, we need to add extra margin
|
|
// to the top to center the bar vertically within the mini-timeline.
|
|
margin-top: 7px;
|
|
}
|
|
|
|
:host([ribbon]) .vis-item:not(.vis-background) {
|
|
// Ribbon timelines have a much shorter 'bar'.
|
|
height: 6px;
|
|
}
|
|
.vis-item {
|
|
border-color: var(--advanced-camera-card-timeline-item-color);
|
|
background: none;
|
|
color: var(--advanced-camera-card-timeline-text-color);
|
|
background-color: var(--advanced-camera-card-timeline-item-color);
|
|
|
|
transition:
|
|
background-color ease-in-out 1s,
|
|
border-color ease-in-out 1s,
|
|
box-shadow ease-in-out 1s;
|
|
}
|
|
.vis-item.vis-selected {
|
|
border-color: var(--advanced-camera-card-active-color);
|
|
background-color: var(--advanced-camera-card-active-color);
|
|
box-shadow: var(
|
|
--advanced-camera-card-css-box-shadow,
|
|
0px 0px 5px 1px var(--advanced-camera-card-active-color)
|
|
);
|
|
}
|
|
.vis-item.vis-background {
|
|
background-color: var(--advanced-camera-card-timeline-background-item-color);
|
|
}
|
|
|
|
// If there are no timeline groups shown (e.g. mini mode with a single camera),
|
|
// ensure the background (recordings) always span the full height. Otherwise, in
|
|
// cases where there are no events, the background is incorrectly rendered too
|
|
// short by visjs.
|
|
:host(:not([groups])) .vis-item.vis-background {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.vis-item:not(.vis-background) {
|
|
cursor: pointer;
|
|
}
|
|
:host([recordings]) .vis-item.vis-background,
|
|
:host([recordings]) .vis-time-axis {
|
|
cursor: crosshair;
|
|
}
|
|
.vis-item:active {
|
|
cursor: unset;
|
|
}
|
|
|
|
.vis-item.vis-box {
|
|
border: none;
|
|
}
|
|
|
|
.vis-item .vis-item-content {
|
|
padding: 0px;
|
|
}
|
|
|
|
.vis-item.vis-cluster {
|
|
border-style: dotted;
|
|
color: var(--advanced-camera-card-timeline-text-color);
|
|
background-color: var(--advanced-camera-card-timeline-background);
|
|
box-shadow: var(
|
|
--advanced-camera-card-css-box-shadow,
|
|
0px 0px 5px 1px var(--advanced-camera-card-timeline-item-color)
|
|
);
|
|
}
|
|
.vis-item.vis-range {
|
|
border-radius: var(--advanced-camera-card-css-border-radius, unset);
|
|
}
|
|
|
|
.vis-time-axis .vis-grid.vis-minor {
|
|
border-color: var(--advanced-camera-card-timeline-divider-color);
|
|
}
|
|
|
|
// Give an indication that the user can interact with the axes.
|
|
.vis-text.vis-minor,
|
|
.vis-label {
|
|
transition: background-color 0.5s ease-out;
|
|
}
|
|
:host([recordings]) .vis-text.vis-minor:hover {
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--advanced-camera-card-timeline-text-color),
|
|
transparent 80%
|
|
);
|
|
}
|
|
|
|
.vis-time-axis .vis-grid.vis-major {
|
|
border-color: var(--advanced-camera-card-timeline-divider-color);
|
|
}
|
|
|
|
.vis-label {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
div.vis-tooltip {
|
|
padding: 0px;
|
|
background-color: unset;
|
|
border: none;
|
|
|
|
// Use browser default font-family for tooltips.
|
|
font-family: unset;
|
|
|
|
z-index: 30;
|
|
}
|
|
|
|
.target_bar {
|
|
background-color: var(--advanced-camera-card-timeline-target-bar-color);
|
|
width: 2px;
|
|
|
|
z-index: 20;
|
|
|
|
// Prevent the mouse interacting with the custom time.
|
|
pointer-events: none;
|
|
}
|
|
.target_bar .vis-custom-time-marker {
|
|
background-color: var(--advanced-camera-card-timeline-background);
|
|
color: var(--advanced-camera-card-timeline-text-color);
|
|
bottom: 0px;
|
|
top: unset;
|
|
}
|
|
:host([target-bar-marker-direction='right']) .target_bar .vis-custom-time-marker {
|
|
left: 2px;
|
|
}
|
|
:host([target-bar-marker-direction='left']) .target_bar .vis-custom-time-marker {
|
|
right: 2px;
|
|
}
|
|
:host([target-bar-marker-direction='center']) .target_bar .vis-custom-time-marker {
|
|
left: 0px;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.timeline-tools {
|
|
display: inline-flex;
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
color: var(--advanced-camera-card-timeline-tool-color);
|
|
z-index: 10;
|
|
}
|
|
.timeline-tools * {
|
|
margin: 2px 5px;
|
|
cursor: pointer;
|
|
}
|
|
.timeline-tools *:last-child {
|
|
margin-right: 10px;
|
|
}
|