/* ========================================================================= 27 Moments — CMS-bewerkmodus (gedeelde stijlen, kopie per template) Alleen actief wanneer de klasse .cms-bewerkmodus draagt. De bewerkmodus draait binnen de portaal-editor en hoort dus bij 27 Moments, niet bij het thema van de trouwsite. De zwevende balken zijn daarom NEUTRAAL: gebroken wit als drager, tekst in #2c2c2b, donkergroen enkel als accent op de knop. Een volledig groene balk vloekt met elke sitestijl die het koppel kiest; wit doet dat nooit. De streepjeslijnen op bewerkbare elementen blijven paars, want die horen bij de inhoud en niet bij de balk. Leesbaarheid boven elke achtergrond komt van de drager zelf: boven een donkere sitestijl steekt het witte pilletje er vanzelf uit, boven een lichte doet de schaduw plus de haarlijn dat werk. Elke tekst- en knopcombinatie hieronder haalt minstens 5:1 contrast. De maten hieronder zijn vaste waarden en geen thema-variabelen, want elk template heeft zijn eigen (afwijkende) :root-blok. ========================================================================= */ .cms-bewerkmodus { /* 27 Moments-branding, los van het thema van de site zelf. */ --cms-groen: #5a6850; --cms-groen-diep: #4d5945; --cms-paars: #835fa5; --cms-wit: #fbfbf9; --cms-tekst: #2c2c2b; --cms-zacht: #5f5b55; --cms-rand: rgba(44, 44, 43, 0.12); } .cms-bewerkmodus [data-reveal], .cms-bewerkmodus .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .cms-bewerkbaar { outline: 1.5px dashed rgba(131, 95, 165, 0.6); outline-offset: 3px; cursor: text; min-height: 1em; } .cms-bewerkbaar:hover, .cms-bewerkbaar:focus { outline-color: rgba(131, 95, 165, 0.95); outline-style: solid; background: rgba(131, 95, 165, 0.07); } .cms-bewerkbaar--foto, .cms-bewerkbaar--link, .cms-bewerkbaar--video { cursor: pointer; } /* De bewerkbalk zweeft onderaan de site. Ze wordt nooit breder dan het scherm en houdt op telefoon rekening met de home-indicator. Drager: gebroken wit met een haarlijn en een diepe schaduw, zodat de balk zich losmaakt van élke site eronder — licht of donker. */ .cms-balk { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 12px; background: var(--cms-wit, #fbfbf9); color: var(--cms-tekst, #2c2c2b); padding: 8px 8px 8px 18px; border-radius: 999px; box-shadow: 0 0 0 1px var(--cms-rand, rgba(44, 44, 43, 0.12)), 0 14px 36px rgba(44, 44, 43, 0.26); font-family: system-ui, sans-serif; font-size: 13px; line-height: 1.3; max-width: calc(100vw - 20px); } .cms-balk__label { color: var(--cms-zacht, #5f5b55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* De enige groene vlakken in de bewerkmodus: de knoppen die iets doen. */ .cms-knop { font: inherit; font-weight: 600; border: 1.5px solid var(--cms-groen, #5a6850); border-radius: 999px; padding: 9px 16px; min-height: 38px; background: var(--cms-groen, #5a6850); color: var(--cms-wit, #fbfbf9); cursor: pointer; white-space: nowrap; flex: none; } .cms-knop:hover { background: var(--cms-groen-diep, #4d5945); border-color: var(--cms-groen-diep, #4d5945); } /* Lila valt weg tegen een witte balk (1,9:1); paars haalt daar 4,9:1. */ .cms-knop:focus-visible { outline: 3px solid var(--cms-paars, #835fa5); outline-offset: 2px; } .cms-knop:disabled { background: #e8e5df; border-color: #e8e5df; color: var(--cms-zacht, #5f5b55); cursor: default; } /* Kleine knoppen staan op de pagina zelf en niet in een balk: daar draagt het witte pilletje met groene rand zichzelf, ook boven een foto. */ .cms-knop--klein { padding: 5px 12px; min-height: 0; font-size: 12px; background: var(--cms-wit, #fbfbf9); color: var(--cms-groen, #5a6850); box-shadow: 0 4px 12px rgba(44, 44, 43, 0.18); } .cms-knop--klein:hover { background: var(--cms-groen, #5a6850); color: var(--cms-wit, #fbfbf9); } .cms-lijstwerkbalk { display: flex; gap: 8px; justify-content: center; padding: 8px 0; } .cms-videoplaceholder { border: 1.5px dashed rgba(131, 95, 165, 0.6); border-radius: 10px; padding: 28px 16px; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; color: var(--cms-paars, #835fa5); background: rgba(131, 95, 165, 0.06); } /* ========================================================================= Autosave-status in de opslagbalk + foto-herpositioneermodus (gedeeld) ========================================================================= */ .cms-balk__status { white-space: nowrap; font-weight: 600; color: var(--cms-tekst, #2c2c2b); } /* De weigerbalk op het kale template draagt één lange zin en verder niets; die mag wél afbreken, anders loopt ze op telefoon uit de pil. */ .cms-balk__status:only-child { white-space: normal; text-align: center; } /* "Opgeslagen ✓" — het groene accent, nu op wit in plaats van lichtgroen op groen (dat haalde tegen de nieuwe drager geen leesbaar contrast). */ .cms-balk__status--ok { color: var(--cms-groen, #5a6850); } /* Krimpvolgorde van de balk: eerst de uitleg weg, daarna de statustekst — de knop "Nu opslaan" blijft altijd staan. */ @media (max-width: 760px) { .cms-balk__label { display: none; } } @media (max-width: 460px) { .cms-balk { padding: 8px 8px 8px 14px; gap: 8px; font-size: 12px; } .cms-knop { min-height: 44px; padding: 10px 18px; } } /* Allerkleinste schermen: enkel nog de knop, de streepjeslijnen op de pagina vertellen al dat je aan het bewerken bent. */ @media (max-width: 340px) { .cms-balk__status { display: none; } } .cms-herpositioneer { cursor: grab; touch-action: none; outline: 2.5px solid rgba(131, 95, 165, 0.95) !important; outline-offset: 2px; user-select: none; -webkit-user-select: none; } .cms-herpositioneer:active { cursor: grabbing; } /* Zelfde neutrale drager als de bewerkbalk: het hulplabel zweeft over de foto die je aan het uitsnijden bent en moet daar altijd leesbaar blijven. */ .cms-fotohulp { position: fixed; z-index: 10000; display: flex; align-items: center; gap: 12px; background: var(--cms-wit, #fbfbf9); color: var(--cms-tekst, #2c2c2b); font-family: system-ui, sans-serif; font-size: 12.5px; line-height: 1.35; padding: 8px 8px 8px 14px; border-radius: 999px; box-shadow: 0 0 0 1px var(--cms-rand, rgba(44, 44, 43, 0.12)), 0 12px 30px rgba(44, 44, 43, 0.26); max-width: calc(100vw - 16px); } .cms-fotohulp span { color: var(--cms-zacht, #5f5b55); } /* In een balk hoeft dit knopje geen eigen schaduw: de balk draagt hem al. */ .cms-fotohulp__knop { flex: none; box-shadow: none; } /* Op telefoon past het hulplabel niet meer naast het beeld: dan wordt het een vaste balk onderaan, boven de bewerkbalk. */ @media (max-width: 560px) { .cms-fotohulp { left: 10px !important; right: 10px; top: auto !important; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: none; border-radius: 18px; flex-wrap: wrap; justify-content: center; text-align: center; padding: 10px 12px; } } /* ========================================================================= "FOTO VERVANGEN" — de laag over elk vervangbaar beeld Het probleem dat dit oplost: een streepjeslijn rond een foto vertelt niet dat je die foto kán vervangen. De laag hieronder doet dat wel, met een fototoestel en drie woorden. Twee soorten schermen, twee gedragingen: - GEEN muis (telefoon, tablet): het knopje staat er altijd, klein en discreet in de hoek. Hover bestaat daar niet, dus een verborgen knop zou daar simpelweg nooit bestaan. - WEL een muis: het knopje en de sluier komen pas op wanneer je over het beeld gaat, of wanneer de knop focus krijgt van de tab-toets. Alles behalve de knop laat kliks door naar het beeld eronder: een reeds vervangen foto moet nog altijd haar uitsnede-modus kunnen openen. ========================================================================= */ .cms-fotolaag { position: absolute; z-index: 4; margin: 0; padding: 0; box-sizing: border-box; pointer-events: none; font-family: system-ui, sans-serif; } .cms-fotolaag__scrim { position: absolute; inset: 0; /* De laag erft de ronde hoeken van het beeld (gezet vanuit cms.js). */ border-radius: inherit; pointer-events: none; background: rgba(44, 44, 43, 0.28); box-shadow: inset 0 0 0 2px rgba(131, 95, 165, 0.9); opacity: 0; transition: opacity 0.18s ease; } /* De knop en de standmelding delen dezelfde hoek: er is er altijd maar één van de twee te zien. Rechtsonder, want daar staat in geen enkel van de vijf ontwerpen tekst die je zou willen aanklikken (een hero-titel staat gecentreerd, een scrollpijl onderaan in het midden). */ .cms-fotolaag__knop, .cms-fotolaag__stand { position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px); margin: 0; padding: 7px 13px; border-radius: 999px; background: var(--cms-wit, #fbfbf9); font: 600 12px/1.25 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(44, 44, 43, 0.28); } .cms-fotolaag__knop { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgba(44, 44, 43, 0.14); color: var(--cms-groen, #5a6850); cursor: pointer; /* iOS geeft een knop van zichzelf een bolling en eigen hoeken. */ -webkit-appearance: none; appearance: none; transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease; } .cms-fotolaag__icoon { flex: none; display: block; width: 15px; height: 15px; } /* Drie templates geven een kale of eigen maten mee. Het opschrift van deze knop hoort daar buiten te vallen. */ .cms-fotolaag__tekst { display: inline; font: inherit; letter-spacing: 0.01em; text-transform: none; color: inherit; } .cms-fotolaag__knop:hover { background: var(--cms-groen, #5a6850); border-color: var(--cms-groen, #5a6850); color: var(--cms-wit, #fbfbf9); } /* Focus mag nooit onzichtbaar zijn — ook niet wanneer de knop op een muisscherm normaal weggeblonken staat. */ .cms-fotolaag__knop:focus-visible { opacity: 1; transform: none; outline: 3px solid var(--cms-paars, #835fa5); outline-offset: 2px; } .cms-fotolaag__stand { pointer-events: none; border: 1.5px solid rgba(44, 44, 43, 0.14); color: var(--cms-tekst, #2c2c2b); opacity: 0; transition: opacity 0.18s ease; } /* Een muis: knop en sluier verschijnen bij hover of focus. */ @media (hover: hover) and (pointer: fine) { .cms-fotolaag__knop { opacity: 0; transform: translateY(4px); } /* De laag hangt altijd pal ná het beeld (of ná de knop eromheen), dus ":hover +" wijst hier precies het bijhorende beeld aan. */ :hover + .cms-fotolaag .cms-fotolaag__knop, .cms-fotolaag:hover .cms-fotolaag__knop, .cms-fotolaag:focus-within .cms-fotolaag__knop { opacity: 1; transform: none; } :hover + .cms-fotolaag .cms-fotolaag__scrim, .cms-fotolaag:hover .cms-fotolaag__scrim, .cms-fotolaag:focus-within .cms-fotolaag__scrim { opacity: 1; } } /* Geen muis: het knopje staat er altijd, maar rustig. */ @media (hover: none), (pointer: coarse) { .cms-fotolaag__knop { opacity: 0.94; padding: 6px 11px; font-size: 11.5px; } } /* ---- de drie standen: bezig, bewaard, niet bewaard -------------------- */ .cms-fotolaag--bezig .cms-fotolaag__stand, .cms-fotolaag--klaar .cms-fotolaag__stand, .cms-fotolaag--fout .cms-fotolaag__stand { opacity: 1; } /* Zolang er een stand te zien is, gaat de knop weg: ze staan op dezelfde plek, en tijdens het bewaren valt er toch niets te kiezen. */ .cms-fotolaag--bezig .cms-fotolaag__knop, .cms-fotolaag--klaar .cms-fotolaag__knop, .cms-fotolaag--fout .cms-fotolaag__knop { opacity: 0 !important; pointer-events: none; } .cms-fotolaag--bezig .cms-fotolaag__scrim, .cms-fotolaag--fout .cms-fotolaag__scrim { opacity: 1; } .cms-fotolaag--klaar .cms-fotolaag__stand { color: var(--cms-groen, #5a6850); border-color: var(--cms-groen, #5a6850); } .cms-fotolaag--fout .cms-fotolaag__stand { background: #8f1d18; border-color: #8f1d18; color: #fff; } /* Tijdens het uitsnijden van een foto moet élke klik op het beeld terecht komen bij het slepen. De standmelding blijft staan; de knop en de sluier verdwijnen. !important omdat de hover-regels hierboven specifieker zijn. */ .cms-herpositioneert .cms-fotolaag { pointer-events: none; } .cms-herpositioneert .cms-fotolaag__knop { opacity: 0 !important; pointer-events: none; } .cms-herpositioneert .cms-fotolaag__scrim { opacity: 0 !important; } /* Kleine schermen: kleinere hoeken, zodat het knopje ook op een galerijbeeld van 160 pixels breed nog past. */ @media (max-width: 460px) { .cms-fotolaag__knop, .cms-fotolaag__stand { right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 6px 10px; font-size: 11px; } } /* ========================================================================= HET VRAAGPANEEL — in de plaats van window.prompt() Eén paneel voor elke vraag die de editor stelt (link, video, en wat er nog komt). Neutrale drager zoals de bewerkbalk, groene knop als enige vlak, paarse focusring. Pilvormen en ronde hoeken volgen de huisstijl. ========================================================================= */ .cms-paneel-scherm { position: fixed; inset: 0; /* Boven de bewerkbalk (9999) en boven de foutmelding (10000). */ z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(44, 44, 43, 0.44); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); font-family: system-ui, sans-serif; } .cms-paneel { box-sizing: border-box; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; margin: 0; padding: 20px; border-radius: 24px; background: var(--cms-wit, #fbfbf9); color: var(--cms-tekst, #2c2c2b); box-shadow: 0 0 0 1px var(--cms-rand, rgba(44, 44, 43, 0.12)), 0 24px 60px rgba(44, 44, 43, 0.34); text-align: left; } .cms-paneel__titel { margin: 0 0 4px; font: 700 16px/1.3 system-ui, sans-serif; letter-spacing: 0; color: var(--cms-tekst, #2c2c2b); text-transform: none; } .cms-paneel__uitleg { margin: 0 0 16px; font: 400 12.5px/1.45 system-ui, sans-serif; color: var(--cms-zacht, #5f5b55); } .cms-paneel__rij { margin: 0 0 14px; } .cms-paneel__label { display: block; margin: 0 0 6px; font: 600 11px/1.2 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cms-zacht, #5f5b55); } /* 16px is geen smaak maar een noodzaak: bij een kleinere maat zoomt iOS bij het aantikken van het veld in en staat de halve pagina scheef. */ .cms-paneel__veld { box-sizing: border-box; display: block; width: 100%; margin: 0; padding: 11px 14px; border: 1.5px solid var(--cms-rand, rgba(44, 44, 43, 0.12)); border-radius: 14px; background: #fff; color: var(--cms-tekst, #2c2c2b); font: 400 16px/1.4 system-ui, sans-serif; /* Anders zet iOS er een eigen binnenschaduw en eigen hoeken op. */ -webkit-appearance: none; appearance: none; } .cms-paneel__veld:focus { border-color: var(--cms-paars, #835fa5); outline: 3px solid var(--cms-paars, #835fa5); outline-offset: 1px; } .cms-paneel__knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; } /* De tweede keuze hoort geen vlak te zijn: één groene knop per paneel. */ .cms-knop--zacht { background: transparent; border-color: var(--cms-rand, rgba(44, 44, 43, 0.12)); color: var(--cms-tekst, #2c2c2b); } .cms-knop--zacht:hover { background: #eceae4; border-color: var(--cms-rand, rgba(44, 44, 43, 0.12)); color: var(--cms-tekst, #2c2c2b); } @media (max-width: 460px) { .cms-paneel { padding: 18px 16px; border-radius: 22px; } /* Twee knoppen die samen de breedte vullen: makkelijker te raken met een duim dan twee pilletjes rechtsonder. */ .cms-paneel__knoppen .cms-knop { flex: 1 1 130px; } }