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
231 lines
5.2 KiB
CSS
231 lines
5.2 KiB
CSS
/**
|
|
* Stats - Statistics Components
|
|
*
|
|
* Stat bars, cards, values og trends
|
|
*/
|
|
|
|
/* ===========================================
|
|
STATS CONTAINER (Grid/Bar/Row)
|
|
=========================================== */
|
|
swp-stats-bar,
|
|
swp-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--card-gap);
|
|
margin-bottom: var(--section-gap);
|
|
}
|
|
|
|
swp-stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--card-gap);
|
|
margin-bottom: var(--section-gap);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT CARD
|
|
=========================================== */
|
|
swp-stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-surface);
|
|
border-radius: var(--border-radius-lg);
|
|
padding: var(--card-padding);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-stat-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
padding: var(--card-padding);
|
|
background: var(--color-surface);
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT VALUE
|
|
=========================================== */
|
|
swp-stat-value {
|
|
display: block;
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
/* Larger variant for emphasis */
|
|
swp-stat-card swp-stat-value,
|
|
swp-stat-box swp-stat-value {
|
|
font-size: var(--font-size-3xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT LABEL
|
|
=========================================== */
|
|
swp-stat-label {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
margin-top: var(--spacing-2);
|
|
}
|
|
|
|
swp-stat-box swp-stat-label {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT SUBTITLE
|
|
=========================================== */
|
|
swp-stat-subtitle {
|
|
display: block;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-muted);
|
|
margin-top: var(--spacing-1);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT TREND / CHANGE
|
|
=========================================== */
|
|
swp-stat-trend,
|
|
swp-stat-change {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-1);
|
|
font-size: var(--font-size-xs);
|
|
margin-top: var(--spacing-2);
|
|
}
|
|
|
|
swp-stat-trend i,
|
|
swp-stat-change i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Trend Up (positive) */
|
|
swp-stat-trend.up,
|
|
swp-stat-change.positive {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
/* Trend Down (negative) */
|
|
swp-stat-trend.down,
|
|
swp-stat-change.negative {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Neutral trend */
|
|
swp-stat-trend.neutral {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
COLOR MODIFIERS
|
|
=========================================== */
|
|
|
|
/* Highlight (Primary/Teal) */
|
|
swp-stat-card.highlight swp-stat-value,
|
|
swp-stat-box.highlight swp-stat-value,
|
|
swp-stat-card.teal swp-stat-value {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* Success (Green) */
|
|
swp-stat-card.success swp-stat-value {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
/* Warning (Amber) */
|
|
swp-stat-card.warning swp-stat-value,
|
|
swp-stat-card.amber swp-stat-value {
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
/* Danger (Red) */
|
|
swp-stat-card.danger swp-stat-value,
|
|
swp-stat-card.negative swp-stat-value,
|
|
swp-stat-card.red swp-stat-value {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* Purple */
|
|
swp-stat-card.purple swp-stat-value {
|
|
color: var(--color-purple);
|
|
}
|
|
|
|
/* ===========================================
|
|
HIGHLIGHT CARD (Filled Background)
|
|
=========================================== */
|
|
swp-stat-card.highlight.filled {
|
|
background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
|
|
swp-stat-card.highlight.filled swp-stat-value {
|
|
color: white;
|
|
}
|
|
|
|
swp-stat-card.highlight.filled swp-stat-label {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
swp-stat-card.highlight.filled swp-stat-change {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
/* ===========================================
|
|
STAT ITEM (Inline Variant)
|
|
=========================================== */
|
|
swp-stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-1);
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
background: var(--color-background);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
swp-stat-item swp-stat-value {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
swp-stat-item swp-stat-value.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
swp-stat-item swp-stat-label {
|
|
font-size: var(--font-size-xs);
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ===========================================
|
|
RESPONSIVE
|
|
=========================================== */
|
|
@media (max-width: 1200px) {
|
|
swp-stats-bar,
|
|
swp-stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
swp-stats-bar,
|
|
swp-stats-grid,
|
|
swp-stats-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
swp-quick-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|