/* * starlit-forms.css — Design System for Starlit * * Architecture: Primitive → Semantic → Component * Component code only references semantic tokens. * Primitive values are defined in :root and never used directly in components. * * Themes: two only — Dark (Sunset Boulevard: deep navy bg, burnt orange primary, * gold #FFD700 brand accent) is the default and lives in :root, with no data-theme * attribute on ; Light (Arctic Frost) overrides the same tokens under * html[data-theme="light-slate"]. */ /* ═══════════════════════════════════════════════════════ 1. PRIMITIVE PALETTE ═══════════════════════════════════════════════════════ */ :root { /* Sunset Boulevard — default (Dark) theme base colors */ --bg-color: #111e25; --panel-bg: #1a2d35; --menu-color: #264653; /* Brand accent — gold, overridden by the Light theme */ --color-brand-accent: #FFD700; --color-brand-accent-dim: rgba(255,215,0,0.50); --color-brand-accent-faint: rgba(255,215,0,0.08); /* Neutrals (deep navy scale) */ --gray-0: #0a1018; --gray-50: #0f1825; --gray-100: #162030; --gray-200: #1e2c40; --gray-300: #2c3e56; --gray-400: #4c6480; --gray-500: #7890a8; --gray-600: #9eb4c8; --gray-700: #c2d2e0; --gray-800: #dce8f0; --gray-900: #f1faee; /* Sunset Boulevard primary scale — burnt orange */ --primary-50: rgba(231,111,81,0.05); --primary-100: rgba(231,111,81,0.10); --primary-200: rgba(231,111,81,0.20); --primary-300: rgba(231,111,81,0.38); --primary-400: rgba(231,111,81,0.65); --primary-500: #e76f51; --primary-600: #c4563a; --primary-700: #a33e28; --primary-contrast: #fff8f6; /* Feedback */ --red-100: rgba(220,53,69,0.15); --red-300: rgba(220,53,69,0.40); --red-500: #F87171; --amber-100: rgba(255,215,0,0.08); --amber-300: rgba(255,215,0,0.25); --amber-500: #FBBF24; --green-100: rgba(16,185,129,0.12); --green-500: #34D399; /* ═══════════════════════════════════════════════════ 2. SEMANTIC TOKENS ═══════════════════════════════════════════════════ */ /* Surface */ --color-page-bg: var(--gray-0); --color-surface: var(--gray-100); --color-surface-raised:var(--gray-200); --color-border: var(--gray-200); --color-overlay: rgba(0,0,0,0.60); /* Text */ --color-text: var(--gray-900); --color-text-secondary:var(--gray-700); --color-text-muted: var(--gray-600); --color-text-disabled: var(--gray-400); --color-label: rgba(255,255,255,0.38); /* Form fields */ --color-field-bg: rgba(255,255,255,0.07); --color-field-bg-hover: rgba(255,255,255,0.09); --color-field-bg-focus: rgba(255,255,255,0.10); --color-field-bg-disabled: rgba(255,255,255,0.03); --color-field-text: rgba(255,255,255,0.88); --color-field-text-focus: rgba(255,255,255,0.95); --color-field-placeholder: rgba(255,255,255,0.22); --color-field-border: rgba(255,255,255,0.13); --color-field-border-hover: rgba(255,255,255,0.22); --color-field-border-disabled: rgba(255,255,255,0.07); --color-field-option-bg: #1e2c40; /* Focus */ --color-focus-ring: rgba(231,111,81,0.55); --color-focus-shadow: rgba(231,111,81,0.08); /* Primary action */ --color-primary: var(--primary-500); --color-primary-hover: #f4a261; --color-primary-active: var(--primary-600); --color-primary-contrast: var(--primary-contrast); --color-primary-ghost-bg: var(--primary-50); /* Feedback */ --color-error-text: var(--red-500); --color-error-border: var(--red-500); --color-error-bg: var(--red-100); --color-error-surface: var(--red-100); --color-warning-text: rgba(255,220,100,0.85); --color-warning-border:var(--amber-300); --color-warning-bg: var(--amber-100); --color-success-text: var(--green-500); --color-success-border:var(--green-500); --color-success-bg: var(--green-100); /* Links */ --color-link: #f4a261; --color-link-hover: #e76f51; /* ═══════════════════════════════════════════════════ 3. DESIGN TOKENS — Radius, Shadow, Transition ═══════════════════════════════════════════════════ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.40); --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.50); --shadow-focus: 0 0 0 2px var(--color-focus-shadow); --transition-fast: 100ms ease; --transition-base: 150ms ease; --transition-slow: 250ms ease-out; /* Requirements / Group Requirements sub-cards (Threshold / Interval). Slightly darker than the surrounding section (--panel-bg). Dark themes share this overlay default; light themes override the two tokens below. */ --req-card-bg: rgba(0,0,0,0.22); --req-card-border: rgba(255,255,255,0.06); } /* ═══════════════════════════════════════════════════════ 4. PAGE HEADER — common across all form pages ═══════════════════════════════════════════════════════ */ .page-title { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.88); } .page-subtitle { font-size: 0.68rem; color: rgba(255,255,255,0.30); letter-spacing: 1.2px; text-transform: uppercase; } /* ═══════════════════════════════════════════════════════ 5. BADGE — gold accent chip ═══════════════════════════════════════════════════════ */ .ac-badge { font-size: 0.75rem; font-weight: 700; color: var(--primary-400); background: var(--primary-50); border: 1px solid var(--primary-200); border-radius: var(--radius-md); padding: 0.25rem 0.7rem; letter-spacing: 0.5px; display: inline-block; } /* Team member badge — user chip in group members list */ .team-member-badge { font-size: 0.73rem; font-weight: 600; color: var(--color-brand-accent); background: var(--color-brand-accent-faint); border: 1px solid var(--color-brand-accent-dim); border-radius: var(--radius-md); padding: 0.2rem 0.65rem; letter-spacing: 0.3px; display: inline-flex; align-items: center; transition: background-color 0.15s, color 0.15s; } .team-member-badge:hover { background: var(--color-brand-accent-dim); color: rgba(255,255,255,0.95); } /* ═══════════════════════════════════════════════════════ 6. FORM SECTION CONTAINER ═══════════════════════════════════════════════════════ */ .form-section { background-color: var(--panel-bg); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); padding: 1.2rem 1.1rem 0.6rem; margin-bottom: 1rem; } .form-section-title { font-size: 0.62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary-400); margin-bottom: 0.9rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(255,255,255,0.06); } /* Threshold / Interval sub-cards inside Requirements & Group Requirements. Full-height so the two side-by-side cards align; header is theme-readable. */ .req-card { background-color: var(--req-card-bg); border: 1px solid var(--req-card-border); border-radius: var(--radius-md); padding: 0.85rem 0.85rem 0.1rem; height: 100%; } .req-card-header { font-size: 0.66rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary-400); text-align: center; margin-bottom: 0.85rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--req-card-border); } /* ═══════════════════════════════════════════════════════ 7. DARK FORM — full input state matrix ═══════════════════════════════════════════════════════ */ /* Labels */ .dark-form .form-label, .dark-form label { font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: var(--color-label) !important; margin-bottom: 0.3rem !important; } /* Default state */ .dark-form .form-control, .dark-form .form-select { width: 100% !important; background-color: var(--color-field-bg) !important; border: 1px solid var(--color-field-border) !important; border-radius: var(--radius-md) !important; color: var(--color-field-text) !important; font-size: 0.85rem !important; transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } /* Placeholder */ .dark-form .form-control::placeholder { color: var(--color-field-placeholder) !important; } /* Hover state */ .dark-form .form-control:hover:not(:disabled):not(:focus), .dark-form .form-select:hover:not(:disabled):not(:focus) { border-color: var(--color-field-border-hover) !important; background-color: var(--color-field-bg-hover) !important; } /* Focus state — 2px ring, no layout shift */ .dark-form .form-control:focus, .dark-form .form-select:focus { border-color: var(--color-focus-ring) !important; box-shadow: var(--shadow-focus) !important; background-color: var(--color-field-bg-focus) !important; color: var(--color-field-text-focus) !important; outline: none !important; } /* Disabled state */ .dark-form .form-control:disabled, .dark-form .form-select:disabled { background-color: var(--color-field-bg-disabled) !important; border-color: var(--color-field-border-disabled) !important; color: var(--color-text-disabled) !important; cursor: not-allowed; opacity: 0.7; } /* Readonly state — non modificabile, ma il valore deve restare leggibile: lo sfondo/bordo attenuati bastano a dire "non lo puoi cambiare". */ .dark-form .form-control[readonly] { background-color: var(--color-field-bg-disabled) !important; border-color: var(--color-field-border-disabled) !important; color: var(--color-field-text) !important; cursor: default; } /* Readonly plain text */ .dark-form .form-control-plaintext { color: rgba(255,255,255,0.55) !important; background: rgba(255,255,255,0.04) !important; border-radius: var(--radius-md) !important; padding: 0.42rem 0.6rem !important; width: 100% !important; } /* Error state */ .dark-form .form-control.is-invalid, .dark-form .form-select.is-invalid { border-color: var(--color-error-border) !important; background-color: var(--color-error-bg) !important; } .dark-form .invalid-feedback { font-size: 0.72rem; color: var(--color-error-text); } /* Success state */ .dark-form .form-control.is-valid, .dark-form .form-select.is-valid { border-color: var(--color-success-border) !important; } /* Select dropdown options */ .dark-form select option, .dark-form .form-select option { background-color: var(--color-field-option-bg); color: #fff; } /* La lista aperta di una originale (containerCssClass ':all:' in autocomplete_light/select2.js): qui si allineano solo altezza e carattere agli altri campi, i colori restano quelli del tema. */ .select2-container.pn-instant-search { display: block; } .select2-container.pn-instant-search .select2-selection--single { height: calc(1.5em + 0.75rem + 2px); display: flex; align-items: center; } .select2-container.pn-instant-search .select2-selection--single .select2-selection__rendered { font-size: 0.82rem; line-height: 1.5; padding-left: 0.75rem; padding-right: 2.2rem; } .select2-container.pn-instant-search .select2-selection--single .select2-selection__arrow { height: 100%; } /* Select2 con class 'form-control' (instant search ICAO/IATA delle leg, Place/Station dei WO, ...): DAL copia le classi del