/* Motion - thema bovenop Tabler (client/static/vendor/tabler/). Merk: Motion Mint #1FC4A2, Motion Ink #122527. Interface: mint = primaire actie/accent, Ink = tekst, blauw #3B82F6 = links, amber #F5B84B = warning/status. */ :root { --motion-mint: #1fc4a2; --motion-ink: #122527; --motion-blauw: #3b82f6; --motion-amber: #f5b84b; --tblr-primary: #1fc4a2; /* mint = primaire actiekleur (knoppen) */ --tblr-primary-rgb: 31, 196, 162; --tblr-primary-fg: #ffffff; --tblr-link-color: #3b82f6; /* blauw = alleen links */ --tblr-link-hover-color: #2563eb; --tblr-warning: #f5b84b; /* amber = status/waarschuwingen */ --tblr-warning-rgb: 245, 184, 75; } /* Ink als tekstkleur alleen in het lichte thema (donker gebruikt Tabler's lichte tekst) */ :root:not([data-bs-theme=dark]) { --tblr-body-color: #122527; } /* -- kleurthema (licht/donker/systeem; shared.js zet data-bs-theme op ) -- */ .logo-voor-donker { display: none; } [data-bs-theme=dark] .logo-voor-licht { display: none; } [data-bs-theme=dark] .logo-voor-donker { display: inline-block; } /* tekstselectie duidelijk zichtbaar (Tabler-default is mint @10%, nauwelijks te zien) */ ::selection { background-color: rgba(31, 196, 162, .4); } [data-bs-theme=dark] ::selection { background-color: rgba(31, 196, 162, .6); } /* -- sidebar: volgt het paginathema (licht/donker/systeem) -- Donker: Motion Ink met witte tekst. Licht: lichte balk (Tabler-default) met Ink-tekst. --motion-sidebar-fg = RGB-basis voor tekst/iconen op de zijbalk; flipt mee met het thema. */ .navbar-vertical { --motion-sidebar-fg: 255, 255, 255; /* witte tekst (donkere balk) */ overflow-x: hidden; /* Tabler zet overflow-y:scroll; daardoor wordt overflow-x 'auto' en verschijnt onderin een spookscrollbalk. Verticaal scrollen blijft. */ } :root:not([data-bs-theme=dark]) .navbar-vertical { --motion-sidebar-fg: 18, 37, 39; } /* Motion Ink-tekst op de lichte balk */ [data-bs-theme=dark] .navbar-vertical { --tblr-navbar-bg: var(--motion-ink); --tblr-navbar-border-color: transparent; } .motion-logo { display: inline-flex; align-items: center; } .motion-logo img { height: 26px; width: auto; display: block; } /* logo wisselt mee met het thema; .motion-logo img zet display:block (0,1,1), dus hier specifieker (0,2,0+) overschrijven, anders blijven beide logo's zichtbaar */ .motion-logo .logo-voor-licht { display: block; } .motion-logo .logo-voor-donker { display: none; } [data-bs-theme=dark] .motion-logo .logo-voor-licht { display: none; } [data-bs-theme=dark] .motion-logo .logo-voor-donker { display: block; } .navbar-brand .versie { font-size: .6875rem; font-weight: 400; color: rgba(var(--motion-sidebar-fg), .4); margin-left: .375rem; align-self: flex-end; } /* buildnummer onderaan uitlijnen met de onderkant van het logo (i.p.v. verticaal gecentreerd) */ .navbar-vertical .nav-item.active .nav-link, .navbar-vertical .nav-link.active { color: var(--motion-mint); } /* takenteller inline naast de menutekst, op dezelfde hoogte (Tabler pint 'm met (0,4,0) absoluut rechtsboven als notificatie-dot; hier specifieker terugzetten naar inline) */ .navbar .navbar-nav .nav-link .nav-link-title .badge { position: static; transform: none; vertical-align: middle; } .navbar-vertical .navbar-nav.mt-auto { flex: 0 0 auto; } /* onderste lijst (Instellingen) niet laten meegroeien */ .sidebar-onder { display: flex; align-items: stretch; border-top: 1px solid rgba(var(--motion-sidebar-fg), .08); } .thema-keuze { display: flex; align-items: center; justify-content: flex-end; gap: .125rem; flex: 0 0 auto; padding: 0 .625rem 0 .25rem; } .thema-keuze button { background: none; border: 0; color: rgba(var(--motion-sidebar-fg), .4); padding: .3125rem; border-radius: .375rem; cursor: pointer; line-height: 0; } .thema-keuze button:hover { color: rgba(var(--motion-sidebar-fg), .8); background: rgba(var(--motion-sidebar-fg), .06); } .thema-keuze button.actief { color: var(--motion-mint); background: rgba(var(--motion-sidebar-fg), .06); } .thema-keuze .icon { width: 16px; height: 16px; } .sidebar-voet { display: block; flex: 1 1 auto; min-width: 0; padding: .75rem .625rem .75rem .75rem; text-decoration: none; } a.sidebar-voet:hover { background: rgba(var(--motion-sidebar-fg), .05); text-decoration: none; } .gebruiker-naam { font-weight: 600; color: rgba(var(--motion-sidebar-fg), .85); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gebruiker-email { font-size: .75rem; color: rgba(var(--motion-sidebar-fg), .45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -- formulieren (wrapped-label-patroon: tekst met invoer eronder) -- */ .form-label > .form-control, .form-label > .form-select, .form-label > textarea.form-control { margin-top: .25rem; font-weight: 400; } .formulier .form-label { display: block; margin-bottom: .75rem; } .formulier h2 { font-size: .9375rem; font-weight: 600; margin: 1.25rem 0 .75rem; } .formulier h2:first-child { margin-top: 0; } .formulier-knoppen { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; } .formulier-smal { max-width: 480px; } .veldrij { display: flex; gap: .75rem; flex-wrap: wrap; } .veldrij > .form-label { flex: 1; min-width: 160px; margin-bottom: .75rem; } .veldrij .smal { flex: 0 1 120px; min-width: 100px; } .veldrij .groei { flex: 2; } /* knop in een veldrij krijgt dezelfde ondermarge als de velden, zodat 'ie er netjes mee uitlijnt i.p.v. te hoog te staan (de velden hebben margin-bottom .75rem). */ .veldrij > .btn { margin-bottom: .75rem; } .schakel { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0; cursor: pointer; } .schakel input { margin: 0; } .schakel-onder { display: flex; align-items: flex-end; padding-bottom: .5rem; gap: .4rem; } .schakel-onder input { margin: 0; } .hint { font-size: .8125rem; color: var(--tblr-secondary); } /* -- file-input: eigen NL-knop i.p.v. de Engelse browser-default ("Choose file / No file chosen") -- shared.js verbergt de native input en zet hier een knop + bestandsnaam neer. */ .bestand-veld { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; } .bestand-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .bestand-naam { word-break: break-word; } .fout { color: var(--tblr-danger); font-size: .8125rem; min-height: 1em; margin: .375rem 0; } /* -- overzichtskaarten (o.a. Instellingen) -- */ /* Alle kaarten even hoog (= de hoogste) en op desktop naast elkaar i.p.v. gestapeld; schaalt responsief terug naar minder kolommen op smalle schermen. */ .kaart-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; /* smal scherm: 1 kolom */ grid-auto-rows: 1fr; /* alle kaarten even hoog (= de hoogste) */ } @media (min-width: 768px) { .kaart-grid { grid-template-columns: repeat(3, 1fr); } /* desktop: 3 naast elkaar, zoals voorheen */ } /* kaarten zijn directe grid-kinderen; reset de Bootstrap-marge van `.card-link + .card-link` (anders springt elke kaart na de eerste in). */ .kaart-grid > .card { height: 100%; margin: 0; } /* -- tabellen -- */ .klikbaar { cursor: pointer; } th.sorteerbaar { cursor: pointer; user-select: none; } th.sorteerbaar:hover { color: var(--tblr-body-color); } th.sorteerbaar.actief::after { content: " ▾"; } th.sorteerbaar.actief.asc::after { content: " ▴"; } .leeg { color: var(--tblr-secondary); text-align: center; padding: 1rem 0; } /* -- filterbalk -- */ .filterbalk { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; } .filterbalk .form-label { margin-bottom: 0; } .filterbalk .form-control, .filterbalk .form-select { width: auto; } .datum-snelkeuze { min-width: 9.5rem; } .form-label .datum-snelkeuze { display: block; margin-top: .25rem; } .zoekveld { flex: 1; min-width: 220px; } /* -- tegels (dashboard) -- */ .tegel-getal { font-size: 1.75rem; font-weight: 700; color: var(--motion-mint); line-height: 1.2; } /* De stappen van de verkooptrechter hadden hier een eigen pil-badge met eigen kleuren. Die is vervallen: stadia en offertestatussen delen nu één kleurtabel (FASE_KLEUR in shared.js, gespiegeld door STADIUM_BADGE in klant_service.py voor het server-gerenderde dashboard) en dragen allebei de gewone Tabler-badge. Hetzelfde moment in het proces heeft daarmee overal dezelfde kleur, en de donkere modus komt van Tabler zelf. */ /* -- statuskiezer (faseKiezer in shared.js) -- Een status die je kunt WIJZIGEN ziet er hetzelfde uit als een status die je alleen leest: dezelfde gekleurde pil, alleen met een chevron erachter. Daarvoor stond hier een kale grijze form-select, die naast de badges ernaast uit de toon viel. De kleurklasse (bg-*-lt) zet zowel de achtergrond als de tekstkleur en komt van Tabler, dus de donkere modus en het contrast kloppen vanzelf; de chevron erft die kleur via currentColor. Alleen voor een kiezer die de HUIDIGE status toont - een filter of een veld in een bewerkformulier blijft een gewone form-select, want daar hoort het bij de andere velden. */ .status-kiezer { position: relative; display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem .125rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 500; line-height: 1.4; cursor: pointer; } .status-kiezer-tekst { user-select: none; } .status-kiezer::after { content: ""; width: .375rem; height: .375rem; flex: none; pointer-events: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.1em) rotate(45deg); opacity: .5; } .status-kiezer:hover::after { opacity: .9; } /* De keuzelijst ligt ONZICHTBAAR over de hele pil, met de tekst eronder. Zo opent een klik op de chevron (of waar dan ook op de pil) hem net zo goed; stond de select alleen om de tekst heen, dan deed het pijltje ernaast niets. */ .status-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; } .status-kiezer:focus-within { outline: 2px solid var(--motion-mint); outline-offset: .1875rem; } .status-kiezer:has(.status-select:disabled) { opacity: .6; cursor: progress; } /* De uitgeklapte lijst tekent het besturingssysteem; daar horen gewone kleuren bij. */ .status-select option { background: var(--tblr-bg-surface); color: var(--tblr-body-color); } /* Staat de kiezer in een knoppenrij (de kop van de klantkaart), dan neemt hij de maat en de hoekafronding van de knoppen ernaast aan: een lage pil tussen twee knoppen viel er qua hoogte uit. De statuskleur blijft, want dát is wat hem onderscheidt van een knop. */ .btn-list > .status-kiezer { min-height: 2.25rem; padding: .25rem .6875rem .25rem .875rem; border-radius: var(--tblr-border-radius, .375rem); font-size: .875rem; gap: .5rem; } /* Uitklapbare toelichting: de uitleg hoort bij de kaart maar hoeft niet permanent ruimte te kosten. Dichtgeklapt is het één regel. */ .uitleg { margin-bottom: .75rem; } .uitleg > summary { cursor: pointer; font-size: .8125rem; color: var(--tblr-secondary); width: fit-content; user-select: none; } .uitleg > summary:hover { color: var(--tblr-body-color); } .uitleg[open] > summary { margin-bottom: .5rem; } .uitleg .hint { margin-bottom: 0; } /* -- funnel-trechter (pagina Funnel): gecentreerde, versmallende stappen -- */ .trechter { display: flex; flex-direction: column; align-items: center; gap: .25rem; } /* De stap is een knop (hij opent de klanten achter het getal), dus de browserstijl van een button eraf: geen rand, eigen achtergrond, tekst gewoon erven. */ .trechter-stap { display: block; text-align: center; padding: .625rem .5rem; border-radius: .5rem; color: inherit; text-decoration: none; background: rgba(31, 196, 162, .12); min-width: 11rem; border: 0; font: inherit; cursor: pointer; } .trechter-stap:hover, .trechter-stap:focus-visible { outline: 2px solid var(--motion-mint); } .trechter-stap .trechter-getal { font-size: 1.5rem; font-weight: 700; line-height: 1.2; } .trechter-stap .trechter-label { font-size: .8125rem; font-weight: 600; } .trechter-conversie { font-size: .75rem; color: var(--tblr-secondary); line-height: 1.1; } /* Leadbron-verdeling in de leadbalk. Dit ís het verhaal van die balk, dus de segmenten zijn fors: per bron de naam, het aantal groot en het percentage. De segmentbreedte ís het percentage, dus nooit afronden of wrappen - wat niet past valt weg (zie funnel.js) en staat nog in de tooltip. */ .bron-strook { display: flex; border-radius: .5rem; overflow: hidden; background: rgba(0, 0, 0, .06); margin-top: .25rem; } /* Bij een stap mét verdeling is de gekleurde strook zelf de balk - geen lichte container eromheen, dat oogt dubbel. Het label (met het totaal erachter) staat erboven; de hover- en actief-markering vallen om de strook heen. */ .trechter-stap.met-verdeling { background: none; padding: 0; } .trechter-stap.met-verdeling.actief { background: none; box-shadow: none; } /* Ring mét tussenruimte: een kale mint rand zou wegvallen tegen een segment dat zelf mint is (WPVJ). */ .trechter-stap.met-verdeling.actief .bron-strook { box-shadow: 0 0 0 2px var(--tblr-body-bg), 0 0 0 4px var(--motion-mint); } /* min-width: geen enkele bron mag tot een onleesbaar streepje krimpen. Een segment van een procent zou anders een paar pixels breed zijn; nu houdt het net genoeg ruimte voor naam en aantal, en krimpen de grote segmenten daar evenredig voor in (de percentages staan er in cijfers bij, dus de verhouding blijft gewoon afleesbaar). */ .bron-deel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.75rem; padding: .375rem .25rem; color: #fff; white-space: nowrap; overflow: hidden; line-height: 1.15; } /* Een lange bronnaam in een net-te-smal segment wordt afgekapt met een beletselteken (de tooltip geeft de volledige naam) in plaats van hard weggeknipt. */ .bron-deel .bron-naam { font-size: .75rem; font-weight: 600; opacity: .95; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .bron-deel .bron-aantal { font-size: 1.5rem; font-weight: 700; } .bron-deel .bron-pct { font-size: .75rem; opacity: .95; } /* Smallere segmenten houden dezelfde drie regels, maar in kleinere letters - zo blijft ook een bron van een paar procent gewoon leesbaar in plaats van te verdwijnen. */ .bron-deel-m { padding-left: .125rem; padding-right: .125rem; } .bron-deel-m .bron-naam { font-size: .6875rem; } .bron-deel-m .bron-aantal { font-size: 1.25rem; } .bron-deel-m .bron-pct { font-size: .6875rem; } .bron-deel-s { padding-left: .0625rem; padding-right: .0625rem; } .bron-deel-s .bron-naam { font-size: .5625rem; } .bron-deel-s .bron-aantal { font-size: 1rem; } .bron-deel-s .bron-pct { font-size: .5625rem; } /* De aangeklikte stap: zonder markering is niet te zien bij welke stap de tabel eronder hoort. Steviger tint dan de rest, plus een rand in de accentkleur. */ .trechter-stap.actief { background: rgba(31, 196, 162, .28); box-shadow: inset 0 0 0 2px var(--motion-mint); } /* -- detailkaarten / notities -- */ .kaart-inhoud { min-height: 1rem; } /* De vier gegevenskaarten (Identiteit/Relatie-status/Adres/Woning) staan in een 2-koloms flex-rij; de kolommen rekken al even hoog, maar de kaart zelf vult die hoogte niet. Laat de kortere kaart even hoog worden als zijn buur en vul de body met loze ruimte. Alleen op desktop (vanaf 768px): op mobiel stapelen de kaarten en blijft de natuurlijke hoogte behouden. */ @media (min-width: 768px) { #tab-gegevens .row-cards .card { height: 100%; } } .notitie-vorm textarea { resize: vertical; } .notitie-acties { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; } .notitie { border-top: 1px solid var(--tblr-border-color); padding: .625rem 0; } .notitie:first-child { border-top: 0; } .notitie-meta { font-size: .75rem; color: var(--tblr-secondary); margin-bottom: .125rem; } .notitie-vertrouwelijk { background: rgba(245, 184, 75, .2); color: #9a6b13; padding: .0625rem .4375rem; border-radius: 999px; font-size: .6875rem; margin-left: .375rem; } [data-bs-theme=dark] .notitie-vertrouwelijk { color: var(--motion-amber); } /* -- dialogen & meldingen -- */ dialog { border: 1px solid var(--tblr-border-color); border-radius: .5rem; padding: 0; max-width: 420px; width: 90%; background: var(--tblr-bg-surface); color: var(--tblr-body-color); box-shadow: var(--tblr-shadow-dropdown, 0 8px 24px rgba(18, 37, 39, .15)); } dialog::backdrop { background: rgba(18, 37, 39, .4); } .dialoog-vorm { padding: 1.25rem; } .dialoog-vorm h2 { margin: 0 0 .875rem; font-size: 1rem; } .dialoog-vorm .form-label { display: block; margin-bottom: .75rem; } .dialoog-knoppen { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .875rem; } .wachtwoord-toon { font-family: var(--tblr-font-monospace, ui-monospace, monospace); font-size: 1.125rem; background: var(--tblr-bg-surface-secondary); padding: .625rem; border-radius: .375rem; text-align: center; user-select: all; } #meldingen { position: fixed; top: 1rem; right: 1rem; z-index: 1100; display: flex; flex-direction: column; gap: .5rem; } /* Alarmbalk boven de paginakop als een periodieke sync stukloopt (gevuld door shared.js) */ #sync-alarm .sync-alarm-balk { margin: 1rem 0 0; } .melding { background: var(--motion-ink); color: #fff; padding: .625rem 1rem; border-radius: .375rem; font-size: .8125rem; box-shadow: 0 4px 12px rgba(18, 37, 39, .25); } .melding.fout-melding { background: var(--tblr-danger); } /* -- taken & tijdlijn (stap 3) -- */ .bg-mint-lt { background: rgba(31, 196, 162, .14) !important; color: #0c8a71 !important; } [data-bs-theme=dark] .bg-mint-lt { color: #3fd9b9 !important; } .autocomplete-opties { display: flex; flex-direction: column; gap: 2px; margin: -.5rem 0 .75rem; } .autocomplete-optie { text-align: left; background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: .375rem; padding: .375rem .625rem; font: inherit; font-size: .8125rem; cursor: pointer; color: var(--tblr-body-color); } .autocomplete-optie:hover { border-color: var(--motion-mint); } .tijdlijn-item { display: flex; gap: 1rem; padding: .625rem 0; border-top: 1px solid var(--tblr-border-color); } .tijdlijn-item:first-child { border-top: 0; } .tijdlijn-tijd { flex: 0 0 8.5rem; color: var(--tblr-secondary); font-size: .8125rem; padding-top: .125rem; } .tijdlijn-item.klikbaar:hover { background: var(--tblr-bg-surface-secondary); } /* -- mail-leesvenster -- */ dialog.dialoog-breed { max-width: 680px; } .kaart-mail-body { padding-top: 1rem; } .mail-tekst { white-space: pre-wrap; word-break: break-word; font-size: .8125rem; background: var(--tblr-bg-surface-secondary); border-radius: .375rem; padding: .75rem; max-height: 55vh; overflow-y: auto; } /* -- AI-voortgang (mail-samenvatting) -- */ .mail-samenvatting-paneel { margin: .5rem 0 1.125rem; padding: 1.125rem; border: 1px solid var(--tblr-border-color); border-radius: .5rem; background: var(--tblr-bg-surface-secondary); } .mail-samenvatting-paneel .notitie-meta { margin-bottom: .5rem; } .samenvatting-waarschuwing { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; padding: .625rem .75rem; border: 1px solid rgba(245, 184, 75, .45); border-radius: .375rem; background: rgba(245, 184, 75, .12); font-size: .8125rem; } .samenvatting-waarschuwing[hidden] { display: none; } .mail-samenvatting-tekst { background: var(--tblr-bg-surface); max-height: 32rem; } #samenvatting-voortgang { min-height: 5.5rem; } .voortgang-kop { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem; } .voortgang-tijd { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tblr-secondary); font-weight: 400; } .voortgang-stappen { margin-top: .875rem; display: flex; flex-direction: column; gap: .5rem; } .voortgang-stap { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--tblr-secondary); opacity: .55; transition: opacity .2s; } .voortgang-stap.bezig { opacity: 1; color: var(--tblr-body-color); } .voortgang-stap.klaar { opacity: 1; } .voortgang-icoon { width: 1.25rem; text-align: center; } .voortgang-label { flex: 1; } .voortgang-vink { color: var(--tblr-success); font-weight: 700; width: 1rem; } .voortgang-stap.bezig .voortgang-label::after { content: '…'; } /* -- inline bewerk-panelen in een tabel (AI-functies, afspraaktypen) -- */ .ai-functie-paneel-rij > td, .inline-paneel-rij > td { padding: 0 !important; } /* alleen het AI-paneel heeft de afwijkende (donkere) achtergrond; het generieke paneel houdt de gewone kaartachtergrond zodat invulvelden niet wegvallen */ .ai-functie-paneel-rij > td { background: var(--tblr-bg-surface-secondary); } .ai-functie-paneel, .inline-paneel { padding: 1rem; border-top: 1px solid var(--tblr-border-color); } .ai-functie-paneel-kop, .inline-paneel-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .875rem; } .ai-functie-paneel .form-label, .inline-paneel .form-label { display: block; margin-bottom: .75rem; } .ai-functie-paneel textarea { resize: vertical; min-height: 14rem; } .ai-functie-paneel-acties, .inline-paneel-acties { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .875rem; } /* -- login -- */ .login-merk { height: 44px; width: auto; } /* -- log-inzage -- */ .log-blok-titel { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tblr-secondary); margin: .5rem 0 .25rem; } .log-detail { background: var(--tblr-bg-surface-secondary); border-radius: .375rem; padding: .625rem; font-family: var(--tblr-font-monospace, ui-monospace, monospace); font-size: .75rem; white-space: pre-wrap; word-break: break-all; } .status-ok { color: var(--tblr-success); } .status-fout { color: var(--tblr-danger); } /* -- kopieerknopje achter een nummer/code (bv. het volledige ticketnummer) -- */ .kopieer-knop { border: none; background: none; padding: 0 .15rem; cursor: pointer; color: var(--tblr-secondary); font-size: .9em; line-height: 1; vertical-align: baseline; } .kopieer-knop:hover { color: var(--tblr-body-color); } /* -- telefoonnummer met Xelion-belknop -- */ .belnummer { display: inline-flex; align-items: center; gap: .35rem; } .belnummer-xelion { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; } /* schaalt mee met de regel: hoogte = de tekstgrootte van de regel (1em), dus nooit hoger dan de regel; bij kleinere tekst wordt het icoontje vanzelf kleiner */ .belnummer-icoon { height: 1em; width: auto; display: block; } /* -- routines-overzicht: compacte kaart, omschrijving tot 2 regels -- */ .routine-omschrijving { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* de regel waar je vanuit het overzicht op klikte, even oplichten in het beheerscherm */ .regel-gemarkeerd { outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: var(--tblr-border-radius); } /* -- agenda: weekweergave als tijdraster (a la Google Agenda) -- */ .keuze-lijst { display: flex; flex-wrap: wrap; gap: .25rem 1rem; } .agenda-scroll { overflow-x: auto; } .agenda-raster { display: grid; grid-template-columns: 3.25rem repeat(7, minmax(7.5rem, 1fr)); min-width: 56rem; } .agenda-raster-kop { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tblr-secondary); text-align: center; padding: .25rem .25rem .375rem; border-bottom: 1px solid var(--tblr-border-color); } .agenda-raster-kop.agenda-vandaag { color: var(--tblr-primary); background: color-mix(in srgb, var(--tblr-primary) 12%, transparent); border-bottom: 2px solid var(--tblr-primary); border-radius: .375rem .375rem 0 0; } .agenda-heledag-cel { border-bottom: 1px solid var(--tblr-border-color); border-left: 1px solid var(--tblr-border-color); padding: .125rem; display: flex; flex-direction: column; gap: .125rem; min-height: 1.5rem; } .agenda-gut { font-size: .6875rem; color: var(--tblr-secondary); text-align: right; padding-right: .375rem; font-variant-numeric: tabular-nums; } .agenda-kolom { position: relative; border-left: 1px solid var(--tblr-border-color); background-image: repeating-linear-gradient(to bottom, var(--tblr-border-color) 0, var(--tblr-border-color) 1px, transparent 1px, transparent var(--agenda-uur-px, 48px)); } .agenda-kolom.agenda-vandaag { background-color: color-mix(in srgb, var(--tblr-primary) 4%, transparent); } .agenda-event { position: absolute; overflow: hidden; border-left: 3px solid var(--agenda-kleur, var(--tblr-primary)); background: color-mix(in srgb, var(--agenda-kleur, var(--tblr-primary)) 18%, var(--tblr-bg-surface)); border-radius: .25rem; padding: .0625rem .25rem; font-size: .6875rem; line-height: 1.25; box-shadow: 0 0 0 1px var(--tblr-bg-surface); cursor: pointer; } .agenda-event:hover, .agenda-heledag-chip:hover { background: color-mix(in srgb, var(--agenda-kleur, var(--tblr-primary)) 32%, var(--tblr-bg-surface)); } .agenda-heledag-chip { cursor: pointer; } .agenda-kleur-dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; background: var(--agenda-kleur, var(--tblr-primary)); margin-right: .375rem; } .agenda-event-tijd { font-weight: 600; font-variant-numeric: tabular-nums; } .agenda-heledag-chip { border-left: 3px solid var(--agenda-kleur, var(--tblr-primary)); background: color-mix(in srgb, var(--agenda-kleur, var(--tblr-primary)) 18%, var(--tblr-bg-surface)); border-radius: .25rem; padding: 0 .25rem; font-size: .6875rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .agenda-nu-lijn { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--tblr-danger); z-index: 3; pointer-events: none; } .agenda-chip .form-check-input:checked { background-color: var(--agenda-kleur, var(--tblr-primary)); border-color: var(--agenda-kleur, var(--tblr-primary)); } .agenda-kleur-1 { --agenda-kleur: #1fc4a2; } .agenda-kleur-2 { --agenda-kleur: #4299e1; } .agenda-kleur-3 { --agenda-kleur: #ed8936; } .agenda-kleur-4 { --agenda-kleur: #9f7aea; } .agenda-kleur-5 { --agenda-kleur: #e53e3e; } .agenda-kleur-6 { --agenda-kleur: #38a169; } .agenda-kleur-7 { --agenda-kleur: #d69e2e; } .agenda-kleur-8 { --agenda-kleur: #667eea; }