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
175 lines
4.3 KiB
CSS
175 lines
4.3 KiB
CSS
/**
|
|
* Bookings - Booking List & Items
|
|
*
|
|
* Styling for booking components on dashboard
|
|
*/
|
|
|
|
/* ===========================================
|
|
BOOKING LIST
|
|
=========================================== */
|
|
swp-booking-list {
|
|
display: contents;
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING ITEM
|
|
=========================================== */
|
|
swp-booking-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-lg);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
swp-booking-item:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-booking-item.completed {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
swp-booking-item.completed swp-booking-indicator {
|
|
background: var(--color-border);
|
|
}
|
|
|
|
swp-booking-item.inprogress {
|
|
background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING TIME
|
|
=========================================== */
|
|
swp-booking-time {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
swp-booking-time swp-time-start {
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-booking-time swp-time-end {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING INDICATOR
|
|
=========================================== */
|
|
swp-booking-indicator {
|
|
width: 4px;
|
|
height: 40px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
swp-booking-indicator.teal { background: var(--color-teal); }
|
|
swp-booking-indicator.blue { background: var(--color-blue); }
|
|
swp-booking-indicator.purple { background: var(--color-purple); }
|
|
swp-booking-indicator.amber { background: var(--color-amber); }
|
|
swp-booking-indicator.green { background: var(--color-green); }
|
|
|
|
/* ===========================================
|
|
BOOKING DETAILS
|
|
=========================================== */
|
|
swp-booking-details {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING EMPLOYEE
|
|
=========================================== */
|
|
swp-booking-employee {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
swp-booking-employee swp-avatar-small {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-teal);
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
swp-booking-employee span {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
BOOKING STATUS
|
|
=========================================== */
|
|
swp-booking-status {
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
border-radius: var(--radius-md);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
swp-booking-status.confirmed {
|
|
background: color-mix(in srgb, var(--color-green) 15%, transparent);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
swp-booking-status.pending {
|
|
background: color-mix(in srgb, var(--color-amber) 15%, transparent);
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
swp-booking-status.inprogress,
|
|
swp-booking-status.in-progress {
|
|
background: color-mix(in srgb, var(--color-blue) 15%, transparent);
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
swp-booking-status.completed {
|
|
background: var(--color-background-hover);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
CURRENT TIME INDICATOR
|
|
=========================================== */
|
|
swp-current-time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-4) var(--spacing-6);
|
|
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
|
|
border-radius: var(--radius-lg);
|
|
margin-bottom: var(--spacing-4);
|
|
}
|
|
|
|
swp-current-time i {
|
|
font-size: var(--font-size-lg);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
swp-current-time span {
|
|
font-size: var(--font-size-md);
|
|
color: var(--color-teal);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
swp-current-time swp-time {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|