33c338345e
Introduces a new Settings page with configurable modules: - General company information - Calendar and booking settings - Billing and payment configurations - Tracking and analytics integrations Implements modular ViewComponents for each settings section Enhances user experience with toggle switches and detailed configuration options
232 lines
5.1 KiB
CSS
232 lines
5.1 KiB
CSS
/**
|
|
* Page Layout - Content Area Structure
|
|
*
|
|
* Page container, headers, cards og grid layouts
|
|
*/
|
|
|
|
/* ===========================================
|
|
PAGE CONTAINER
|
|
=========================================== */
|
|
swp-page-container {
|
|
display: block;
|
|
max-width: var(--page-max-width);
|
|
margin-top: var(--section-gap);
|
|
margin-bottom: var(--section-gap);
|
|
padding-left: var(--page-padding);
|
|
padding-right: var(--page-padding);
|
|
}
|
|
|
|
/* ===========================================
|
|
STICKY HEADER (Generic - use for all tabbed pages)
|
|
=========================================== */
|
|
swp-sticky-header {
|
|
display: block;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
background: var(--color-surface);
|
|
overflow: visible;
|
|
/* INGEN padding eller border - det er på swp-header-content */
|
|
}
|
|
|
|
/* Override tab-bar sticky when inside sticky header */
|
|
swp-sticky-header swp-tab-bar {
|
|
position: static;
|
|
top: auto;
|
|
}
|
|
|
|
/* Header content wrapper - HAR padding + border */
|
|
swp-header-content {
|
|
display: block;
|
|
background: var(--color-surface);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: var(--spacing-10) var(--spacing-12);
|
|
}
|
|
|
|
swp-header-content swp-page-header {
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
swp-header-content swp-stats-row {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ===========================================
|
|
PAGE HEADER
|
|
=========================================== */
|
|
swp-page-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--section-gap);
|
|
}
|
|
|
|
swp-page-title h1 {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
|
|
swp-page-title p {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-page-actions {
|
|
display: flex;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
/* ===========================================
|
|
CARD CONTENT GRIDS (Page-specific)
|
|
Base card styles in components.css
|
|
=========================================== */
|
|
/* Card content with grid lists - auto-detect via :has() */
|
|
swp-card-content:has(> swp-booking-list),
|
|
swp-card-content:has(> swp-notification-list),
|
|
swp-card-content:has(> swp-attention-list) {
|
|
display: grid;
|
|
gap: var(--spacing-5);
|
|
}
|
|
|
|
swp-card-content:has(> swp-booking-list) {
|
|
grid-template-columns: 50px 4px 1fr auto auto;
|
|
}
|
|
|
|
swp-card-content:has(> swp-notification-list) {
|
|
grid-template-columns: 50px 1fr;
|
|
}
|
|
|
|
swp-card-content:has(> swp-attention-list) {
|
|
grid-template-columns: 50px 1fr auto;
|
|
}
|
|
|
|
/* Generic list item title & description */
|
|
swp-item-title {
|
|
display: block;
|
|
font-size: var(--font-size-md);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
swp-item-desc {
|
|
display: block;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* ===========================================
|
|
DASHBOARD GRID
|
|
=========================================== */
|
|
swp-dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 380px;
|
|
gap: var(--card-gap);
|
|
}
|
|
|
|
swp-main-column,
|
|
swp-side-column {
|
|
display: grid;
|
|
gap: var(--card-gap);
|
|
align-content: start;
|
|
}
|
|
|
|
/* ===========================================
|
|
AI INSIGHT
|
|
=========================================== */
|
|
swp-ai-insight {
|
|
display: block;
|
|
padding: var(--card-padding);
|
|
background: linear-gradient(135deg,
|
|
var(--bg-purple-medium),
|
|
var(--bg-teal-medium)
|
|
);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
swp-ai-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
margin-bottom: var(--spacing-2);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-purple);
|
|
|
|
& i {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
}
|
|
|
|
swp-ai-text {
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
line-height: var(--line-height-relaxed);
|
|
}
|
|
|
|
/* ===========================================
|
|
QUICK ACTIONS
|
|
=========================================== */
|
|
swp-quick-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
}
|
|
|
|
swp-quick-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--card-padding);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family);
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
|
|
& i {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--color-background-hover);
|
|
border-color: var(--color-teal);
|
|
color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
RESPONSIVE
|
|
=========================================== */
|
|
@media (max-width: 1200px) {
|
|
swp-dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
swp-side-column {
|
|
order: -1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
swp-page-container {
|
|
padding: var(--spacing-5);
|
|
}
|
|
|
|
swp-page-header {
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
swp-page-actions {
|
|
width: 100%;
|
|
}
|
|
}
|