/* * Gedeelde bouwstenen voor alle schermen. * * De kleuren staan als variabelen genoteerd zodat het besturingsscherm donker kan zijn * en de beamer licht, zonder de componenten twee keer te schrijven. Maten zijn ruim: * dit wordt bediend met dikke vingers in een schuur, soms op een touchscreen. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 17px; line-height: 1.5; color: var(--text); background: var(--bg); } h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; } /* Getallen die je naast elkaar leest moeten uitlijnen: standen, legs, tijden. */ .tabular { font-variant-numeric: tabular-nums; } /* --- knoppen ------------------------------------------------------------- */ button { font: inherit; color: inherit; cursor: pointer; min-height: 48px; padding: 0.6rem 1.1rem; border: 2px solid var(--line); border-radius: 10px; background: var(--surface-raised); transition: none; } button:hover:not(:disabled) { border-color: var(--accent); } button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } button:disabled { opacity: 0.4; cursor: not-allowed; } button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; } button.danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); } /* --- formulieren --------------------------------------------------------- */ label { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.35rem; } input, select, textarea { font: inherit; color: inherit; width: 100%; min-height: 48px; padding: 0.5rem 0.7rem; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } /* --- vlakken ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; } .card > h2 { font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem; } .grid { display: grid; gap: 1rem; } .row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* --- verbindingsindicator ------------------------------------------------ */ .connection { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-dim); } .connection::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--text-dim); } .connection[data-status='verbonden']::before { background: var(--ok); } .connection[data-status='verbinden']::before { background: var(--warn); } .connection[data-status='kwijt']::before { background: var(--danger); } /* --- meldingen ----------------------------------------------------------- */ .notice { padding: 0.8rem 1rem; border-radius: 10px; border-left: 5px solid var(--danger); background: var(--surface-raised); font-weight: 600; } .notice:empty { display: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* * Lange samenstellingen — "Spielerliste speichern", "Gruppentabellen" — mogen afbreken * in plaats van buiten een telefoonscherm te lopen. De browser kiest de afbreekregels * op basis van , dat de taallaag bijhoudt. */ h1, h2, h3, label, button, .readout-label, .hint, .warning { overflow-wrap: break-word; hyphens: auto; }