Adds comprehensive Settings page with multiple configuration tabs
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
This commit is contained in:
Janus C. H. Knudsen
parent
7643a6ab82
commit
33c338345e
31 changed files with 3167 additions and 21 deletions
|
|
@ -114,7 +114,6 @@ swp-cash-table {
|
|||
justify-content: space-between;
|
||||
padding: var(--spacing-7) var(--spacing-10);
|
||||
background: var(--color-background-alt);
|
||||
border-top: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-md);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,17 @@
|
|||
* - swp-plan-card (subscription plan cards)
|
||||
* - swp-avatar (user avatars with size variants)
|
||||
* - swp-icon-btn (icon-only buttons)
|
||||
* - swp-card (content cards with section-label/footer)
|
||||
* - swp-card (content cards with header/title/section-label/footer)
|
||||
* - swp-card-header (card header with title and actions)
|
||||
* - swp-card-title (icon + text title)
|
||||
* - swp-section-label (card section headers)
|
||||
* - swp-section-header (section header with action link)
|
||||
* - swp-section-action (action link in section header)
|
||||
* - swp-add-button (dashed border add button)
|
||||
* - swp-info-box (callout box with icon)
|
||||
* - swp-section-intro (description text)
|
||||
* - swp-section-divider (horizontal line)
|
||||
* - swp-two-column-grid (responsive 2-column layout)
|
||||
* - BASE PATTERNS: table, list-item, icon-container (Grid+Subgrid reusable patterns)
|
||||
*/
|
||||
|
||||
|
|
@ -544,7 +550,32 @@ swp-card {
|
|||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--card-padding);
|
||||
margin-top: var(--section-gap);
|
||||
}
|
||||
|
||||
/* Card header - flex row with title and actions */
|
||||
swp-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--spacing-5) var(--card-padding);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--spacing-5);
|
||||
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
|
||||
}
|
||||
|
||||
/* Card title - icon + text */
|
||||
swp-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-3);
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
|
||||
& i {
|
||||
font-size: 20px;
|
||||
color: var(--color-teal);
|
||||
}
|
||||
}
|
||||
|
||||
/* Section label - simple card header */
|
||||
|
|
@ -1443,3 +1474,117 @@ swp-see-all {
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
INFO BOX (Callout)
|
||||
=========================================== */
|
||||
swp-info-box {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
margin-top: var(--section-gap);
|
||||
background: var(--bg-blue-subtle);
|
||||
border: 1px solid var(--bg-blue-border);
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
& i {
|
||||
font-size: 20px;
|
||||
color: var(--color-blue);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& p {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: var(--bg-green-subtle);
|
||||
border-color: var(--bg-green-border);
|
||||
|
||||
& i {
|
||||
color: var(--color-green);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: var(--bg-amber-subtle);
|
||||
border-color: var(--bg-amber-border);
|
||||
|
||||
& i {
|
||||
color: var(--color-amber);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SECTION INTRO (Description text)
|
||||
=========================================== */
|
||||
swp-section-intro {
|
||||
display: block;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
SECTION DIVIDER (Horizontal line)
|
||||
=========================================== */
|
||||
swp-section-divider {
|
||||
display: block;
|
||||
height: 1px;
|
||||
background: var(--color-border);
|
||||
margin: var(--spacing-5) 0;
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
ACTION BAR (Filter/toolbar with white bg)
|
||||
=========================================== */
|
||||
swp-action-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-4);
|
||||
padding: var(--spacing-4) var(--spacing-5);
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
swp-action-bar swp-btn-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
/* ===========================================
|
||||
TWO COLUMN GRID
|
||||
=========================================== */
|
||||
swp-two-column-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--card-gap);
|
||||
align-items: start;
|
||||
|
||||
/* Full width cards span both columns */
|
||||
& > .full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
swp-two-column-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stacked cards in a grid column */
|
||||
.stacked-cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--card-gap);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ swp-toggle-description {
|
|||
swp-toggle-slider {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-background);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
swp-page-container {
|
||||
display: block;
|
||||
max-width: var(--page-max-width);
|
||||
margin: 0 auto;
|
||||
margin-top: var(--section-gap);
|
||||
margin-bottom: var(--section-gap);
|
||||
padding-left: var(--page-padding);
|
||||
padding-right: var(--page-padding);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
*
|
||||
* 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)
|
||||
|
|
@ -16,21 +17,8 @@
|
|||
*/
|
||||
|
||||
/* ===========================================
|
||||
SERVICES HEADER (Search + Button)
|
||||
SEARCH INPUT
|
||||
=========================================== */
|
||||
|
||||
swp-services-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
swp-services-header swp-btn-group {
|
||||
display: flex;
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
|
||||
swp-search-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
692
PlanTempus.Application/wwwroot/css/settings.css
Normal file
692
PlanTempus.Application/wwwroot/css/settings.css
Normal file
|
|
@ -0,0 +1,692 @@
|
|||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue