/** * LDWOL core — delade stilar för alla övningar. * * Paletten är en enfärgad ordinal ramp (blå, ljus→mörk). Den sitter på varje * övnings rotelement; en ny övningstyp måste läggas till i väljarlistorna nedan * — alla tre, ljust läge och båda mörka scoper. * * LJUST LÄGE ÄR FÖRVALT, ALLTID. * * Övningarna ligger på en sajt som bara finns i ljus skepnad. Följde de * besökarens systeminställning skulle enstaka block bli mörka mitt i en ljus * sida — vilket är sämre än att vara konsekvent ljus. Mörkt läge finns kvar och * är genomtänkt, men måste begäras: * * följ systeminställningen * alltid mörkt * * När resten av sajten hanterar mörkt läge räcker det att sätta det första. */ .ldwol-wheel, .ldwol-lifeline { color-scheme: light; --ldwol-surface: #fcfcfb; --ldwol-surface-sunk: #f0efec; --ldwol-text: #0b0b0b; --ldwol-text-muted: #52514e; --ldwol-track: #e8e7e3; --ldwol-track-hover: #dcdbd6; --ldwol-ring: #ffffff; --ldwol-focus: #2a78d6; /* Ordinal ramp, five tiers (1–2, 3–4, 5–6, 7–8, 9–10). Five rather than ten because ten consecutive steps sit too close in lightness to be told apart — validated: monotone L, all gaps >= 0.06, light end 2.06:1 vs surface. Nothing lighter than step 250 on a light surface. */ --ldwol-t1: #86b6ef; --ldwol-t2: #5598e7; --ldwol-t3: #2a78d6; --ldwol-t4: #1c5cab; --ldwol-t5: #0d366b; display: block; max-width: 700px; margin: 1.5rem auto; font-family: inherit; -webkit-tap-highlight-color: transparent; } /* Systeminställningen följs bara på uttrycklig begäran — se toppen av filen. */ @media ( prefers-color-scheme: dark ) { :root[data-ldwol-theme="auto"]:where( :not( [data-theme="light"] ) ) .ldwol-wheel, :root[data-ldwol-theme="auto"]:where( :not( [data-theme="light"] ) ) .ldwol-lifeline { color-scheme: dark; --ldwol-surface: #1a1a19; --ldwol-surface-sunk: #232322; --ldwol-text: #ffffff; --ldwol-text-muted: #c3c2b7; --ldwol-track: #302f2d; --ldwol-track-hover: #3d3c39; --ldwol-ring: #1a1a19; --ldwol-focus: #3987e5; /* Same ramp, stepped for the dark surface: nothing darker than 600. */ --ldwol-t1: #184f95; --ldwol-t2: #256abf; --ldwol-t3: #3987e5; --ldwol-t4: #6da7ec; --ldwol-t5: #9ec5f4; } } :root[data-theme="dark"] .ldwol-wheel, :root[data-theme="dark"] .ldwol-lifeline { color-scheme: dark; --ldwol-surface: #1a1a19; --ldwol-surface-sunk: #232322; --ldwol-text: #ffffff; --ldwol-text-muted: #c3c2b7; --ldwol-track: #302f2d; --ldwol-track-hover: #3d3c39; --ldwol-ring: #1a1a19; --ldwol-focus: #3987e5; --ldwol-t1: #184f95; --ldwol-t2: #256abf; --ldwol-t3: #3987e5; --ldwol-t4: #6da7ec; --ldwol-t5: #9ec5f4; } /* ------------------------------------------------------- rubrik + ingress */ .ldwol-title { margin: 0 0 .5rem; color: var( --ldwol-text ); font-size: 1.15rem; line-height: 1.3; } .ldwol-intro { margin: 0 0 1rem; color: var( --ldwol-text-muted ); font-size: .92rem; line-height: 1.55; } .ldwol-intro p { margin: 0 0 .6rem; } .ldwol-intro p:last-child { margin-bottom: 0; } /* --------------------------------------------------------- lägg till-knapp */ .ldwol-add-wrap { display: flex; justify-content: center; margin-top: .35rem; } .ldwol-add { font: inherit; font-size: .85rem; padding: .4rem .85rem; color: var( --ldwol-text-muted ); background: transparent; border: 1px dashed var( --ldwol-track-hover ); border-radius: 7px; cursor: pointer; } .ldwol-add:hover:not( :disabled ) { color: var( --ldwol-text ); border-color: var( --ldwol-focus ); border-style: solid; } .ldwol-add:disabled { opacity: .4; cursor: not-allowed; } /* --------------------------------------------------- utfällning av hjulet */ /* 0fr→1fr animerar höjden utan att vi behöver känna till den i förväg. */ .ldwol-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 380ms ease, opacity 300ms ease; } .ldwol-reveal.is-open { grid-template-rows: 1fr; opacity: 1; } .ldwol-reveal__inner { overflow: hidden; min-height: 0; } .ldwol-reveal--instant { transition: none; } .ldwol-reveal__bar { display: flex; justify-content: center; margin-top: .75rem; } .ldwol-reveal__toggle { font: inherit; font-size: .85rem; padding: .35rem .8rem; color: var( --ldwol-text-muted ); background: transparent; border: 1px solid var( --ldwol-track-hover ); border-radius: 7px; cursor: pointer; } .ldwol-reveal__toggle:hover { color: var( --ldwol-text ); border-color: var( --ldwol-focus ); } /* ------------------------------------------------------------------ chrome */ .ldwol-hint { margin: 0.75rem 0 0; color: var( --ldwol-text-muted ); font-size: 0.85rem; line-height: 1.45; text-align: center; } .ldwol-message { margin: 0.5rem 0 0; min-height: 1.2em; color: #e34948; font-size: 0.9rem; font-weight: 600; text-align: center; } /* The native LearnDash essay input stays in the form (and in the tab order's shadow) but out of sight — the wheel writes into it. */ .ldwol-native-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect( 0 0 0 0 ) !important; white-space: nowrap !important; border: 0 !important; } @media ( prefers-reduced-motion: reduce ) { .ldwol-reveal { transition: none; } } /* -------------------------------------------------------------- inmatning */ /* Ett gemensamt utseende för alla textfält i alla övningar. Hjulets blocknamn och livslinjens händelser ska inte se ut som två olika produkter. */ .ldwol-field { font: inherit; font-size: 13px; line-height: 1.35; padding: 2px 5px; color: var( --ldwol-text ); background: transparent; border: 1px solid transparent; border-radius: 6px; /* Fälten mäter och placerar sig själva. Handtaget nere till höger på en textarea inbjuder till något som skulle slå sönder utplaceringen — bort med det, och med rullningslisten som annars blinkar till vid radbyte. */ resize: none; overflow: hidden; } .ldwol-field::placeholder { color: var( --ldwol-text-muted ); opacity: .8; } .ldwol-field:hover { border-color: var( --ldwol-track-hover ); } .ldwol-field:focus { outline: none; background: var( --ldwol-surface ); border-color: var( --ldwol-focus ); } /* Sifferfält behåller type="number" (numeriskt tangentbord, piltangenter) men utan de synliga stegknapparna — de lade sig över årtalet. */ .ldwol-field--num { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; } .ldwol-field--num::-webkit-outer-spin-button, .ldwol-field--num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* --------------------------------------------------------------- etikett */ /* Liten platta för årtal och ändpunkter. Samma form överallt, med en dämpad yta i stället för hård kontrast. */ .ldwol-pill { display: inline-flex; align-items: center; gap: .4rem; padding: 3px 10px; font-size: 12.5px; line-height: 1.4; white-space: nowrap; color: var( --ldwol-text ); background: var( --ldwol-surface-sunk ); border: 1px solid var( --ldwol-track ); border-radius: 8px; } .ldwol-pill__label { color: var( --ldwol-text-muted ); font-size: 11.5px; letter-spacing: .02em; } .ldwol-pill__value { font-weight: 600; font-variant-numeric: tabular-nums; } .ldwol-pill--accent { background: var( --ldwol-surface ); border-color: var( --ldwol-focus ); box-shadow: 0 1px 8px rgba( 0, 0, 0, .10 ); }