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

fix: Use HA style and coloring for all icons (#1790)

Browse Source
This commit is contained in:
Dermot Duffy
2024-12-23 15:22:27 -08:00
committed by GitHub
parent a9e5889ca7
commit 9d812af9f4
68 changed files with 557 additions and 1366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/button.scss
+1 -86
View File
@@ -5,93 +5,8 @@ ha-icon-button.button {
padding: 0px;
margin: 3px;
--ha-icon-display: block;
/* Buttons can always be clicked */
pointer-events: auto;
opacity: 0.9;
}
// =====================================================================================
// From: https://github.com/home-assistant/frontend/blob/dev/src/common/style/icon_color_css.ts
// Modified version for ha-icon and ha-icon-button.
// =====================================================================================
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@mixin state-icon($element) {
#{$element}[data-domain='alert'][data-state='on'],
#{$element}[data-domain='automation'][data-state='on'],
#{$element}[data-domain='binary_sensor'][data-state='on'],
#{$element}[data-domain='calendar'][data-state='on'],
#{$element}[data-domain='camera'][data-state='streaming'],
#{$element}[data-domain='cover'][data-state='open'],
#{$element}[data-domain='fan'][data-state='on'],
#{$element}[data-domain='humidifier'][data-state='on'],
#{$element}[data-domain='light'][data-state='on'],
#{$element}[data-domain='input_boolean'][data-state='on'],
#{$element}[data-domain='lock'][data-state='unlocked'],
#{$element}[data-domain='media_player'][data-state='on'],
#{$element}[data-domain='media_player'][data-state='paused'],
#{$element}[data-domain='media_player'][data-state='playing'],
#{$element}[data-domain='script'][data-state='on'],
#{$element}[data-domain='sun'][data-state='above_horizon'],
#{$element}[data-domain='switch'][data-state='on'],
#{$element}[data-domain='timer'][data-state='active'],
#{$element}[data-domain='vacuum'][data-state='cleaning'],
#{$element}[data-domain='group'][data-state='on'],
#{$element}[data-domain='group'][data-state='home'],
#{$element}[data-domain='group'][data-state='open'],
#{$element}[data-domain='group'][data-state='locked'],
#{$element}[data-domain='group'][data-state='problem'] {
color: var(--paper-item-icon-active-color, #fdd835);
}
#{$element}[data-domain='climate'][data-state='cooling'] {
color: var(--cool-color, var(--state-climate-cool-color));
}
#{$element}[data-domain='climate'][data-state='heating'] {
color: var(--heat-color, var(--state-climate-heat-color));
}
#{$element}[data-domain='climate'][data-state='drying'] {
color: var(--dry-color, var(--state-climate-dry-color));
}
#{$element}[data-domain='alarm_control_panel'] {
color: var(--alarm-color-armed, var(--label-badge-red));
}
#{$element}[data-domain='alarm_control_panel'][data-state='disarmed'] {
color: var(--alarm-color-disarmed, var(--label-badge-green));
}
#{$element}[data-domain='alarm_control_panel'][data-state='pending'],
#{$element}[data-domain='alarm_control_panel'][data-state='arming'] {
color: var(--alarm-color-pending, var(--label-badge-yellow));
animation: pulse 1s infinite;
}
#{$element}[data-domain='alarm_control_panel'][data-state='triggered'] {
color: var(--alarm-color-triggered, var(--label-badge-red));
animation: pulse 1s infinite;
}
#{$element}[data-domain='plant'][data-state='problem'],
#{$element}[data-domain='zwave'][data-state='dead'] {
color: var(--state-icon-error-color);
}
/* Color the icon if unavailable */
#{$element}[data-state='unavailable'] {
color: var(--state-unavailable-color);
}
}
@include state-icon('ha-icon');
@include state-icon('ha-icon-button');
src/scss/date-picker.scss
+1 -1
View File
@@ -42,7 +42,7 @@ input {
}
}
ha-icon {
frigate-card-icon {
display: block;
height: 100%;
width: 100%;
src/scss/drawer.scss
+5 -5
View File
@@ -36,7 +36,7 @@ div.control-surround {
visibility: visible;
}
ha-icon.control {
frigate-card-icon.control {
color: var(--secondary-color, white);
background-color: rgba(0, 0, 0, 0.7);
opacity: 0.5;
@@ -49,20 +49,20 @@ ha-icon.control {
transition: opacity 0.5s ease;
}
:host([open]) ha-icon.control,
ha-icon.control:hover {
:host([open]) frigate-card-icon.control,
frigate-card-icon.control:hover {
// When the drawer is open or hovered make the button to close it more
// prominent.
opacity: 1;
background-color: black;
}
:host([location='left']) ha-icon.control {
:host([location='left']) frigate-card-icon.control {
border-top-right-radius: $drawer-icon-size;
border-bottom-right-radius: $drawer-icon-size;
}
:host([location='right']) ha-icon.control {
:host([location='right']) frigate-card-icon.control {
border-top-left-radius: $drawer-icon-size;
border-bottom-left-radius: $drawer-icon-size;
}
src/scss/editor.scss
+2 -3
View File
@@ -70,9 +70,8 @@ div.upgrade span {
color: var(--secondary-text-color, 'black');
}
.submenu-header ha-icon,
.submenu-header img {
padding-right: 15px;
.submenu-header frigate-card-icon {
margin-right: 15px;
}
.submenu.selected {
src/scss/icon.scss
+14
View File
@@ -0,0 +1,14 @@
:host {
display: inline-block;
width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);
--ha-icon-display: block;
}
* {
display: block;
height: 100%;
width: 100%;
box-sizing: border-box;
}
src/scss/key-assigner.scss
+2 -2
View File
@@ -12,11 +12,11 @@
}
:host([assigning]) ha-button.assign span,
:host([assigning]) ha-button.assign ha-icon {
:host([assigning]) ha-button.assign frigate-card-icon {
color: var(--warning-color);
}
ha-icon {
frigate-card-icon {
padding: 10px;
}
src/scss/live-provider.scss
+1 -1
View File
@@ -11,7 +11,7 @@
display: none;
}
ha-icon {
frigate-card-icon {
position: absolute;
top: 10px;
right: 10px;
src/scss/ptz.scss
+2 -2
View File
@@ -84,11 +84,11 @@
/***********
* PTZ Icons
***********/
ha-icon {
frigate-card-icon {
position: absolute;
--mdc-icon-size: var(--frigate-card-ptz-icon-size);
}
ha-icon:not(.disabled) {
frigate-card-icon:not(.disabled) {
cursor: pointer;
}
.disabled {
src/scss/status.scss
+7 -5
View File
@@ -1,8 +1,7 @@
@use './button.scss';
:host {
--mdc-icon-button-size: calc(var(--frigate-card-status-bar-height) - 6px);
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
--mdc-icon-size: calc(var(--frigate-card-status-bar-height) - 6px);
display: block;
width: 100%;
@@ -61,8 +60,7 @@
.item {
display: inline-block;
margin: 3px;
padding: 3px;
margin: 3px 5px;
align-content: center;
@@ -84,6 +82,10 @@
}
img.item {
width: var(--mdc-icon-size, 24px);
display: block;
// To ensure images render somewhat reasonably looking their height is kept to
// the same height as icons.
height: var(--mdc-icon-size, 24px);
width: auto;
}
src/scss/thumbnail-details.scss
+9
View File
@@ -27,3 +27,12 @@ div.details {
// Details panel can shrink as well as grow.
min-height: 0px;
}
div.details div {
display: flex;
align-items: center;
}
div.details div * {
margin: 0px 3px;
}
src/scss/thumbnail-feature-text.scss
+1 -1
View File
@@ -21,7 +21,7 @@
position: relative;
}
img.background {
frigate-card-icon.background {
display: block;
width: 100%;
height: 100%;
src/scss/thumbnail-feature-thumbnail.scss
+2 -2
View File
@@ -14,7 +14,7 @@ img {
}
img,
ha-icon {
frigate-card-icon {
// Safari will occasionally not load thumbnails correctly with display block.
display: inline-block;
@@ -37,7 +37,7 @@ ha-icon {
object-fit: cover;
}
ha-icon {
frigate-card-icon {
--mdc-icon-size: 50%;
color: var(--primary-text-color);
display: flex;
src/scss/thumbnail.scss
+6 -6
View File
@@ -31,7 +31,7 @@
transform: scale(1.04);
}
ha-icon {
frigate-card-icon {
position: absolute;
border-radius: 50%;
opacity: 0.5;
@@ -43,24 +43,24 @@ ha-icon {
opacity 0.2s ease-in-out,
color 0.2s ease-in-out;
}
ha-icon:hover {
frigate-card-icon:hover {
opacity: 1;
}
ha-icon.star {
frigate-card-icon.star {
top: 3px;
left: 3px;
}
ha-icon.star.starred {
frigate-card-icon.star.starred {
color: gold;
}
ha-icon.timeline {
frigate-card-icon.timeline {
top: 3px;
right: 3px;
}
ha-icon.download {
frigate-card-icon.download {
right: 3px;
bottom: 3px;
}
src/scss/timeline-core.scss
+7 -4
View File
@@ -174,12 +174,15 @@ div.vis-tooltip {
.timeline-tools {
display: inline-flex;
position: absolute;
right: 2px;
bottom: 2px;
right: 0px;
bottom: 0px;
color: var(--primary-color);
z-index: 10;
}
.timeline-tools ha-icon {
.timeline-tools * {
margin: 2px 5px;
cursor: pointer;
}
.timeline-tools *:last-child {
margin-right: 10px;
}