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
453 lines
9.7 KiB
CSS
453 lines
9.7 KiB
CSS
/**
|
|
* Services Styles
|
|
*
|
|
* Feature-specific styling only.
|
|
* Reuses:
|
|
* - swp-action-bar (components.css)
|
|
* - swp-stat-card (stats.css)
|
|
* - swp-data-table (components.css)
|
|
* - swp-sticky-header, swp-page-container (page.css)
|
|
* - swp-row-toggle (components.css)
|
|
* - swp-btn (components.css)
|
|
* - swp-detail-grid, swp-edit-section (components.css)
|
|
* - swp-tags-row, swp-tag (components.css)
|
|
* - swp-status-indicator (components.css)
|
|
* - swp-fact-boxes-inline (components.css)
|
|
* - view-fade-out (components.css)
|
|
*/
|
|
|
|
/* ===========================================
|
|
SEARCH INPUT
|
|
=========================================== */
|
|
swp-search-input {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
min-width: 280px;
|
|
|
|
i {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
input {
|
|
border: none;
|
|
background: transparent;
|
|
outline: none;
|
|
box-shadow: none;
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
width: 100%;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
}
|
|
|
|
&:focus-within {
|
|
border-color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICES LIST TABLE
|
|
=========================================== */
|
|
|
|
swp-card.services-list {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Table columns: Service(1fr) | Varighed(100px) | Pris(100px) | Caret(40px) */
|
|
swp-card.services-list swp-data-table {
|
|
grid-template-columns: 1fr 100px 100px 40px;
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-header,
|
|
swp-card.services-list swp-data-table-row,
|
|
swp-card.services-list swp-category-row {
|
|
padding: 0 var(--spacing-10);
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-header swp-data-table-cell {
|
|
padding-top: var(--spacing-5);
|
|
padding-bottom: var(--spacing-5);
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-row {
|
|
cursor: pointer;
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-cell {
|
|
padding: var(--spacing-5) 0;
|
|
|
|
&:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Mono font for duration and price columns */
|
|
swp-card.services-list swp-data-table-row swp-data-table-cell:nth-child(2),
|
|
swp-card.services-list swp-data-table-row swp-data-table-cell:nth-child(3) {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ===========================================
|
|
CATEGORY ROW
|
|
=========================================== */
|
|
|
|
swp-category-row {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: subgrid;
|
|
background: var(--bg-blue-subtle);
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--color-border);
|
|
border-left: 4px solid var(--color-blue);
|
|
}
|
|
|
|
swp-category-row:hover {
|
|
background: var(--bg-blue-medium);
|
|
}
|
|
|
|
swp-category-row swp-data-table-cell {
|
|
padding: var(--spacing-5) 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
swp-category-row swp-data-table-cell:first-child {
|
|
font-weight: var(--font-weight-semibold);
|
|
font-size: var(--font-size-base);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-category-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: var(--color-blue);
|
|
background: var(--bg-blue-medium);
|
|
border-radius: var(--radius-sm);
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
swp-category-row:hover swp-category-toggle {
|
|
background: var(--bg-blue-strong);
|
|
}
|
|
|
|
swp-category-toggle i {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
swp-category-row[data-expanded="false"] swp-category-toggle i {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.category-name {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.category-count {
|
|
color: var(--color-text-tertiary);
|
|
font-weight: var(--font-weight-normal);
|
|
font-size: var(--font-size-xs);
|
|
margin-left: var(--spacing-2);
|
|
}
|
|
|
|
/* Category edit icon */
|
|
swp-category-edit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
color: var(--color-text-tertiary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
opacity: 0;
|
|
}
|
|
|
|
swp-category-row:hover swp-category-edit {
|
|
opacity: 1;
|
|
}
|
|
|
|
swp-category-edit:hover {
|
|
color: var(--color-blue);
|
|
background: var(--bg-blue-medium);
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICE ROW (indented under category)
|
|
=========================================== */
|
|
|
|
swp-card.services-list swp-data-table-row swp-data-table-cell:first-child {
|
|
padding-left: 56px;
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICE ROW HOVER
|
|
=========================================== */
|
|
|
|
swp-card.services-list swp-data-table-row:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
swp-card.services-list swp-data-table-row:hover swp-row-toggle {
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
/* ===========================================
|
|
VIEW CONTAINERS (List / Detail)
|
|
=========================================== */
|
|
|
|
swp-services-list-view,
|
|
swp-service-detail-view {
|
|
transition: opacity 100ms ease;
|
|
}
|
|
|
|
swp-service-detail-view {
|
|
display: none;
|
|
}
|
|
|
|
/* ===========================================
|
|
SERVICE DETAIL HEADER
|
|
=========================================== */
|
|
|
|
swp-service-detail-header {
|
|
display: flex;
|
|
gap: var(--spacing-6);
|
|
padding: var(--spacing-6) 0;
|
|
}
|
|
|
|
swp-service-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
swp-service-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
swp-service-name {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
outline: none;
|
|
|
|
&:focus {
|
|
border-bottom: 1px dashed var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
PRICE MODE TOGGLE (Priser tab)
|
|
=========================================== */
|
|
|
|
swp-price-mode {
|
|
display: flex;
|
|
gap: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
margin-bottom: var(--spacing-6);
|
|
width: fit-content;
|
|
}
|
|
|
|
swp-price-mode-btn {
|
|
padding: var(--spacing-3) var(--spacing-6);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
transition: all var(--transition-fast);
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
&.active {
|
|
background: var(--color-teal);
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
PRICE MATRIX TABLE (Priser tab)
|
|
=========================================== */
|
|
|
|
swp-price-matrix {
|
|
display: block;
|
|
}
|
|
|
|
swp-data-table.price-matrix {
|
|
grid-template-columns: 3fr repeat(4, 2fr);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
swp-data-table.price-matrix swp-data-table-cell:first-child {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
swp-data-table.price-matrix span[contenteditable="true"] {
|
|
outline: none;
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
border-radius: var(--radius-sm);
|
|
|
|
&:hover {
|
|
background: var(--color-background-alt);
|
|
}
|
|
|
|
&:focus {
|
|
background: var(--color-surface);
|
|
box-shadow: 0 0 0 2px var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
DURATION LIST (Varighed tab)
|
|
=========================================== */
|
|
|
|
swp-duration-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-2);
|
|
margin-bottom: var(--spacing-6);
|
|
}
|
|
|
|
swp-duration-item {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-4);
|
|
background: var(--color-background-alt);
|
|
border-radius: var(--radius-md);
|
|
transition: background var(--transition-fast);
|
|
|
|
&:hover {
|
|
background: var(--color-background-hover);
|
|
}
|
|
}
|
|
|
|
swp-duration-name {
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-duration-value {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-base);
|
|
color: var(--color-text);
|
|
|
|
span[contenteditable="true"] {
|
|
outline: none;
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
border-radius: var(--radius-sm);
|
|
min-width: 40px;
|
|
text-align: right;
|
|
|
|
&:hover {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
&:focus {
|
|
background: var(--color-surface);
|
|
box-shadow: 0 0 0 2px var(--color-teal);
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-duration-unit {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
swp-duration-delete {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text-tertiary);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
opacity: 0;
|
|
|
|
&:hover {
|
|
color: var(--color-red);
|
|
background: var(--bg-red-subtle);
|
|
}
|
|
}
|
|
|
|
swp-duration-item:hover swp-duration-delete {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ===========================================
|
|
AVAILABILITY LIST (Services - Tilgængelighed)
|
|
=========================================== */
|
|
swp-availability-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
swp-availability-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-2) var(--spacing-4);
|
|
padding: var(--spacing-3) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&[data-enabled="false"] {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
swp-availability-day {
|
|
width: 100%;
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-availability-time {
|
|
flex: 1;
|
|
transition: opacity var(--transition-fast);
|
|
}
|