/* ══════════════════════════════════════════════════════════════════ SCHEDULINK THEME KIT · v1 · 2026-07-25 ------------------------------------------------------------------ Fristående design-tokens + semantiska klasser ur Schedulink (schedulelinked.com). INGA beroenden: ingen Tailwind, inga fonter, inga bilder — bara CSS. Släng in filen i vilken app som helst för att få EXAKT samma färgtoner, ytor, kanter och glöd. Tre teman (sätt klassen på ): .theme-marina — "Orbital": djupsvart rymdlook m. elektriskt blå neon. STANDARD i Schedulink. .theme-claude — ljust/neutralt (default om ingen klass sätts). .theme-dark — neutralt mörkt (grafit, ingen neon). Snabbstart: … Använd antingen variablerna direkt (var(--accent), var(--surface) …) eller de färdiga .sl-*-klasserna. Variablerna är kontraktet — de heter samma i alla tre teman, så din app behöver aldrig veta vilket tema som är aktivt. ══════════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ───────────────────────────────────────────────────── */ /* Ljust (Claude) — även fallback när ingen tema-klass är satt. */ :root, .theme-claude { color-scheme: light; --app-bg: #f6f7f9; --app-bg-soft: #eef1f5; --sidebar-bg: #ffffff; --sidebar-border: #e7e9ee; --surface: #ffffff; --surface-2: #f7f8fa; --surface-border: #e7e9ee; --text: #1f2430; --text-muted: #6b7280; --text-faint: #9aa2b1; --accent: #2563eb; --accent-hover: #1d4ed8; --accent-contrast: #ffffff; --hover: #f1f3f7; --chip-bg: #eef1f5; --chip-text: #4b5563; --ring: rgba(37, 99, 235, 0.35); } /* Marina — "Orbital": nästan rent svart rymdbakgrund, elektriskt blå kontraster, tunna glödande HUD-kanter. Schedulinks standardtema. */ .theme-marina { color-scheme: dark; --app-bg: #01040b; --app-bg-soft: #030a18; --sidebar-bg: #010309; --sidebar-border: rgba(84, 168, 255, 0.16); --surface: #050d1d; --surface-2: #030916; --surface-border: rgba(84, 168, 255, 0.2); --text: #f0f6ff; --text-muted: #93a9c9; --text-faint: #5f7595; --accent: #2f7dff; --accent-hover: #5b9bff; --accent-contrast: #ffffff; --hover: rgba(84, 168, 255, 0.09); --chip-bg: rgba(84, 168, 255, 0.1); --chip-text: #bcd4f5; --ring: rgba(84, 168, 255, 0.55); } /* Mörkt — neutral grafit utan marina-temats blåton och neon. */ .theme-dark { color-scheme: dark; --app-bg: #0b0b0d; --app-bg-soft: #121216; --sidebar-bg: #0e0e11; --sidebar-border: #26262c; --surface: #17171b; --surface-2: #101014; --surface-border: #2a2a31; --text: #ececf0; --text-muted: #a3a3ad; --text-faint: #71717c; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-contrast: #ffffff; --hover: rgba(255, 255, 255, 0.05); --chip-bg: rgba(255, 255, 255, 0.06); --chip-text: #c6c6cf; --ring: rgba(59, 130, 246, 0.45); } /* ── 2. SEMANTISKA KLASSER (samma namn som i Schedulink) ─────────── */ .sl-app { background: var(--app-bg); color: var(--text); } .sl-sidebar { background: var(--sidebar-bg); border-color: var(--sidebar-border); } .sl-surface { background: var(--surface); border: 1px solid var(--surface-border); } .sl-surface-2 { background: var(--surface-2); } .sl-border { border-color: var(--surface-border); } .sl-text { color: var(--text); } .sl-muted { color: var(--text-muted); } .sl-faint { color: var(--text-faint); } .sl-chip { background: var(--chip-bg); color: var(--chip-text); } .sl-hover { transition: background 0.15s ease, color 0.15s ease; } .sl-hover:hover { background: var(--hover); } .sl-accent { background: var(--accent); color: var(--accent-contrast); } .sl-accent:hover { background: var(--accent-hover); } .sl-accent-text { color: var(--accent); } .sl-input { background: var(--surface); border: 1px solid var(--surface-border); color: var(--text); } .sl-input::placeholder { color: var(--text-faint); } .sl-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } /* Diskret elektrisk glöd — temaneutral utility. */ .sl-glow { box-shadow: 0 0 0 1px rgba(56, 180, 255, 0.15), 0 0 18px -6px rgba(56, 180, 255, 0.45); } /* ── 3. MARINA-EXTRAS (Orbital-looken) ─────────────────────────── Bara aktiva i .theme-marina; övriga teman påverkas inte. */ /* Rymdbakgrund: blå glöd uppifrån + statiska "stjärnor" (billigt, ingen animering, fixed så det inte scrollar med). */ .theme-marina .sl-app { background: radial-gradient(1100px 560px at 50% -12%, rgba(47, 125, 255, 0.18) 0%, rgba(47, 125, 255, 0.05) 38%, transparent 64%), radial-gradient(1.5px 1.5px at 12% 22%, rgba(190, 220, 255, 0.5) 50%, transparent 51%), radial-gradient(1px 1px at 28% 64%, rgba(190, 220, 255, 0.35) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 47% 38%, rgba(190, 220, 255, 0.28) 50%, transparent 51%), radial-gradient(1px 1px at 66% 74%, rgba(190, 220, 255, 0.38) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 81% 18%, rgba(190, 220, 255, 0.45) 50%, transparent 51%), radial-gradient(1px 1px at 92% 52%, rgba(190, 220, 255, 0.3) 50%, transparent 51%), var(--app-bg); background-attachment: fixed; } /* HUD-paneler: tunn ljusblå kant + svag glöd. */ .theme-marina .sl-surface { box-shadow: inset 0 0 0 0.5px rgba(120, 190, 255, 0.06), 0 0 24px -16px rgba(47, 125, 255, 0.6); } /* Neon-knappar: tunn ljus kantlinje + tight sken (ingen bred blur). */ .theme-marina .sl-accent { box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.3), 0 0 10px -4px var(--accent); } .theme-marina .sl-accent:hover { box-shadow: 0 0 0 1px rgba(150, 205, 255, 0.45), 0 0 12px -4px var(--accent-hover); } .theme-marina .sl-accent svg { filter: drop-shadow(0 0 1px rgba(190, 220, 255, 0.5)); } .theme-marina .sl-muted.sl-hover:hover { color: #d7e7ff; } /* ── 4. STATUS-BADGAR ──────────────────────────────────────────── Semantiska tillstånd (klart/kommande/pausat/arkiverat) — samma färglogik i alla teman, ljusare text i de mörka. */ .sl-badge-active { background: rgba(16, 185, 129, 0.14); color: #059669; } .sl-badge-upcoming { background: rgba(59, 130, 246, 0.14); color: #2563eb; } .sl-badge-inactive { background: rgba(245, 158, 11, 0.16); color: #b45309; } .sl-badge-archived { background: rgba(148, 163, 184, 0.18); color: #64748b; } .theme-marina .sl-badge-active, .theme-dark .sl-badge-active { color: #34d399; } .theme-marina .sl-badge-upcoming, .theme-dark .sl-badge-upcoming { color: #60a5fa; } .theme-marina .sl-badge-inactive, .theme-dark .sl-badge-inactive { color: #fbbf24; } .theme-marina .sl-badge-archived, .theme-dark .sl-badge-archived { color: #94a3b8; } /* ── 5. APP-IKON-AVATAR ────────────────────────────────────────── iOS-squircle med glans och djup. Färgen sätts per element: JH */ .sl-appicon { border-radius: 24%; background: linear-gradient( 145deg, color-mix(in srgb, var(--tile) 88%, #ffffff 12%) 0%, var(--tile) 45%, color-mix(in srgb, var(--tile) 70%, #000000 30%) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3); } .theme-marina .sl-appicon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px color-mix(in srgb, var(--tile) 55%, transparent), 0 0 14px -4px var(--tile); } /* ── 6. VALFRIA FÄRDIGA KOMPONENTER ────────────────────────────── Schedulink självt sätter mått/spacing med Tailwind-klasser. Har din andra app ingen Tailwind: använd dessa i stället — de bygger på samma tokens och ger identisk känsla utan utility-klasser. (Vill du bara ha färgerna: ignorera hela avsnittet.) */ .sl-kit body, body.sl-app { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* Kort */ .sl-card { background: var(--surface); border: 1px solid var(--surface-border); border-radius: 14px; padding: 16px 18px; } .theme-marina .sl-card { box-shadow: inset 0 0 0 0.5px rgba(120, 190, 255, 0.06), 0 0 24px -16px rgba(47, 125, 255, 0.6); } .sl-card-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text); } .sl-card-sub { margin: 0; font-size: 13px; color: var(--text-muted); } /* Knappar */ .sl-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--surface-border); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .sl-btn:hover { background: var(--hover); } .sl-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .sl-btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-contrast); } .sl-btn-primary:hover { background: var(--accent-hover); } .theme-marina .sl-btn-primary { box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.3), 0 0 10px -4px var(--accent); } .theme-marina .sl-btn-primary:hover { box-shadow: 0 0 0 1px rgba(150, 205, 255, 0.45), 0 0 12px -4px var(--accent-hover); } .sl-btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .sl-btn-ghost:hover { background: var(--hover); color: var(--text); } /* Fält */ .sl-field { min-height: 38px; padding: 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--surface-border); color: var(--text); font: inherit; font-size: 14px; } .sl-field::placeholder { color: var(--text-faint); } .sl-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } /* Piller/chip */ .sl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); font-size: 12px; font-weight: 600; } /* Tabell */ .sl-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--text); } .sl-table th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--text-faint); border-bottom: 1px solid var(--surface-border); } .sl-table td { padding: 9px 10px; border-bottom: 1px solid var(--surface-border); } .sl-table tbody tr:hover td { background: var(--hover); } /* Rullningslist i temats färger (mörka teman får mörk list via color-scheme; detta finslipar den i WebKit). */ .sl-app ::-webkit-scrollbar { width: 10px; height: 10px; } .sl-app ::-webkit-scrollbar-thumb { background: var(--chip-bg); border-radius: 999px; } .sl-app ::-webkit-scrollbar-thumb:hover { background: var(--hover); } @media (prefers-reduced-motion: reduce) { .sl-hover, .sl-btn { transition: none; } }