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
692 lines
14 KiB
CSS
692 lines
14 KiB
CSS
/**
|
|
* Settings - Indstillinger page components
|
|
*
|
|
* Settings-specific styling only.
|
|
* Reuses: swp-card, swp-card-header, swp-card-title, swp-edit-section,
|
|
* swp-toggle-row, swp-info-box, swp-section-intro (components.css)
|
|
*/
|
|
|
|
/* ===========================================
|
|
HOURS TABLE (Åbningstider)
|
|
=========================================== */
|
|
swp-hours-table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
swp-hours-row {
|
|
display: grid;
|
|
grid-template-columns: 100px 80px 1fr;
|
|
gap: var(--spacing-5);
|
|
align-items: center;
|
|
padding: var(--spacing-4) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
swp-hours-day {
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-hours-time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
|
|
& span {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
& input[type="time"] {
|
|
width: 100px;
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
font-size: var(--font-size-sm);
|
|
font-family: var(--font-mono);
|
|
background: var(--color-background-alt);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text);
|
|
transition: all var(--transition-fast);
|
|
|
|
&:hover {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background: var(--color-surface);
|
|
border-color: var(--color-teal);
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-hours-closed {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ===========================================
|
|
CARD NOTE (used in Påmindelser)
|
|
=========================================== */
|
|
swp-card-note {
|
|
display: block;
|
|
margin-top: var(--spacing-4);
|
|
padding-top: var(--spacing-4);
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
swp-time-range {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
|
|
& span {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
& input[type="time"] {
|
|
width: 100px;
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
font-size: var(--font-size-sm);
|
|
font-family: var(--font-mono);
|
|
background: var(--color-background-alt);
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--color-text);
|
|
transition: all var(--transition-fast);
|
|
|
|
&:hover {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background: var(--color-surface);
|
|
border-color: var(--color-teal);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
URL FIELD (Booking URL)
|
|
=========================================== */
|
|
swp-url-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
background: var(--color-background-alt);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
|
|
& input {
|
|
flex: 1;
|
|
padding: var(--spacing-3) var(--spacing-4);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text);
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
swp-url-copy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: var(--color-background);
|
|
border-left: 1px solid var(--color-border);
|
|
cursor: pointer;
|
|
transition: all var(--transition-fast);
|
|
|
|
& i {
|
|
font-size: 18px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--color-teal);
|
|
|
|
& i {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
CLOSED DAYS LIST (Helligdage & Lukkedage)
|
|
=========================================== */
|
|
swp-closed-days-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
swp-closed-day-item {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
gap: var(--spacing-4);
|
|
align-items: center;
|
|
padding: var(--spacing-3) 0;
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
swp-closed-day-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-1);
|
|
}
|
|
|
|
swp-closed-day-date {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-closed-day-name {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
swp-closed-day-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-background);
|
|
color: var(--color-text-secondary);
|
|
|
|
&.holiday {
|
|
background: var(--bg-red-strong);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
&.custom {
|
|
background: var(--bg-blue-strong);
|
|
color: var(--color-blue);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
MODULES BADGE (section header)
|
|
=========================================== */
|
|
swp-modules-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-semibold);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-purple-strong);
|
|
color: var(--color-purple);
|
|
}
|
|
|
|
/* ===========================================
|
|
MODULES SECTION
|
|
=========================================== */
|
|
swp-modules-section {
|
|
margin-bottom: var(--section-gap);
|
|
}
|
|
|
|
swp-modules-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--spacing-5);
|
|
}
|
|
|
|
swp-modules-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-3);
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
|
|
& i {
|
|
font-size: 22px;
|
|
color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
swp-modules-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--card-gap);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
swp-modules-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
MODULE CARD
|
|
=========================================== */
|
|
swp-module-card {
|
|
display: block;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
transition: all var(--transition-fast);
|
|
|
|
&:hover {
|
|
border-color: var(--color-teal);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
&.full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
swp-module-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-5);
|
|
padding: var(--card-padding);
|
|
}
|
|
|
|
swp-module-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
& i {
|
|
font-size: 24px;
|
|
}
|
|
|
|
&.teal {
|
|
background: var(--bg-teal-strong);
|
|
color: var(--color-teal);
|
|
}
|
|
|
|
&.purple {
|
|
background: var(--bg-purple-strong);
|
|
color: var(--color-purple);
|
|
}
|
|
|
|
&.blue {
|
|
background: var(--bg-blue-strong);
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
&.amber {
|
|
background: var(--bg-amber-strong);
|
|
color: var(--color-amber);
|
|
}
|
|
|
|
&.green {
|
|
background: var(--bg-green-strong);
|
|
color: var(--color-green);
|
|
}
|
|
}
|
|
|
|
swp-module-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
swp-module-title {
|
|
display: block;
|
|
font-size: var(--font-size-md);
|
|
font-weight: var(--font-weight-semibold);
|
|
color: var(--color-text);
|
|
margin-bottom: var(--spacing-1);
|
|
}
|
|
|
|
swp-module-desc {
|
|
display: block;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
swp-module-toggle {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
swp-module-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--spacing-4) var(--card-padding);
|
|
background: var(--color-background-alt);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
swp-module-tags {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
}
|
|
|
|
swp-module-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--spacing-1) var(--spacing-3);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-background);
|
|
color: var(--color-text-secondary);
|
|
|
|
&.included {
|
|
background: var(--bg-green-strong);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
&.price {
|
|
background: var(--bg-blue-strong);
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
&.new {
|
|
background: var(--bg-purple-strong);
|
|
color: var(--color-purple);
|
|
}
|
|
|
|
&.coming {
|
|
background: var(--bg-amber-strong);
|
|
color: var(--color-amber);
|
|
}
|
|
}
|
|
|
|
/* Featured module card */
|
|
swp-module-card.featured {
|
|
border: 2px solid var(--color-green);
|
|
background: linear-gradient(135deg, var(--bg-green-subtle) 0%, var(--color-surface) 100%);
|
|
|
|
&:hover {
|
|
border-color: var(--color-green);
|
|
box-shadow: 0 4px 16px rgba(67, 160, 71, 0.15);
|
|
}
|
|
|
|
&.purple {
|
|
border-color: var(--color-purple);
|
|
background: linear-gradient(135deg, var(--bg-purple-subtle) 0%, var(--color-surface) 100%);
|
|
|
|
&:hover {
|
|
border-color: var(--color-purple);
|
|
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-module-features {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-2) var(--spacing-5);
|
|
padding: 0 var(--card-padding) var(--spacing-5);
|
|
}
|
|
|
|
swp-module-feature {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-2);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-text-secondary);
|
|
|
|
& i {
|
|
font-size: 16px;
|
|
color: var(--color-green);
|
|
}
|
|
|
|
&.purple i {
|
|
color: var(--color-purple);
|
|
}
|
|
}
|
|
|
|
swp-module-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-5) var(--card-padding);
|
|
background: var(--bg-green-subtle);
|
|
border-top: 1px solid var(--bg-green-border);
|
|
border-bottom: 1px solid var(--bg-green-border);
|
|
|
|
&.purple {
|
|
background: var(--bg-purple-subtle);
|
|
border-color: var(--bg-purple-border);
|
|
|
|
swp-module-stat-value {
|
|
color: var(--color-purple);
|
|
}
|
|
}
|
|
}
|
|
|
|
swp-module-stat {
|
|
text-align: center;
|
|
}
|
|
|
|
swp-module-stat-value {
|
|
display: block;
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-bold);
|
|
font-family: var(--font-mono);
|
|
color: var(--color-green);
|
|
}
|
|
|
|
swp-module-stat-label {
|
|
display: block;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--color-text-secondary);
|
|
margin-top: var(--spacing-1);
|
|
}
|
|
|
|
/* ===========================================
|
|
TRACKING COMPONENTS
|
|
=========================================== */
|
|
swp-tracking-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
padding: 10px 12px;
|
|
background: color-mix(in srgb, var(--color-blue) 8%, transparent);
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
|
|
& i {
|
|
font-size: 16px;
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
&.privacy {
|
|
background: color-mix(in srgb, var(--color-green) 8%, transparent);
|
|
|
|
& i {
|
|
color: var(--color-green);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Modules tab max-width */
|
|
swp-tab-content[data-tab="modules"] swp-page-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Tracking tab uses 2-column grid layout */
|
|
swp-tab-content[data-tab="tracking"] swp-page-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
swp-tab-content[data-tab="tracking"] swp-page-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Full-width in tracking grid */
|
|
swp-tab-content[data-tab="tracking"] .full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* Tracking card variant */
|
|
.tracking-card {
|
|
margin-bottom: 0;
|
|
|
|
& swp-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
&[data-tracker] swp-card-content {
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
&[data-tracker].disabled swp-card-content {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/* Script section for custom tracking */
|
|
swp-script-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
swp-script-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
|
|
& i {
|
|
font-size: 16px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
|
|
.script-textarea {
|
|
width: 100%;
|
|
min-height: 100px;
|
|
padding: 12px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
resize: vertical;
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
CODE PREVIEW CARD (Tracking)
|
|
=========================================== */
|
|
.code-preview-card {
|
|
grid-column: 1 / -1;
|
|
border: 2px dashed var(--color-teal);
|
|
background: color-mix(in srgb, var(--color-teal) 3%, var(--color-surface));
|
|
|
|
& swp-card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
& swp-card-title {
|
|
color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
swp-code-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
|
|
& i {
|
|
font-size: 16px;
|
|
color: var(--color-teal);
|
|
}
|
|
}
|
|
|
|
.code-preview {
|
|
margin: 0;
|
|
padding: 16px;
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
|
|
& code {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
color: var(--color-text);
|
|
white-space: pre;
|
|
}
|
|
|
|
& .comment {
|
|
color: var(--color-green);
|
|
}
|
|
|
|
& .tag {
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
& .attr {
|
|
color: var(--color-purple);
|
|
}
|
|
|
|
& .string {
|
|
color: var(--color-teal);
|
|
}
|
|
}
|