/* SwingIQ – legacy applicatiestijlen (worden per fase vervangen door Tailwind). Alles staat in de cascade-laag swingiq-legacy: de laagvolgorde in Styles/app.tailwind.css laat deze regels winnen van Tailwind-preflight, maar verliezen van Fairway-componentklassen en -utilities. */ @layer swingiq-legacy { /* SwingIQ – globale applicatiestijlen */ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } #blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* Het opstartscherm (.boot-loader / .loading-progress) staat in app.tailwind.css, in de components-laag: die wint van deze legacy-laag, dus een override hier zou het toch nooit halen. */ /* De --a-*-tokens van het beheerportaal. Blijven bestaan zolang SwingPlayer, VideoPlayerDialog, het review-grid en de keypoint-popup nog legacy-markup hebben; de tokenbrug onderaan dit bestand koppelt ze aan de Fairway-tokens. */ .admin-shell{ --a-accent: #512BD4; --a-accent-strong: #3F1FB0; --a-accent-subtle: #EFEBFC; --a-ink: #190649; --a-muted: #5A5391; --a-faint: #8B84B8; --a-bg: #FBFAFE; --a-surface: #FFFFFF; --a-surface-2: #F5F3FB; --a-outline: #E4DEF4; --a-outline-strong: #CFC6EE; --a-ok: #15803D; --a-ok-bg: #E9F8EF; --a-ok-fill: #22C55E; --a-warn: #B4530C; --a-warn-bg: #FCF0E6; --a-warn-fill: #F97316; --a-bad: #B42318; --a-bad-bg: #FBEBEA; --a-bad-fill: #EF4444; color: var(--a-ink); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Dark mode is driven by the app-wide theme selector (data-theme on ), NOT the OS media query — the surrounding Blazor layout is themed the same way, so no dark cards on a light page. */ :root[data-theme="dark"] .admin-shell{ --a-accent: #9880E5; --a-accent-strong: #B4A2F0; --a-accent-subtle: #2D2350; --a-ink: #F3F0FF; --a-muted: #B8C4FF; --a-faint: #8983A8; --a-bg: #141319; --a-surface: #1F1F26; --a-surface-2: #26262E; --a-outline: #37343F; --a-outline-strong: #46424F; --a-ok: #86EFAC; --a-ok-bg: #12241A; --a-warn: #FDBA74; --a-warn-bg: #2A1B10; --a-bad: #FFB4A8; --a-bad-bg: #2A1512; } /* ── App-wide dark theme ────────────────────────────────────────────────────── Themes the base Blazor layout (body, top-row, content, links) so the light/dark selector affects the whole app, not just the admin console. */ :root[data-theme="dark"] body { background-color: #141319; color: #E8E6F5; } .admin-shell h1, .admin-shell h2, .admin-shell h3{ color: var(--a-ink); font-weight: 700; letter-spacing: -.01em; } .admin-shell .admin-sub{ color: var(--a-muted); font-size: .9rem; } .admin-shell .admin-mono{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82em; } .admin-chip { font-size: .78rem; font-weight: 600; padding: .35rem .7rem; border-radius: 999px; cursor: pointer; border: 1px solid var(--a-outline-strong); color: var(--a-muted); background: var(--a-surface); } .admin-chip.on { background: var(--a-accent-subtle); color: var(--a-accent-strong); border-color: transparent; } .admin-chip.disabled { cursor: default; opacity: .5; } /* Klein kruisje/vinkje binnen een chip (bv. swing weggooien in de video-editor). */ .admin-chip .chip-x { background: none; border: none; cursor: pointer; font-size: .9rem; line-height: 1; padding: 0 .1rem; margin-left: .35rem; color: var(--a-faint); } .admin-chip .chip-x:hover:not(:disabled) { color: var(--a-bad); } .admin-chip .chip-x.ok { color: var(--a-ok); } .admin-chip .chip-x:disabled { opacity: .5; cursor: default; } .admin-chip.best { cursor: default; margin-left: .5rem; padding: .2rem .55rem; font-size: .72rem; background: var(--a-accent-subtle); color: var(--a-accent-strong); border-color: transparent; vertical-align: middle; } /* Buttons */ .admin-btn { border-radius: 12px; padding: .45rem .9rem; font-size: .82rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; display: inline-flex; gap: .4rem; align-items: center; } .admin-btn.pri { background: var(--a-accent); color: #fff; } .admin-btn.sec { background: transparent; color: var(--a-accent-strong); border-color: var(--a-accent); } .admin-btn.dgr { background: transparent; color: var(--a-bad); border-color: var(--a-bad-fill); } .admin-btn.gho { background: var(--a-surface-2); color: var(--a-muted); border-color: var(--a-outline); } /* Softwarefout-actie (controlescherm + review-balk): eigen magenta accent. */ .admin-btn.bug { background: transparent; color: #d946ef; border-color: #d946ef; } /* Oranje bekijken-actie: segmentatie is nog niet goedgekeurd in de controle-pagina. */ .admin-btn.ic.rev { color: var(--a-warn); border-color: var(--a-warn); } .admin-btn:disabled { opacity: .5; cursor: not-allowed; } .admin-btn.ic { padding: .4rem .5rem; } /* Segmentation review: phase-frame grid */ /* 2 kaarten per rij op kleinere schermen, 3 per rij vanaf grote schermen. */ /* Kolommen schalen mee met schermbreedte zodat thumbnails op brede/4K-schermen niet uitrekken maar er meer per rij passen (2 → 3 → 4 → 5 → 6). */ /* Review-grid: "Auto" volgt de schermbreedte. Bewust gecapt op 5 kolommen — bij 6 worden de fase-frames te klein om te beoordelen (is dit écht de Top?), ook op 4K. Wie toch dichter wil kijken kiest handmatig een aantal via de kolom-dropdown (.cols-N wint op specificiteit). */ .review-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: .5rem; } @media (min-width: 992px) { .review-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1600px) { .review-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 2200px) { .review-grid { grid-template-columns: repeat(5, 1fr); } } /* Handmatige keuze uit de dropdown — twee klassen, dus wint van de media-queries hierboven. */ .review-grid.cols-1 { grid-template-columns: repeat(1, 1fr); } .review-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .review-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .review-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .review-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } .review-grid.cols-6 { grid-template-columns: repeat(6, 1fr); } .review-card { background: var(--a-surface); border: 1px solid var(--a-outline); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; } .review-card.rejected { border-color: var(--a-bad); box-shadow: 0 0 0 2px var(--a-bad-bg); } .review-card.approved { border-color: var(--a-ok); box-shadow: 0 0 0 2px var(--a-ok-bg); } /* "Later bekijken": geparkeerd, dus bewust amber - niet groen (goed) en niet rood (fout). */ .review-card.later { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .18); } /* "Softwarefout": eigen magenta, zodat een applicatiefout niet oogt als een afgekeurde segmentatie. */ .review-card.bug { border-color: #d946ef; box-shadow: 0 0 0 2px rgba(217, 70, 239, .18); } .review-frame { position: relative; background: #000; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; } .review-frame img { width: 100%; height: 100%; object-fit: contain; display: block; } .review-frame-missing { color: var(--a-muted); font-size: .82rem; padding: 1rem; text-align: center; } .review-badge { position: absolute; top: .5rem; left: .5rem; background: var(--a-bad); color: #fff; font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; } .review-badge.ok { background: var(--a-ok); } .review-badge.later { background: #f59e0b; color: #1a1204; } .review-badge.bug { background: #d946ef; color: #fff; } .review-meta { padding: .6rem .8rem .2rem; } .review-meta .review-title { font-weight: 650; font-size: .9rem; } /* Acties rechts uitgelijnd op één regel: met icoonknoppen (zie .btn.ic) past de hele set ook bij 5-6 kolommen naast elkaar, waar tekstknoppen altijd naar een tweede regel vielen. Wrap blijft aan als vangnet voor het uiterste geval (6 kolommen op een smal venster) — dan breekt de rij netjes af in plaats van uit de kaart te lopen. */ .review-actions { display: flex; gap: .3rem; padding: .6rem .8rem .8rem; margin-top: auto; justify-content: flex-end; align-items: center; flex-wrap: wrap; } /* Vergelijken/openen zijn geen oordeel: iets meer lucht ervoor zodat de vier verdict-knoppen als groep lezen. */ .review-actions .apart { margin-left: .5rem; } /* Per-phase review progress: one dot per Jim McLean phase, coloured by verdict; click to jump to it. */ .phase-dots { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .4rem; } .phase-dot { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; cursor: pointer; user-select: none; border: 1px solid var(--a-outline-strong); color: var(--a-muted); background: var(--a-surface-2); } .phase-dot.ok { background: var(--a-ok); color: #fff; border-color: transparent; } .phase-dot.bad { background: var(--a-bad); color: #fff; border-color: transparent; } .phase-dot.later { background: #f59e0b; color: #1a1204; border-color: transparent; } .phase-dot.bug { background: #d946ef; color: #fff; border-color: transparent; } .phase-dot.sel { outline: 2px solid var(--a-accent); outline-offset: 1px; } .compare-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .compare-grid.two { grid-template-columns: 1fr 1fr; } } .compare-col { display: flex; flex-direction: column; gap: .5rem; } .compare-col .lbl { font-weight: 650; font-size: .88rem; color: var(--a-ink); } .compare-frame { background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; } .compare-frame img { width: 100%; height: 100%; object-fit: contain; display: block; } .compare-frame-missing { color: var(--a-muted); font-size: .85rem; padding: 1rem; text-align: center; } .admin-alert { border: 1px solid var(--a-outline); border-left: 3px solid var(--a-bad-fill); background: var(--a-bad-bg); color: var(--a-bad); border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; } /* Modal / dialog */ /* Alle popups (legal, cookie-instellingen, admin) dimmen én blurren de achtergrond zodat het dialoog duidelijk losstaat van de pagina erachter. */ .admin-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 6, 30, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1050; padding: 1rem; } /* De --a-* design-tokens zijn alleen op .admin-shell gedefinieerd. Popups uit de Footer (cookie-poort, cookie-instellingen, legal) staan búiten .admin-shell; zonder deze definities zou de kaart een ongedefinieerde (transparante) achtergrond krijgen. Definieer de tokens daarom op de backdrop zelf, thema-bewust, zodat elke popup een dekkende, goed leesbare kaart heeft in light én dark. */ .admin-modal-backdrop{ --a-accent: #512BD4; --a-accent-strong: #3F1FB0; --a-accent-subtle: #EFEBFC; --a-ink: #190649; --a-muted: #5A5391; --a-faint: #8B84B8; --a-bg: #FBFAFE; --a-surface: #FFFFFF; --a-surface-2: #F5F3FB; --a-outline: #E4DEF4; --a-outline-strong: #CFC6EE; --a-ok: #15803D; --a-ok-bg: #E9F8EF; --a-ok-fill: #22C55E; --a-warn: #B4530C; --a-warn-bg: #FCF0E6; --a-warn-fill: #F97316; --a-bad: #B42318; --a-bad-bg: #FBEBEA; --a-bad-fill: #EF4444; } :root[data-theme="dark"] .admin-modal-backdrop{ --a-accent: #9880E5; --a-accent-strong: #B4A2F0; --a-accent-subtle: #2D2350; --a-ink: #F3F0FF; --a-muted: #B8C4FF; --a-faint: #8983A8; --a-bg: #141319; --a-surface: #1F1F26; --a-surface-2: #26262E; --a-outline: #37343F; --a-outline-strong: #46424F; --a-ok: #86EFAC; --a-ok-bg: #12241A; --a-warn: #FDBA74; --a-warn-bg: #2A1B10; --a-bad: #FFB4A8; --a-bad-bg: #2A1512; } .admin-modal { background: var(--a-surface); color: var(--a-ink); border: 1px solid var(--a-outline); border-radius: 16px; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(10, 6, 30, .35); } .admin-modal .head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--a-outline); background: var(--a-surface); border-radius: 16px 16px 0 0; position: sticky; top: 0; z-index: 2; } .admin-modal .head h3 { font-size: 1.05rem; margin: 0; } .admin-modal .body { padding: 1.1rem 1.25rem; font-size: .9rem; color: var(--a-muted); } .admin-modal .body .val { color: var(--a-ink); } .admin-modal .foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--a-outline); background: var(--a-surface); border-radius: 0 0 16px 16px; position: sticky; bottom: 0; z-index: 2; } .admin-modal .x { background: none; border: none; color: var(--a-faint); font-size: 1.3rem; cursor: pointer; line-height: 1; } .admin-modal .radio { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--a-outline-strong); border-radius: 10px; cursor: pointer; margin-bottom: .5rem; } .admin-modal .radio.on { border-color: var(--a-accent); background: var(--a-accent-subtle); } .admin-modal .radio .t { color: var(--a-ink); font-weight: 640; } /* Video modal: schaalt mee met het scherm — groter op grote schermen (meer detail bij analyseren), kleiner op kleine schermen. De vw/vh-delen krimpen op kleine viewports; de pixel-caps laten 'm groeien op grote monitors. Swing-video is meestal PORTRET, dus voor detail telt vooral de stage-HOOGTE (object-fit: contain schaalt portretvideo op box-hoogte). De stage houdt dezelfde afmetingen in elke status, dus het venster springt niet. */ .admin-modal.video { width: 100%; max-width: min(1600px, 95vw); max-height: 94vh; } .admin-modal.video .body.video-stage { padding: 0; display: flex; flex-direction: column; height: min(84vh, 1200px); background: #000; border-radius: 0 0 16px 16px; overflow: hidden; } .admin-modal.video .video-canvas { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; } .admin-modal.video .video-frame { position: relative; width: 100%; height: 100%; } .admin-modal.video .video-canvas video { width: 100%; height: 100%; object-fit: contain; background: #000; } .admin-modal.video .pose-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .admin-modal.video .video-status { color: rgba(255, 255, 255, .75); font-size: .9rem; padding: 1.5rem; text-align: center; } .admin-modal.video .video-status.error { color: #ff8f8f; } /* Eigen besturing: play/pauze, per-frame steppen, fijne tijdlijn en frame-uitlezing. */ .admin-modal.video .video-controls { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: #141414; border-top: 1px solid rgba(255, 255, 255, .08); } .admin-modal.video .video-controls button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; } .admin-modal.video .video-controls button:hover { background: rgba(255, 255, 255, .16); } .admin-modal.video .video-controls button:active { background: rgba(255, 255, 255, .24); } .admin-modal.video .video-controls button.on { border-color: var(--a-accent, #6c5ce7); color: var(--a-accent, #6c5ce7); background: rgba(108, 92, 231, .18); } .admin-modal.video .video-readout { color: rgba(255, 255, 255, .8); font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto; } /* Jim McLean 8-stappen-strip (stick figures + captions). */ .admin-modal.video .swing-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .55rem .8rem; background: #111; border-top: 1px solid rgba(255, 255, 255, .08); } .admin-modal.video .swing-steps .step { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 62px; padding: .3rem .1rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; } .admin-modal.video .swing-steps .step:hover:not(:disabled) { background: rgba(255, 255, 255, .06); } .admin-modal.video .swing-steps .step:disabled { opacity: .3; cursor: default; } .admin-modal.video .swing-steps .step.on { background: rgba(250, 204, 21, .18); border-color: #facc15; color: #facc15; } .admin-modal.video .swing-steps .step img { width: 26px; height: 32px; object-fit: contain; } .admin-modal.video .swing-steps .step img.mirror { transform: scaleX(-1); } .admin-modal.video .swing-steps .step .cap { font-size: .62rem; line-height: 1.1; text-align: center; } /* Review-modus: alleen de stap die je beoordeelt is groter en krijgt een eigen accentmarkering — de overige stappen houden hun normale formaat, en de gele "waar sta ik"-stap blijft herkenbaar apart. */ .admin-modal.video .swing-steps.review { gap: .4rem; padding: .65rem .8rem; align-items: center; } .admin-modal.video .swing-steps.review .step.judge { width: 96px; padding: .45rem .25rem; gap: .25rem; background: rgba(56, 189, 248, .16); border-color: #38bdf8; color: #e0f2fe; box-shadow: 0 0 0 2px rgba(56, 189, 248, .35); } .admin-modal.video .swing-steps.review .step.judge img { width: 52px; height: 66px; } .admin-modal.video .swing-steps.review .step.judge .cap { font-size: .72rem; font-weight: 700; } /* Te beoordelen stap in de venstertitel. */ .admin-modal.video .head h3 .review-phase { margin-left: .5rem; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(56, 189, 248, .16); color: #38bdf8; } /* Gedetecteerd/aangepast schakelen + segmentatie-correctie-editor. */ .admin-modal.video .segment-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; } .admin-modal.video .segment-editor { margin-top: .75rem; border: 1px solid var(--a-outline); border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; gap: .6rem; } .admin-modal.video .segment-editor .hint { font-size: .8rem; color: var(--a-muted); } .admin-modal.video .segment-editor .row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .admin-modal.video .segment-editor .row .lbl { font-weight: 600; font-size: .82rem; margin-right: .3rem; } .admin-modal.video .segment-editor .phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .4rem; } .admin-modal.video .segment-editor .prow { display: flex; gap: .4rem; align-items: center; justify-content: space-between; } .admin-modal.video .segment-editor .prow .pname { font-size: .8rem; } .admin-modal.video .segment-editor .prow .pval { font-size: .8rem; color: var(--a-muted); margin-left: auto; margin-right: .4rem; } .admin-modal.video .segment-editor .editor-foot { display: flex; gap: .5rem; justify-content: flex-end; } /* Impact-heranalyse-vraag: subtiel geaccentueerd kader (editor én toolbar). */ .admin-modal.video .reanalyze-ask { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; padding: .55rem .7rem; border: 1px solid var(--a-outline); border-radius: 10px; background: var(--a-surface-2, rgba(127,127,127,.06)); font-size: .82rem; } .admin-modal.video .segment-editor .reanalyze-ask { margin-top: 0; } .admin-modal.video .reanalyze-info { margin-top: .5rem; font-size: .8rem; color: var(--a-muted); } /* Review-balk (alleen vanuit de controlelijst): oordeel over de huidige fase + door naar de volgende swing. */ .admin-modal.video .review-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; padding: .55rem .7rem; border: 1px solid var(--a-outline); border-radius: 10px; background: var(--a-surface-2, rgba(127,127,127,.06)); } .admin-modal.video .review-bar .spacer { flex: 1 1 auto; } /* Icoonknoppen: onder een videovenster is horizontale ruimte schaars, dus de acties zijn iconen met de volledige betekenis in title/aria-label. Iets ruimer dan de lijstvariant zodat ze goed raakbaar zijn. */ .admin-modal.video .review-bar .admin-btn.ic { padding: .45rem .6rem; } .admin-modal.video .review-bar .admin-btn.ic:disabled { opacity: .4; cursor: default; } .admin-modal.video .review-bar .admin-chip { cursor: default; } .admin-modal.video .review-bar .admin-chip.ok { background: var(--a-ok-subtle, rgba(45,160,90,.14)); color: var(--a-ok); border-color: transparent; } .admin-modal.video .review-bar .admin-chip.bad { background: var(--a-bad-subtle, rgba(200,60,60,.14)); color: var(--a-bad); border-color: transparent; } .admin-modal.video .review-bar .admin-chip.later { background: rgba(245, 158, 11, .18); color: #f59e0b; border-color: transparent; } .admin-modal.video .review-bar .admin-chip.bug { background: rgba(217, 70, 239, .18); color: #d946ef; border-color: transparent; } /* Fijne scrubber (per frame). */ .admin-modal.video input[type=range].scrub { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .25); cursor: pointer; } .admin-modal.video input[type=range].scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--a-accent, #6c5ce7); border: none; cursor: pointer; } .admin-modal.video input[type=range].scrub::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--a-accent, #6c5ce7); border: none; cursor: pointer; } /* De (lange) video-id in de titel mag nooit de sluitknop wegduwen of overflow geven. */ .admin-modal.video .head { gap: .75rem; } .admin-modal.video .head h3 { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-modal.video .head .x { flex: 0 0 auto; } /* Kleine schermen: gebruik vrijwel het hele scherm en houd de video zo groot mogelijk. */ @media (max-width: 640px) { .admin-modal-backdrop { padding: .5rem; } .admin-modal.video { max-width: 100%; border-radius: 12px; } .admin-modal.video .body.video-stage { height: min(72vh, 720px); border-radius: 0 0 12px 12px; } .admin-modal.video .head { padding: .8rem 1rem; } /* Op smalle schermen krijgt de tijdlijn een eigen regel onder de knoppen. */ .admin-modal.video .video-controls { flex-wrap: wrap; } .admin-modal.video input[type=range].scrub { order: 3; flex-basis: 100%; } } /* ── AI-adviezen & annotaties popup ─────────────────────────────────────── */ .admin-modal.insights { width: 100%; max-width: min(760px, 94vw); } .insights-swings { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem; } .insights-swings .none-dot { margin-left: .3rem; color: var(--a-warn); font-weight: 800; } .insights-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; } .insights-meta .mchip { font-size: .74rem; color: var(--a-muted); background: var(--a-surface-2); border: 1px solid var(--a-outline); border-radius: 999px; padding: .2rem .55rem; } .insights-meta .mchip b { color: var(--a-ink); } .insights-summary { color: var(--a-ink); font-size: .9rem; margin: 0 0 .6rem; } .insights-tab-body { padding-top: .85rem; display: flex; flex-direction: column; gap: .6rem; } .ins-card { border: 1px solid var(--a-outline); border-radius: 12px; background: var(--a-surface-2); padding: .7rem .85rem; } .ins-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; } .ins-title { color: var(--a-ink); font-weight: 650; font-size: .9rem; } .ins-conf { color: var(--a-muted); font-size: .74rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .ins-desc { color: var(--a-muted); font-size: .85rem; margin: .4rem 0 0; } .ins-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; } .ins-tags .tag { font-size: .72rem; color: var(--a-muted); background: var(--a-surface); border: 1px solid var(--a-outline); border-radius: 8px; padding: .12rem .45rem; } .ins-tags .tag.act { color: var(--a-accent-strong); border-color: transparent; background: var(--a-accent-subtle); } .ins-tags .tag.mag { color: var(--a-warn); border-color: transparent; background: var(--a-warn-bg); } .ph-grid { display: grid; gap: .4rem; margin-top: .5rem; } .ph-grid > div { display: grid; grid-template-columns: 130px 1fr; gap: .5rem; font-size: .84rem; color: var(--a-ink); } .ph-grid .ph-lbl { color: var(--a-muted); font-weight: 600; } .insights-json { margin: 0; padding: .8rem; border-radius: 10px; background: var(--a-surface-2); border: 1px solid var(--a-outline); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .74rem; color: var(--a-ink); white-space: pre; overflow-x: auto; } .insights-actions { display: flex; justify-content: flex-end; margin-bottom: .55rem; } .insights-actions .admin-btn { display: inline-flex; align-items: center; gap: .4rem; } .insights-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; padding: .55rem .5rem .55rem .75rem; border-radius: 10px; font-size: .84rem; background: var(--a-accent-subtle); color: var(--a-accent-strong); border: 1px solid transparent; } @media (max-width: 640px) { .ph-grid > div { grid-template-columns: 1fr; gap: .1rem; } } /* ── Analyse-tuning: keypoint-hover met pose-figuurtje ─────────────────────── Hover (of toetsenbord-focus) op de keypointnaam toont een schematisch poppetje waarin het punt oplicht. Rechts van de naam gepositioneerd zodat hij onderin de tabel niet buiten beeld valt. */ .admin-shell .kp-hover { position: relative; display: inline-block; cursor: help; } .admin-shell .kp-hover .kp-name { border-bottom: 1px dotted var(--a-faint); } .admin-shell .kp-hover .kp-pop { display: none; position: absolute; left: calc(100% + .6rem); top: 50%; transform: translateY(-50%); z-index: 40; background: var(--a-surface); border: 1px solid var(--a-outline-strong); border-radius: 10px; padding: .35rem .45rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .admin-shell .kp-hover:hover .kp-pop, .admin-shell .kp-hover:focus-within .kp-pop, .admin-shell .kp-hover:focus .kp-pop { display: block; } /* Op desktopbreedte mag de tuning-tabel niet scrollen/clippen, anders wordt het pose-figuurtje afgekapt door de overflow van de tabel-wrapper. */ @media (min-width: 900px) { .admin-shell .kp-table-wrap { overflow: visible; } } /* Tuning-lijst in twee kolommen (rang 1-17 en 18-33) zodra er breedte voor is. */ .admin-shell .kp-split { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } @media (min-width: 1100px) { .admin-shell .kp-split { grid-template-columns: 1fr 1fr; } } /* Koppeling rij ↔ figuurtje: bij hover/focus wordt de naam vet en geaccentueerd, de rij krijgt een tint, en de titel boven het figuurtje staat in de kleur van het oplichtende punt. */ .admin-shell .kp-table-wrap tbody tr:hover { background: var(--a-accent-subtle); } .admin-shell .kp-hover:hover .kp-name, .admin-shell .kp-hover:focus-within .kp-name { font-weight: 700; color: var(--a-accent-strong); } .admin-shell .kp-pop-title { font-weight: 700; font-size: .95rem; text-align: center; white-space: nowrap; margin-bottom: .15rem; color: var(--a-bad); } /* Juridische content (legal-dialog body: algemene voorwaarden, privacy- en cookiebeleid, disclaimer) */ .legal-content { color: var(--a-muted); font-size: .9rem; line-height: 1.55; } .legal-content h4 { color: var(--a-ink); font-size: .98rem; font-weight: 700; margin: 1.2rem 0 .35rem; } .legal-content h4:first-child { margin-top: 0; } .legal-content p { margin: 0 0 .6rem; } .legal-content ul { margin: 0 0 .7rem; padding-left: 1.2rem; } .legal-content li { margin: .2rem 0; } .legal-content strong { color: var(--a-ink); } .legal-content a { color: var(--a-accent-strong); } /* ── Kijkscherm voor één swing ──────────────────────────────────────────────── Schermvullend en zwart, besturing zwevend over het beeld — zoals de weergave in de app. Bewust los van de .admin-*-tokens: dit scherm is altijd donker, ook in de lichte modus, want een golfswing kijk je op een donkere achtergrond. */ .sp-root { position: fixed; inset: 0; z-index: 1080; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; outline: none; } .sp-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .sp-frame { position: relative; width: 100%; height: 100%; } .sp-frame video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; } /* Videobeeld uit: het element blijft de tijdlijn leveren, alleen onzichtbaar. */ .sp-frame video.hidden { visibility: hidden; } .sp-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .sp-status { display: flex; flex-direction: column; align-items: center; gap: .75rem; color: #fff; font-size: .9rem; } .sp-status.error { color: #FCA5A5; } .sp-spinner { width: 2rem; height: 2rem; border: 3px solid rgba(255,255,255,.25); border-top-color: #FACC15; border-radius: 50%; animation: sp-spin .8s linear infinite; } @keyframes sp-spin { to { transform: rotate(360deg); } } /* Bovenbalk: sluiten + beeld-toggle links, titel gecentreerd. */ .sp-top { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1rem; padding: 1rem 1.25rem; background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent); } .sp-top-left { display: flex; flex-direction: column; gap: .6rem; } .sp-top-right { width: 2.75rem; } .sp-title { text-align: center; padding-top: .35rem; min-width: 0; } .sp-title-main { font-size: .95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-title-sub { font-size: .75rem; color: rgba(255,255,255,.66); } .sp-round { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: none; cursor: pointer; background: rgba(0,0,0,.42); color: #fff; font-size: 1.05rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .sp-round:hover { background: rgba(0,0,0,.62); } .sp-round.on { color: #FACC15; } /* Onderbalk: besturing, aflezing en de fase-stappen. */ .sp-bottom { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.35) 70%, transparent); padding: 1.5rem 1rem .75rem; } .sp-controls { display: flex; align-items: center; gap: .5rem; max-width: 60rem; margin: 0 auto; } .sp-controls button { min-width: 2.6rem; height: 2.4rem; padding: 0 .55rem; border: none; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; font-size: .78rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .sp-controls button:hover:not(:disabled) { background: rgba(255,255,255,.24); } .sp-controls button.on { color: #FACC15; } .sp-controls button.sp-play { min-width: 3rem; background: rgba(255,255,255,.22); } .sp-scrub { flex: 1; min-width: 6rem; accent-color: #FACC15; } .sp-readout { text-align: center; font-size: .72rem; color: rgba(255,255,255,.6); margin-top: .35rem; font-variant-numeric: tabular-nums; } .sp-steps { margin-top: .6rem; } .sp-steps-active { text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #FACC15; margin-bottom: .25rem; } .sp-steps-row { display: flex; justify-content: center; gap: .15rem; flex-wrap: wrap; } .sp-step { width: 2.8rem; height: 3.4rem; border: none; border-radius: 10px; cursor: pointer; background: transparent; color: rgba(255,255,255,.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; font-size: .62rem; font-weight: 700; } .sp-step img { width: 1.7rem; height: 1.7rem; } .sp-step:disabled { opacity: .28; cursor: default; } .sp-step.on { background: rgba(250,204,21,.2); color: #FACC15; } @media (max-width: 640px) { .sp-title-main { font-size: .82rem; } .sp-controls { gap: .3rem; } .sp-controls button { min-width: 2.2rem; padding: 0 .35rem; font-size: .7rem; } } /* Verschillen bij de gekozen swingfase: de korte omschrijvingen die bij de bollen op het beeld horen. Ze staan net boven de bediening en zijn even breed als die bediening, zodat oog en muis niet hoeven te springen. De regel is een knop: erop klikken vouwt de actie en de hele verschilzin uit. */ .sp-diffs { display: flex; flex-direction: column; gap: .35rem; max-width: 60rem; margin: 0 auto .6rem; } .sp-diffs-hint { align-self: center; font-size: .74rem; color: rgba(255,255,255,.66); background: rgba(0,0,0,.55); border-radius: 10px; padding: .35rem .7rem; } .sp-diff { width: 100%; text-align: left; cursor: pointer; border: 1px solid rgba(250,204,21,.5); border-radius: 12px; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); color: #fff; padding: .5rem .7rem; display: block; } .sp-diff:hover { background: rgba(0,0,0,.75); } .sp-diff.large { border-color: rgba(255,69,58,.6); } .sp-diff-head { display: flex; align-items: center; gap: .5rem; } /* Zelfde kleur en doorschijnendheid als de bol op het lijf: geel = merkbaar, rood = groot. */ .sp-diff-dot { flex: none; width: .85rem; height: .85rem; border-radius: 50%; background: rgba(250,204,21,.5); border: 2px solid rgba(250,204,21,.9); } .sp-diff.large .sp-diff-dot { background: rgba(255,69,58,.5); border-color: rgba(255,69,58,.9); } .sp-diff-label { font-size: .82rem; font-weight: 700; } .sp-diff-detail { display: block; margin-top: .4rem; padding-left: 1.35rem; font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.8); } .sp-diff-note { display: block; } .sp-diff-action { display: block; margin-top: .3rem; color: #FACC15; } @media (max-width: 640px) { .sp-diffs { bottom: 11rem; } } /* Advies- en fasepaneel over het kijkscherm. Rechts op een breed scherm, onderaan op een smal; de video blijft de hoofdzaak, dus het paneel schuift eroverheen. */ .sp-advice { position: absolute; top: 0; right: 0; bottom: 0; width: min(26rem, 92vw); z-index: 2; background: rgba(17, 17, 17, .95); backdrop-filter: blur(6px); display: flex; flex-direction: column; } .sp-advice-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1rem .5rem; } .sp-advice-head h2 { font-size: 1rem; margin: 0; color: #fff; } .sp-advice-body { overflow-y: auto; padding: 0 1rem 1.5rem; } .sp-advice-score { font-size: 2rem; font-weight: 700; color: #FACC15; line-height: 1.1; } .sp-advice-score span { display: block; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .04em; } .sp-advice-note { font-size: .82rem; color: rgba(255,255,255,.66); } .sp-advice-summary { font-size: .88rem; color: rgba(255,255,255,.88); margin: .75rem 0; } .sp-advice-sub { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 1.25rem 0 .5rem; } .sp-insight { border-top: 1px solid rgba(255,255,255,.12); padding: .7rem 0; } .sp-insight-title { font-size: .88rem; font-weight: 650; color: #fff; } .sp-insight-text { font-size: .82rem; color: rgba(255,255,255,.72); margin-top: .15rem; } .sp-insight-action { font-size: .82rem; color: #FACC15; margin-top: .35rem; } .sp-phase { border-top: 1px solid rgba(255,255,255,.12); padding: .55rem 0; } .sp-phase.seekable { cursor: pointer; } .sp-phase.seekable:hover { background: rgba(255,255,255,.06); } .sp-phase-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .84rem; font-weight: 640; color: #fff; } .sp-phase-pct { color: #FACC15; font-variant-numeric: tabular-nums; } @media (max-width: 720px) { .sp-advice { top: auto; left: 0; width: auto; max-height: 62%; } } /* Op een breed scherm mag het adviespaneel wat ruimer: de inzichtteksten hoeven dan niet meer om de drie woorden af te breken. Het beeld houdt genoeg over. */ @media (min-width: 1600px) { .sp-advice { width: min(32rem, 40vw); } } /* Nu / Beste / Beide, compact segmented control rechtsboven in het kijkscherm. */ .sp-modes { display: inline-flex; gap: 2px; padding: 3px; border-radius: 14px; background: rgba(0,0,0,.42); } .sp-modes button { border: none; cursor: pointer; background: transparent; color: rgba(255,255,255,.62); font-size: .74rem; font-weight: 700; padding: .3rem .6rem; border-radius: 11px; } .sp-modes button.on { background: rgba(255,255,255,.18); color: #fff; } /* Verschillen krijgt de kleur van de bollen zelf, zodat de knop en wat hij aanzet bij elkaar horen. */ .sp-modes button.diff.on { background: rgba(255,69,58,.9); color: #fff; } .sp-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; width: auto; } /* ── Fairway-tokenbrug (tijdelijk, verdwijnt in US6) ────────────────────────── Nog niet herschreven schermen die op de oude --a-*-tokens leunen kleuren via deze remap alvast in het Fairway-palet; de dark-varianten staan erbij zodat ze ná (en dus boven) de paarse dark-definities eerder in dit bestand winnen. */ .admin-shell, :root[data-theme="dark"] .admin-shell{ --a-accent: var(--accent); --a-accent-strong: var(--accent-strong); --a-accent-subtle: var(--accent-subtle); --a-ink: var(--ink); --a-muted: var(--muted); --a-faint: var(--faint); --a-bg: var(--paper); --a-surface: var(--surface); --a-surface-2: var(--surface-2); --a-outline: var(--outline); --a-outline-strong: var(--outline-strong); --a-ok: var(--ok); --a-ok-bg: var(--ok-bg); --a-ok-fill: var(--ok); --a-warn: var(--warn); --a-warn-bg: var(--warn-bg); --a-warn-fill: var(--warn); --a-bad: var(--bad); --a-bad-bg: var(--bad-bg); --a-bad-fill: var(--bad); } } /* einde @layer swingiq-legacy */