CSS optimization
This commit is contained in:
parent
e739ce2ac7
commit
29f9c79764
22 changed files with 1175 additions and 642 deletions
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue