/* GEDEELD BESTAND — bewerk dit in onlineverf-portal/shared/ en verspreid het
met `npm run sync` (scripts/sync-shared.sh). Kopieën in de tools worden
overschreven.
De huisstijl van Onlineverf: kleuren, randen en schaduw. Elke tool had deze
waarden apart staan — negen keer dezelfde regels, negen plekken om te
vergeten als er iets verandert. Ze bleken tot op de letter identiek, dus ze
samenvoegen verandert niets aan hoe iets eruitziet; het maakt alleen dat een
kleurwijziging voortaan op één plek gebeurt.
BEWUST GEEN OPMAAK HIERIN. Geen posities, geen tabbalken, geen plakkende
koppen, geen menu's. Die verschillen per tool wél, en juist daar gaat het
mis als je ze over één kam scheert (de topbalk van Price Monitoring plakte
bijvoorbeeld en die van de andere tools niet). Alleen waarden, geen gedrag.
Een tool die een eigen waarde nodig heeft, zet die gewoon in zijn eigen
stylesheet: die laadt hierna en wint dus.
De donkere modus van het portaal herdefinieert een deel hiervan; dat staat
in de eigen stylesheet van het portaal, want alleen dat portaal heeft hem. */
:root {
/* Eén maat voor alles wat in een balk naast elkaar staat: velden,
keuzelijsten, keuzeknoppen en de periodekiezer (Demian 08-10-2026).
32px = de natuurlijke hoogte van een veld hieronder (13px × 1,4 + 2×6px
padding + rand); een tool die zijn balken hoger wil, zet het overal in
die balk via één :is()-regel. */
--ov-veld-hoogte: 32px;
--ov-veld-hoek: 8px;
/* Merkkleuren */
--monumentengroen: #066c50;
--monumentengroen-dark: #044a37;
--diepsaffraan: #ef8632;
--diepsaffraan-dark: #d66f1f;
--vermiljoen: #f35a38;
--nachtblauw: #173150;
--azuurblauw: #4791c0;
--pastelgrijs: #eceae4;
/* Vlakken en tekst */
--paper: #ffffff;
--paper-sunken: #f7f5f0;
--ink: #173150;
--ink-soft: #4d5d75;
--line: #e4ded0;
--line-strong: #d3cab6;
/* Vorm */
--radius: 10px;
--shadow-card: 0 1px 2px rgba(28, 36, 32, 0.06), 0 8px 24px -12px rgba(28, 36, 32, 0.14);
}
/* ---------------- tooltip ----------------
Eén tooltip voor alle tools. Drie tools hadden hier hun eigen versie van,
elk met net andere maten en kleuren; dit is de gedeelde vorm.
Waarom niet gewoon het title-attribuut: browsers laten een native tooltip
pas na ongeveer een seconde zien, en dat is niet in te stellen. Een tooltip
die je pas ziet als je al gestopt bent met kijken helpt niemand.
De regel pakt ELK element met data-tooltip, zonder extra klasse. Dat is met
opzet: zo hoefden de tools die dit al hadden geen tachtig losse plekken aan
te passen, en krijgt nieuw werk het vanzelf goed. `ov-tip` mag je erbij
zetten om te laten zien dat het om een tooltip gaat, maar nodig is het niet.
Gebruik: ………
Let op: dit is toelichting, nooit de enige plek waar iets staat — op een
aanraakscherm bestaat hover niet. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
background: var(--nachtblauw); color: #fff;
font-size: 11.5px; font-weight: 500; line-height: 1.45; text-align: left;
text-transform: none; letter-spacing: normal;
white-space: nowrap; padding: 5px 9px; border-radius: 6px;
box-shadow: 0 6px 16px rgba(23, 49, 80, 0.25);
opacity: 0; pointer-events: none; transition: opacity 0.05s ease; z-index: 500;
/* Pas opbouwen bij aanwijzen: een onzichtbare tooltip telt anders mee in
de breedte van de pagina, en een tooltip bij een knop aan de rechterrand
gaf zo een horizontale schuifbalk (PIM op 1280 px, QA 08-10-2026). */
display: none;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; display: block; }
/* Voor een tooltip van meer dan een paar woorden: vaste breedte en afbreken
op regels, anders wordt het één onleesbare lange streep. */
.ov-tip-breed[data-tooltip]::after { white-space: pre-line; width: 240px; }
/* Hangt het element bovenin het scherm (een knop in de topbalk), dan valt een
tooltip erboven buiten beeld — die hoort er dan onder. */
.ov-tip-onder[data-tooltip]::after { bottom: auto; top: calc(100% + 6px); }
/* Standaard staat de tooltip gecentreerd boven het element. Zit dat element
tegen de linker- of rechterrand (de eerste kolom van een tabel, een knop
uiterst rechts), dan steekt de helft eroverheen en wordt hij afgeknipt.
Lijn hem dan uit met de rand van het element zelf. */
.ov-tip-links[data-tooltip]::after { left: 0; transform: none; }
.ov-tip-rechts[data-tooltip]::after { left: auto; right: 0; transform: none; }
/* ---------------- het canvas ----------------
Eén kolom voor de hele tool: logo, hamburgermenu, titel, de tabbladen én de
inhoud eronder staan allemaal in dezelfde doos, met dezelfde linkerrand.
Waarom dit er is. De kop liep sinds 23-09-2026 van rand tot rand, maar de
inhoud had per tool een eigen breedte (900, 1100, 1240, 1400, 1440 en 1600
px stonden er door elkaar). Op een breed scherm stond het menu dan uiterst
links en de inhoud gecentreerd — de twee hoorden zichtbaar niet meer bij
elkaar. Alles van rand tot rand laten lopen lost dat ook op, maar rekt een
tabel of een tekst op een 2560-scherm onnodig uit. Vandaar één maat.
1600 px is de breedste keuze die er al lag (de drie kolommen van de Review
Assistant passen er precies in). Smaller dan het venster wordt er niets:
onder de 1600 px vult het canvas gewoon de hele breedte.
De gekleurde balken blijven wél van rand tot rand lopen; alleen wat erin
staat schuift mee naar de canvasrand. Dat gaat via --ov-rand hieronder.
Een tool die het scherm echt moet vullen (de kaart in de Servicepunten
Cockpit) zet in de eigen stylesheet --ov-canvas op 100%; dan lopen kop én
inhoud weer van rand tot rand, maar samen. */
:root {
--ov-canvas: 1600px;
--ov-kop-inset: 28px;
/* De linker- en rechterrand van het canvas, te gebruiken als horizontale
padding op een element dat zelf de volle breedte heeft — de groene kop,
de tabbalk, . Binnen 1600 px is dat gewoon de inspringing; daarboven
groeit hij mee zodat de inhoud in het midden blijft staan.
Zo houdt de gekleurde balk zijn volle breedte (een kop die halverwege het
scherm ophoudt is geen kop) terwijl wat erin staat wél netjes op de
canvasrand begint. Geen wrapper-div nodig, en dus ook geen HTML-wijziging
in twaalf tools. De 100% is de breedte van het element zelf. */
--ov-rand: max(var(--ov-kop-inset), calc((100% - var(--ov-canvas)) / 2 + var(--ov-kop-inset)));
/* De lucht tussen de tabbalk en het eerste blok eronder. Stond per tool op
18, 20, 22 of 24 px; één waarde, zodat het overspringen tussen tools niet
opvalt (feedback 23-09-2026). */
--ov-boven: 22px;
}
/* De tabbalk volgt hetzelfde canvas, met één extra regel: passen de tabbladen
niet binnen het canvas, dan groeit de doos mee en komt het geheel vanzelf in
het midden van het venster in plaats van rechts uit te lopen.
width: fit-content de doos is zo breed als de tabbladen,
min-width: min(canvas,100%) maar minstens zo breed als het canvas,
margin-inline: auto en staat gecentreerd in het venster.
Zijn ze breder dan het venster, dan kapt max-width af en schuift de balk
(overflow-x op .main-tab-bar). */
.main-tab-bar-inner {
display: flex;
width: fit-content;
min-width: min(var(--ov-canvas), 100%);
max-width: 100%;
margin-inline: auto;
padding-inline: var(--ov-kop-inset);
box-sizing: border-box;
}
/* ---------------- sleepgreep ----------------
De greep waarmee je een rij of kaart verplaatst. Drie tools hadden hier hun
eigen versie van, met net andere maten en zelfs een ander teken (⋮⋮ tegen
een braillepatroon) — dit is de gedeelde vorm.
Slepen begint bij de greep en niet bij de hele rij: anders kun je geen tekst
meer selecteren in de invoervelden die er vaak naast staan. Zet op de greep
ook een toetsenbordafhandeling voor pijl omhoog/omlaag, zodat verplaatsen
ook zonder muis kan.
Gebruik:
…-klein voor een greep die inline in een tabelregel staat. */
.ov-sleep-greep {
width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-strong);
/* Gevuld en met een donker teken: een witte greep met lichtgrijze stippen
valt weg tegen de rij eromheen, en dan zie je niet dat je er iets mee
kunt. Dit moet leesbaar zijn als knop, niet als decoratie. */
background: var(--paper-sunken); color: var(--ink); cursor: grab; font-family: inherit;
display: flex; align-items: center; justify-content: center;
letter-spacing: 1px; font-size: 15px; font-weight: 700; line-height: 1;
padding: 0; flex-shrink: 0;
}
.ov-sleep-greep:hover { background: var(--pastelgrijs); border-color: var(--ink-soft); }
.ov-sleep-greep:active { cursor: grabbing; }
.ov-sleep-greep:focus-visible { outline: 2px solid var(--azuurblauw); outline-offset: 1px; }
.ov-sleep-greep-klein { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; }
/* Wat er gesleept wordt, vervaagt; waar het terechtkomt krijgt een lijn. Die
lijn zet elke tool zelf: op een kaart hoort hij om het element, in een
tabel op de cellen. */
.sleept { opacity: 0.45; }
/* Aankruisvakjes en keuzerondjes in de merkkleur. Dit stond in zes tools
apart en ontbrak in de zevende — precies waar deze gedeelde laag voor is.
Het is een waarde, geen opmaak, dus hij hoort hier en niet per tool.
Een tool die zijn vakjes zelf tekent (zie servicepunten-cockpit) heeft een
eigen regel die later komt en dus wint. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--monumentengroen); }
/* ---------------- navigatie met twee lagen ----------------
De vaste regel voor alle tools (afspraak 29-09-2026):
- Eén laag tabbladen: alleen de witte .main-tab-bar met groene onderstreping.
- Twee lagen: bovenaan deze donkere balk met de onderdelen, daaronder de
witte tabbalk van dát onderdeel. Heeft een onderdeel maar één tabblad,
dan valt de witte balk weg.
- Een zijbalk links is alleen voor instellingen (periode, niveau, winkel),
nooit voor navigatie.
De donkere balk hangt direct onder de groene kop: samen één blok, met
dezelfde vorm als de tabbladen (label + onderstreping), licht op donker.
Oorsprong: Assets Generator, daarna Servicepunten Cockpit en Sales Insight.
Gebruik:
*/
:root { --ov-menubalk: #163150; }
.primary-category-bar { background: var(--ov-menubalk); padding: 0 var(--ov-rand); }
.primary-category-bar-inner { display: flex; gap: 4px; flex-wrap: nowrap; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.primary-category-bar-inner::-webkit-scrollbar { display: none; }
.category-btn {
position: relative; flex: 0 0 auto; white-space: nowrap;
display: flex; align-items: center; gap: 8px; padding: 12px 14px;
border: 0; border-bottom: 2px solid transparent; background: transparent;
color: rgba(255, 255, 255, 0.72);
font-family: inherit; font-size: 13.5px; font-weight: 500;
cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
}
.category-btn:hover { color: #fff; }
.category-btn.is-active { color: #fff; border-bottom-color: #fff; font-weight: 700; }
.category-btn .icon { width: 15px; height: 15px; }
.category-btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (max-width: 860px) {
.primary-category-bar { padding: 0; }
.primary-category-bar-inner { padding: 0 14px; scroll-snap-type: x proximity; }
.category-btn { padding: 11px 10px; font-size: 13px; scroll-snap-align: start; }
}
/* ---------------- invoervelden ----------------
Basisopmaak voor elk tekst-, zoek-, getal- en datumveld, elke keuzelijst
en elk tekstvak in elke tool. Aanleiding (01-10-2026): een nieuw zoekveld
en keuzelijst in Sales Insight stonden er kaal bij (dunne zwarte rand,
browserstandaard), omdat elke tool zijn velden per plek opmaakte en een
nieuwe plek dus niets had. Nu heeft elk veld vanzelf de huisstijl.
:where() maakt de specificiteit 0: elke opmaak in een tool gaat voor, dus
bestaande velden veranderen niet. Geef een nieuw veld dus GEEN eigen
rand/padding/lettertype; alleen breedte of afwijkingen. */
:where(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], select, textarea) {
font-family: inherit;
font-size: 13px;
line-height: 1.4;
color: var(--ink);
background-color: var(--paper);
border: 1px solid var(--line-strong);
border-radius: var(--ov-veld-hoek);
padding: 6px 11px;
box-sizing: border-box;
}
:where(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], select, textarea):focus {
outline: none;
border-color: var(--monumentengroen);
box-shadow: 0 0 0 3px rgba(6, 108, 80, 0.14);
}
:where(input, select, textarea)::placeholder { color: var(--ink-soft); opacity: 0.8; }
/* ---------------- links ----------------
Nooit meer het blauwe, onderstreepte browserlinkje (Demian 08-10-2026:
"dat ziet er onopgemaakt uit, nergens wil ik dat zo"). Een link in lopende
tekst is groen zonder streep, met streep bij hover. Een link in een tabel
(meestal een productnaam) is gewoon donkere tekst en wordt pas bij hover
groen: de tabel blijft rustig en je ziet toch dat je kunt klikken.
:where() = specificiteit 0, dus knoppen (a.btn), tabbladen en elke eigen
linkopmaak in een tool gaan gewoon voor. */
:where(a) { color: var(--monumentengroen); text-decoration: none; }
/* Geen streep bij hover op links die eruitzien als knop of tabblad (a.btn,
a.knop, a.tab-btn …): die tekenen hun eigen hover. */
:where(a:not([class*="btn"]):not([class*="knop"]):not([class*="tab"]):not([role="tab"]):hover) { text-decoration: underline; text-underline-offset: 2px; }
:where(table a, td a) { color: var(--ink); font-weight: 500; }
:where(table a:hover, td a:hover) { color: var(--monumentengroen); }
/* ---------------- keuzelijsten ----------------
Het eigen pijltje van de browser plakt tegen de rechterrand en verschilt
per browser. Overal hetzelfde chevron-pijltje met lucht eromheen, in de
kleur van de hulptekst. Geldt voor elke gewone keuzelijst in elke tool;
de :not()'s laten lijsten met meerdere zichtbare regels met rust, en houden
de specificiteit hoog genoeg om een "background: …" in een tool niet het
pijltje te laten wissen. */
select:not([multiple]):not([size]) {
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5d75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 14px 14px;
padding-right: 34px;
}
select:not([multiple]):not([size]):disabled { background-image: none; padding-right: 12px; }
select::-ms-expand { display: none; }
/* ---------------- keuzeknop ----------------
Een knop die een keuzemenu opent (Kolommen, Concurrenten, een periode-
kiezer) staat bijna altijd naast gewone keuzelijsten, en moet er dan ook
precies zo uitzien: zelfde rand, hoogte, hoek, lettergrootte en hetzelfde
chevron-pijltje. Eerder kreeg zo'n knop de knopstijl van de tool (andere
hoogte, ander pijltje) en viel hij uit de rij (Demian 08-10-2026).
Gebruik:
Geen eigen pijltje-svg erin zetten; dat doet deze regel. */
.ov-keuzeknop {
display: inline-flex; align-items: center; gap: 6px;
font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.4;
color: var(--ink); text-transform: none; letter-spacing: normal; white-space: nowrap;
background-color: var(--paper);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5d75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px;
border: 1px solid var(--line-strong); border-radius: var(--ov-veld-hoek);
min-height: var(--ov-veld-hoogte);
padding: 6px 34px 6px 11px; box-sizing: border-box; box-shadow: none; cursor: pointer;
}
.ov-keuzeknop:hover { border-color: var(--ink-soft); }
.ov-keuzeknop:focus-visible { outline: none; border-color: var(--monumentengroen); box-shadow: 0 0 0 3px rgba(6, 108, 80, 0.14); }
.ov-keuzeknop .icon, .ov-keuzeknop > svg { width: 14px; height: 14px; color: var(--ink-soft); flex-shrink: 0; }
/* Directe tooltip onder de cursor (zie ov-portal-nav.js): vervangt overal de
trage title van de browser en data-cursor-tooltip. */
.ov-cursor-tip {
position: fixed; z-index: 9800; pointer-events: none;
max-width: 320px; background: var(--nachtblauw); color: #fff;
font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left;
padding: 6px 10px; border-radius: 8px; white-space: normal;
box-shadow: 0 8px 24px -8px rgba(23, 49, 80, 0.6);
}
.ov-cursor-tip[hidden] { display: none; }