/* --------------------------------------------------------------------- Bureaubladlayout - testversie, alleen actief bij EN op brede schermen (@media min-width:1024px). Puur additief: alle regels hieronder overschrijven alleen positie/afmeting van bestaande elementen, er verandert niets aan HTML-structuur, id's, classes of JS-gedrag, dus alle knoppen/functionaliteit blijven exact hetzelfde werken. Aan/uit: js/layout.js (localStorage, niet naar de backend). Schakelaar staat op de homepage, zie .layout-switch in index.css. --------------------------------------------------------------------- */ @media (min-width: 1024px) { /* zonder dit telt padding bovenop een expliciet ingestelde width/height op i.p.v. erbinnen (bv. #home-page: width via .content_pages + padding via #home-page zelf = een vaste overschrijding, ongeacht vensterbreedte). Geldt voor elke .content_pages en toekomstige pagina's die hier nog bij komen, dus in één keer breed gezet i.p.v. per pagina apart. */ :root[data-layout="desktop"] .content_pages, :root[data-layout="desktop"] .content_pages *{ box-sizing: border-box; } /* gedeelde "wijzig"/"beëindig"-knopjes rechtsboven in een kaart-header - top:-10% (mobiel) is een percentage van de containerhoogte en duwt 'm op de bredere/anders opgebouwde desktop-kaarten uit positie. top:0 zette 'm op dezelfde hoogte als de eerste tekstregel (bv. "Naam: ...") i.p.v. er zoals bedoeld ÁLS eigen regel boven te zweven - vaste em-waarde i.p.v. percentage, zodat het niet meer afhangt van de (sterk wisselende) hoogte van de kaart eronder. */ :root[data-layout="desktop"] .content-section-button-top{ top: -1.6em; /* was right:5em (index.css) - een vaste offset die op de smallere kaarten van het desktop-raster verhoudingsgewijs veel ruimte opeist en daardoor tegen de kaartnaam aan kan komen; op desktop is er geen reden meer voor zo'n grote marge vanaf de rand */ right: 1.5em; } /* -- navigatie: van onderaan-pil naar vaste balk links -- breedte in rem, niet em: .footer heeft van oudsher font-size:0.8em, dus "15em" zou hier ~252px zijn i.p.v. de 315px die .content_pages verderop verwacht (die geen afwijkende font-size heeft) - rem is altijd relatief aan het root-lettertype, dus gegarandeerd gelijk. clamp() i.p.v. een vaste 15rem: op een gewoon breed beeldscherm blijft dit gewoon 15rem (het maximum, huidig gedrag), maar op een smaller "breed" scherm (bv. een iPad Pro in landscape, ~1076px) krimpt de balk evenredig mee i.p.v. onevenredig veel ruimte in te blijven nemen - met 11rem als ondergrens zodat de iconen/labels altijd blijven passen. Eén custom property, zodat .content_pages hieronder altijd exact aansluit zonder de berekening te hoeven dupliceren. */ :root[data-layout="desktop"]{ /* lagere ondergrens dan eerst (7.5rem i.p.v. 11rem), maar met 18vw als middenterm blijft dit bij een normaal extern beeldscherm (vanaf ~1750px) nog steeds gewoon op het maximum van 15rem staan - alleen tussenliggende breedtes (zoals een iPad Pro, ~1024-1750px) krimpen evenredig mee, zodat de kaarten ernaast meer ademruimte krijgen */ --sidebar-width: clamp(7.5rem, 18vw, 15rem); } :root[data-layout="desktop"] .footer{ left: 0; /* start ONDER de headerbalk i.p.v. erover met padding - .header en .footer hebben dezelfde z-index (11), en bij een gelijke z-index wint wie later in de HTML staat (de zijbalk) - dus met top:0 zou de zijbalk-achtergrond de header-inhoud (o.a. de ACC-badge) bedekken in plaats van 'm alleen visueel te ontwijken */ top: 7.5%; width: var(--sidebar-width); height: 92.5%; border-radius: 0; box-shadow: 2px 0 10px rgba(0,0,0,0.08); flex-direction: column; align-items: stretch; } /* de bestaande scroll-verberg-logica (navi.js) blijft actief, maar heeft op een vaste zijbalk geen zin - hier neutraliseren i.p.v. in de JS */ :root[data-layout="desktop"] .footer, :root[data-layout="desktop"] .footer.footer-hidden{ transform: none !important; } :root[data-layout="desktop"] .footer::before{ content: "GoedGezin"; display: block; padding: 0 0 1em 1.4em; font-size: 1.2em; font-weight: bold; color: var(--theme-color); /* ::before telt ook mee in de flex-volgorde (default order:0) - zonder dit zou #button-home (order:-1, zie verderop) er zelfs voor springen */ order: -2; } :root[data-layout="desktop"] .button-menu{ width: 100%; height: 3em; display: flex; align-items: center; background-position: 1.4em center; mix-blend-mode: normal; } /* #button-home/#button-inoutbox hebben elders al een !important op background-size (index.css); als ID-selector nodig om die te winnen */ :root[data-layout="desktop"] #button-kids, :root[data-layout="desktop"] #button-home, :root[data-layout="desktop"] #button-inoutbox{ background-size: 1.3em !important; } :root[data-layout="desktop"] .button-menu::after{ padding-left: 3.6em; font-size: 0.85em; color: rgb(90, 90, 90); } :root[data-layout="desktop"] #button-kids::after{ content: "Gezin"; } :root[data-layout="desktop"] #button-home::after{ content: "Start"; } :root[data-layout="desktop"] #button-inoutbox::after{ content: "Postvak"; } /* HTML-volgorde is Gezin/Start/Postvak (mobiel: prima als 3 gelijke tegels), maar in de verticale zijbalk oogt dat als "Start staat in het midden" i.p.v. als eerste/bovenste item - hier alleen visueel omgezet, DOM/mobiel blijven ongewijzigd */ :root[data-layout="desktop"] #button-home{ order: -1; } /* -- alle pagina's: ruimte vrijmaken voor de zijbalk -- */ :root[data-layout="desktop"] .content_pages{ left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); /* height:82.5% (mobiel) houdt onderaan 10% vrij voor de footer-pil; die is op desktop een vaste zijbalk geworden en neemt onderaan geen ruimte meer in, dus die 10% mag terug naar de content */ height: 92.5%; } /* -- homepage: van één lange kolom naar een raster van kaarten -- */ :root[data-layout="desktop"] #home-page{ display: grid; /* "Actiemenu" (rechts) bevat de langere tekst-labels ("Nieuw apparaat toevoegen", "Protocollen en beleid") en liep daarmee eerder op smallere breedtes vast op 2 regels - "Mijn gezinshuis" (links) bevat vooral ronde avatars die toch al soepel omklappen via flexbox, dus die kan beter zonder bezwaar iets smaller */ grid-template-columns: 1fr 1.2fr; gap: 1.5em; align-content: start; padding: 2em; background: rgb(237, 235, 233); /* grijze pagina-ondergrond, zelfde grijstoon als .header/.footer */ } /* expliciete rooster-positie voor alle drie - de DOM-volgorde is mijn-gezinshuis, top-todo, actiemenu (to-do zit er dus tussenin), dus overlaten aan CSS-grid's auto-plaatsing zet actiemenu een rij te laag */ :root[data-layout="desktop"] #hp-section-mijn-gezinshuis{ grid-column: 1; grid-row: 1; } :root[data-layout="desktop"] #hp-section-menu{ grid-column: 2; grid-row: 1; /* bewust GEEN align-self:start - de kaart mag (zoals "Mijn gezinshuis" ernaast) gewoon de volle rijhoogte gebruiken, dat oogt rustiger dan een los, kort blokje naast een veel hogere buur */ } :root[data-layout="desktop"] #hp-section-top-todo{ grid-column: 1 / -1; grid-row: 2; } /* "computer inlog bevestigen" is een actie die je vanaf de telefoon doet om een computer-sessie goed te keuren - heeft geen zin als je zelf al op desktop zit */ :root[data-layout="desktop"] #hp-section-bevestig-inlog{ display: none; } /* de kaarten zelf: wit blok op de grijze ondergrond hierboven */ :root[data-layout="desktop"] .home-page-sections{ background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } /* .section-content schuift standaard 3.5em naar rechts zonder de breedte te compenseren (zelfde probleem als bij #gho-detail-page, zie index.css) - in de smallere kaarten van het raster loopt de inhoud anders rechts uit beeld */ :root[data-layout="desktop"] #home-page .section-content{ width: calc(92% - 3.5em); } /* to-do lijst: 5 korte regels onder elkaar oogt als een lange, dunne strook op de volle kaartbreedte - twee kolommen maakt 'm compacter */ :root[data-layout="desktop"] #hp-section-top-todo .section-content{ column-count: 2; column-gap: 2em; } :root[data-layout="desktop"] .hp-todo-titel{ max-width: 100%; } /* -- kinderen-overzicht: zelfde grijze canvas + witte kaart als homepage -- */ :root[data-layout="desktop"] #kids-overview-page{ padding: 2em; background: rgb(237, 235, 233); display: flex; flex-direction: column; gap: 1.5em; align-items: stretch; } :root[data-layout="desktop"] .kids-sections{ background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } /* de tegel-wrapper stond vast op width:22em (float-layout, getuned voor mobiel) - dat pakt nooit de extra breedte van een breed scherm. Hier laten meegroeien met flexbox i.p.v. de vaste float-breedte. */ :root[data-layout="desktop"] .kids-page-kids-wrapper{ left: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 0.5em 1em; } :root[data-layout="desktop"] .kids-page-kid{ float: none; } /* -- kind-detailpagina: profiel groot links, de drie linkjes-blokken (medicatie/rapportage/documenten) gestapeld rechts -- */ :root[data-layout="desktop"] #kid-details-page{ display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto auto auto; gap: 1.5em; align-content: start; padding: 2em; background: rgb(237, 235, 233); } :root[data-layout="desktop"] #kd-section-mijn-plaatsing{ grid-column: 1; grid-row: 1 / span 3; } :root[data-layout="desktop"] #kd-section-medi{ grid-column: 2; grid-row: 1; } :root[data-layout="desktop"] #kd-section-rapo{ grid-column: 2; grid-row: 2; } :root[data-layout="desktop"] #kd-section-docu{ grid-column: 2; grid-row: 3; } /* alleen zichtbaar bij een nieuw kind (zie load() in kid-detail-page.js) */ :root[data-layout="desktop"] #kd-section-save_btn{ grid-column: 1 / -1; grid-row: 4; } :root[data-layout="desktop"] .kid-details-page-sections{ background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } /* zelfde compensatie als bij de andere pagina's - .section-content schuift standaard 3.5em naar rechts zonder de breedte te compenseren */ :root[data-layout="desktop"] #kid-details-page .section-content{ width: calc(92% - 3.5em); } /* -- medicatie-overzicht: kindinfo + pdf-download naast elkaar bovenaan, het medicatie-tabel (heeft al 3 kolommen) vol breed eronder, apotheekfoto daaronder -- */ :root[data-layout="desktop"] #kid-medi-list-page{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; align-content: start; padding: 2em; background: rgb(237, 235, 233); } :root[data-layout="desktop"] #kid-medi-list-page #kd-section-medi-list{ grid-column: 1; grid-row: 1; } :root[data-layout="desktop"] #kid-medi-list-page #medi-section-pdf{ grid-column: 2; grid-row: 1; } /* let op: id "kd-section-medi" bestaat ook op kid-detail-page.js (het kleine medicatie-linkje-blok daar) - vandaar hier bewust met #kid-medi-list-page voorop, anders zou deze regel daar ook meetellen */ :root[data-layout="desktop"] #kid-medi-list-page #kd-section-medi{ grid-column: 1 / -1; grid-row: 2; } :root[data-layout="desktop"] #kid-medi-list-page #medi-section-docu{ grid-column: 1 / -1; grid-row: 3; } :root[data-layout="desktop"] .medi-details-page-sections{ background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } :root[data-layout="desktop"] #kid-medi-list-page .section-content{ width: calc(92% - 3.5em); /* zelfde reden als bij de eigendomslijst: height:25% (mobiele basis-CSS) op een flex-column knijpt hier de hele tabel (#medi-details-page-table) plat i.p.v. 'm te tonen */ height: auto; } :root[data-layout="desktop"] .medi-details-page-version-wrapper{ width: 17em; margin-top: 2em; } /* tabel en datum/opslaan-blok gecentreerd i.p.v. tegen de linkerkant - .medi-details-page-table stond op width:115% (mobiele bleed-truc), hier vervangen door een vaste, gecentreerde breedte */ :root[data-layout="desktop"] #medi-details-page-table{ width: 40em; max-width: 90%; left: 0; margin: 0 auto; } :root[data-layout="desktop"] .medi-details-page-start-date{ width: 40em; max-width: 90%; margin: 0 auto; } /* .picker is display:inline-grid (schikt zich naar eigen inhoud, geen volle breedte) - text-align:center op de ouder centreert 'm, net als gewone inline-content */ :root[data-layout="desktop"] .medi-details-page-start-date-picker{ text-align: center; } /* -- medicatie registreren: twee blokken - kindinfo bovenaan, en datum/tijd + tabel samengevoegd in het registratieblok eronder (die hoorden toch al bij elkaar in één doorlopende invoerflow) -- */ :root[data-layout="desktop"] #kid-medi-register-page{ padding: 2em; background: rgb(237, 235, 233); display: flex; flex-direction: column; gap: 1.5em; align-items: stretch; } :root[data-layout="desktop"] .medi-register-page-sections{ background: white; max-width: 40em; margin: 0 auto; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); width: 100%; } :root[data-layout="desktop"] #kid-medi-register-page .section-content{ width: calc(92% - 3.5em); /* zelfde height:25%-op-flex-column-probleem als eerder bij de andere medicatiepagina's - anders knijpt het de tabel weer plat */ height: auto; } /* -- doelen: van een uitklapbare verticale lijst naar een vloeiend kaartenraster - elke rij (.inout-file-row) wordt een eigen kaartje met een dun accentrandje en een zachte hover, i.p.v. de mobiele stijl met een onderrand als scheiding. Werkdoelen blijven een compacte sub-lijst bínnen het kaartje van hun hoofddoel, geen eigen kaartjes. */ :root[data-layout="desktop"] #kids-doelen-page{ padding: 2em; background: rgb(237, 235, 233); } :root[data-layout="desktop"] .kid-section-doel-new{ width: 100%; } :root[data-layout="desktop"] #kid-doel-options-wrapper{ display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); gap: 1.2em; width: 100%; left: 0; margin-top: 1em; } :root[data-layout="desktop"] #kid-doel-options-wrapper .inout-file-row{ position: relative; left: 0; width: auto; margin-top: 0; padding: 1.2em 1.2em 1.4em; border-bottom: none; background: white; border-radius: 0.6em; border-top: 3px solid var(--theme-color); box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: box-shadow 0.15s ease, transform 0.15s ease; } :root[data-layout="desktop"] #kid-doel-options-wrapper .inout-file-row:hover{ box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-2px); } /* de driehoekjes hebben een negatieve margin-left (mobiele trucje, getuned op de oude left:-2.5em van de rij) - op de kaart (left:0) trekt dat 'm het kaartje uit, dus hier neutraliseren */ :root[data-layout="desktop"] #kid-doel-options-wrapper .kid-doel-collapse{ margin-left: -1em; } :root[data-layout="desktop"] #kid-doel-options-wrapper .kid-doel-row-row{ margin-left: 1em; } :root[data-layout="desktop"] .kid-doel-add-btn{ margin-left: 0; margin-top: 1.2em; } /* zelfde negatieve-margin-truc als hierboven, maar dan voor het plusje om een werkdoel toe te voegen binnen een opengeklapt doel */ :root[data-layout="desktop"] .kid-werkdoel-add-btn{ margin-left: 0; } /* -- eigendomslijst: zelfde twee-blokken-opzet als de kinderen-pagina (actief/gearchiveerd), hergebruikt dezelfde .kids-sections/ .kids-page-kids-wrapper/.kids-page-kid-styling die daar al staat */ :root[data-layout="desktop"] #kid-ownlist-page{ padding: 2em; background: rgb(237, 235, 233); display: flex; flex-direction: column; gap: 1.5em; align-items: stretch; } /* .section-content is standaard display:flex;flex-direction:column met height:25% (mobiele basis-CSS) - op deze kaart is dat een te krappe vaste hoogte geworden, waardoor alle kinderen (ook de handtekening-box met expliciete height:3em) naar rato worden samengeperst. */ :root[data-layout="desktop"] #kid-ownlist-page .section-content{ height: auto; } /* margin-top:10% (mobiel) is een percentage van de containerbreedte, niet de hoogte - op de brede desktop-kaart duwt dat de handtekening-box ver naar beneden. Vaste waarde i.p.v. percentage, en flex-shrink:0 als extra zekerheid dat 'ie zijn eigen height:3em behoudt. */ :root[data-layout="desktop"] #kid-ownlist-signature{ margin-top: 1.5em; flex-shrink: 0; } /* -- notities bekijken: zelfde kaartenraster-stijl als doelen, actief en archief blijven twee aparte roosters (geen HTML/JS-wijziging nodig - ze zaten al in die volgorde), archief-kaarten krijgen extra een grijze /verdoezelde look via de class die de JS al zet (.kid-rap-row-archief) */ :root[data-layout="desktop"] #kids-rapportage-page{ padding: 2em; background: rgb(237, 235, 233); } :root[data-layout="desktop"] #kids-rapportage-page .section-content{ height: auto; } :root[data-layout="desktop"] .kid-rap-samenvatten-row{ width: 100%; } :root[data-layout="desktop"] #kid-rap-options-wrapper, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper{ display: grid; grid-template-columns: 1fr; gap: 1.2em; width: 100%; left: 0; margin-top: 1em; } :root[data-layout="desktop"] #kid-rap-options-wrapper .inout-file-row, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper .inout-file-row{ position: relative; left: 0; width: auto; margin-top: 0; padding: 1.2em 1.2em 1.4em; border-bottom: none; background: white; border-radius: 0.6em; border-top: 3px solid var(--theme-color); box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: box-shadow 0.15s ease, transform 0.15s ease; } :root[data-layout="desktop"] #kid-rap-options-wrapper .inout-file-row:hover, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper .inout-file-row:hover{ box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-2px); } /* zelfde reden als bij de doelen-driehoekjes - negatieve margin-left was getuned op de oude rij-offset, trekt op de kaart de driehoek/titel uit het kaartje */ :root[data-layout="desktop"] #kid-rap-options-wrapper .kid-rap-collapse, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper .kid-rap-collapse{ margin-left: -1em; } :root[data-layout="desktop"] #kid-rap-options-wrapper .kid-rap-row-row, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper .kid-rap-row-row{ margin-left: 1em; } :root[data-layout="desktop"] #kid-rap-options-wrapper .kid-rap-title, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper .kid-rap-title{ margin-left: 0; } /* de opengeklapte tekst stond op width:90% + margin-left:-1em (mobiele truc) - hier de breedte van het (nu volle-breedte) kaartje met een kleine marge i.p.v. het mobiele percentage */ :root[data-layout="desktop"] #kid-rap-options-wrapper .kid-rap-text-large, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper .kid-rap-text-large{ width: calc(100% - 1em); margin-left: 0.5em; } /* #kid-rap-title (12em) + #kid-rap-icons (7em) zijn beide vaste breedtes, die vulden mobiel toevallig de smalle rij; op de volle-breedte kaart niet meer, dus de iconen expliciet naar rechts duwen in de flex-rij */ :root[data-layout="desktop"] #kid-rap-options-wrapper #kid-rap-icons, :root[data-layout="desktop"] #kid-rap-options-archive-wrapper #kid-rap-icons{ margin-left: auto; left: 0; } /* archief: bestaande class (JS zet 'm al bij archief-notities), hier visueel uitgegrijsd - staat al na de actieve notities, geen sortering nodig */ :root[data-layout="desktop"] .kid-rap-row-archief{ opacity: 0.55; filter: grayscale(60%); } /* -- nieuw apparaat toevoegen: zat al in één wrapper (#new-device-section- overview), dus alleen canvas + de al-generieke .kids-sections-kaartstijl hoeven erbij -- */ :root[data-layout="desktop"] #new-device-qr-scan-page{ padding: 2em; background: rgb(237, 235, 233); } /* -- protocollen en beleid: zelfde kaartenraster-opzet als doelen -- */ :root[data-layout="desktop"] #protocollen-page{ padding: 2em; background: rgb(237, 235, 233); } :root[data-layout="desktop"] #protocollen-page .section-content{ height: auto; } :root[data-layout="desktop"] .pp-protocol-intro{ width: 100%; margin-left: 0; } :root[data-layout="desktop"] #pp-protocol-wrapper{ display: grid; grid-template-columns: repeat(auto-fill, minmax(28em, 1fr)); gap: 1.2em; width: 100%; left: 0; margin-top: 1em; } :root[data-layout="desktop"] #pp-protocol-wrapper .inout-file-row{ position: relative; left: 0; width: auto; margin-top: 0; padding: 1.2em 1.2em 1.4em; border-bottom: none; background: white; border-radius: 0.6em; border-top: 3px solid var(--theme-color); box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: box-shadow 0.15s ease, transform 0.15s ease; } :root[data-layout="desktop"] #pp-protocol-wrapper .inout-file-row:hover{ box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-2px); } :root[data-layout="desktop"] .pp-protocol-title{ margin-left: 0; } :root[data-layout="desktop"] .pp-protocol-row-row{ margin-left: 1em; } /* niet meer nodig: alles staat op desktop al open gerenderd (protocol-pages.js roept toggle_expand() zelf al aan) */ :root[data-layout="desktop"] .pp-protocol-collapse{ display: none; } /* .pp-protocol-doc stond absoluut gepositioneerd (left:-3.7em) t.o.v. .pp-protocol-body, leunend op de ruimte die de oude rij-offset vrijmaakte - op de kaart (left:0) valt die ruimte weg, dus hier van absoluut/uitstekend naar naast de tekst. Was eerst float:left, maar bij >2-3 tekstregels (bv. met "Datum herzien") cleart de tekst de float zodra ze de vaste hoogte (50px) van het icoon voorbijkomt, en valt terug naar de linkerkant - vandaar nu een flex-rij, zodat élke regel (ongeacht het aantal) netjes naast het icoon uitlijnt. */ :root[data-layout="desktop"] .pp-protocol-body{ display: flex; align-items: flex-start; gap: 1em; } :root[data-layout="desktop"] .pp-protocol-doc{ position: relative; left: 0; top: 0; flex-shrink: 0; } :root[data-layout="desktop"] .pp-protocol-text{ flex: 1; min-width: 0; } :root[data-layout="desktop"] .pp-protocol-add-holder{ margin-left: 0; } /* -- mijn protocol (detailpagina): twee bestaande blokken (protocolinfo, oudere versies) - deze pagina was al netjes met flexbox/padding gebouwd, op één negatieve marge na -- */ :root[data-layout="desktop"] #protocol-detail-page{ padding: 2em; background: rgb(237, 235, 233); display: flex; flex-direction: column; gap: 1.5em; align-items: stretch; } :root[data-layout="desktop"] #pd-section, :root[data-layout="desktop"] #pd-versies-section{ background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } :root[data-layout="desktop"] #protocol-detail-page .section-content{ height: auto; } :root[data-layout="desktop"] #protocol-page-section-content{ margin-left: 0; } /* -- veilig versturen: "Nieuw versturen" (bevat zowel het invoerformulier als de lijst actieve verstuurde bestanden - die zaten al samen in één wrapper) en "Verlopen" als twee blokken -- */ :root[data-layout="desktop"] #veilig-versturen-page{ padding: 2em; background: rgb(237, 235, 233); display: flex; flex-direction: column; gap: 1.5em; align-items: stretch; } :root[data-layout="desktop"] #inout-section-file-new, :root[data-layout="desktop"] #inout-section-file-archive-new{ background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); /* was margin-top:5% (mobiel, percentage van breedte i.p.v. hoogte) - deze blokken zitten NIET als directe flex-kinderen van de pagina (die gap:1.5em werkt hier dus niet), dus gewoon een vaste marge */ margin-top: 1.5em; } /* .section-content heeft standaard top:5% + left:3.5em + width:92% - "Verlopen" zit door de extra geneste .section-content (zie de HTML) één keer méér door die 92%-breedte heen dan "Nieuw versturen", vandaar dat 'ie smaller uitkwam. Hier op alle niveaus gelijk getrokken. */ :root[data-layout="desktop"] #veilig-versturen-page .section-content{ height: auto; top: 0; left: 0; width: 100%; } :root[data-layout="desktop"] #veilig-versturen-page .inout-file-row{ left: 0; width: auto; } /* .inout-file-add stond absoluut gepositioneerd (left:-4em), leunend op de ruimte die de oude rij-offset vrijmaakte - zelfde soort fix als eerder bij .pp-protocol-doc: van uitstekend naar zwevend in de kaart */ :root[data-layout="desktop"] #veilig-versturen-page .inout-file-add{ position: relative; left: 0; top: 0; float: left; margin-right: 1em; } :root[data-layout="desktop"] #veilig-versturen-page .inout-file-row{ overflow: auto; /* bevat de zwevende .inout-file-add netjes */ } /* -- veilig ontvangen: zelfde opzet, alleen zit de actieve-lijst (#vo-active-wrapper) hier als los element náást "Nieuwe ontvangen" i.p.v. erin - vandaar een eigen kaartje voor dat blok erbij -- */ :root[data-layout="desktop"] #veilig-ontvangen-page{ padding: 2em; background: rgb(237, 235, 233); display: flex; flex-direction: column; gap: 1.5em; align-items: stretch; } /* zelfde kanttekening als bij versturen: geen directe flex-kinderen van de pagina, dus vaste marge i.p.v. op de gap:1.5em hierboven leunen */ :root[data-layout="desktop"] #vo-section-new, :root[data-layout="desktop"] #vo-active-wrapper, :root[data-layout="desktop"] #vo-section-archive{ background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 1.5em; } :root[data-layout="desktop"] #vo-active-wrapper:empty{ display: none; /* geen leeg wit blokje tonen als er niets actiefs is */ } :root[data-layout="desktop"] #veilig-ontvangen-page .section-content{ height: auto; top: 0; left: 0; width: 100%; } :root[data-layout="desktop"] #veilig-ontvangen-page .inout-file-row{ left: 0; width: auto; overflow: auto; } :root[data-layout="desktop"] #veilig-ontvangen-page .inout-file-add{ position: relative; left: 0; top: 0; float: left; margin-right: 1em; } /* -- in-/outbox-menu: de twee opties stonden als grote, bijna lege tapvlakken van 50% schermhoogte onder elkaar (mobiele "grote knop"- stijl) - hier compacte, klikbare tegels naast elkaar -- */ :root[data-layout="desktop"] #inoutbox-page{ padding: 2em; background: rgb(237, 235, 233); } :root[data-layout="desktop"] #veilig-section-start{ height: auto; background: white; border-radius: 0.6em; padding: 1.5em 1.5em 1.8em; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } :root[data-layout="desktop"] .veilig-page-content{ height: auto !important; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; margin-top: 1em; } /* filter:var(--theme-icon-filter) (mobiel, voor het zwart-wit icoontje) werkt op de hele box - dus ook op border-top hieronder, wat 'm de verkeerde kleur gaf. Icoon daarom losgetrokken naar een eigen ::before met zijn eigen filter, zodat rand/tekst daarbuiten blijven. */ :root[data-layout="desktop"] .veilig-page-text{ position: relative; left: 0; width: auto; height: auto; filter: none; background-image: none; padding: 2.4em 1em 1.8em; border-radius: 0.6em; border: 1px solid rgb(225, 222, 219); border-top: 3px solid var(--theme-color); cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; } :root[data-layout="desktop"] .veilig-page-text:hover{ box-shadow: 0 4px 14px rgba(0,0,0,0.12); transform: translateY(-2px); } :root[data-layout="desktop"] .veilig-page-text::before{ content: ""; display: block; width: 2.6em; height: 2.6em; margin: 0 auto 1em; background-repeat: no-repeat; background-position: center; background-size: contain; filter: var(--theme-icon-filter); } /* background-image stond in de mobiele CSS al op de id's zelf, niet op de class - een id wint altijd van een class, dus de class-regel hierboven (background-image:none) kon dat nooit overschrijven. Hier dus op de id's zelf uitzetten, en de echte afbeelding op de ::before. */ :root[data-layout="desktop"] #inoutbox-btn-veilig-versturen{ background-image: none; margin-top:1em; } :root[data-layout="desktop"] #inoutbox-btn-veilig-ontvangen{ background-image: none; margin-top:1em; } :root[data-layout="desktop"] #inoutbox-btn-veilig-versturen::before{ background-image: url("../img/outbox-icon-removebg.png"); } :root[data-layout="desktop"] #inoutbox-btn-veilig-ontvangen::before{ background-image: url("../img/inoutbox-icon-removebg.png"); } /* .section-content:before (index.css) is een globaal dun lijntje boven ELKE section-content - op deze pagina's oogt dat rommelig naast de kaarten, dus hier uitgezet */ :root[data-layout="desktop"] #kids-rapportage-page .section-content:before, :root[data-layout="desktop"] #veilig-versturen-page .section-content:before, :root[data-layout="desktop"] #veilig-ontvangen-page .section-content:before{ display: none; } /* de zijbalk (.footer) staat op position:fixed;height:100vh en hoort dus nooit mee te scrollen - maar als de pagina als geheel toch hoger wordt dan het scherm, kun je de hele body scrollen i.p.v. alleen de content binnen de kaart (die al zijn eigen overflow-y:scroll heeft). Hier simpelweg verbieden, zodat scrollen altijd binnen de kaart blijft. */ :root[data-layout="desktop"] body{ overflow: hidden; height: 100vh; } /* -- mijn gegevens (gezinshuisouder): zelfde opzet als kind-detailpagina - profiel groot links, de twee instellingen-blokken gestapeld rechts. Deze pagina was al netjes gebouwd (geen negatieve marges, breedte- compensatie stond al in index.css), dus alleen het rooster erbij. */ :root[data-layout="desktop"] #gho-detail-page{ display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 1.5em; align-content: start; padding: 2em; background: rgb(237, 235, 233); } :root[data-layout="desktop"] #gho-detail-section-info{ grid-column: 1; grid-row: 1 / span 2; } :root[data-layout="desktop"] #gho-detail-section-theme{ grid-column: 2; grid-row: 1; } :root[data-layout="desktop"] #gho-detail-section-access-log{ grid-column: 2; grid-row: 2; } :root[data-layout="desktop"] #gho-detail-page .section-content{ height: auto; } }