flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CSS performance controls.

Browse Source
This commit is contained in:
Dermot Duffy
2022-10-06 20:58:14 -07:00
parent 65cf4cf22d
commit 535069d68e
12 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/drawer-inject.scss
+3 -3
View File
@@ -27,16 +27,16 @@
max-width: 90%;
}
:host([location=right]) #d {
:host([location='right']) #d {
// Position to the right.
left: unset;
right: 0;
transform: translateX(100%);
}
:host([location=right][open]) #d {
:host([location='right'][open]) #d {
transform: none;
box-shadow: 0px 0px 25px 0px black;
box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 25px 0px black);
}
#ifs {
src/scss/gallery.scss
+1 -1
View File
@@ -31,7 +31,7 @@
text-align: center;
color: var(--primary-text-color, white);
border: 1px solid var(--primary-color);
border-radius: var(--ha-card-border-radius, 4px);
border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
// Folder background color should match the thumbnail element background
// color.
src/scss/next-previous-control.scss
+1 -1
View File
@@ -29,7 +29,7 @@
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;
box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 20px 5px black);
transition: all 0.2s ease-out;
opacity: 0.8;
aspect-ratio: 1 / 1;
src/scss/thumbnail-feature-event.scss
+1 -1
View File
@@ -12,7 +12,7 @@ ha-icon {
// Safari will occasionally not load thumbnails correctly with display block.
display: inline-block;
border-radius: var(--ha-card-border-radius, 4px);
border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
max-width: var(--frigate-card-thumbnail-size);
max-height: 100%;
src/scss/thumbnail-feature-recording.scss
+1 -1
View File
@@ -12,7 +12,7 @@
border: 1px solid var(--secondary-color);
background-color: var(--secondary-background-color);
border-radius: var(--ha-card-border-radius, 4px);
border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
box-sizing: border-box;
color: var(--primary-text-color);
src/scss/thumbnail.scss
+1 -1
View File
@@ -16,7 +16,7 @@
:host([details]) {
border: 1px solid var(--primary-color);
border-radius: var(--ha-card-border-radius, 4px);
border-radius: var(--frigate-card-css-border-radius, var(--ha-card-border-radius, 4px));
padding: 2px;
// When details are enabled, use a background color so that the details have
src/scss/timeline-core.scss
+6 -3
View File
@@ -49,7 +49,7 @@ div.timeline {
.vis-item.vis-selected {
border-color: var(--accent-color);
background-color: var(--accent-color);
box-shadow: 0px 0px 5px 1px var(--primary-color);
box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 5px 1px var(--primary-color));
}
.vis-item.vis-background {
background-color: var(--primary-color);
@@ -88,7 +88,10 @@ div.timeline {
border-style: dotted;
color: var(--primary-text-color);
background-color: var(--primary-background-color);
box-shadow: 0px 0px 5px 1px var(--primary-color);
box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 5px 1px var(--primary-color));
}
.vis-item.vis-range {
border-radius: var(--frigate-card-css-border-radius, unset);
}
.vis-time-axis .vis-grid.vis-minor {
@@ -127,7 +130,7 @@ div.vis-tooltip {
.target_bar {
border-left: 2px solid var(--primary-color);
opacity: 0.7;
box-shadow: 0px 0px 3px 1px var(--primary-color);
box-shadow: var(--frigate-card-css-box-shadow, 0px 0px 3px 1px var(--primary-color));
// Prevent the mouse interacting with the custom time.
pointer-events: none;