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

feat: Allow user generated notifications (#2401)

Browse Source
This commit is contained in:
Dermot Duffy
2026-03-07 20:47:24 -08:00
committed by GitHub
parent 1d81e03b04
commit 24c6b98948
53 changed files with 939 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/overlay-message.scss → src/scss/notification.scss
+30 -31
View File
@@ -8,7 +8,7 @@
align-items: flex-end;
padding: 24px;
pointer-events: none;
z-index: $z-index-overlay-message;
z-index: $z-index-notification;
}
.backdrop {
@@ -17,7 +17,7 @@
pointer-events: auto;
}
.message {
.notification {
position: relative;
display: flex;
flex-direction: row;
@@ -30,23 +30,22 @@
padding-right: 48px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--advanced-camera-card-overlay-message-scrollbar-color)
transparent;
scrollbar-color: var(--advanced-camera-card-notification-scrollbar-color) transparent;
// Glassmorphism background
background: var(--advanced-camera-card-overlay-message-background);
backdrop-filter: var(--advanced-camera-card-overlay-message-backdrop-filter);
-webkit-backdrop-filter: var(--advanced-camera-card-overlay-message-backdrop-filter);
background: var(--advanced-camera-card-notification-background);
backdrop-filter: var(--advanced-camera-card-notification-backdrop-filter);
-webkit-backdrop-filter: var(--advanced-camera-card-notification-backdrop-filter);
// Borders & Edge highlights
border: var(--advanced-camera-card-overlay-message-border);
border-top: var(--advanced-camera-card-overlay-message-border-top);
border: var(--advanced-camera-card-notification-border);
border-top: var(--advanced-camera-card-notification-border-top);
border-radius: var(--advanced-camera-card-border-radius-final);
// Shadows
box-shadow: var(
--advanced-camera-card-box-shadow-override,
var(--advanced-camera-card-overlay-message-box-shadow)
var(--advanced-camera-card-notification-box-shadow)
);
pointer-events: auto;
@@ -56,7 +55,7 @@
}
// Exit animation
.message.exiting {
.notification.exiting {
animation: slideDown 0.25s ease-out forwards;
}
@@ -99,12 +98,12 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--advanced-camera-card-overlay-message-icon-color);
color: var(--advanced-camera-card-notification-icon-color);
filter: drop-shadow(
0 0 8px
color-mix(
in oklab,
var(--advanced-camera-card-overlay-message-icon-color),
var(--advanced-camera-card-notification-icon-color),
transparent 60%
)
);
@@ -119,7 +118,7 @@
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: var(--advanced-camera-card-overlay-message-text-color);
color: var(--advanced-camera-card-notification-text-color);
word-break: break-word;
}
@@ -135,7 +134,7 @@
background: color-mix(
in srgb,
var(--advanced-camera-card-overlay-message-close-color),
var(--advanced-camera-card-notification-close-color),
transparent 92%
);
}
@@ -150,7 +149,7 @@
color: color-mix(
in srgb,
var(--advanced-camera-card-overlay-message-close-color),
var(--advanced-camera-card-notification-close-color),
transparent 40%
);
@@ -166,17 +165,17 @@
}
// Base control hover color transition (from dimmed to full).
&:not([class^='emphasis-']):hover {
color: var(--advanced-camera-card-overlay-message-close-color);
&:not([class^='severity-']):hover {
color: var(--advanced-camera-card-notification-close-color);
}
&.emphasis-low {
&.severity-low {
color: var(--advanced-camera-card-foreground-severity-low-color);
}
&.emphasis-medium {
&.severity-medium {
color: var(--advanced-camera-card-foreground-severity-medium-color);
}
&.emphasis-high {
&.severity-high {
color: var(--advanced-camera-card-foreground-severity-high-color);
}
}
@@ -194,12 +193,12 @@
background: color-mix(
in srgb,
var(--advanced-camera-card-overlay-message-close-color),
var(--advanced-camera-card-notification-close-color),
transparent 95%
);
color: color-mix(
in srgb,
var(--advanced-camera-card-overlay-message-close-color),
var(--advanced-camera-card-notification-close-color),
transparent 40%
);
@@ -210,10 +209,10 @@
.close:hover {
background: color-mix(
in srgb,
var(--advanced-camera-card-overlay-message-close-color),
var(--advanced-camera-card-notification-close-color),
transparent 90%
);
color: var(--advanced-camera-card-overlay-message-close-color);
color: var(--advanced-camera-card-notification-close-color);
}
.close advanced-camera-card-icon {
@@ -233,7 +232,7 @@
display: flex;
align-items: center;
gap: 8px;
color: var(--advanced-camera-card-overlay-message-text-color);
color: var(--advanced-camera-card-notification-text-color);
font-size: 14px;
line-height: 1.4;
@@ -261,15 +260,15 @@
}
}
&.emphasis-low advanced-camera-card-icon {
&.severity-low advanced-camera-card-icon {
color: var(--advanced-camera-card-foreground-severity-low-color);
opacity: 1;
}
&.emphasis-medium advanced-camera-card-icon {
&.severity-medium advanced-camera-card-icon {
color: var(--advanced-camera-card-foreground-severity-medium-color);
opacity: 1;
}
&.emphasis-high advanced-camera-card-icon {
&.severity-high advanced-camera-card-icon {
color: var(--advanced-camera-card-foreground-severity-high-color);
opacity: 1;
}
@@ -282,10 +281,10 @@
border-top: 1px solid
color-mix(
in srgb,
var(--advanced-camera-card-overlay-message-text-color),
var(--advanced-camera-card-notification-text-color),
transparent 80%
);
color: var(--advanced-camera-card-overlay-message-text-color);
color: var(--advanced-camera-card-notification-text-color);
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
src/scss/status.scss
+1
View File
@@ -64,6 +64,7 @@
.item.action {
cursor: pointer;
pointer-events: auto;
}
img.item,
src/scss/themes/base.scss
+12 -12
View File
@@ -286,24 +286,24 @@
transparent 20%
);
/******************
* Overlay Message
******************/
--advanced-camera-card-overlay-message-background: linear-gradient(
/**************
* Notification
**************/
--advanced-camera-card-notification-background: linear-gradient(
135deg,
rgba(35, 35, 35, 0.75) 0%,
rgba(15, 15, 15, 0.65) 100%
);
--advanced-camera-card-overlay-message-backdrop-filter: blur(20px) saturate(180%);
--advanced-camera-card-overlay-message-border: 1px solid rgba(255, 255, 255, 0.1);
--advanced-camera-card-overlay-message-border-top: 1px solid rgba(255, 255, 255, 0.15);
--advanced-camera-card-overlay-message-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5),
--advanced-camera-card-notification-backdrop-filter: blur(20px) saturate(180%);
--advanced-camera-card-notification-border: 1px solid rgba(255, 255, 255, 0.1);
--advanced-camera-card-notification-border-top: 1px solid rgba(255, 255, 255, 0.15);
--advanced-camera-card-notification-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5),
0 2px 8px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
--advanced-camera-card-overlay-message-text-color: #ffffff;
--advanced-camera-card-overlay-message-icon-color: var(
--advanced-camera-card-notification-text-color: #ffffff;
--advanced-camera-card-notification-icon-color: var(
--advanced-camera-card-foreground-primary
);
--advanced-camera-card-overlay-message-scrollbar-color: rgba(255, 255, 255, 0.2);
--advanced-camera-card-overlay-message-close-color: #ffffff;
--advanced-camera-card-notification-scrollbar-color: rgba(255, 255, 255, 0.2);
--advanced-camera-card-notification-close-color: #ffffff;
}
src/scss/themes/light.scss
+10 -10
View File
@@ -522,20 +522,20 @@
// Menu border colors need to re-adjust based on redefined variable.
--wa-color-surface-border: var(--ha-color-border-neutral-quiet);
/******************
* Overlay Message
******************/
--advanced-camera-card-overlay-message-background: linear-gradient(
/**************
* Notification
**************/
--advanced-camera-card-notification-background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.85) 0%,
rgba(235, 235, 235, 0.75) 100%
);
--advanced-camera-card-overlay-message-text-color: var(--primary-text-color);
--advanced-camera-card-overlay-message-border: 1px solid rgba(0, 0, 0, 0.3);
--advanced-camera-card-overlay-message-border-top: 1px solid rgba(0, 0, 0, 0.2);
--advanced-camera-card-overlay-message-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
--advanced-camera-card-notification-text-color: var(--primary-text-color);
--advanced-camera-card-notification-border: 1px solid rgba(0, 0, 0, 0.3);
--advanced-camera-card-notification-border-top: 1px solid rgba(0, 0, 0, 0.2);
--advanced-camera-card-notification-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
0 2px 8px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
--advanced-camera-card-overlay-message-scrollbar-color: rgba(0, 0, 0, 0.5);
--advanced-camera-card-overlay-message-close-color: #000000;
--advanced-camera-card-notification-scrollbar-color: rgba(0, 0, 0, 0.5);
--advanced-camera-card-notification-close-color: #000000;
--app-header-text-color: white;
}
src/scss/z-index.scss
+1 -1
View File
@@ -15,6 +15,6 @@ $z-index-loading: 6;
// Need menu to render above drawer (so the drawer button is below menu-submenus)
$z-index-menu: 4;
$z-index-overlay-message: 4;
$z-index-notification: 4;
$z-index-drawer: 3;
$z-index-status-bar: 2;