CSS optimization

This commit is contained in:
Janus C. H. Knudsen 2026-01-14 00:47:06 +01:00
parent e739ce2ac7
commit 29f9c79764
22 changed files with 1175 additions and 642 deletions

View file

@ -2,6 +2,7 @@
* Notifications CSS
*
* Styling for notification components on dashboard
* Reuses: swp-list-base, swp-list-item-base, swp-icon-container (components.css)
*/
/* ===========================================
@ -31,7 +32,7 @@ swp-notification-item:hover {
}
swp-notification-item.unread {
background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
background: var(--bg-teal-subtle);
}
swp-notification-item.unread:hover {
@ -41,6 +42,7 @@ swp-notification-item.unread:hover {
/* ===========================================
NOTIFICATION ICON
=========================================== */
/* Base styling from swp-icon-container in components.css */
swp-notification-icon {
display: flex;
align-items: center;
@ -51,10 +53,11 @@ swp-notification-icon {
border-radius: var(--radius-xl);
color: var(--color-text-secondary);
font-size: var(--font-size-xl);
flex-shrink: 0;
}
swp-notification-item.unread swp-notification-icon {
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
background: var(--bg-teal-strong);
color: var(--color-teal);
}