ef174af0e1
Implements localization for dashboard, cash register, account, and profile sections Adds localization keys for various UI elements, improving internationalization support Refactors view components to use ILocalizationService for dynamic text rendering Prepares ground for multi-language support with translation-ready markup
69 lines
1.7 KiB
CSS
69 lines
1.7 KiB
CSS
/**
|
|
* Notifications CSS
|
|
*
|
|
* Styling for notification components on dashboard
|
|
*/
|
|
|
|
/* ===========================================
|
|
NOTIFICATION LIST
|
|
=========================================== */
|
|
swp-notification-list {
|
|
display: contents;
|
|
}
|
|
|
|
/* ===========================================
|
|
NOTIFICATION ITEM
|
|
=========================================== */
|
|
swp-notification-item {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
align-items: center;
|
|
padding: var(--card-padding);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-xl);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
swp-notification-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-notification-item.unread {
|
|
background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
|
|
}
|
|
|
|
swp-notification-item.unread:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
/* ===========================================
|
|
NOTIFICATION ICON
|
|
=========================================== */
|
|
swp-notification-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--color-background-hover);
|
|
border-radius: var(--radius-xl);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
swp-notification-item.unread swp-notification-icon {
|
|
background: color-mix(in srgb, var(--color-teal) 15%, transparent);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* ===========================================
|
|
NOTIFICATION CONTENT
|
|
=========================================== */
|
|
swp-notification-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|