Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Janus C. H. Knudsen 2026-01-11 18:18:36 +01:00
parent abcf8ee75e
commit 12869e35bf
34 changed files with 1177 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

250
PlanTempus.Application/wwwroot/css/waitlist.css Normal file
View file

@ -0,0 +1,250 @@
/**
* Waitlist CSS
*
* Styling for waitlist mini card and drawer items
*/
/* ===========================================
WAITLIST MINI CARD
=========================================== */
swp-waitlist-card {
display: flex;
align-items: center;
gap: var(--spacing-3);
padding: var(--spacing-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-fast);
}
swp-waitlist-card:hover {
border-color: var(--color-teal);
box-shadow: var(--shadow-md);
}
swp-waitlist-icon {
position: relative;
font-size: var(--font-size-2xl);
color: var(--color-text-secondary);
}
swp-waitlist-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 20px;
height: 20px;
padding: 0 var(--spacing-2);
background: var(--color-teal);
color: white;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
}
swp-waitlist-label {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}
/* ===========================================
WAITLIST LIST
=========================================== */
swp-waitlist-list {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
}
/* ===========================================
WAITLIST ITEM
=========================================== */
swp-waitlist-item {
display: flex;
flex-direction: column;
gap: var(--spacing-6);
padding: var(--spacing-8);
background: var(--color-background-alt);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
/* ===========================================
CUSTOMER SECTION
=========================================== */
swp-waitlist-customer {
display: flex;
align-items: center;
gap: var(--spacing-6);
}
swp-waitlist-customer swp-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--color-teal);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
swp-waitlist-customer-info {
flex: 1;
min-width: 0;
}
swp-waitlist-name {
display: block;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
swp-waitlist-phone {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ===========================================
SERVICE TAG
=========================================== */
swp-waitlist-service {
display: inline-block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
color: var(--color-teal);
padding: var(--spacing-2) var(--spacing-3);
background: color-mix(in srgb, var(--color-teal) 10%, transparent);
border-radius: var(--radius-sm);
}
/* ===========================================
META SECTION (Preferences & Dates)
=========================================== */
swp-waitlist-meta {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
swp-waitlist-periods {
display: flex;
align-items: center;
gap: var(--spacing-2);
flex-wrap: wrap;
}
swp-waitlist-periods swp-label {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
swp-waitlist-period-tag {
font-size: var(--font-size-xs);
padding: var(--spacing-1) var(--spacing-2);
background: var(--color-background);
border-radius: var(--radius-sm);
color: var(--color-text);
}
swp-waitlist-dates {
display: flex;
align-items: center;
gap: var(--spacing-4);
}
swp-waitlist-date {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: var(--spacing-1);
}
swp-waitlist-date i {
font-size: var(--font-size-sm);
}
swp-waitlist-date.expires.soon {
color: var(--color-amber);
font-weight: var(--font-weight-medium);
}
/* ===========================================
ACTION BUTTONS
=========================================== */
swp-waitlist-actions {
display: flex;
gap: var(--spacing-4);
padding-top: var(--spacing-4);
border-top: 1px solid var(--color-border);
}
swp-waitlist-actions swp-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2);
padding: var(--spacing-4) var(--spacing-6);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
border: none;
}
swp-waitlist-actions swp-btn.secondary {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-text);
}
swp-waitlist-actions swp-btn.secondary:hover {
background: var(--color-background-hover);
}
swp-waitlist-actions swp-btn.primary {
background: var(--color-teal);
color: white;
}
swp-waitlist-actions swp-btn.primary:hover {
opacity: 0.9;
}
/* ===========================================
EMPTY STATE
=========================================== */
swp-waitlist-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-10) var(--spacing-6);
text-align: center;
}
swp-waitlist-empty i {
font-size: 48px;
color: var(--color-border);
margin-bottom: var(--spacing-4);
}
swp-waitlist-empty span {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
}