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
114 lines
2.9 KiB
CSS
114 lines
2.9 KiB
CSS
/**
|
|
* Attentions CSS
|
|
*
|
|
* Styling for attention/alert components on dashboard
|
|
*/
|
|
|
|
/* ===========================================
|
|
ATTENTION LIST
|
|
=========================================== */
|
|
swp-attention-list {
|
|
display: contents;
|
|
}
|
|
|
|
/* ===========================================
|
|
ATTENTION ITEM
|
|
=========================================== */
|
|
swp-attention-item {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--card-padding);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-xl);
|
|
border-left: 3px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
swp-attention-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
/* Severity: Urgent (red) */
|
|
swp-attention-item.urgent {
|
|
border-left-color: var(--color-red);
|
|
background: color-mix(in srgb, var(--color-red) 5%, var(--color-background-alt));
|
|
}
|
|
|
|
swp-attention-item.urgent:hover {
|
|
background: color-mix(in srgb, var(--color-red) 8%, var(--color-background-alt));
|
|
}
|
|
|
|
/* Severity: Warning (amber) */
|
|
swp-attention-item.warning {
|
|
border-left-color: var(--color-amber);
|
|
background: color-mix(in srgb, var(--color-amber) 5%, var(--color-background-alt));
|
|
}
|
|
|
|
swp-attention-item.warning:hover {
|
|
background: color-mix(in srgb, var(--color-amber) 8%, var(--color-background-alt));
|
|
}
|
|
|
|
/* Severity: Info (blue) */
|
|
swp-attention-item.info {
|
|
border-left-color: var(--color-blue);
|
|
}
|
|
|
|
/* ===========================================
|
|
ATTENTION ICON
|
|
=========================================== */
|
|
swp-attention-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);
|
|
}
|
|
|
|
/* Icon colors per severity */
|
|
swp-attention-item.urgent swp-attention-icon {
|
|
background: color-mix(in srgb, var(--color-red) 15%, transparent);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
swp-attention-item.warning swp-attention-icon {
|
|
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
swp-attention-item.info swp-attention-icon {
|
|
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
/* ===========================================
|
|
ATTENTION CONTENT
|
|
=========================================== */
|
|
swp-attention-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ===========================================
|
|
ATTENTION ACTION
|
|
=========================================== */
|
|
swp-attention-action {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-teal);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: text-decoration var(--transition-fast);
|
|
}
|
|
|
|
swp-attention-action:hover {
|
|
text-decoration: underline;
|
|
}
|