/* ========================================================================= Thema: newstyle — shell-restyle bovenop templates/default ------------------------------------------------------------------------- Doel (zie dev.techspeeltuin.nl): witte sidebar links, lichtgrijze content rechts met witte "floating" kaarten, blauw accent, platte menu-secties met sectielabels, en de secties van de huidige pagina in de sidebar. Alles is gescoped onder `.theme-newstyle` (body-class) zodat het thema volledig opt-in is. Kleuren via bestaande CSS-vars → dark mode werkt mee. ========================================================================= */ .theme-newstyle { /* Ruimere sidebar voor het 3-laags uitklapbare menu */ --sidebar-width: 296px; --ns-radius: 12px; --ns-gap: 1.25rem; --ns-content-max: 1320px; /* max breedte van het gecentreerde content-vlak */ } /* ------------------------------------------------------------------------- 0. Scrollbars in newstyle-stijl — dun en subtiel, overal in het thema. `:has()` stuurt de viewport-scrollbar (op ) aan zodra de body het thema draagt; de descendant-regels pakken alle scroll-containers binnenin. ------------------------------------------------------------------------- */ html:has(body.theme-newstyle) { scrollbar-width: thin; scrollbar-color: var(--border-color-dark) transparent; } .theme-newstyle, .theme-newstyle * { scrollbar-width: thin; scrollbar-color: var(--border-color-dark) transparent; } html:has(body.theme-newstyle)::-webkit-scrollbar, .theme-newstyle ::-webkit-scrollbar { width: 10px; height: 10px; } html:has(body.theme-newstyle)::-webkit-scrollbar-track, .theme-newstyle ::-webkit-scrollbar-track { background: transparent; } html:has(body.theme-newstyle)::-webkit-scrollbar-thumb, .theme-newstyle ::-webkit-scrollbar-thumb { background: var(--border-color-dark); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } html:has(body.theme-newstyle)::-webkit-scrollbar-thumb:hover, .theme-newstyle ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip: padding-box; } /* ------------------------------------------------------------------------- 1. Sidebar → wit (light) / donker (dark) via --bg-primary ------------------------------------------------------------------------- */ .theme-newstyle .sidebar { background: var(--bg-primary); border-right: none; box-shadow: none; padding-top: 0; } .theme-newstyle .sidebar-header { border-bottom: 1px solid var(--border-color); padding: 0 18px 16px; } .theme-newstyle .logo-image { filter: none; } .theme-newstyle .logo-image:hover { filter: none; transform: scale(1.02); } .theme-newstyle .sidebar nav { scrollbar-color: var(--border-color-dark) transparent; } .theme-newstyle .sidebar nav::-webkit-scrollbar-thumb { background: var(--border-color-dark); } /* ------------------------------------------------------------------------- 2. Menu-items (standalone, parent=0) → leesbaar op wit Brede reset: framework.css gebruikt .sidebar-menu-item a (descendant) voor gradient-achtergronden, border-left en padding-shifts — alles hier wissen. ------------------------------------------------------------------------- */ /* Reset ALLE links in de sidebar-nav, ongeacht nesting */ .theme-newstyle .sidebar nav a, .theme-newstyle .sidebar nav a:hover, .theme-newstyle .sidebar nav a:focus, .theme-newstyle .sidebar-menu-item a, .theme-newstyle .sidebar-menu-item a:hover, .theme-newstyle .sidebar-menu-item.active a, .theme-newstyle .sidebar-menu-item.active a:hover, .theme-newstyle .sidebar-submenu-item a, .theme-newstyle .sidebar-submenu-item a:hover, .theme-newstyle .sidebar-submenu-item.active a, .theme-newstyle .sidebar-submenu-item.active a:hover { background: none !important; border-left: none !important; box-shadow: none !important; } .theme-newstyle .sidebar-menu { margin: 4px 0; padding: 0 10px; } .theme-newstyle .sidebar-menu-item { margin: 0; } .theme-newstyle .sidebar-menu-item > a, .theme-newstyle .sidebar-menu-item > a:hover, .theme-newstyle .sidebar-menu-item.active > a, .theme-newstyle .sidebar-menu-item.active > a:hover { background: none !important; border-left: none !important; box-shadow: none !important; transition: color 0.15s !important; padding: 5px 12px !important; } .theme-newstyle .sidebar-menu-item > a { color: var(--text-secondary); font-size: 13.5px; font-weight: 400; gap: 10px; border-radius: 0; } .theme-newstyle .sidebar-menu-item > a i { color: var(--text-secondary); font-size: 15px; width: 18px; } .theme-newstyle .sidebar-menu-item > a:hover { color: var(--text-primary); } /* Actief item: vet + accent, geen achtergrond */ .theme-newstyle .sidebar-menu-item.active > a, .theme-newstyle .sidebar-menu-item.active > a:hover { color: var(--accent) !important; font-weight: 700; } .theme-newstyle .sidebar-menu-item.active > a i { color: var(--accent) !important; } /* ------------------------------------------------------------------------- 3. Categorie-groepen → 3-laags uitklapbaar menu. Laag 1: categorie (Over Dordt, P2000…) klikbaar in/uitklappen. Laag 2: onderliggende pagina's (P2000 info, P2000 Dordrecht…), ingesprongen. Laag 3: pagina-secties (sectie 4) onder het actieve item. ------------------------------------------------------------------------- */ /* Laag 1: categorie-toggle */ .theme-newstyle .sidebar-menu-item.has-submenu > .submenu-toggle, .theme-newstyle .sidebar-menu-item.has-submenu > .submenu-toggle:hover { background: none !important; border-left: none !important; box-shadow: none !important; transition: color 0.15s !important; padding: 5px 12px !important; } .theme-newstyle .sidebar-menu-item.has-submenu > .submenu-toggle { margin: 0; border-radius: 0; color: var(--text-secondary); font-size: 13.5px; font-weight: 400; cursor: pointer; gap: 10px; } .theme-newstyle .sidebar-menu-item.has-submenu > .submenu-toggle:hover { color: var(--text-primary); } .theme-newstyle .sidebar-menu-item.has-submenu > .submenu-toggle > i:first-child { color: var(--text-secondary); font-size: 15px; width: 18px; } /* chevron rechts, draait bij open (rotatie komt uit framework.css) */ .theme-newstyle .submenu-arrow { display: inline-block !important; margin-left: auto !important; color: var(--text-secondary); font-size: 11px !important; } /* open categorie die het actieve item bevat: accent-kleur + vet */ .theme-newstyle .sidebar-menu-item.has-submenu.open:has(.sidebar-submenu-item.active) > .submenu-toggle, .theme-newstyle .sidebar-menu-item.has-submenu.open:has(.sidebar-submenu-item.active) > .submenu-toggle > i:first-child, .theme-newstyle .sidebar-menu-item.has-submenu.open:has(.sidebar-submenu-item.active) > .submenu-toggle .submenu-arrow { color: var(--accent); } .theme-newstyle .sidebar-menu-item.has-submenu.open:has(.sidebar-submenu-item.active) > .submenu-toggle { font-weight: 700; } /* Submenu inklapbaar (framework max-height-mechaniek blijft intact). Ingesprongen met een verticale "rail"; ruim genoeg open zodat de secties (laag 3) passen. */ .theme-newstyle .sidebar-submenu { padding: 2px 0; margin: 2px 0 4px 23px; border-left: 1px solid var(--border-color); } .theme-newstyle .sidebar-menu-item.has-submenu.open > .sidebar-submenu { max-height: 4000px !important; } /* Laag 2: pagina-items */ .theme-newstyle .sidebar-submenu-item > a, .theme-newstyle .sidebar-submenu-item > a:hover, .theme-newstyle .sidebar-submenu-item.active > a, .theme-newstyle .sidebar-submenu-item.active > a:hover { background: none !important; border-left: none !important; box-shadow: none !important; transition: color 0.15s !important; padding: 4px 10px !important; } .theme-newstyle .sidebar-submenu-item > a { border-radius: 0; color: var(--text-secondary); font-size: 13px; font-weight: 400; gap: 8px; } .theme-newstyle .sidebar-submenu-item > a i { color: var(--text-secondary); font-size: 14px; width: 16px; } .theme-newstyle .sidebar-submenu-item > a:hover { color: var(--text-primary); } .theme-newstyle .sidebar-submenu-item.active > a, .theme-newstyle .sidebar-submenu-item.active > a:hover { color: var(--accent) !important; font-weight: 700; } .theme-newstyle .sidebar-submenu-item.active > a i { color: var(--accent) !important; } /* ------------------------------------------------------------------------- 4. Pagina-secties in de sidebar (injected door newstyle.js) Elke sectie als eigen "bubbel" onder het actieve menu-item. ------------------------------------------------------------------------- */ .theme-newstyle .sidebar-sections { list-style: none; margin: 2px 0 6px 23px; padding: 0; border-left: 2px solid var(--border-color); } .theme-newstyle .sidebar-sections li { margin: 0; padding: 0; } .theme-newstyle .sidebar-sections li::before { display: none !important; } .theme-newstyle .sidebar-sections a, .theme-newstyle .sidebar-sections a:hover { background: none !important; border-left: none !important; box-shadow: none !important; padding: 4px 10px !important; } .theme-newstyle .sidebar-sections a { position: relative; display: block; color: var(--text-secondary); text-decoration: none; font-size: 12.5px; font-weight: 400; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; } .theme-newstyle .sidebar-sections a:hover { color: var(--text-primary); } /* Niveau h3: extra inspringing */ .theme-newstyle .sidebar-sections a.lvl-3 { padding-left: 22px; font-size: 12px; } /* Actieve sectie: accent-kleur + lijn links oplichten */ .theme-newstyle .sidebar-sections a.active { color: var(--accent); font-weight: 600; } .theme-newstyle .sidebar-sections a.active::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--accent); border-radius: 2px; } /* ------------------------------------------------------------------------- 5. Content-vlak → lichtgrijs met witte floating kaarten ------------------------------------------------------------------------- */ .theme-newstyle main { background: var(--bg-secondary); padding-bottom: 64px; /* ruimte boven de vaste ticker */ } .theme-newstyle .content { /* Witte content-laag op de grijze pagina-rand. Losse tekst/headers staan hierdoor op wit; grijze blokken worden nette contrast-insets. */ background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--ns-radius); box-shadow: 0 1px 3px var(--shadow); padding: 1.75rem 2rem 2.5rem; /* Gecentreerd in het gebied rechts van het menu, met áltijd zichtbare marge: 92% van de beschikbare breedte, afgetopt op de max-width. Zo blijft 'ie gecentreerd ook op schermen waar 'ie anders de ruimte zou vullen. */ width: 92%; max-width: var(--ns-content-max, 1320px); margin-inline: auto; } /* Kaarten krijgen wat meer "lift" en ronding */ .theme-newstyle .card, .theme-newstyle .kpi-card { border-radius: var(--ns-radius); border: 1px solid var(--border-color); box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow); } /* (Frames met var(--bg-secondary) hoeven niet meer wit: ze staan nu op de witte content-laag en vormen daardoor vanzelf nette contrast-insets.) */ /* ------------------------------------------------------------------------- 5b. Nieuws-masonry — tegels pakken dynamisch in elkaar. Kleine rij-eenheid + items op contenthoogte; newstyle.js zet per tegel het juiste aantal rijen (grid-row-end). Zonder JS blijft de class weg en geldt de normale grid (progressive enhancement). ------------------------------------------------------------------------- */ .theme-newstyle .news-articles-grid.ns-masonry, .theme-newstyle .news-grid.ns-masonry { grid-auto-rows: 4px; /* fijne rij-eenheid → strakke verticale aansluiting */ align-items: start; grid-auto-flow: row; /* JS plaatst expliciet; geen auto-dense nodig */ } /* Actieve bron-filterknoppen: zachter/transparanter blauw i.p.v. het harde #3b82f6 van het component (gebruikt het thema-accent op 80%). */ .theme-newstyle button.news-filter-btn.active, .theme-newstyle [data-theme="dark"] button.news-filter-btn.active { background: color-mix(in srgb, var(--accent) 80%, transparent); border-color: color-mix(in srgb, var(--accent) 80%, transparent); color: #fff; } .theme-newstyle button.news-filter-btn.active:hover { background: var(--accent); border-color: var(--accent); } /* ------------------------------------------------------------------------- 5c. Nieuws-feeds (hamnieuws / technieuws / lokaalnieuws): round-robin kolom-masonry via newstyle.js (kaart n → kolom n%cols). Behoudt de chronologische volgorde (nieuwste boven) én pakt strak. Lijstweergave (.news-grid--list) slaat de masonry over → het component toont de lijst. CSS-hook staat hierboven bij .news-grid.ns-masonry. ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- 6. Header → strakker + slanker, op de content-achtergrond ------------------------------------------------------------------------- */ .theme-newstyle { --header-height: 88px; } .theme-newstyle header { background: var(--bg-primary); border-bottom: 1px solid var(--border-color); box-shadow: none; } .theme-newstyle .header-content { height: var(--header-height); min-height: unset; padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; } .theme-newstyle .branding h1 { font-size: 19px; } .theme-newstyle .header-tagline { display: none; /* tagline weg voor een slankere balk */ } /* Sidebar-logo: animatie uit, compact zodat het aansluit op de topbar-hoogte */ .theme-newstyle .sidebar-logo__frame::before, .theme-newstyle .sidebar-logo__frame::after { animation: none; background: none; } .theme-newstyle .sidebar-header { padding: 0 20px; height: var(--header-height); min-height: unset; display: flex; align-items: center; justify-content: center; border-bottom: none; box-sizing: border-box; } .theme-newstyle .logo { display: flex; align-items: center; justify-content: center; padding: 0; height: 100%; width: 100%; } .theme-newstyle .sidebar-logo__frame { display: flex; align-items: center; justify-content: center; padding: 0; height: 100%; } .theme-newstyle .logo-image { max-height: 38px; display: block; } /* Op zeer brede schermen (>1920px) heft het framework de hele site af op 1920px en lijnt links uit (grote grijze strook rechts). In newstyle gebruiken we de volle breedte zodat de content écht in het midden van de pagina staat. (Header/footer worden al full-width gepind hierboven.) */ @media (min-width: 1921px) { body.theme-newstyle { max-width: none; } } /* "Lees verder →" in de feed-cards (toegevoegd door newstyle.js) */ .theme-newstyle .news-card .ns-readmore { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--accent); font-size: 0.85rem; font-weight: 600; text-decoration: none; } .theme-newstyle .news-card .ns-readmore:hover { text-decoration: underline; } .theme-newstyle .news-card .ns-readmore i { font-size: 0.8em; transition: transform 0.15s ease; } .theme-newstyle .news-card .ns-readmore:hover i { transform: translateX(3px); } /* ------------------------------------------------------------------------- 6c. Footer verwijderd → copyright linksonder (sidebar-hoek), debug-info in een blokje rechtsonder boven de ticker. ------------------------------------------------------------------------- */ .theme-newstyle .newstyle-copyright { position: fixed; left: 0; bottom: 0; width: var(--sidebar-width); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--bg-primary); border-top: 1px solid var(--border-color); border-right: 1px solid var(--border-color); color: var(--text-secondary); font-size: 11px; line-height: 1.2; z-index: 1001; } .theme-newstyle .newstyle-copyright i { color: var(--accent); flex-shrink: 0; } .theme-newstyle .newstyle-copyright span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Ruimte onderaan de sidebar reserveren voor het copyright-blokje */ .theme-newstyle .sidebar { padding-bottom: 38px; } /* Bij ingeklapte sidebar (off-canvas) verbergen we het vaste copyright-blokje, anders valt het over de volle-breedte ticker/content. Topbar/footer sluiten dan links aan (sidebar neemt geen ruimte meer in). */ @media (max-width: 1280px) { .theme-newstyle .newstyle-copyright { display: none; } .theme-newstyle .sidebar { padding-bottom: 0; } /* !important omdat de basis-pin-regel (left:sidebar-width) later in het bestand staat; hiermee sluit de topbar bij ingeklapte sidebar links aan. */ body.theme-newstyle.has-sidebar header, body.theme-newstyle.has-sidebar footer { left: 0 !important; } /* Menu geopend → "push" i.p.v. overlay: content én topbar schuiven naar rechts zodat de pagina niet achter het menu verdwijnt. */ body.theme-newstyle.has-sidebar:has(.sidebar.open) { padding-left: var(--sidebar-width); } body.theme-newstyle.has-sidebar:has(.sidebar.open) header, body.theme-newstyle.has-sidebar:has(.sidebar.open) footer { left: var(--sidebar-width) !important; } /* Soepele schuif-animatie, gelijk aan de sidebar-transform (0.3s) */ body.theme-newstyle.has-sidebar, body.theme-newstyle.has-sidebar header, body.theme-newstyle.has-sidebar footer { transition: padding-left 0.3s ease, left 0.3s ease; } } .theme-newstyle .newstyle-debug { position: fixed; right: 16px; bottom: 54px; /* net boven de ticker (42px) */ z-index: 1001; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 4px 16px var(--shadow); font-size: 11px; max-width: 380px; } .theme-newstyle .newstyle-debug-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* Sidebar begint linksboven (logo bovenaan); de topbar staat ernaast, rechts van de sidebar, en strekt tot de rechterrand. Pin van sidebar-rand tot rechts (i.p.v. calc-breedte) zodat de topbar op elke schermbreedte 100% van de ruimte vult. */ body.theme-newstyle.has-sidebar header, body.theme-newstyle.has-sidebar footer { left: var(--sidebar-width); right: 0; width: auto; } /* Tekstgrootte-knoppen (A A A) uit de topbar halen. Blijven beschikbaar in het instellingen-dropdownmenu. */ .theme-newstyle .font-size-controls { display: none; } .theme-newstyle .header-settings-dropdown .font-size-controls { display: flex; } /* ------------------------------------------------------------------------- 6b. Ticker / scroller → wit met blauw (i.p.v. donker met gele labels) ------------------------------------------------------------------------- */ .theme-newstyle { --ticker-bg: var(--bg-primary); --ticker-module-weer: var(--accent); --ticker-module-nieuws: var(--accent); --ticker-module-radioact: var(--accent); --ticker-module-aurora: var(--accent); --ticker-module-custom: var(--accent); } .theme-newstyle #ticker-bar { border-top: 1px solid var(--border-color); box-shadow: 0 -2px 6px var(--shadow); } .theme-newstyle .ticker-label, .theme-newstyle .ticker-label::after { background: var(--accent); } .theme-newstyle .ticker-item, .theme-newstyle .ticker-item-text { color: var(--text-primary); } .theme-newstyle .ticker-module-badge { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; } .theme-newstyle .ticker-item:hover { background: var(--bg-tertiary); } .theme-newstyle .ticker-item-sep { background: var(--border-color); } .theme-newstyle .ticker-pause-icon, .theme-newstyle .ticker-loading { color: var(--text-secondary); } /* ------------------------------------------------------------------------- 7. Sticky-scroll offset zodat ankerlinks niet onder de header verdwijnen ------------------------------------------------------------------------- */ .theme-newstyle :is(h1, h2, h3, h4)[id] { scroll-margin-top: calc(var(--header-height) + 20px); } /* ------------------------------------------------------------------------- 8. Mobiel — sidebar gedraagt zich zoals in default (off-canvas), we erven dat gedrag; alleen de kleuren zijn anders. ------------------------------------------------------------------------- */ @media (max-width: 736px) { .theme-newstyle .content { padding: 1rem 1rem 1.5rem; border-radius: 10px; width: auto; /* op mobiel volle breedte (geen zij-marge) */ } }