/* r887 — Media.html popupchrome als sitebrede standaard.
De functionele inhoud van elk venster blijft module-eigen; alleen de shell,
header, body, footer, vensterknoppen en resize-hoeken worden gelijkgetrokken. */
html body .snoeten-site-popup {
--guestbook-window-x: 0px;
--guestbook-window-y: 0px;
box-sizing: border-box !important;
overflow: hidden !important;
border: 4px solid #557A3E !important;
border-radius: 9px !important;
background: #557A3E !important;
box-shadow:
0 0 0 1px rgba(36,54,29,.42),
0 3px 8px rgba(0,0,0,.30),
0 16px 34px rgba(0,0,0,.24) !important;
}
/* Geen tweede donkere laag: gelijk aan de huidige Media-popup. */
html body :is(
.profile-favorites-modal,
.groups-editor-backdrop,
.welcome-poll-modal,
.weather-location-modal,
.admin-newsletter-overlay,
.admin-member-overlay,
.profile-photo-modal.profile-media-bio-modal,
.notification-detail-overlay,
.site-logo-manager-backdrop
) {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* =========================================================
HEADER
========================================================= */
html body .snoeten-site-popup > .guestbook-window-header {
position: relative !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
min-height: 40px !important;
padding: 2px 7px 2px 10px !important;
gap: 2px !important;
overflow: visible !important;
color: #fff !important;
border: 0 !important;
border-bottom: 2px solid #557A3E !important;
border-radius: 0 !important;
outline: 0 !important;
background: linear-gradient(180deg, #82A969 0%, #557A3E 100%) !important;
box-shadow: none !important;
filter: none !important;
cursor: default !important;
touch-action: none !important;
user-select: none !important;
}
html body .snoeten-site-popup > .guestbook-window-header::before,
html body .snoeten-site-popup > .guestbook-window-header::after {
content: none !important;
display: none !important;
}
html body .snoeten-site-popup.is-dragging > .guestbook-window-header {
cursor: grabbing !important;
}
html body .snoeten-site-popup .guestbook-window-title {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
color: #fff !important;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-overflow: ellipsis !important;
text-shadow: 1px 1px 0 #345529 !important;
-webkit-font-smoothing: antialiased !important;
text-rendering: geometricPrecision !important;
white-space: nowrap !important;
}
/* Compact applicatie-icoon exact uit dezelfde Media-familie. */
html body .snoeten-site-popup .snoeten-popup-title-icon {
position: relative !important;
display: inline-block !important;
flex: 0 0 18px !important;
width: 18px !important;
height: 18px !important;
margin: 0 1px 0 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body .snoeten-site-popup .snoeten-popup-title-icon::before {
content: '' !important;
position: absolute !important;
left: 3px !important;
right: 3px !important;
bottom: 3px !important;
height: 7px !important;
background: linear-gradient(135deg, transparent 0 18%, #3f8f3d 19% 48%, #76b651 49% 68%, #2c7e3b 69% 100%) !important;
clip-path: polygon(0 100%, 37% 25%, 56% 58%, 72% 36%, 100% 100%) !important;
}
html body .snoeten-site-popup .snoeten-popup-title-icon::after {
content: '' !important;
position: absolute !important;
top: 4px !important;
right: 4px !important;
width: 4px !important;
height: 4px !important;
border-radius: 50% !important;
background: #fff5a4 !important;
box-shadow: 0 0 0 1px rgba(154,129,39,.25) !important;
}
html body .snoeten-site-popup .snoeten-popup-title-icon.is-album::before {
left: 2px !important; right: 2px !important; bottom: 3px !important; height: 8px !important;
clip-path: none !important;
border: 1px solid #9e761d !important; border-radius: 1px !important;
background: linear-gradient(180deg, #ffe78a, #e8b93a) !important;
}
html body .snoeten-site-popup .snoeten-popup-title-icon.is-album::after {
top: 3px !important; left: 3px !important; right: auto !important;
width: 8px !important; height: 4px !important;
border: 1px solid #9e761d !important; border-bottom: 0 !important; border-radius: 1px 1px 0 0 !important;
background: #f4d15f !important; box-shadow: none !important;
}
html body .snoeten-site-popup .snoeten-popup-title-icon:is(.is-video,.is-playlist)::before {
left: 6px !important; right: auto !important; bottom: 4px !important;
width: 0 !important; height: 0 !important; background: transparent !important; clip-path: none !important;
border-top: 5px solid transparent !important; border-bottom: 5px solid transparent !important; border-left: 8px solid #fff !important;
}
html body .snoeten-site-popup .snoeten-popup-title-icon:is(.is-video,.is-playlist)::after { display: none !important; }
html body .snoeten-site-popup .snoeten-popup-title-icon.is-edit::before {
left: 8px !important; right: auto !important; bottom: 3px !important;
width: 4px !important; height: 12px !important; clip-path: none !important;
border: 1px solid #7d6722 !important; border-radius: 1px !important;
background: linear-gradient(90deg, #f2c341, #fff0a5, #cf9f20) !important; transform: rotate(42deg) !important;
}
html body .snoeten-site-popup .snoeten-popup-title-icon.is-edit::after { display: none !important; }
/* =========================================================
VENSTERKNOPPEN — .button-familie
========================================================= */
html body .snoeten-site-popup .guestbook-window-controls {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
}
html body .snoeten-site-popup .guestbook-window-controls > .guestbook-window-control:nth-child(1) {
transform: translateX(8px) !important;
}
html body .snoeten-site-popup .guestbook-window-controls > .guestbook-window-control:nth-child(2) {
transform: translateX(4px) !important;
}
html body .snoeten-site-popup .guestbook-window-control {
position: relative !important;
box-sizing: border-box !important;
flex: 0 0 28px !important;
width: 28px !important;
min-width: 28px !important;
height: 25px !important;
min-height: 25px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid #707070 !important;
border-radius: 3px !important;
background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background .10s ease-in, border-color .10s ease-in, box-shadow .10s ease-in !important;
}
html body .snoeten-site-popup .guestbook-window-control:hover,
html body .snoeten-site-popup .guestbook-window-control:focus-visible {
border-color: #626262 !important;
background: linear-gradient(to bottom, #fff 0%, #f2f2f2 42%, #e5e5e5 47%, #d7d7d7 100%) !important;
box-shadow: 0 0 3px rgba(0,0,0,.22) !important;
outline: none !important;
}
html body .snoeten-site-popup .guestbook-window-control:active {
background: linear-gradient(to bottom, #d5d5d5 0%, #e0e0e0 42%, #ececec 47%, #f2f2f2 100%) !important;
box-shadow: inset 0 -1px 6px rgba(0,0,0,.18) !important;
}
html body .snoeten-site-popup .guestbook-window-minimize::before {
content: '' !important;
position: absolute !important;
left: 9px !important;
bottom: 6px !important;
width: 12px !important;
height: 2px !important;
background: #4e4e4e !important;
}
html body .snoeten-site-popup .guestbook-window-maximize::before {
content: '' !important;
position: absolute !important;
left: 5px !important;
top: 5px !important;
box-sizing: border-box !important;
width: 14px !important;
height: 12px !important;
border: 2px solid #4e4e4e !important;
border-top-width: 3px !important;
background: transparent !important;
}
html body .snoeten-site-popup .guestbook-window-close {
border-color: #8f2923 !important;
background: linear-gradient(to bottom, #f7aaa4 0%, #ed8178 42%, #dc5c52 47%, #c84239 100%) !important;
}
html body .snoeten-site-popup .guestbook-window-close:hover,
html body .snoeten-site-popup .guestbook-window-close:focus-visible {
border-color: #792019 !important;
background: linear-gradient(to bottom, #ffc0bb 0%, #f58f86 42%, #e9675d 47%, #d24a40 100%) !important;
box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}
html body .snoeten-site-popup .guestbook-window-close:active {
background: linear-gradient(to bottom, #b7352d 0%, #ca453c 42%, #dc5b51 47%, #eb766d 100%) !important;
box-shadow: inset 0 -1px 6px rgba(83,18,14,.30) !important;
}
html body .snoeten-site-popup .guestbook-window-close::before,
html body .snoeten-site-popup .guestbook-window-close::after {
content: '' !important;
position: absolute !important;
left: 6px !important;
top: 11px !important;
width: 14px !important;
height: 2px !important;
border-radius: 1px !important;
background: #fff !important;
box-shadow: 0 1px 0 rgba(105,22,17,.38) !important;
}
html body .snoeten-site-popup .guestbook-window-close::before { transform: rotate(45deg) !important; }
html body .snoeten-site-popup .guestbook-window-close::after { transform: rotate(-45deg) !important; }
/* =========================================================
BODY / INHOUD — grijze shell met witte werkvlakken
========================================================= */
html body .snoeten-site-popup > :is(
.profile-bio-editor-content,
.profile-layout-editor-content,
.profile-details-editor-content,
.admin-newsletter-body,
.admin-member-search-window-body,
.admin-member-body,
.welcome-poll-modal-body,
.weather-location-modal-body,
.profile-favorites-editor-content,
.notification-detail-body,
.site-logo-manager-body
) {
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 0 !important;
background: #f3f0e9 !important;
}
html body .snoeten-site-popup > :is(
.admin-newsletter-body,
.admin-member-search-window-body,
.admin-member-body,
.welcome-poll-modal-body,
.weather-location-modal-body,
.profile-favorites-editor-content,
.notification-detail-body,
.site-logo-manager-body
) {
padding: 20px !important;
}
html body .snoeten-site-popup :is(
.profile-bio-editor-field,
.profile-layout-editor-field,
.profile-details-editor-field,
.messages-compose-content,
.profile-favorites-form-card,
.admin-member-search-window-content,
.admin-member-content-card,
.welcome-poll-modal-content,
.admin-newsletter-content-card,
.admin-newsletter-preview,
.site-logo-manager-body > [data-site-logo-content]
) {
box-sizing: border-box !important;
}
/* Niet elke popup heeft een formulierkaart. De echte inhoudsvlakken blijven wit. */
html body .snoeten-site-popup :is(
.profile-favorites-form-card,
.admin-member-search-window-content,
.admin-member-content-card,
.welcome-poll-modal-content,
.admin-newsletter-content-card,
.admin-newsletter-preview,
.profile-details-panel,
.profile-details-account-form,
.profile-details-help-card,
.groups-editor-panel
) {
border-color: #d5dbe0 !important;
background-color: #fff !important;
box-shadow: none !important;
}
html body .snoeten-site-popup :is(input, select, textarea, [contenteditable="true"]) {
box-sizing: border-box !important;
}
/* Toolbar/tabs: strak tussen header en inhoud, zonder tweede vensterrand. */
html body .snoeten-site-popup > :is(
.profile-bio-editor-toolbar,
.profile-layout-editor-toolbar,
.groups-editor-toolbar
) {
border-right: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* =========================================================
FOOTER
========================================================= */
html body .snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer,
.admin-newsletter-footer,
.admin-member-search-window-footer,
.welcome-poll-modal-footer,
.weather-location-modal-footer,
.profile-favorites-editor-footer,
.notification-detail-footer
) {
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
min-height: 58px !important;
gap: 12px !important;
padding: 12px 16px !important;
border-top: 1px solid #cfd6ce !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
background: #f3f0e9 !important;
box-shadow: none !important;
}
html body .snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer,
.admin-newsletter-footer,
.admin-member-search-window-footer,
.welcome-poll-modal-footer,
.weather-location-modal-footer,
.profile-favorites-editor-footer,
.notification-detail-footer
) > nav,
html body .snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer,
.admin-newsletter-footer,
.admin-member-search-window-footer,
.welcome-poll-modal-footer,
.weather-location-modal-footer,
.profile-favorites-editor-footer,
.notification-detail-footer
) > div:last-child {
margin-left: auto !important;
}
/* Dubbele titel onderaan verdwijnt zodra dezelfde titel in de groene header staat. */
html body .snoeten-site-popup[data-site-popup-header="1"] > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer,
.weather-location-modal-footer,
.profile-favorites-editor-footer,
.notification-detail-footer
) > h1 {
display: none !important;
}
/* =========================================================
GENERIEKE DIALOGS DIE VÓÓR r887 GEEN MEDIA-HEADER HADDEN
========================================================= */
html body .snoeten-site-popup:is(
.messages-compose-editor,
.groups-editor,
.profile-favorites-editor,
.weather-location-modal-dialog,
.welcome-poll-modal-dialog,
.admin-newsletter-window,
.admin-member-search-window,
.admin-member-window,
.notification-detail-dialog,
.site-logo-manager-window
) {
max-width: calc(100vw - 24px) !important;
max-height: calc(100vh - 24px) !important;
}
html body .snoeten-site-popup.messages-compose-editor,
html body .snoeten-site-popup.groups-editor {
width: min(1200px, calc(100vw - 24px)) !important;
}
html body .snoeten-site-popup.profile-favorites-editor {
width: min(760px, calc(100vw - 24px)) !important;
}
html body .snoeten-site-popup.weather-location-modal-dialog {
width: min(620px, calc(100vw - 24px)) !important;
}
html body .snoeten-site-popup.notification-detail-dialog {
width: min(1000px, calc(100vw - 24px)) !important;
}
html body .snoeten-site-popup.site-logo-manager-window {
width: min(900px, calc(100vw - 24px)) !important;
}
/* Groepen: de tabtoolbar blijft onder de groene vensterheader. */
html body .snoeten-site-popup.groups-editor > .groups-editor-toolbar {
margin: 0 !important;
background: #f3f0e9 !important;
}
html body .snoeten-site-popup.groups-editor > .profile-bio-editor-content {
background: #f3f0e9 !important;
}
html body .snoeten-site-popup.groups-editor .groups-editor-panel {
margin: 20px !important;
padding: 18px !important;
border: 1px solid #d5dbe0 !important;
border-radius: 4px !important;
}
/* Berichten: details + WYSIWYG blijven inhoudelijk hetzelfde, shell wordt Media. */
html body .snoeten-site-popup.messages-compose-editor > .messages-compose-content {
background: #f3f0e9 !important;
}
html body .snoeten-site-popup.messages-compose-editor .messages-compose-details,
html body .snoeten-site-popup.messages-compose-editor .messages-compose-body {
background: #fff !important;
}
/* =========================================================
MINIMALISEREN / MAXIMALISEREN / RESIZE
========================================================= */
html body .snoeten-site-popup.is-minimized {
width: min(560px, calc(100vw - 24px)) !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
html body .snoeten-site-popup.is-minimized > :not(.guestbook-window-header):not(.snoeten-popup-resize-handle) {
display: none !important;
}
html body .snoeten-site-popup.is-maximized {
position: fixed !important;
inset: 8px !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
transform: none !important;
margin: 0 !important;
}
html body .snoeten-site-popup .snoeten-popup-resize-handle {
position: absolute !important;
z-index: 80 !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
touch-action: none !important;
user-select: none !important;
}
html body .snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="nw"] { top:0 !important; left:0 !important; cursor:nwse-resize !important; }
html body .snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="ne"] { top:0 !important; right:0 !important; cursor:nesw-resize !important; }
html body .snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="sw"] { bottom:0 !important; left:0 !important; cursor:nesw-resize !important; }
html body .snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="se"] { right:0 !important; bottom:0 !important; cursor:nwse-resize !important; }
html body .snoeten-site-popup:is(.is-minimized,.is-maximized) .snoeten-popup-resize-handle { display:none !important; }
html body .snoeten-site-popup.is-resizing { transition:none !important; }
/* Nieuw geüniformeerde vensters worden tijdens slepen/resizen vastgezet op hun viewportpositie. */
html body .snoeten-site-popup[data-site-popup-auto="1"].is-site-positioned {
position: fixed !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: none !important;
}
@media (max-width: 760px) {
html body .snoeten-site-popup {
border-width: 3px !important;
border-radius: 7px !important;
}
html body .snoeten-site-popup > .guestbook-window-header {
min-height: 38px !important;
padding: 2px 5px 2px 8px !important;
}
html body .snoeten-site-popup .guestbook-window-controls { gap: 6px !important; }
html body .snoeten-site-popup .guestbook-window-control {
flex-basis: 27px !important;
width: 27px !important;
min-width: 27px !important;
height: 24px !important;
min-height: 24px !important;
}
html body .snoeten-site-popup > :is(
.admin-newsletter-body,
.admin-member-search-window-body,
.admin-member-body,
.welcome-poll-modal-body,
.weather-location-modal-body,
.profile-favorites-editor-content,
.notification-detail-body,
.site-logo-manager-body
) { padding: 12px !important; }
html body .snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer,
.admin-newsletter-footer,
.admin-member-search-window-footer,
.welcome-poll-modal-footer,
.weather-location-modal-footer,
.profile-favorites-editor-footer,
.notification-detail-footer
) {
min-height: 52px !important;
padding: 10px 12px !important;
flex-wrap: wrap !important;
}
}
/* r887 detail: ook Meldingen en Logo beheren krijgen het witte Media-werkvlak. */
html body .snoeten-site-popup.notification-detail-dialog > .notification-detail-body > *,
html body .snoeten-site-popup.site-logo-manager-window > .site-logo-manager-body > [data-site-logo-content] {
box-sizing: border-box !important;
border: 1px solid #d5dbe0 !important;
border-radius: 4px !important;
background: #fff !important;
box-shadow: none !important;
}
html body .snoeten-site-popup.site-logo-manager-window > .site-logo-manager-body > [data-site-logo-content] {
padding: 18px !important;
}
/* Media.html dimt de pagina niet: dezelfde keuze geldt nu voor de standaard editors. */
html body.profile-bio-editor-open::before,
html body.profile-layout-editor-open::before,
html body.profile-details-editor-open::before,
html body.messages-modal-open::before,
html body.notification-detail-open::before {
content: none !important;
display: none !important;
background: transparent !important;
opacity: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
pointer-events: none !important;
}
/* =========================================================
r888 — FINALE SPECIFICITEITSLOCK
Oude windows-dialog/popup-shared bestanden gebruiken ID-selectors + !important.
Deze eindlaag is bewust specifieker en staat als laatste stylesheet in .
========================================================= */
/* Shell: versla zowel #guestbookFormContainer #guestbookForm als #bioForm #bioEdit. */
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup,
html body #bioForm #bioEdit.snoeten-site-popup,
html body #detailsModal.snoeten-site-popup.snoeten-site-popup,
html body #layoutEdit.snoeten-site-popup.snoeten-site-popup,
html body #emailModal.snoeten-site-popup.snoeten-site-popup,
html body #passwordModal.snoeten-site-popup.snoeten-site-popup,
html body #plusModal.snoeten-site-popup.snoeten-site-popup,
html body #profile #main .snoeten-site-popup.snoeten-site-popup,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup {
box-sizing: border-box !important;
padding: 0 !important;
overflow: hidden !important;
border: 4px solid #557A3E !important;
border-radius: 9px !important;
background: #557A3E !important;
box-shadow:
0 0 0 1px rgba(36,54,29,.42),
0 3px 8px rgba(0,0,0,.30),
0 16px 34px rgba(0,0,0,.24) !important;
}
/* Header: oude 50px/gap/gradient-regels mogen de Media-header niet terugzetten. */
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup > .guestbook-window-header,
html body #bioForm #bioEdit.snoeten-site-popup > .guestbook-window-header,
html body #detailsModal.snoeten-site-popup > .guestbook-window-header,
html body #layoutEdit.snoeten-site-popup > .guestbook-window-header,
html body #emailModal.snoeten-site-popup > .guestbook-window-header,
html body #passwordModal.snoeten-site-popup > .guestbook-window-header,
html body #plusModal.snoeten-site-popup > .guestbook-window-header,
html body #profile #main .snoeten-site-popup.snoeten-site-popup > .guestbook-window-header,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup > .guestbook-window-header {
position: relative !important;
z-index: 12 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 40px !important;
padding: 2px 7px 2px 10px !important;
gap: 2px !important;
overflow: visible !important;
color: #fff !important;
border: 0 !important;
border-bottom: 2px solid #557A3E !important;
border-radius: 0 !important;
outline: 0 !important;
background: linear-gradient(180deg, #82A969 0%, #557A3E 100%) !important;
box-shadow: none !important;
filter: none !important;
cursor: default !important;
touch-action: none !important;
user-select: none !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup > .guestbook-window-header::before,
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup > .guestbook-window-header::after,
html body #bioForm #bioEdit.snoeten-site-popup > .guestbook-window-header::before,
html body #bioForm #bioEdit.snoeten-site-popup > .guestbook-window-header::after,
html body #profile #main .snoeten-site-popup.snoeten-site-popup > .guestbook-window-header::before,
html body #profile #main .snoeten-site-popup.snoeten-site-popup > .guestbook-window-header::after,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup > .guestbook-window-header::before,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup > .guestbook-window-header::after {
content: none !important;
display: none !important;
border: 0 !important;
background: none !important;
box-shadow: none !important;
}
/* Titel. */
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-title,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-title,
html body #detailsModal.snoeten-site-popup .guestbook-window-title,
html body #layoutEdit.snoeten-site-popup .guestbook-window-title,
html body #emailModal.snoeten-site-popup .guestbook-window-title,
html body #passwordModal.snoeten-site-popup .guestbook-window-title,
html body #plusModal.snoeten-site-popup .guestbook-window-title,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-title,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-title {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
color: #fff !important;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-overflow: ellipsis !important;
text-shadow: 1px 1px 0 #345529 !important;
white-space: nowrap !important;
}
/* Controls: oude 35x28 Windows-knoppen definitief uitschakelen. */
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-controls,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-controls,
html body #detailsModal.snoeten-site-popup .guestbook-window-controls,
html body #layoutEdit.snoeten-site-popup .guestbook-window-controls,
html body #emailModal.snoeten-site-popup .guestbook-window-controls,
html body #passwordModal.snoeten-site-popup .guestbook-window-controls,
html body #plusModal.snoeten-site-popup .guestbook-window-controls,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-controls,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-controls {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-control,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-control,
html body #detailsModal.snoeten-site-popup .guestbook-window-control,
html body #layoutEdit.snoeten-site-popup .guestbook-window-control,
html body #emailModal.snoeten-site-popup .guestbook-window-control,
html body #passwordModal.snoeten-site-popup .guestbook-window-control,
html body #plusModal.snoeten-site-popup .guestbook-window-control,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-control,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-control {
position: relative !important;
display: block !important;
place-items: initial !important;
box-sizing: border-box !important;
flex: 0 0 28px !important;
width: 28px !important;
min-width: 28px !important;
height: 25px !important;
min-height: 25px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid #707070 !important;
border-radius: 3px !important;
background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
text-shadow: none !important;
box-shadow: none !important;
cursor: pointer !important;
}
/* Minimaliseren/maximaliseren/Sluiten: iconen blijven puur pseudo-elementen. */
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-minimize,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-minimize,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-minimize {
padding: 0 !important;
place-items: initial !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-minimize::before,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-minimize::before,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-minimize::before,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-minimize::before {
content: '' !important;
position: absolute !important;
left: 9px !important;
bottom: 6px !important;
width: 12px !important;
height: 2px !important;
border: 0 !important;
background: #4e4e4e !important;
transform: none !important;
box-shadow: none !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-maximize::before,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-maximize::before,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-maximize::before,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-maximize::before {
content: '' !important;
position: absolute !important;
left: 5px !important;
top: 5px !important;
box-sizing: border-box !important;
width: 14px !important;
height: 12px !important;
border: 2px solid #4e4e4e !important;
border-top-width: 3px !important;
background: transparent !important;
transform: none !important;
box-shadow: none !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-close,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-close,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-close,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-close {
border-color: #8f2923 !important;
background: linear-gradient(to bottom, #f7aaa4 0%, #ed8178 42%, #dc5c52 47%, #c84239 100%) !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-close::before,
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-close::after,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-close::before,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-close::after,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-close::before,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-close::after,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-close::before,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-close::after {
content: '' !important;
position: absolute !important;
left: 6px !important;
top: 11px !important;
width: 14px !important;
height: 2px !important;
border: 0 !important;
border-radius: 1px !important;
background: #fff !important;
box-shadow: 0 1px 0 rgba(105,22,17,.38) !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-close::before,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-close::before,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-close::before,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-close::before {
transform: rotate(45deg) !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup .guestbook-window-close::after,
html body #bioForm #bioEdit.snoeten-site-popup .guestbook-window-close::after,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .guestbook-window-close::after,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .guestbook-window-close::after {
transform: rotate(-45deg) !important;
}
/* Body/werkvlak/footer: oude grijs/wit- en borderregels niet meer laten terugwinnen. */
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-content,
html body #bioForm #bioEdit.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-content,
html body #detailsModal.snoeten-site-popup .profile-bio-editor-content,
html body #layoutEdit.snoeten-site-popup .profile-bio-editor-content,
html body #emailModal.snoeten-site-popup .profile-bio-editor-content,
html body #passwordModal.snoeten-site-popup .profile-bio-editor-content,
html body #plusModal.snoeten-site-popup .profile-bio-editor-content,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .profile-bio-editor-content,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .profile-bio-editor-content {
background: #f3f0e9 !important;
box-shadow: none !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-field,
html body #bioForm #bioEdit.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-field,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .profile-bio-editor-field,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .profile-bio-editor-field {
box-sizing: border-box !important;
background: #f3f0e9 !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-footer,
html body #bioForm #bioEdit.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-footer,
html body #detailsModal.snoeten-site-popup .profile-bio-editor-footer,
html body #layoutEdit.snoeten-site-popup .profile-bio-editor-footer,
html body #emailModal.snoeten-site-popup .profile-bio-editor-footer,
html body #passwordModal.snoeten-site-popup .profile-bio-editor-footer,
html body #plusModal.snoeten-site-popup .profile-bio-editor-footer,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .profile-bio-editor-footer,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup .profile-bio-editor-footer {
background: #f3f0e9 !important;
border-top: 1px solid #cfd6ce !important;
box-shadow: none !important;
}
/* Ook de Media/Prikbord shared shell mag de r888 lock niet overschrijven. */
html body #profile #main .snoeten-site-popup.snoeten-popup-window.guestbook-window-dialog,
html body #profile .snoeten-site-popup.snoeten-popup-window.guestbook-window-dialog {
border: 4px solid #557A3E !important;
border-radius: 9px !important;
background: #557A3E !important;
box-shadow:
0 0 0 1px rgba(36,54,29,.42),
0 3px 8px rgba(0,0,0,.30),
0 16px 34px rgba(0,0,0,.24) !important;
}
/* r889 — popup-body tussen header en footer wit maken.
Alleen het door de gebruiker gemarkeerde middendeel wordt wit;
header groen en footer onderaan blijven ongewijzigd. */
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-content,
html body #bioForm #bioEdit.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-content,
html body #detailsModal.snoeten-site-popup .profile-bio-editor-content,
html body #layoutEdit.snoeten-site-popup .profile-bio-editor-content,
html body #emailModal.snoeten-site-popup .profile-bio-editor-content,
html body #passwordModal.snoeten-site-popup .profile-bio-editor-content,
html body #plusModal.snoeten-site-popup .profile-bio-editor-content,
html body #profile #main .snoeten-site-popup.snoeten-site-popup > .profile-bio-editor-content,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup > :is(
.profile-bio-editor-content,
.profile-layout-editor-content,
.profile-details-editor-content,
.admin-newsletter-body,
.admin-member-search-window-body,
.admin-member-body,
.welcome-poll-modal-body,
.weather-location-modal-body,
.profile-favorites-editor-content,
.notification-detail-body,
.site-logo-manager-body,
.messages-compose-content
) {
background: #ffffff !important;
}
html body #guestbookFormContainer #guestbookForm.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-field,
html body #bioForm #bioEdit.snoeten-site-popup.guestbook-window-dialog .profile-bio-editor-field,
html body #profile #main .snoeten-site-popup.snoeten-site-popup .profile-bio-editor-field,
html body .snoeten-site-popup.snoeten-site-popup.snoeten-site-popup :is(
.profile-bio-editor-field,
.profile-layout-editor-field,
.profile-details-editor-field
) {
background: #ffffff !important;
}
html body .snoeten-site-popup.groups-editor > .groups-editor-toolbar,
html body .snoeten-site-popup.groups-editor > .profile-bio-editor-content,
html body .snoeten-site-popup.messages-compose-editor > .messages-compose-content {
background: #ffffff !important;
}
/* r890 — profielinstellingen/popups ook echt meenemen in witte popup-body.
Geldt voor Profielgegevens, Instellingen, E-mailadres, Wachtwoord en Snoeten Plus. */
html body :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal),
html body #profile #main :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) {
background: #557A3E !important;
}
/* Tabbalk / toolbar direct onder de groene header hoort bij de popup-body en wordt wit. */
html body :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) > :is(.profile-bio-editor-toolbar, .profile-layout-editor-toolbar),
html body #profile #main :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) > :is(.profile-bio-editor-toolbar, .profile-layout-editor-toolbar) {
background: #ffffff !important;
border-top: 0 !important;
border-right: 0 !important;
border-left: 0 !important;
border-bottom: 1px solid #d5dbe0 !important;
box-shadow: none !important;
}
html body :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) > :is(.profile-bio-editor-toolbar, .profile-layout-editor-toolbar) :is(.profile-settings-tab, .profile-layout-tab, .profile-top-tab-r665, .profile-top-tab-r728, .profile-top-tab-r726, .profile-top-tab-r670),
html body #profile #main :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) > :is(.profile-bio-editor-toolbar, .profile-layout-editor-toolbar) :is(.profile-settings-tab, .profile-layout-tab, .profile-top-tab-r665, .profile-top-tab-r728, .profile-top-tab-r726, .profile-top-tab-r670) {
background: transparent !important;
}
/* Grote middendeel wit. */
html body :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) > :is(.profile-bio-editor-content, .profile-layout-editor-content, .profile-details-editor-content),
html body #profile #main :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) > :is(.profile-bio-editor-content, .profile-layout-editor-content, .profile-details-editor-content) {
background: #ffffff !important;
}
html body :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) :is(.profile-bio-editor-field, .profile-layout-editor-field, .profile-details-editor-field),
html body #profile #main :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) :is(.profile-bio-editor-field, .profile-layout-editor-field, .profile-details-editor-field) {
background: #ffffff !important;
}
/* Ook subpanelen en lege vlakken wit houden. */
html body :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) :is(.profile-details-panel, .profile-details-account-list, .profile-details-form-grid, .profile-layout-editor-stage, .profile-layout-editor-panel, .profile-layout-editor-form),
html body #profile #main :is(#detailsModal, #layoutEdit, #emailModal, #passwordModal, #plusModal) :is(.profile-details-panel, .profile-details-account-list, .profile-details-form-grid, .profile-layout-editor-stage, .profile-layout-editor-panel, .profile-layout-editor-form) {
background: #ffffff !important;
}
/* =========================================================
r891 — Profielgegevens / Bio / Vormgeving exact in Media-popupfamilie
========================================================= */
/* Vensters zelf: één vaste shellopbouw. */
html body #detailsModal.snoeten-site-popup,
html body #bioEdit.snoeten-site-popup,
html body #layoutEdit.snoeten-site-popup,
html body #profile #main #detailsModal.snoeten-site-popup,
html body #profile #main #bioEdit.snoeten-site-popup,
html body #profile #main #layoutEdit.snoeten-site-popup {
box-sizing: border-box !important;
width: min(1200px, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100vh - 24px) !important;
border: 4px solid #557A3E !important;
border-radius: 9px !important;
overflow: hidden !important;
background: #557A3E !important;
box-shadow:
0 0 0 1px rgba(36,54,29,.42),
0 3px 8px rgba(0,0,0,.30),
0 16px 34px rgba(0,0,0,.24) !important;
}
/* Profielgegevens en Vormgeving: header / tabs / inhoud / footer. */
html body :is(#detailsModal,#layoutEdit).snoeten-site-popup {
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
}
/* Bio: header / WYSIWYG / inhoud / footer. */
html body #bioEdit.snoeten-site-popup {
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
}
/* Groene Media-header nogmaals hard vastzetten tegen oude profiel-CSS. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > .guestbook-window-header,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > .guestbook-window-header {
min-height: 40px !important;
height: 40px !important;
padding: 2px 7px 2px 10px !important;
border: 0 !important;
border-bottom: 2px solid #557A3E !important;
border-radius: 0 !important;
background: linear-gradient(180deg,#82A969 0%,#557A3E 100%) !important;
box-shadow: none !important;
}
/* Toolbar/tabbalk is onderdeel van het witte middenvlak. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.profile-bio-editor-toolbar,
.profile-layout-editor-toolbar
),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.profile-bio-editor-toolbar,
.profile-layout-editor-toolbar
) {
box-sizing: border-box !important;
margin: 0 !important;
background: #ffffff !important;
border-top: 0 !important;
border-right: 0 !important;
border-left: 0 !important;
border-bottom: 1px solid #d5dbe0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Profielgegevens/Vormgeving tabs: rustig en vlak, geen oude grijze balk. */
html body :is(#detailsModal,#layoutEdit).snoeten-site-popup > .profile-layout-tabs {
min-height: 50px !important;
padding: 7px 12px !important;
gap: 6px !important;
background: #ffffff !important;
}
html body :is(#detailsModal,#layoutEdit).snoeten-site-popup > .profile-layout-tabs > .profile-layout-tab {
min-height: 34px !important;
margin: 0 !important;
padding: 6px 14px !important;
color: #303943 !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 3px !important;
box-shadow: none !important;
text-shadow: none !important;
}
html body :is(#detailsModal,#layoutEdit).snoeten-site-popup > .profile-layout-tabs > .profile-layout-tab:hover,
html body :is(#detailsModal,#layoutEdit).snoeten-site-popup > .profile-layout-tabs > .profile-layout-tab:focus-visible {
background: #f3f6f8 !important;
border-color: #c8d2da !important;
}
html body :is(#detailsModal,#layoutEdit).snoeten-site-popup > .profile-layout-tabs > .profile-layout-tab:is(.is-active,[aria-selected="true"]) {
color: #253629 !important;
background: #eef4eb !important;
border-color: #a8bda0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
/* Hoofdinhoud: echt wit van rand tot rand. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.profile-bio-editor-content,
.profile-layout-editor-content,
.profile-details-editor-content
),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.profile-bio-editor-content,
.profile-layout-editor-content,
.profile-details-editor-content
) {
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup :is(
.profile-bio-editor-field,
.profile-layout-editor-field,
.profile-details-editor-field
),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup :is(
.profile-bio-editor-field,
.profile-layout-editor-field,
.profile-details-editor-field
) {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 100% !important;
margin: 0 !important;
padding: 20px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Bio-editor zelf ook wit; geen oud grijs editorframe. */
html body #bioEdit.snoeten-site-popup #bioEditField,
html body #profile #main #bioEdit.snoeten-site-popup #bioEditField {
background: #ffffff !important;
border: 1px solid #d5dbe0 !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 2px rgba(0,0,0,.035) !important;
}
html body #bioEdit.snoeten-site-popup .profile-bio-ribbon,
html body #profile #main #bioEdit.snoeten-site-popup .profile-bio-ribbon {
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
/* Profielgegevens: oude grijze kaarten vervangen door witte Media-kaarten. */
html body #detailsModal.snoeten-site-popup :is(
.profile-details-vormgeving-field-card,
.profile-details-vormgeving-account-card,
.profile-layout-option-card,
.profile-details-account-form,
.profile-details-help-card
),
html body #profile #main #detailsModal.snoeten-site-popup :is(
.profile-details-vormgeving-field-card,
.profile-details-vormgeving-account-card,
.profile-layout-option-card,
.profile-details-account-form,
.profile-details-help-card
) {
background: #ffffff !important;
border: 1px solid #d5dbe0 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
/* Vormgeving: alle oude grijze card/surface achtergronden wit. */
html body #layoutEdit.snoeten-site-popup :is(
.profile-image-tabs-shell,
.profile-image-tab-surface,
.profile-image-tab-panel,
.profile-layout-upload-card,
.profile-layout-option-card,
.profile-layout-settings-grid,
.profile-layout-text-preview,
.profile-layout-section,
.profile-layout-appearance-panel,
.profile-layout-background-maker,
.profile-layout-pattern-panel,
.profile-layout-block-order-panel
),
html body #profile #main #layoutEdit.snoeten-site-popup :is(
.profile-image-tabs-shell,
.profile-image-tab-surface,
.profile-image-tab-panel,
.profile-layout-upload-card,
.profile-layout-option-card,
.profile-layout-settings-grid,
.profile-layout-text-preview,
.profile-layout-section,
.profile-layout-appearance-panel,
.profile-layout-background-maker,
.profile-layout-pattern-panel,
.profile-layout-block-order-panel
) {
background-color: #ffffff !important;
box-shadow: none !important;
}
html body #layoutEdit.snoeten-site-popup :is(.profile-layout-upload-card,.profile-layout-option-card),
html body #profile #main #layoutEdit.snoeten-site-popup :is(.profile-layout-upload-card,.profile-layout-option-card) {
border-color: #d5dbe0 !important;
border-radius: 4px !important;
}
/* Subtabs in Vormgeving ook op witte ondergrond houden. */
html body #layoutEdit.snoeten-site-popup .profile-image-subtabs,
html body #layoutEdit.snoeten-site-popup .profile-image-tab-surface {
background: #ffffff !important;
}
/* Footer blijft de rustige lichte Media-footer; dubbele titel weg. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer
),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer
) {
min-height: 58px !important;
padding: 12px 16px !important;
background: #f3f0e9 !important;
border-top: 1px solid #cfd6ce !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer
) > h1 {
display: none !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup > :is(
.editor-footer,
.profile-bio-editor-footer,
.profile-layout-editor-footer,
.profile-details-editor-footer
) > nav {
margin-left: auto !important;
}
@media (max-width:760px) {
html body :is(#detailsModal,#bioEdit,#layoutEdit).snoeten-site-popup :is(
.profile-bio-editor-field,
.profile-layout-editor-field,
.profile-details-editor-field
) {
padding: 14px !important;
}
}
/* r892: core profielpopups krijgen daarnaast een inline !important visual lock via popup-media-sitewide-r892.js. */
/* =========================================================
r894 — SCHONE MEDIA-LAYOUT VOOR PROFIELGEGEVENS / BIO / VORMGEVING
Deze vensters dragen profile-popup-media-clean en gebruiken niet langer
de oude popup-ID styling uit features/layout/windows/profile-editor-final.
========================================================= */
html body .profile-popup-media-clean.snoeten-site-popup {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
width: min(1200px, calc(100vw - 40px)) !important;
height: min(760px, calc(100vh - 40px)) !important;
min-width: min(620px, calc(100vw - 24px)) !important;
min-height: 420px !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100vh - 24px) !important;
}
html body #bioEdit.profile-popup-media-clean {
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
}
html body .profile-popup-media-clean > .guestbook-window-header {
grid-row: 1 !important;
}
/* Tabs en WYSIWYG-toolbar zijn onderdeel van het witte middenvlak. */
html body .profile-popup-media-clean > :is(
.profile-bio-editor-toolbar,
.profile-layout-editor-toolbar
) {
grid-row: 2 !important;
box-sizing: border-box !important;
min-height: 48px !important;
margin: 0 !important;
padding: 7px 12px !important;
background: #fff !important;
border: 0 !important;
border-bottom: 1px solid #d2d6d9 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body .profile-popup-media-clean > .profile-settings-tabs {
display: flex !important;
align-items: center !important;
gap: 4px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
html body .profile-popup-media-clean > .profile-settings-tabs > .profile-settings-tab {
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
min-height: 34px !important;
margin: 0 !important;
padding: 6px 12px !important;
color: #202020 !important;
font: 400 14px/20px Tahoma, Arial, sans-serif !important;
background: #fff !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body .profile-popup-media-clean > .profile-settings-tabs > .profile-settings-tab:hover {
background: #f3f7fb !important;
border-color: #9bbfe0 !important;
}
html body .profile-popup-media-clean > .profile-settings-tabs > .profile-settings-tab:is(.is-active,[aria-selected="true"]) {
color: #111 !important;
background: #eef6fd !important;
border-color: #5b9bd5 !important;
box-shadow: none !important;
}
html body .profile-popup-media-clean > .profile-settings-tabs > .profile-settings-tab::before,
html body .profile-popup-media-clean > .profile-settings-tabs > .profile-settings-tab::after {
content: none !important;
display: none !important;
}
/* Middenvlak: één wit vlak, dus geen oude grijze editorlaag meer. */
html body .profile-popup-media-clean > :is(.profile-bio-editor-content,.profile-layout-editor-content) {
grid-row: 3 !important;
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
border: 0 !important;
box-shadow: none !important;
}
html body .profile-popup-media-clean :is(.profile-bio-editor-field,.profile-layout-editor-field,#bioEditField) {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 20px !important;
overflow: auto !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Profielgegevens/Vormgeving: dezelfde vlakke formulieropbouw als Media, zonder kaart-in-kaart look. */
html body .profile-popup-media-clean :is(.profile-layout-section,.profile-details-vormgeving-panel) {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body .profile-popup-media-clean :is(.profile-layout-upload-intro,.profile-details-vormgeving-intro) {
box-sizing: border-box !important;
margin: -20px -20px 0 !important;
padding: 20px !important;
background: #fff !important;
border: 0 !important;
border-bottom: 1px solid #ddd !important;
}
html body .profile-popup-media-clean :is(.profile-layout-upload-intro,.profile-details-vormgeving-intro) h1 {
margin: 0 0 5px !important;
color: #202833 !important;
font-size: 22px !important;
line-height: 1.25 !important;
}
html body .profile-popup-media-clean :is(.profile-layout-upload-intro,.profile-details-vormgeving-intro) p {
margin: 0 !important;
color: #677384 !important;
line-height: 1.45 !important;
}
html body .profile-popup-media-clean :is(.profile-layout-settings-grid,.profile-details-vormgeving-grid,.profile-details-vormgeving-account-grid) {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 0 !important;
width: calc(100% + 40px) !important;
margin: 0 -20px -20px !important;
padding: 0 !important;
background: #fff !important;
border: 0 !important;
}
html body .profile-popup-media-clean :is(.profile-layout-option-card,.profile-details-vormgeving-account-card) {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 18px 20px !important;
background: #fff !important;
border: 0 !important;
border-right: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body .profile-popup-media-clean :is(.profile-layout-option-card,.profile-details-vormgeving-account-card):nth-child(even) {
border-right: 0 !important;
}
html body .profile-popup-media-clean .profile-layout-option-card :is(input,select,textarea) {
background: #fff !important;
}
/* Bio zelf is één wit schrijfvlak. */
html body #bioEdit.profile-popup-media-clean > .profile-bio-editor-content {
position: relative !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField {
outline: 0 !important;
}
/* Footer blijft de lichte Media-footer; oude dubbele titel is weg. */
html body .profile-popup-media-clean > :is(.editor-footer,.profile-bio-editor-footer,.profile-layout-editor-footer) {
grid-row: 4 !important;
min-height: 58px !important;
margin: 0 !important;
padding: 12px 16px !important;
background: #f3f0e9 !important;
border: 0 !important;
border-top: 1px solid #cfd6ce !important;
box-shadow: none !important;
}
html body .profile-popup-media-clean > :is(.editor-footer,.profile-bio-editor-footer,.profile-layout-editor-footer) > h1 {
display: none !important;
}
html body .profile-popup-media-clean > :is(.editor-footer,.profile-bio-editor-footer,.profile-layout-editor-footer) > nav {
margin-left: auto !important;
}
@media (max-width: 760px) {
html body .profile-popup-media-clean.snoeten-site-popup {
width: calc(100vw - 16px) !important;
min-width: 0 !important;
height: calc(100vh - 16px) !important;
}
html body .profile-popup-media-clean :is(.profile-bio-editor-field,.profile-layout-editor-field,#bioEditField) {
padding: 14px !important;
}
html body .profile-popup-media-clean :is(.profile-layout-settings-grid,.profile-details-vormgeving-grid,.profile-details-vormgeving-account-grid) {
grid-template-columns: 1fr !important;
width: calc(100% + 28px) !important;
margin: 0 -14px -14px !important;
}
html body .profile-popup-media-clean :is(.profile-layout-option-card,.profile-details-vormgeving-account-card) {
border-right: 0 !important;
}
html body .profile-popup-media-clean :is(.profile-layout-upload-intro,.profile-details-vormgeving-intro) {
margin: -14px -14px 0 !important;
padding: 14px !important;
}
}
/* =========================================================
r895 — STRUCTURELE HERSTELLAAG
Oude popup-look blijft uit; alleen grid/flex/spacing van de inhoud wordt
hersteld voor Profielgegevens, Bio en Vormgeving.
========================================================= */
/* ---------- Profielgegevens ---------- */
html body #detailsModal.profile-popup-media-clean > .profile-layout-editor-content {
display: block !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
html body #detailsModal.profile-popup-media-clean .profile-layout-editor-field {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 20px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
html body #detailsModal.profile-popup-media-clean [data-profile-details-panel] {
position: static !important;
display: block !important;
float: none !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
html body #detailsModal.profile-popup-media-clean [data-profile-details-panel][hidden] {
display: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-intro {
width: 100% !important;
margin: 0 0 20px !important;
padding: 0 !important;
border: 0 !important;
}
html body #detailsModal.profile-popup-media-clean :is(.profile-details-vormgeving-grid,.profile-details-vormgeving-account-grid,.profile-layout-settings-grid) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 20px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body #detailsModal.profile-popup-media-clean :is(.profile-details-vormgeving-field-card,.profile-layout-option-card) {
position: static !important;
display: flex !important;
float: none !important;
flex-direction: column !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
min-height: 132px !important;
margin: 0 !important;
padding: 18px 20px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-account-card {
position: static !important;
display: grid !important;
float: none !important;
grid-template-columns: minmax(0,1fr) auto !important;
align-items: center !important;
gap: 18px !important;
width: 100% !important;
min-width: 0 !important;
min-height: 116px !important;
margin: 0 !important;
padding: 18px 20px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-account-copy {
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
gap: 5px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-control {
width: 100% !important;
min-width: 0 !important;
margin-top: auto !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-control :is(input,select,textarea) {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-small-action,
html body #detailsModal.profile-popup-media-clean .profile-details-account-status {
position: static !important;
align-self: center !important;
justify-self: end !important;
}
/* ---------- Bio ---------- */
html body #bioEdit.profile-popup-media-clean > #bioEditOptions.profile-bio-editor-toolbar {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
max-height: none !important;
flex-direction: column !important;
overflow: visible !important;
padding: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
padding: 8px 12px 7px !important;
align-items: stretch !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group {
position: relative !important;
display: flex !important;
flex: 0 0 auto !important;
min-width: max-content !important;
margin: 0 !important;
padding: 4px 9px 18px !important;
flex-direction: column !important;
justify-content: center !important;
gap: 4px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-label {
position: absolute !important;
right: 8px !important;
bottom: 1px !important;
left: 8px !important;
display: block !important;
overflow: hidden !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-buttons {
display: flex !important;
align-items: center !important;
gap: 3px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-tool-button {
position: relative !important;
display: inline-grid !important;
flex: 0 0 34px !important;
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
place-items: center !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content.is-picture-tools-open,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content.is-emoji-tools-open {
grid-template-columns: minmax(0,1fr) minmax(300px,380px) !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField {
position: static !important;
display: block !important;
grid-column: 1 !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 20px !important;
overflow: auto !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
position: static !important;
grid-column: 2 !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
overflow: auto !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] {
display: none !important;
}
/* ---------- Vormgeving / Instellingen ---------- */
html body #layoutEdit.profile-popup-media-clean > .profile-layout-editor-content {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-editor-field {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 20px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
html body #layoutEdit.profile-popup-media-clean [data-layout-panel] {
position: static !important;
float: none !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean [data-layout-panel][hidden],
html body #layoutEdit.profile-popup-media-clean [data-profile-image-panel][hidden] {
display: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages:not([hidden]),
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance:not([hidden]) {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutBlockOrder:not([hidden]) {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-image-tabs-shell {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-image-subtabs {
position: relative !important;
z-index: 2 !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
align-items: flex-end !important;
gap: 2px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-image-subtab {
position: relative !important;
display: inline-flex !important;
flex: 0 0 auto !important;
min-width: 128px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 6px 14px !important;
align-items: center !important;
justify-content: center !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-image-tab-surface {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 16px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-image-tab-panel:not([hidden]) {
display: block !important;
width: 100% !important;
min-width: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean :is(.profile-layout-settings-grid,.profile-details-vormgeving-grid,.profile-details-vormgeving-account-grid) {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
align-items: stretch !important;
gap: 16px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-option-card {
position: static !important;
display: block !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 18px 20px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-typography-fields {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 10px !important;
width: 100% !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-typography-field {
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
gap: 6px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-block-manager {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
align-items: start !important;
gap: 12px !important;
width: 100% !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-manager-wide {
grid-column: 1 / -1 !important;
}
html body #layoutEdit.profile-popup-media-clean :is(.profile-layout-manager-column,.profile-layout-manager-wide) {
position: static !important;
box-sizing: border-box !important;
min-width: 0 !important;
margin: 0 !important;
padding: 12px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-manager-zone {
display: flex !important;
min-height: 48px !important;
flex-direction: column !important;
gap: 7px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-manager-actions {
display: flex !important;
width: 100% !important;
margin: 0 !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
/* Footer/rijen mogen nooit over het inhoudsvlak heen vallen. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean > :is(.editor-footer,.profile-bio-editor-footer,.profile-layout-editor-footer) {
position: relative !important;
inset: auto !important;
width: 100% !important;
min-width: 0 !important;
z-index: 2 !important;
}
@media (max-width: 760px) {
html body #detailsModal.profile-popup-media-clean :is(.profile-details-vormgeving-grid,.profile-details-vormgeving-account-grid,.profile-layout-settings-grid),
html body #layoutEdit.profile-popup-media-clean .profile-layout-settings-grid,
html body #layoutEdit.profile-popup-media-clean .profile-layout-typography-fields,
html body #layoutEdit.profile-popup-media-clean .profile-layout-block-manager {
grid-template-columns: minmax(0,1fr) !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-account-card {
grid-template-columns: minmax(0,1fr) !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-small-action,
html body #detailsModal.profile-popup-media-clean .profile-details-account-status {
justify-self: start !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-manager-wide {
grid-column: auto !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content.is-picture-tools-open,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content.is-emoji-tools-open {
grid-template-columns: minmax(0,1fr) !important;
overflow-y: auto !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
grid-column: 1 !important;
}
}
/* =========================================================
r896 — HOOFDTABS PROFIELGEGEVENS / VORMGEVING
Zelfde compacte tabblok-opbouw als Media foto bewerken.
Alleen de bovenste tabnavigatie; Bio/WYSIWYG blijft ongewijzigd.
========================================================= */
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup {
grid-template-rows: 40px 50px minmax(0,1fr) 58px !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs,
html body #profile #main :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs {
grid-row: 2 !important;
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
height: 50px !important;
min-width: 0 !important;
min-height: 50px !important;
max-height: 50px !important;
margin: 0 !important;
padding: 8px 14px 7px !important;
flex: none !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: #f2f2f2 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid #ccc !important;
border-left: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
scrollbar-width: thin !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab,
html body #profile #main :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab {
position: relative !important;
inset: auto !important;
box-sizing: border-box !important;
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
margin: 0 !important;
padding: 7px 14px !important;
align-items: center !important;
justify-content: flex-start !important;
color: #202020 !important;
font: 400 14px/18px Tahoma, Arial, sans-serif !important;
text-align: left !important;
white-space: nowrap !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
transform: none !important;
cursor: pointer !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab::before,
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab::after {
content: none !important;
display: none !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab:hover {
color: #111 !important;
background: #e5f1fb !important;
border-color: #70a9d8 !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab:focus-visible {
color: #111 !important;
outline: 1px dotted #111 !important;
outline-offset: -4px !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab:is(.is-active,[aria-selected="true"]),
html body #profile #main :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab:is(.is-active,[aria-selected="true"]) {
z-index: 2 !important;
color: #111 !important;
font-weight: 400 !important;
background: #d9eaf7 !important;
border-color: #5b9bd5 !important;
box-shadow: inset 1px 1px 0 rgba(255,255,255,.9) !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > .profile-layout-editor-content {
grid-row: 3 !important;
min-height: 0 !important;
}
@media (max-width: 760px) {
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs {
padding-right: 8px !important;
padding-left: 8px !important;
gap: 4px !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab {
padding-right: 11px !important;
padding-left: 11px !important;
}
}
/* =========================================================
r897 — GRID-AREA FIX PROFIEL / BIO / VORMGEVING
Oude editor-CSS gebruikt named grid-areas (toolbar/field/footer). Zodra de
nieuwe vensterheader erbij staat konden daardoor impliciete kolommen ontstaan.
Deze eindlaag geeft elk hoofdonderdeel één expliciete rij over de volle breedte.
========================================================= */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"profile-popup-header"
"profile-popup-toolbar"
"profile-popup-content"
"profile-popup-footer" !important;
grid-auto-columns: 0 !important;
grid-auto-flow: row !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header {
grid-area: profile-popup-header !important;
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100% !important;
min-width: 0 !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > :is(.profile-bio-editor-toolbar,.profile-layout-editor-toolbar),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > :is(.profile-bio-editor-toolbar,.profile-layout-editor-toolbar) {
grid-area: profile-popup-toolbar !important;
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
justify-self: stretch !important;
align-self: stretch !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > :is(.profile-bio-editor-content,.profile-layout-editor-content,.profile-details-editor-content),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > :is(.profile-bio-editor-content,.profile-layout-editor-content,.profile-details-editor-content) {
grid-area: profile-popup-content !important;
grid-column: 1 / -1 !important;
grid-row: 3 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
justify-self: stretch !important;
align-self: stretch !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > :is(.editor-footer,.profile-bio-editor-footer,.profile-layout-editor-footer,.profile-details-editor-footer),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > :is(.editor-footer,.profile-bio-editor-footer,.profile-layout-editor-footer,.profile-details-editor-footer) {
grid-area: profile-popup-footer !important;
grid-column: 1 / -1 !important;
grid-row: 4 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
justify-self: stretch !important;
align-self: stretch !important;
}
/* Profielgegevens/Vormgeving: hoofdtabbalk exact over de volledige popupbreedte. */
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > nav.profile-settings-tabs.profile-layout-tabs,
html body #profile #main :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > nav.profile-settings-tabs.profile-layout-tabs {
position: relative !important;
inset: auto !important;
float: none !important;
clear: both !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
transform: none !important;
}
/* =========================================================
r898 — HERSTEL PROFIELPOPUPS
De vorige grid-fix zette display:grid ook op gesloten editors. Hierdoor bleven
Profielgegevens/Bio/Vormgeving altijd zichtbaar en leken de vensterknoppen stuk.
Deze finale laag koppelt de layout weer strikt aan .is-open en legt de geometrie
expliciet vast, zonder JS-hardlock.
========================================================= */
/* Gesloten = echt gesloten. Dit wint van alle eerdere display:grid !important-regels. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup:not(.is-open),
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup:not(.is-open) {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Open venster: dezelfde gecentreerde Media-shell, één kolom en vier vaste zones. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open {
--guestbook-window-x: 0px;
--guestbook-window-y: 0px;
position: fixed !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
left: 50% !important;
z-index: 2147483000 !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
grid-template-areas:
"profile-popup-header"
"profile-popup-toolbar"
"profile-popup-content"
"profile-popup-footer" !important;
width: min(1200px, calc(100vw - 40px)) !important;
max-width: calc(100vw - 40px) !important;
height: min(760px, calc(100dvh - 40px)) !important;
max-height: calc(100dvh - 40px) !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translate3d(
calc(-50% + var(--guestbook-window-x)),
calc(-50% + var(--guestbook-window-y)),
0
) !important;
}
/* Profielgegevens en Vormgeving hebben een compacte 50px hoofdtabbalk. */
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open {
grid-template-rows: 40px 50px minmax(0,1fr) 58px !important;
}
/* Bio heeft een WYSIWYG-ribbon met variabele hoogte. */
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open {
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
}
/* Hoofdonderdelen mogen nooit opnieuw een impliciete tweede kolom maken. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > .guestbook-window-header {
grid-area: profile-popup-header !important;
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > :is(.profile-bio-editor-toolbar,.profile-layout-editor-toolbar) {
grid-area: profile-popup-toolbar !important;
grid-column: 1 !important;
grid-row: 2 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
justify-self: stretch !important;
align-self: stretch !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > :is(.profile-bio-editor-content,.profile-layout-editor-content,.profile-details-editor-content) {
grid-area: profile-popup-content !important;
grid-column: 1 !important;
grid-row: 3 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
margin: 0 !important;
overflow: hidden !important;
justify-self: stretch !important;
align-self: stretch !important;
background: #fff !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > :is(.editor-footer,.profile-bio-editor-footer,.profile-layout-editor-footer,.profile-details-editor-footer) {
grid-area: profile-popup-footer !important;
grid-column: 1 !important;
grid-row: 4 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
justify-self: stretch !important;
align-self: stretch !important;
}
/* Tabs uitsluitend als horizontale balk direct onder de groene header. */
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > nav.profile-settings-tabs.profile-layout-tabs {
position: static !important;
inset: auto !important;
float: none !important;
clear: none !important;
box-sizing: border-box !important;
display: flex !important;
height: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
padding: 8px 14px 7px !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: 6px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: #fff !important;
border: 0 !important;
border-bottom: 1px solid #d2d6d9 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab {
position: static !important;
inset: auto !important;
box-sizing: border-box !important;
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
margin: 0 !important;
padding: 7px 14px !important;
align-items: center !important;
justify-content: center !important;
color: #202020 !important;
font: 400 14px/18px Tahoma,Arial,sans-serif !important;
white-space: nowrap !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: none !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab:is(.is-active,[aria-selected="true"]) {
background: #eef6fd !important;
border-color: #5b9bd5 !important;
}
/* Interne verborgen tabpanelen moeten verborgen blijven. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean [hidden] {
display: none !important;
}
/* Minimaal: alleen de groene titelbalk blijft zichtbaar. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open.is-minimized {
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: min(560px, calc(100vw - 24px)) !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
grid-template-rows: 40px !important;
overflow: hidden !important;
transform: translate3d(-50%,-50%,0) !important;
}
/* Maximaal: vult het viewport met een kleine rand, zoals de andere Media-vensters. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open.is-maximized {
top: 8px !important;
right: 8px !important;
bottom: 8px !important;
left: 8px !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
transform: none !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open.is-maximized {
grid-template-rows: 40px 50px minmax(0,1fr) 58px !important;
}
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-maximized {
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
}
@media (max-width:760px) {
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-maximized):not(.is-minimized) {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
height: calc(100dvh - 16px) !important;
max-height: calc(100dvh - 16px) !important;
}
}
/* r899 — profielpopup headerknoppen definitief strak rechts uitlijnen.
Geen losse nth-child verschuivingen meer; alle drie exact dezelfde maat/baseline. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header {
position: relative !important;
padding-right: 116px !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls {
position: absolute !important;
top: 50% !important;
right: 7px !important;
left: auto !important;
bottom: auto !important;
display: flex !important;
width: auto !important;
height: 25px !important;
min-width: 0 !important;
min-height: 25px !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > .guestbook-window-control,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > .guestbook-window-control {
position: relative !important;
inset: auto !important;
display: block !important;
box-sizing: border-box !important;
flex: 0 0 28px !important;
width: 28px !important;
min-width: 28px !important;
max-width: 28px !important;
height: 25px !important;
min-height: 25px !important;
max-height: 25px !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #707070 !important;
border-radius: 3px !important;
background: linear-gradient(to bottom,#f2f2f2 0%,#ebebeb 42%,#dddddd 47%,#cfcfcf 100%) !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
transform: none !important;
box-shadow: none !important;
opacity: 1 !important;
filter: none !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > .guestbook-window-control:hover,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > .guestbook-window-control:hover,
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > .guestbook-window-control:focus-visible {
border-color: #626262 !important;
background: linear-gradient(to bottom,#fff 0%,#f2f2f2 42%,#e5e5e5 47%,#d7d7d7 100%) !important;
box-shadow: 0 0 3px rgba(0,0,0,.22) !important;
outline: 0 !important;
}
/* Minimaliseren: korte horizontale lijn exact gecentreerd onderin. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-minimize::before,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-minimize::before {
content: '' !important;
position: absolute !important;
left: 7px !important;
right: auto !important;
top: auto !important;
bottom: 6px !important;
width: 12px !important;
height: 2px !important;
border: 0 !important;
background: #4e4e4e !important;
transform: none !important;
box-shadow: none !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-minimize::after {
content: none !important;
display: none !important;
}
/* Maximaliseren: één strak venstericoon. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-maximize::before,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-maximize::before {
content: '' !important;
position: absolute !important;
left: 6px !important;
top: 5px !important;
width: 12px !important;
height: 10px !important;
box-sizing: border-box !important;
border: 2px solid #4e4e4e !important;
border-top-width: 3px !important;
border-radius: 0 !important;
background: transparent !important;
transform: none !important;
box-shadow: none !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-maximize::after {
content: none !important;
display: none !important;
}
/* Sluiten: duidelijk rood, met kleinere gecentreerde witte X. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .guestbook-window-close,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .guestbook-window-close {
border-color: #8f2923 !important;
background: linear-gradient(to bottom,#f7aaa4 0%,#ed8178 42%,#dc5c52 47%,#c84239 100%) !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .guestbook-window-close:hover,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .guestbook-window-close:hover,
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .guestbook-window-close:focus-visible {
border-color: #792019 !important;
background: linear-gradient(to bottom,#ffc0bb 0%,#f58f86 42%,#e9675d 47%,#d24a40 100%) !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::before,
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::after,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::before,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::after {
content: '' !important;
position: absolute !important;
left: 6px !important;
top: 11px !important;
width: 14px !important;
height: 2px !important;
border: 0 !important;
border-radius: 1px !important;
background: #fff !important;
box-shadow: 0 1px 0 rgba(105,22,17,.32) !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::before,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::before {
transform: rotate(45deg) !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::after,
html body #profile #main :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean .guestbook-window-close::after {
transform: rotate(-45deg) !important;
}
/* r900 — sluitknop profielvensters hard rood vastzetten.
Rechtstreeks op de daadwerkelijke button per venster-ID om oude grijze button-CSS te verslaan. */
html body #detailsModal.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close,
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close,
html body #layoutEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close {
-webkit-appearance: none !important;
appearance: none !important;
border: 1px solid #8f2923 !important;
border-color: #8f2923 !important;
background-color: #c84239 !important;
background-image: linear-gradient(to bottom,#f7aaa4 0%,#ed8178 42%,#dc5c52 47%,#c84239 100%) !important;
background-repeat: no-repeat !important;
color: transparent !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
}
html body #detailsModal.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:hover,
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:hover,
html body #layoutEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:hover,
html body #detailsModal.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:focus-visible,
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:focus-visible,
html body #layoutEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:focus-visible {
border-color: #792019 !important;
background-color: #d24a40 !important;
background-image: linear-gradient(to bottom,#ffc0bb 0%,#f58f86 42%,#e9675d 47%,#d24a40 100%) !important;
opacity: 1 !important;
filter: none !important;
box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}
html body #detailsModal.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:active,
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:active,
html body #layoutEdit.profile-popup-media-clean.snoeten-site-popup.guestbook-window-dialog > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:active {
border-color: #6f1d18 !important;
background-color: #b7352d !important;
background-image: linear-gradient(to bottom,#b7352d 0%,#ca453c 42%,#dc5b51 47%,#eb766d 100%) !important;
opacity: 1 !important;
filter: none !important;
box-shadow: inset 0 -1px 6px rgba(83,18,14,.30) !important;
}
/* r901 — tabbalk Profielgegevens/Vormgeving: zelfde grijs als footer en standaard sitefont. */
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > nav.profile-settings-tabs.profile-layout-tabs,
html body #profile #main :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > nav.profile-settings-tabs.profile-layout-tabs {
background: #f3f0e9 !important;
border-bottom-color: #cfd6ce !important;
font-family: var(--base-font) !important;
font-size: var(--base-font-size) !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab,
html body #profile #main :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open > nav.profile-settings-tabs.profile-layout-tabs > button.profile-settings-tab.profile-layout-tab {
font-family: var(--base-font) !important;
font-size: var(--base-font-size) !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
/* =========================================================
r903 — natuurlijke popupmaat + resize-hoeken profiel + duidelijke hoverstates
========================================================= */
/* Normale vensters nemen alleen de ruimte die hun eigen inhoud nodig heeft.
Viewportlimieten voorkomen dat een grote inhoud buiten beeld valt. */
html body .snoeten-site-popup:not(.is-minimized):not(.is-maximized) {
width: fit-content !important;
height: fit-content !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100dvh - 24px) !important;
min-width: 0 !important;
min-height: 0 !important;
}
/* Een inhoudsvlak gaat pas scrollen wanneer de natuurlijke hoogte niet meer in
het scherm past. Hierdoor ontstaat geen onnodig hoog leeg popupvenster. */
html body .snoeten-site-popup:not(.is-minimized):not(.is-maximized) > :is(
.profile-bio-editor-content,
.profile-layout-editor-content,
.profile-details-editor-content,
.admin-newsletter-body,
.admin-member-search-window-body,
.admin-member-body,
.welcome-poll-modal-body,
.weather-location-modal-body,
.profile-favorites-editor-content,
.notification-detail-body,
.site-logo-manager-body,
.messages-compose-content
) {
max-height: calc(100dvh - 170px) !important;
overflow: auto !important;
}
/* Profielgegevens, Bio en Vormgeving: geen vaste 1200x760 meer. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
width: fit-content !important;
height: fit-content !important;
max-width: calc(100vw - 40px) !important;
max-height: calc(100dvh - 40px) !important;
min-width: min(680px, calc(100vw - 40px)) !important;
min-height: 0 !important;
}
html body :is(#detailsModal,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
grid-template-rows: 40px 50px auto 58px !important;
}
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
grid-template-rows: 40px auto auto 58px !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) > :is(.profile-bio-editor-content,.profile-layout-editor-content,.profile-details-editor-content) {
max-height: calc(100dvh - 188px) !important;
overflow: auto !important;
}
/* Vier echte hoekgrepen op profielvensters. Een iets groter hitvlak maakt ze
makkelijk vast te pakken zonder een zichtbaar blok in de hoek te tekenen. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .snoeten-popup-resize-handle {
display: block !important;
position: absolute !important;
z-index: 2147483646 !important;
width: 22px !important;
height: 22px !important;
background: transparent !important;
border: 0 !important;
pointer-events: auto !important;
touch-action: none !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="nw"] { top:-2px !important; left:-2px !important; cursor:nwse-resize !important; }
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="ne"] { top:-2px !important; right:-2px !important; cursor:nesw-resize !important; }
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="sw"] { bottom:-2px !important; left:-2px !important; cursor:nesw-resize !important; }
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup .snoeten-popup-resize-handle[data-popup-resize="se"] { right:-2px !important; bottom:-2px !important; cursor:nwse-resize !important; }
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup:is(.is-minimized,.is-maximized) .snoeten-popup-resize-handle {
display: none !important;
}
/* Profiel-headerknoppen: expliciete normale, hover en active toestand.
Rechtstreeks op de drie venster-ID's om oude button-CSS uit te sluiten. */
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control:not(.guestbook-window-close) {
-webkit-appearance: none !important;
appearance: none !important;
border: 1px solid #707070 !important;
background-color: #d5d5d5 !important;
background-image: linear-gradient(to bottom,#f2f2f2 0%,#ebebeb 42%,#dddddd 47%,#cfcfcf 100%) !important;
box-shadow: none !important;
opacity: 1 !important;
filter: none !important;
transition: background .10s ease,border-color .10s ease,box-shadow .10s ease !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control:not(.guestbook-window-close):hover,
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control:not(.guestbook-window-close):focus-visible {
border-color: #3c7fb1 !important;
background-color: #d9eefc !important;
background-image: linear-gradient(to bottom,#ffffff 0%,#eef8ff 42%,#dceffc 47%,#c8e4f7 100%) !important;
box-shadow: 0 0 4px rgba(60,127,177,.42) !important;
outline: 0 !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control:not(.guestbook-window-close):active {
border-color: #326d99 !important;
background-color: #b9d9ef !important;
background-image: linear-gradient(to bottom,#b9d9ef 0%,#cbe5f6 50%,#e5f3fc 100%) !important;
box-shadow: inset 0 1px 4px rgba(39,84,119,.28) !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control:not(.guestbook-window-close):hover::before,
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control:not(.guestbook-window-close):focus-visible::before {
border-color: #285f89 !important;
background-color: #285f89 !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close {
-webkit-appearance: none !important;
appearance: none !important;
border: 1px solid #8f2923 !important;
background-color: #c84239 !important;
background-image: linear-gradient(to bottom,#f7aaa4 0%,#ed8178 42%,#dc5c52 47%,#c84239 100%) !important;
box-shadow: none !important;
opacity: 1 !important;
filter: none !important;
transition: background .10s ease,border-color .10s ease,box-shadow .10s ease !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:hover,
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:focus-visible {
border-color: #6f1d18 !important;
background-color: #e65a4f !important;
background-image: linear-gradient(to bottom,#ffd0cc 0%,#ff9e96 40%,#ef6c62 48%,#d94e44 100%) !important;
box-shadow: 0 0 5px rgba(153,39,31,.58) !important;
outline: 0 !important;
}
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup > .guestbook-window-header > .guestbook-window-controls > button.guestbook-window-control.guestbook-window-close:active {
border-color: #611713 !important;
background-color: #b7352d !important;
background-image: linear-gradient(to bottom,#ae3029 0%,#c64239 48%,#e2675e 100%) !important;
box-shadow: inset 0 1px 5px rgba(83,18,14,.38) !important;
}
@media (max-width:760px) {
html body .snoeten-site-popup:not(.is-minimized):not(.is-maximized),
html body :is(#detailsModal,#bioEdit,#layoutEdit).profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
min-width: 0 !important;
height: fit-content !important;
max-height: calc(100dvh - 16px) !important;
}
}
/* r904 — Vormgeving-inhoud stabiliseren na autosize.
Geen oude popup-look terugbrengen; alleen de noodzakelijke interne geometrie. */
html body #layoutEdit.profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
width: min(1100px, calc(100vw - 40px)) !important;
height: auto !important;
max-height: calc(100dvh - 40px) !important;
}
html body #layoutEdit.profile-popup-media-clean > .profile-layout-editor-content,
html body #layoutEdit.profile-popup-media-clean > .profile-bio-editor-content.profile-layout-editor-content {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: calc(100dvh - 188px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: #fff !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-layout-editor-field,
html body #layoutEdit.profile-popup-media-clean .profile-bio-editor-field.profile-layout-editor-field {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 20px !important;
overflow: visible !important;
background: #fff !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages,
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance,
html body #layoutEdit.profile-popup-media-clean #profileLayoutBlockOrder {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean :is(#profileLayoutImages,#profileLayoutAppearance,#profileLayoutBlockOrder)[hidden] {
display: none !important;
}
/* Afbeeldingen-subtabs blijven compact boven hun eigen inhoudsvlak. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tabs-shell {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtabs {
position: relative !important;
z-index: 2 !important;
display: flex !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 34px !important;
height: auto !important;
margin: 0 0 -1px !important;
padding: 0 !important;
align-items: flex-end !important;
gap: 2px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: transparent !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab {
box-sizing: border-box !important;
flex: 0 0 auto !important;
min-width: 128px !important;
min-height: 32px !important;
height: auto !important;
margin: 0 !important;
padding: 6px 14px !important;
font: inherit !important;
line-height: 1.2 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-surface {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 16px !important;
border: 1px solid #d5dbe0 !important;
border-radius: 0 4px 4px 4px !important;
background: #fff !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-panel:not([hidden]) {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-panel[hidden] {
display: none !important;
}
/* Uploadkaart: normale inhoudshoogte, geen uitrekken tot vensterhoogte. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-card {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 18px !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
overflow: visible !important;
border: 0 !important;
border-radius: 4px !important;
background: #fff !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading {
display: flex !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading > div {
min-width: 0 !important;
flex: 1 1 auto !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading h2 {
margin: 0 0 6px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading p {
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .reset-layout-btn {
flex: 0 0 auto !important;
align-self: flex-start !important;
}
/* Uploadvlak en icoon terug naar hun normale compacte formaat. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .drop-area.profile-layout-drop-area {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 150px !important;
margin: 0 !important;
padding: 20px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
overflow: hidden !important;
text-align: left !important;
border: 2px dashed #a9b1ba !important;
border-radius: 8px !important;
background: #fbfbfb !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-icon {
display: grid !important;
box-sizing: border-box !important;
width: 54px !important;
min-width: 54px !important;
height: 54px !important;
min-height: 54px !important;
flex: 0 0 54px !important;
margin: 0 !important;
place-items: center !important;
overflow: hidden !important;
color: #477c9d !important;
border-radius: 50% !important;
background: #e7f1f6 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-icon svg {
display: block !important;
width: 34px !important;
height: 34px !important;
max-width: 34px !important;
max-height: 34px !important;
overflow: visible !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-copy {
display: grid !important;
min-width: 0 !important;
max-width: 520px !important;
gap: 4px !important;
justify-items: start !important;
text-align: left !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-copy strong {
color: #27313a !important;
font-weight: 700 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-copy :is(span,small) {
color: #6a747e !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-status:empty {
display: none !important;
}
/* Grote voorbeelden/canvas mogen nooit buiten de popup groeien. */
html body #layoutEdit.profile-popup-media-clean :is(
.profile-background-creator-preview,
.profile-layout-text-preview,
canvas,
img
) {
max-width: 100% !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-background-creator-preview {
width: min(800px, 100%) !important;
height: auto !important;
}
@media (max-width: 720px) {
html body #layoutEdit.profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab {
min-width: 0 !important;
flex: 1 1 0 !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .drop-area.profile-layout-drop-area {
min-height: 145px !important;
flex-direction: column !important;
text-align: center !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-copy {
justify-items: center !important;
text-align: center !important;
}
}
/* r905 — Vormgeving > Afbeeldingen: interne inhoud van Profielfoto/Cover/Achtergrond herstellen.
Alleen de inhoudsstructuur; de nieuwe witte Media-popup-shell blijft leidend. */
/* Subtabs + actief paneel. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tabs-shell {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtabs {
position: relative !important;
z-index: 2 !important;
display: flex !important;
align-items: flex-end !important;
gap: 0 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 35px !important;
margin: 0 0 -1px !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
background: transparent !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab {
position: relative !important;
z-index: 1 !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
min-width: 160px !important;
min-height: 34px !important;
margin: 0 -1px 0 0 !important;
padding: 6px 18px !important;
border: 1px solid #a8a39d !important;
border-radius: 5px 5px 0 0 !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e5e0da 100%) !important;
color: #222 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
font: inherit !important;
font-size: inherit !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: center !important;
cursor: pointer !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab:last-child {
margin-right: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab:hover,
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab:focus-visible {
z-index: 2 !important;
border-color: #918b84 !important;
background: linear-gradient(180deg,#fff 0%,#ece8e3 100%) !important;
outline: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab:is(.is-active,[aria-selected="true"]) {
z-index: 3 !important;
min-height: 38px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
border-color: #9f9992 !important;
border-bottom-color: #fff !important;
background: #fff !important;
font-weight: 700 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-surface {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 20px !important;
overflow: visible !important;
border: 1px solid #9f9992 !important;
border-radius: 0 4px 4px 4px !important;
background: #fff !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-panel {
box-sizing: border-box !important;
position: static !important;
inset: auto !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-panel[hidden] {
display: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-panel:not([hidden]) {
display: block !important;
}
/* Gemeenschappelijke uploadkaart in alle drie subtabs. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-card {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading > div {
min-width: 0 !important;
flex: 1 1 auto !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading h2 {
margin: 0 0 5px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-heading p {
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .reset-layout-btn {
flex: 0 0 auto !important;
align-self: flex-start !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .drop-area.profile-layout-drop-area {
box-sizing: border-box !important;
position: relative !important;
display: flex !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 154px !important;
margin: 0 !important;
padding: 20px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
overflow: hidden !important;
text-align: left !important;
border: 2px dashed #a9b1ba !important;
border-radius: 8px !important;
background: #fbfbfb !important;
cursor: pointer !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .drop-area.profile-layout-drop-area .fileInput {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-icon {
display: grid !important;
box-sizing: border-box !important;
width: 54px !important;
min-width: 54px !important;
height: 54px !important;
min-height: 54px !important;
flex: 0 0 54px !important;
margin: 0 !important;
place-items: center !important;
overflow: hidden !important;
color: #477c9d !important;
border-radius: 50% !important;
background: #e7f1f6 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-icon svg {
display: block !important;
width: 34px !important;
height: 34px !important;
max-width: 34px !important;
max-height: 34px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-copy {
display: grid !important;
min-width: 0 !important;
max-width: 520px !important;
gap: 4px !important;
justify-items: start !important;
text-align: left !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-upload-status:empty {
display: none !important;
}
/* Cover: inklapvelden, positie-preview en glans weer volledig structureren. */
html body #layoutEdit.profile-popup-media-clean .profile-cover-placement {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 2px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-details {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-details + .profile-cover-setting-details {
margin-top: 6px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-details > summary {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 40px !important;
margin: 0 !important;
padding: 8px 0 !important;
align-items: center !important;
gap: 10px !important;
color: inherit !important;
font: inherit !important;
font-weight: 700 !important;
list-style: none !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
user-select: none !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-details > summary::-webkit-details-marker {
display: none !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-details > summary::before {
order: 1 !important;
display: block !important;
height: 1px !important;
min-width: 20px !important;
flex: 1 1 auto !important;
content: "" !important;
background: #cfcfcf !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-details > summary::after {
order: 2 !important;
display: block !important;
width: 0 !important;
height: 0 !important;
margin: 0 2px 0 0 !important;
flex: 0 0 auto !important;
content: "" !important;
border-top: 6px solid #444 !important;
border-right: 5px solid transparent !important;
border-bottom: 0 !important;
border-left: 5px solid transparent !important;
background: transparent !important;
transform: none !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-details[open] > summary::after {
transform: rotate(180deg) !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-setting-content {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 8px 0 14px !important;
border: 0 !important;
background: transparent !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-position-track {
position: relative !important;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
height: 112px !important;
margin: 0 0 12px !important;
overflow: hidden !important;
cursor: grab !important;
border: 1px solid #b9c2cb !important;
border-radius: 7px !important;
background: #dfe4e9 !important;
touch-action: none !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-position-track.is-dragging { cursor: grabbing !important; }
html body #layoutEdit.profile-popup-media-clean .profile-cover-position-image {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background-color: transparent !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: var(--profile-cover-preview-position,50%) center !important;
border: 0 !important;
pointer-events: none !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-position-row {
display: grid !important;
grid-template-columns: auto minmax(0,1fr) auto !important;
width: 100% !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-position-row input[type="range"] {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-scale-toggle {
display: inline-flex !important;
width: auto !important;
max-width: 100% !important;
margin: 0 0 12px !important;
align-items: center !important;
gap: 9px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-scale-toggle[hidden],
html body #layoutEdit.profile-popup-media-clean [data-cover-position-controls][hidden] {
display: none !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-gloss-control {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-gloss-switch.switch {
position: relative !important;
display: inline-block !important;
width: 48px !important;
height: 26px !important;
flex: 0 0 48px !important;
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-gloss-switch.switch input {
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-gloss-switch.switch .slider {
position: absolute !important;
inset: 0 !important;
border-radius: 13px !important;
background: #cc0000 !important;
cursor: pointer !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-gloss-switch.switch .slider::before {
position: absolute !important;
left: 3px !important;
bottom: 3px !important;
width: 20px !important;
height: 20px !important;
content: "" !important;
border-radius: 50% !important;
background: #fff !important;
transition: transform .2s ease !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-gloss-switch.switch input:checked + .slider {
background: #66bb6a !important;
}
html body #layoutEdit.profile-popup-media-clean .profile-cover-gloss-switch.switch input:checked + .slider::before {
transform: translateX(22px) !important;
}
/* Achtergrondmaker: patronen/velden/preview weer als normale twee-koloms tool. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 18px 0 0 !important;
padding: 18px !important;
border: 1px solid #d3d7dc !important;
border-radius: 8px !important;
background: #fff !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-heading {
display: block !important;
margin: 0 0 16px !important;
padding: 0 0 12px !important;
border: 0 !important;
border-bottom: 1px solid #e1e4e8 !important;
background: transparent !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-heading h3 { margin: 0 !important; }
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-heading p { margin: 5px 0 0 !important; }
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-layout {
display: grid !important;
grid-template-columns: minmax(0,1fr) minmax(300px,38%) !important;
gap: 20px !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-controls,
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-preview-wrap {
min-width: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-patterns {
margin: 0 0 18px !important;
padding: 0 !important;
border: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-patterns legend {
margin: 0 0 8px !important;
padding: 0 !important;
font-weight: 700 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-pattern-grid {
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 8px !important;
max-height: 294px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 4px !important;
align-content: start !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-pattern-option {
position: relative !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 46px minmax(0,1fr) !important;
min-height: 52px !important;
padding: 6px 8px !important;
gap: 8px !important;
align-items: center !important;
border: 1px solid #b9bec4 !important;
border-radius: 5px !important;
background: #f7f7f7 !important;
cursor: pointer !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-pattern-option.is-selected {
border-color: #777 !important;
background: #e7e7e7 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-pattern-option input {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-pattern-swatch {
display: block !important;
width: 44px !important;
height: 34px !important;
border: 1px solid #bfc4c8 !important;
border-radius: 3px !important;
background-color: #f2f2f2 !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: cover !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages :is(.profile-background-color-grid,.profile-background-text-grid,.profile-background-slider-grid) {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 12px !important;
width: 100% !important;
min-width: 0 !important;
margin-top: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages :is(.profile-background-color-field,.profile-background-text-field,.profile-background-slider-field) {
display: block !important;
min-width: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-color-control {
display: grid !important;
grid-template-columns: 46px minmax(0,1fr) !important;
gap: 7px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-color-control input[type="color"] {
box-sizing: border-box !important;
width: 46px !important;
height: 38px !important;
margin: 0 !important;
padding: 2px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages :is(.profile-background-color-control input[type="text"],.profile-background-text-field input) {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 38px !important;
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-slider-field input[type="range"] {
width: 100% !important;
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-preview-label {
display: block !important;
margin-bottom: 6px !important;
font-weight: 700 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages canvas.profile-background-creator-preview {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
height: auto !important;
aspect-ratio: 8 / 5 !important;
max-width: 100% !important;
border: 1px solid #adb3b9 !important;
border-radius: 5px !important;
background: #f2f2f2 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-preview-hint {
display: block !important;
margin-top: 6px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-actions {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-top: 16px !important;
padding-top: 14px !important;
border-top: 1px solid #e1e4e8 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-status {
flex: 1 1 auto !important;
min-width: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-status:empty { display: none !important; }
@media (max-width: 900px) {
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-creator-layout {
grid-template-columns: 1fr !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-background-pattern-grid {
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width: 720px) {
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-subtab {
min-width: 0 !important;
flex: 1 1 0 !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-image-tab-surface {
padding: 14px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .drop-area.profile-layout-drop-area {
min-height: 145px !important;
flex-direction: column !important;
text-align: center !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages .profile-layout-drop-copy {
justify-items: center !important;
text-align: center !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutImages :is(.profile-background-color-grid,.profile-background-text-grid,.profile-background-slider-grid) {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
r906 — VORMGEVING > TEKST inhoud herstellen
Alleen structurele inhoud; popup-shell blijft r905.
========================================================= */
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance:not([hidden]) {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 18px !important;
flex-direction: column !important;
gap: 16px !important;
overflow: visible !important;
background: #fff !important;
}
/* Compact profielvoorbeeld. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview {
--profile-preview-text: #222;
position: relative !important;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 280px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
color: var(--profile-preview-text) !important;
font-family: var(--profile-preview-font-family, var(--base-font, Tahoma, Arial, sans-serif)) !important;
font-size: var(--profile-preview-font-size, var(--base-font-size, 16px)) !important;
background-color: #e7e7e7 !important;
background-image: var(--profile-preview-background, none) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
border: 1px solid #cbd1d7 !important;
border-radius: 6px !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-cover {
position: relative !important;
display: block !important;
width: 100% !important;
min-height: 170px !important;
margin: 0 !important;
background: linear-gradient(135deg, #7893ba, #4b72aa) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-cover::after {
content: "" !important;
position: absolute !important;
inset: auto 0 0 !important;
height: 72px !important;
pointer-events: none !important;
background: linear-gradient(to bottom, transparent, rgba(0,0,0,.38)) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-avatar {
position: absolute !important;
z-index: 2 !important;
left: 18px !important;
bottom: 16px !important;
box-sizing: border-box !important;
width: 88px !important;
height: 88px !important;
overflow: hidden !important;
background: #fff !important;
border: 4px solid #fff !important;
border-radius: 4px !important;
box-shadow: 0 2px 7px rgba(0,0,0,.24) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-avatar img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-identity {
position: absolute !important;
z-index: 2 !important;
right: 18px !important;
bottom: 18px !important;
left: 120px !important;
display: flex !important;
min-width: 0 !important;
flex-direction: column !important;
gap: 2px !important;
color: var(--profile-preview-text) !important;
font-family: inherit !important;
font-size: inherit !important;
text-shadow: 0 1px 2px rgba(0,0,0,.42) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-identity strong {
overflow: hidden !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: 700 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-identity span {
font-family: inherit !important;
font-size: inherit !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-content {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
padding: 18px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-copy {
display: flex !important;
width: min(520px,100%) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
flex-direction: column !important;
gap: 5px !important;
color: var(--profile-preview-text) !important;
font-family: inherit !important;
font-size: inherit !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-copy :is(strong,span,a) {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-copy strong { font-weight: 700 !important; }
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-copy a {
width: fit-content !important;
text-decoration: underline !important;
pointer-events: none !important;
}
/* Opties onder preview: twee nette kaarten, zonder uitrekken. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-settings-grid {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 16px !important;
align-items: start !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-option-card {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 18px !important;
border: 1px solid #d3d8dd !important;
border-radius: 6px !important;
background: #fff !important;
box-shadow: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-option-card h2 {
margin: 0 0 6px !important;
font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 700 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-options-help {
margin: 0 0 14px !important;
}
/* Tekstkleur. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .color-row {
position: relative !important;
display: grid !important;
width: 100% !important;
grid-template-columns: 46px minmax(0,1fr) !important;
gap: 10px !important;
align-items: center !important;
margin: 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance #colorDisplay {
display: block !important;
box-sizing: border-box !important;
width: 46px !important;
height: 42px !important;
border: 1px solid #aeb7c0 !important;
border-radius: 6px !important;
cursor: pointer !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance #colorPicker {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance #textColorInput {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
height: 42px !important;
margin: 0 !important;
padding: 9px 12px !important;
color: #202833 !important;
background: #fff !important;
border: 1px solid #aeb7c0 !important;
border-radius: 6px !important;
box-shadow: none !important;
font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance #textColorInput:focus {
border-color: #5b9bd5 !important;
outline: 0 !important;
box-shadow: 0 0 0 3px rgba(91,155,213,.14) !important;
}
/* Lettertype + tekstgrootte. */
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-typography-fields {
display: grid !important;
width: 100% !important;
min-width: 0 !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 12px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-typography-field {
display: grid !important;
min-width: 0 !important;
gap: 7px !important;
font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-typography-field > span {
font: inherit !important;
font-weight: 700 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-typography-field select {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 40px !important;
margin: 0 !important;
padding: 7px 10px !important;
color: #25282c !important;
background: #fff !important;
border: 1px solid #c9d0d8 !important;
border-radius: 4px !important;
font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance :is(#colorStatus,#typographyStatus).status-box {
width: 100% !important;
min-height: 0 !important;
margin: 10px 0 0 !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance :is(#colorStatus,#typographyStatus).status-box:empty {
display: none !important;
}
@media (max-width: 760px) {
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance {
padding: 14px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-settings-grid,
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-typography-fields {
grid-template-columns: minmax(0,1fr) !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview {
min-height: 250px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-cover {
min-height: 145px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-avatar {
width: 76px !important;
height: 76px !important;
}
html body #layoutEdit.profile-popup-media-clean #profileLayoutAppearance .profile-layout-text-preview-identity {
left: 108px !important;
}
}
/* =========================================================
r907 — BIO BEWERKEN inhoud definitief herstellen
Alleen interne WYSIWYG-layout. Media-popup shell/header/controls blijven intact.
========================================================= */
/* Bio heeft vier duidelijke verticale zones: header, ribbon, editor, footer. */
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
width: min(1060px, calc(100vw - 40px)) !important;
min-width: min(760px, calc(100vw - 40px)) !important;
height: auto !important;
max-height: calc(100dvh - 40px) !important;
grid-template-columns: minmax(0,1fr) !important;
grid-template-rows: 40px auto minmax(320px, auto) 58px !important;
overflow: hidden !important;
}
/* WYSIWYG-ribbon: compacte Windows/Media-achtige balk, labels onder de knoppen. */
html body #bioEdit.profile-popup-media-clean > #bioEditOptions.profile-bio-editor-toolbar {
position: relative !important;
inset: auto !important;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 60px !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: #f3f0e9 !important;
border: 0 !important;
border-bottom: 1px solid #cfd6ce !important;
border-radius: 0 !important;
box-shadow: none !important;
scrollbar-width: thin !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon {
box-sizing: border-box !important;
display: flex !important;
width: max-content !important;
min-width: 100% !important;
min-height: 59px !important;
margin: 0 !important;
padding: 7px 10px 6px !important;
align-items: stretch !important;
flex-flow: row nowrap !important;
gap: 0 !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group {
position: static !important;
inset: auto !important;
box-sizing: border-box !important;
display: grid !important;
flex: 0 0 auto !important;
min-width: max-content !important;
height: 46px !important;
margin: 0 !important;
padding: 0 10px !important;
grid-template-columns: auto !important;
grid-template-rows: 32px 12px !important;
row-gap: 4px !important;
align-items: center !important;
justify-items: center !important;
background: transparent !important;
border: 0 !important;
border-right: 1px solid #c9cdd1 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group:first-child { padding-left: 0 !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group:last-child {
padding-right: 0 !important;
border-right: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-buttons {
box-sizing: border-box !important;
display: flex !important;
width: auto !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
grid-row: 1 !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-label {
position: static !important;
inset: auto !important;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
height: 12px !important;
min-height: 12px !important;
margin: 0 !important;
padding: 0 !important;
grid-row: 2 !important;
overflow: hidden !important;
color: #555d65 !important;
font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
font-size: 10px !important;
font-weight: 600 !important;
line-height: 12px !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
pointer-events: none !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button {
-webkit-appearance: none !important;
appearance: none !important;
position: relative !important;
box-sizing: border-box !important;
display: inline-grid !important;
flex: 0 0 32px !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 4px !important;
place-items: center !important;
color: #202428 !important;
background: linear-gradient(#fff,#eceeef) !important;
border: 1px solid #9fa5aa !important;
border-radius: 4px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button.is-wide {
width: 36px !important;
min-width: 36px !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button:is(:hover,:focus-visible) {
color: #111 !important;
background: #e6f3fb !important;
border-color: #3c7fb1 !important;
outline: 0 !important;
box-shadow: 0 0 0 2px rgba(60,127,177,.16) !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button:is(.is-active,[aria-pressed="true"],[aria-expanded="true"]) {
color: #111 !important;
background: #cfe7f7 !important;
border-color: #3c7fb1 !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,.14) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-tool-icon {
display: block !important;
width: 20px !important;
height: 20px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.9 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon {
display: inline-grid !important;
min-width: 19px !important;
min-height: 19px !important;
place-items: center !important;
color: currentColor !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 19px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon.is-italic { font-style: italic !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon.is-underline { text-decoration: underline !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon.is-strike { text-decoration: line-through !important; }
/* Eén wit schrijfvlak; alleen dit vlak scrollt bij veel tekst. */
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content {
position: relative !important;
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-width: 0 !important;
min-height: 320px !important;
max-height: calc(100dvh - 198px) !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
grid-template-columns: minmax(0,1fr) !important;
overflow: hidden !important;
background: #fff !important;
border: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content:is(.is-picture-tools-open,.is-emoji-tools-open) {
grid-template-columns: minmax(0,1fr) minmax(340px,400px) !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField {
position: static !important;
box-sizing: border-box !important;
display: block !important;
grid-column: 1 !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 320px !important;
max-height: calc(100dvh - 198px) !important;
margin: 0 !important;
padding: 28px 32px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
color: #171a1d !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
line-height: 1.55 !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
overflow-wrap: anywhere !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField:is(:focus,:focus-visible) {
outline: 0 !important;
box-shadow: inset 0 0 0 2px rgba(60,127,177,.16) !important;
}
/* Emoji/Plaatjes openen als nette rechterkolom, niet over het schrijfvlak heen. */
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
position: relative !important;
inset: auto !important;
z-index: 2 !important;
box-sizing: border-box !important;
display: grid !important;
grid-column: 2 !important;
grid-template-rows: 48px minmax(0,1fr) !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
max-height: calc(100dvh - 198px) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
border: 0 !important;
border-left: 1px solid #c8cdd3 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] {
display: none !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) {
box-sizing: border-box !important;
display: flex !important;
min-width: 0 !important;
min-height: 48px !important;
margin: 0 !important;
padding: 8px 10px 8px 14px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
background: #f3f0e9 !important;
border: 0 !important;
border-bottom: 1px solid #cfd6ce !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) h2 {
margin: 0 !important;
color: #24282c !important;
font-family: var(--base-font, Tahoma, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-body,.profile-bio-emoji-panel-body) {
position: relative !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body {
padding: 14px !important;
overflow-y: auto !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .profile-bio-emoji-popover {
position: absolute !important;
inset: 0 !important;
box-sizing: border-box !important;
display: block !important;
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 12px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .emoji-picker {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 100% !important;
flex-direction: column !important;
}
html body #bioEdit.profile-popup-media-clean .emoji-grid {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-height: 250px !important;
margin: 0 !important;
padding: 10px !important;
grid-template-columns: repeat(5,minmax(0,1fr)) !important;
align-content: start !important;
gap: 6px !important;
background: #f3f3f3 !important;
border: 1px solid #b9bec4 !important;
border-radius: 0 6px 6px 6px !important;
}
html body #bioEdit.profile-popup-media-clean .emoji-grid button {
display: grid !important;
min-width: 0 !important;
min-height: 42px !important;
margin: 0 !important;
padding: 4px !important;
place-items: center !important;
background: transparent !important;
border: 0 !important;
border-radius: 5px !important;
}
html body #bioEdit.profile-popup-media-clean .emoji-grid button:is(:hover,:focus-visible) {
background: #dceefd !important;
outline: 0 !important;
}
/* Footer blijft lichtgrijs en sluit strak op het schrijfvlak aan. */
html body #bioEdit.profile-popup-media-clean > .profile-bio-editor-footer {
position: relative !important;
inset: auto !important;
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 58px !important;
height: 58px !important;
margin: 0 !important;
padding: 10px 16px !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
background: #f3f0e9 !important;
border: 0 !important;
border-top: 1px solid #cfd6ce !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean > .profile-bio-editor-footer > h1 { display: none !important; }
html body #bioEdit.profile-popup-media-clean > .profile-bio-editor-footer > nav {
display: flex !important;
width: auto !important;
margin: 0 !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
}
/* Bij handmatig resizen vult Bio het gekozen venster wel volledig. */
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-site-positioned:not(.is-minimized):not(.is-maximized) {
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
}
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-site-positioned:not(.is-minimized):not(.is-maximized) > #profileBioEditorContent.profile-bio-editor-content,
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-site-positioned:not(.is-minimized):not(.is-maximized) #bioEditField {
height: 100% !important;
max-height: none !important;
}
@media (max-width: 820px) {
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
width: calc(100vw - 16px) !important;
min-width: 0 !important;
max-width: calc(100vw - 16px) !important;
height: calc(100dvh - 16px) !important;
max-height: calc(100dvh - 16px) !important;
grid-template-rows: 40px auto minmax(0,1fr) 58px !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content:is(.is-picture-tools-open,.is-emoji-tools-open) {
grid-template-columns: minmax(0,1fr) !important;
overflow-y: auto !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
grid-column: 1 !important;
min-height: 300px !important;
border-left: 0 !important;
border-top: 1px solid #c8cdd3 !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField {
padding: 18px !important;
}
}
/* =========================================================
r908 — BIO BEWERKEN: interne layout terug naar de laatste
goed werkende opbouw van vóór de popup-CSS opschoning.
Alleen de inhoud; de huidige groene popup-shell blijft staan.
========================================================= */
/* Werkbalk zoals de oorspronkelijke definitieve WYSIWYG-balk (Ronde 301/302). */
html body #bioEdit.profile-popup-media-clean > #bioEditOptions.profile-bio-editor-toolbar {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 60px !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #f3f0e9 !important;
border: 0 !important;
border-bottom: 1px solid #c7c7c7 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 7px 10px 6px !important;
align-items: flex-end !important;
align-content: flex-start !important;
flex-wrap: wrap !important;
gap: 0 !important;
overflow: visible !important;
background: transparent !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group {
position: static !important;
box-sizing: border-box !important;
display: grid !important;
flex: 0 0 auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 10px !important;
grid-template-rows: 32px 14px !important;
grid-template-columns: minmax(0, auto) !important;
row-gap: 5px !important;
align-items: center !important;
justify-items: center !important;
background: transparent !important;
border: 0 !important;
border-right: 1px solid #cfcfcf !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group:first-child { padding-left: 0 !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group:last-child {
padding-right: 0 !important;
border-right: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-buttons {
box-sizing: border-box !important;
display: flex !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
grid-row: 1 !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-label {
position: static !important;
inset: auto !important;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: 14px !important;
margin: 0 !important;
padding: 1px 0 0 !important;
grid-row: 2 !important;
overflow: hidden !important;
color: #555 !important;
font: 600 10px/14px "Segoe UI", Arial, sans-serif !important;
letter-spacing: .01em !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
pointer-events: none !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button {
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
display: inline-grid !important;
flex: 0 0 32px !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
margin: 0 !important;
padding: 4px !important;
place-items: center !important;
color: #202020 !important;
background: linear-gradient(#fff, #eeeeee) !important;
border: 1px solid #aaa !important;
border-radius: 4px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
vertical-align: top !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button.is-wide {
width: 36px !important;
min-width: 36px !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button:is(:hover,:focus-visible) {
color: #111 !important;
background: #eaf4fc !important;
border-color: #5b9bd5 !important;
outline: 0 !important;
box-shadow: 0 0 0 2px rgba(91,155,213,.16) !important;
}
html body #bioEdit.profile-popup-media-clean button.profile-bio-tool-button:is(.is-active,[aria-pressed="true"],[aria-expanded="true"]) {
color: #111 !important;
background: #cfe8fb !important;
border-color: #3c7fb1 !important;
box-shadow: inset 0 1px 3px rgba(0,0,0,.14) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-tool-icon {
display: block !important;
width: 20px !important;
height: 20px !important;
flex: 0 0 auto !important;
overflow: visible !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.9 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
pointer-events: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-tool-icon.is-align {
width: 21px !important;
height: 21px !important;
stroke-width: 2 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon {
min-width: 19px !important;
min-height: 19px !important;
font: 700 17px/19px Georgia, "Times New Roman", serif !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon.is-italic { font-style: italic !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon.is-underline { text-decoration: underline !important; text-underline-offset: 2px !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-letter-icon.is-strike { text-decoration: line-through !important; }
/* Schrijfvlak + zijpaneel terug naar de oude betrouwbare 1+1 kolom-opbouw. */
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content {
grid-area: auto !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
width: 100% !important;
min-width: 0 !important;
min-height: 360px !important;
height: auto !important;
max-height: calc(100dvh - 200px) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
border: 0 !important;
border-top: 1px solid #d9dde3 !important;
border-bottom: 1px solid #d9dde3 !important;
transition: grid-template-columns .18s ease !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content:is(.is-picture-tools-open,.is-emoji-tools-open) {
grid-template-columns: minmax(0,1fr) minmax(300px,380px) !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField {
grid-area: auto !important;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 360px !important;
height: auto !important;
max-height: calc(100dvh - 200px) !important;
margin: 0 !important;
padding: 34px 42px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
color: #171a1d !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
line-height: 1.5 !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField:is(:focus,:focus-visible) {
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* Plaatjes en Emoji's weer als hetzelfde rechter veld als vóór de opschoning. */
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
position: static !important;
inset: auto !important;
z-index: auto !important;
box-sizing: border-box !important;
display: flex !important;
grid-column: 2 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
min-height: 360px !important;
height: 100% !important;
max-height: calc(100dvh - 200px) !important;
margin: 0 !important;
padding: 0 !important;
flex-direction: column !important;
overflow: hidden !important;
background: #f2f2f2 !important;
border: 0 !important;
border-left: 1px solid #ccc !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] {
display: none !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) {
box-sizing: border-box !important;
display: flex !important;
flex: 0 0 auto !important;
min-height: 50px !important;
margin: 0 !important;
padding: 8px 12px 8px 16px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
background: #f2f2f2 !important;
border: 0 !important;
border-bottom: 1px solid #ccc !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) h2 {
margin: 0 !important;
color: #222 !important;
font: 700 20px/1.3 "Segoe UI", Tahoma, sans-serif !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-close,.profile-bio-emoji-close) {
width: 34px !important;
min-width: 34px !important;
height: 30px !important;
min-height: 30px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 20px !important;
line-height: 1 !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-body,.profile-bio-emoji-panel-body) {
box-sizing: border-box !important;
display: block !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 12px !important;
overflow: auto !important;
background: #f2f2f2 !important;
}
/* Plaatjeslijst/upload zoals voorheen. */
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-storage {
display: block !important;
margin: 0 0 10px !important;
color: #555 !important;
font: 400 15px/1.45 "Segoe UI", Tahoma, sans-serif !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .photo-manager-ui {
display: flex !important;
min-height: 0 !important;
flex-direction: column !important;
gap: 10px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list {
display: flex !important;
max-height: none !important;
flex-wrap: wrap !important;
gap: 10px !important;
overflow: visible !important;
align-content: flex-start !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list > div {
box-sizing: border-box !important;
width: calc(50% - 5px) !important;
min-width: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list img {
display: block !important;
max-width: 100% !important;
height: auto !important;
}
html body #bioEdit.profile-popup-media-clean .picture-upload-drop {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-height: 132px !important;
margin: 0 !important;
padding: 18px 14px !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
gap: 6px !important;
color: #5c5c5c !important;
text-align: center !important;
background: #fff !important;
border: 2px dashed #aaa !important;
border-radius: 8px !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean .picture-upload-drop:is(:hover,:focus-visible) {
color: #222 !important;
background: #fafafa !important;
border-color: #666 !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .picture-upload-drop.is-dragover {
color: #075aa8 !important;
background: #eaf4ff !important;
border-color: #1473e6 !important;
}
html body #bioEdit.profile-popup-media-clean .picture-upload-drop .picture-upload {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .picture-upload-drop-icon {
width: 42px !important;
height: 42px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* Emoji-picker: oude categorie-indeling + compacte smileys. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .profile-bio-emoji-popover {
position: static !important;
inset: auto !important;
z-index: auto !important;
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-picker {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
flex-direction: column !important;
gap: 0 !important;
overflow: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
position: relative !important;
z-index: 3 !important;
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
padding: 0 8px !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 10px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
display: flex !important;
flex: 0 1 auto !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories button {
display: none !important;
min-width: 105px !important;
max-width: 160px !important;
min-height: 34px !important;
margin: 0 0 -1px !important;
padding: 7px 12px !important;
color: #111 !important;
font: 400 14px/1.2 "Segoe UI", Tahoma, sans-serif !important;
background: #f0f0f0 !important;
border: 1px solid #777 !important;
border-bottom-color: #f0f0f0 !important;
border-radius: 4px 4px 0 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories button:is(.is-active,[aria-selected="true"]) {
display: block !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
position: relative !important;
box-sizing: border-box !important;
display: grid !important;
flex: 0 0 38px !important;
width: 38px !important;
height: 34px !important;
margin: 0 0 4px !important;
padding: 0 !important;
place-items: center !important;
color: #202020 !important;
cursor: pointer !important;
background: linear-gradient(#fafafa 0%,#e6e6e6 48%,#d7d7d7 100%) !important;
border: 1px solid #8b8b8b !important;
border-radius: 3px !important;
box-shadow: inset 1px 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer !important;
opacity: 0 !important;
border: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 10px !important;
grid-template-columns: repeat(5,minmax(0,1fr)) !important;
align-content: start !important;
gap: 6px !important;
overflow: visible !important;
background: #f0f0f0 !important;
border: 1px solid #777 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid button {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
margin: 0 !important;
padding: 5px !important;
place-items: center !important;
color: #111 !important;
font: 400 24px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif !important;
cursor: pointer !important;
background: #fff !important;
border: 1px solid #aaa !important;
border-radius: 0 !important;
box-shadow: inset 1px 1px 0 #fff !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
background: #e8f2ff !important;
border-color: #316ac5 !important;
outline: 1px dotted #111 !important;
outline-offset: -4px !important;
}
/* Kleurkiezer weer op het oude formaat. */
html body #bioEdit.profile-popup-media-clean .profile-bio-color-palette {
width: 244px !important;
padding: 10px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-color-swatches {
display: grid !important;
grid-template-columns: repeat(5,36px) !important;
gap: 7px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-color-swatch {
width: 36px !important;
height: 30px !important;
}
/* Handmatig groter/kleiner maken: inhoud groeit mee, zonder de oude full-screen shell terug te brengen. */
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-site-positioned:not(.is-minimized):not(.is-maximized) > #profileBioEditorContent.profile-bio-editor-content,
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-site-positioned:not(.is-minimized):not(.is-maximized) #bioEditField {
height: 100% !important;
max-height: none !important;
}
@media (max-width: 820px) {
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: thin !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-ribbon-group { flex: 0 0 auto !important; }
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content:is(.is-picture-tools-open,.is-emoji-tools-open) {
grid-template-columns: minmax(0,1fr) !important;
overflow-y: auto !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
grid-column: 1 !important;
width: 100% !important;
min-height: 300px !important;
height: auto !important;
border-left: 0 !important;
border-top: 1px solid #ccc !important;
}
html body #bioEdit.profile-popup-media-clean #bioEditField { padding: 22px 20px !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list > div { width: 100% !important; }
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid {
grid-template-columns: repeat(4,minmax(0,1fr)) !important;
padding: 8px !important;
}
}
/* =========================================================
r909 — BIO WYSIWYG definitief compact + footergrijs.
Voorkomt dat oude editor-CSS de toolbar als hoge witte rij uitrekt.
========================================================= */
html body #profile #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized),
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open:not(.is-minimized):not(.is-maximized) {
grid-template-rows: 40px 66px minmax(320px, auto) 58px !important;
}
html body #profile #bioEdit.profile-popup-media-clean > #bioEditOptions.profile-bio-editor-toolbar,
html body #bioEdit.profile-popup-media-clean > #bioEditOptions.profile-bio-editor-toolbar {
position: relative !important;
inset: auto !important;
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
height: 66px !important;
min-height: 66px !important;
max-height: 66px !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
align-self: start !important;
background: #f3f0e9 !important;
background-color: #f3f0e9 !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid #cfd6ce !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #profile #bioEdit.profile-popup-media-clean > #bioEditOptions .profile-bio-ribbon,
html body #bioEdit.profile-popup-media-clean > #bioEditOptions .profile-bio-ribbon {
box-sizing: border-box !important;
width: max-content !important;
min-width: 100% !important;
height: 65px !important;
min-height: 65px !important;
max-height: 65px !important;
margin: 0 !important;
padding: 6px 10px 5px !important;
overflow: visible !important;
background: #f3f0e9 !important;
background-color: #f3f0e9 !important;
background-image: none !important;
}
html body #profile #bioEdit.profile-popup-media-clean > #bioEditOptions .profile-bio-ribbon-group,
html body #bioEdit.profile-popup-media-clean > #bioEditOptions .profile-bio-ribbon-group {
height: 54px !important;
min-height: 54px !important;
max-height: 54px !important;
background: transparent !important;
}
/* Het schrijfvlak sluit meteen onder de compacte toolbar aan. */
html body #profile #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content {
margin-top: 0 !important;
border-top: 0 !important;
}
/* Bij handmatig resizen blijft alleen de editorrij flexibel; de toolbar blijft compact. */
html body #profile #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-site-positioned:not(.is-minimized):not(.is-maximized),
html body #bioEdit.profile-popup-media-clean.snoeten-site-popup.is-open.is-site-positioned:not(.is-minimized):not(.is-maximized) {
grid-template-rows: 40px 66px minmax(0,1fr) 58px !important;
}
/* r911 — Bio Plaatjes/Emoji veilig hersteld vanuit r909.
Alleen visueel wit + echte dropdown; werkende interne structuur blijft behouden. */
/* Extra kader rond het Bio-schrijfvlak weg. */
html body #bioForm #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #bioForm #bioEdit.profile-popup-media-clean #bioEditField,
html body #bioEdit.profile-popup-media-clean #bioEditField {
background: #ffffff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* Plaatjes en Emoji: r909-structuur behouden, alleen het paneel wit maken. */
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
background: #ffffff !important;
border-left: 1px solid #d5dbe0 !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) {
background: #ffffff !important;
border-bottom: 1px solid #d5dbe0 !important;
}
html body #bioEdit.profile-popup-media-clean :is(.profile-bio-picture-panel-body,.profile-bio-emoji-panel-body),
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .photo-manager-ui,
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .profile-bio-picture-library-view,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .profile-bio-emoji-popover,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-picker {
background: #ffffff !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list > div {
background: #ffffff !important;
border: 1px solid #d5dbe0 !important;
border-radius: 4px !important;
overflow: hidden !important;
}
html body #bioEdit.profile-popup-media-clean .picture-upload-drop {
background: #ffffff !important;
border-color: #aeb4bb !important;
border-radius: 4px !important;
}
/* Emoji-categorieën als echte dropdown.
Belangrijk: .emoji-categories zelf NIET verbergen, want de select zit daarin. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
display: block !important;
width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button {
display: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
position: relative !important;
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control > svg {
display: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: static !important;
inset: auto !important;
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
height: 38px !important;
min-height: 38px !important;
margin: 0 !important;
padding: 6px 34px 6px 10px !important;
opacity: 1 !important;
color: #222 !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
line-height: 1.2 !important;
background: #ffffff !important;
border: 1px solid #aeb4bb !important;
border-radius: 3px !important;
box-shadow: inset 0 1px 1px rgba(0,0,0,.04) !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select:is(:hover,:focus) {
border-color: #6f9ed2 !important;
outline: 0 !important;
box-shadow: 0 0 0 2px rgba(75,114,170,.12) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid {
background: #ffffff !important;
border-color: #d5dbe0 !important;
}
/* Bio headerknoppen: nette states, zonder inline-lock. */
html body #bioForm #bioEdit.profile-popup-media-clean .bio-window-controls,
html body #bioEdit.profile-popup-media-clean .bio-window-controls {
position: absolute !important;
top: 8px !important;
right: 8px !important;
display: flex !important;
align-items: center !important;
gap: 7px !important;
margin: 0 !important;
padding: 0 !important;
}
html body #bioEdit.profile-popup-media-clean :is(.bio-window-minimize,.bio-window-maximize,.bio-window-close) {
position: relative !important;
box-sizing: border-box !important;
display: block !important;
flex: 0 0 34px !important;
width: 34px !important;
min-width: 34px !important;
height: 30px !important;
min-height: 30px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
border: 1px solid #707070 !important;
border-radius: 3px !important;
background: linear-gradient(to bottom,#f4f4f4 0%,#ededed 43%,#dddddd 48%,#cecece 100%) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean :is(.bio-window-minimize,.bio-window-maximize):is(:hover,:focus-visible) {
border-color: #4d7fb3 !important;
background: linear-gradient(to bottom,#fff 0%,#eef7ff 43%,#d8ecff 48%,#c1def8 100%) !important;
box-shadow: 0 0 3px rgba(75,114,170,.35), inset 0 1px 0 rgba(255,255,255,.95) !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .bio-window-close {
border-color: #8f2923 !important;
background: linear-gradient(to bottom,#f8aaa4 0%,#ed8178 42%,#dc5c52 48%,#c84239 100%) !important;
}
html body #bioEdit.profile-popup-media-clean .bio-window-close:is(:hover,:focus-visible) {
border-color: #761b16 !important;
background: linear-gradient(to bottom,#ffc2bd 0%,#fa9189 42%,#ea665d 48%,#d34a40 100%) !important;
box-shadow: 0 0 4px rgba(145,37,30,.5), inset 0 1px 0 rgba(255,255,255,.35) !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .bio-window-minimize::before {
content: '' !important;
position: absolute !important;
left: 10px !important;
bottom: 7px !important;
width: 13px !important;
height: 2px !important;
background: #4d4d4d !important;
}
html body #bioEdit.profile-popup-media-clean .bio-window-maximize::before {
content: '' !important;
position: absolute !important;
left: 8px !important;
top: 7px !important;
box-sizing: border-box !important;
width: 15px !important;
height: 13px !important;
border: 2px solid #4d4d4d !important;
border-top-width: 3px !important;
background: transparent !important;
}
html body #bioEdit.profile-popup-media-clean .bio-window-close::before,
html body #bioEdit.profile-popup-media-clean .bio-window-close::after {
content: '' !important;
position: absolute !important;
left: 8px !important;
top: 13px !important;
width: 16px !important;
height: 2px !important;
border-radius: 1px !important;
background: #fff !important;
box-shadow: 0 1px 0 rgba(105,22,17,.35) !important;
}
html body #bioEdit.profile-popup-media-clean .bio-window-close::before { transform: rotate(45deg) !important; }
html body #bioEdit.profile-popup-media-clean .bio-window-close::after { transform: rotate(-45deg) !important; }
/* r912 — Bio: laatste randjes weg + plaatjeslijst/icoontjes structureel herstellen. */
html body #bioForm #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #profile #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #bioForm #bioEdit.profile-popup-media-clean #bioEditField,
html body #profile #bioEdit.profile-popup-media-clean #bioEditField,
html body #bioEdit.profile-popup-media-clean #bioEditField {
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background-image: none !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent::before,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent::after,
html body #bioEdit.profile-popup-media-clean #bioEditField::before,
html body #bioEdit.profile-popup-media-clean #bioEditField::after {
content: none !important;
display: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* Plaatjeslijst: noodzakelijke structuur terug die uit de popup-clean CSS was verdwenen. */
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list > .profile-bio-picture-card {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
flex-direction: column !important;
overflow: hidden !important;
background: #fff !important;
border: 1px solid #d5dbe0 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-preview {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-height: 170px !important;
aspect-ratio: 4 / 3 !important;
padding: 0 !important;
place-items: center !important;
overflow: hidden !important;
background-color: #fff !important;
background-image:
linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
linear-gradient(-45deg, transparent 75%, #e0e0e0 75%) !important;
background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
background-size: 16px 16px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-preview img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
background: transparent !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-card-actions {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 10px !important;
align-items: center !important;
gap: 10px !important;
background: #f3f0e9 !important;
border-top: 1px solid #d5dbe0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action {
box-sizing: border-box !important;
display: inline-flex !important;
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 8px !important;
align-items: center !important;
justify-content: center !important;
color: #000 !important;
background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
border: 1px solid #707070 !important;
border-radius: 3px !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action:is(:hover,:focus-visible) {
color: #000 !important;
background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
border-color: #3c7fb1 !important;
outline: 0 !important;
box-shadow: 0 0 3px #a7d9f5 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action:active {
box-shadow: inset 0 -1px 6px rgba(0,0,0,.2), inset 0 -.7em #bee6fd, 0 0 3px #a7d9f5 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-picture-card-action svg {
display: block !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
overflow: visible !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none !important;
}
/* De losse Plaatje bewerken-overlay mag nooit door Bio/popup overflow worden afgeknipt. */
html body.picture-editor-window-open,
html.picture-editor-window-open body {
overflow: hidden !important;
}
html body > .picture-editor-window-overlay {
z-index: 2147483640 !important;
}
/* =========================================================
r913 — Bio: Prikbord-emoji-opbouw, wit als Vormgeving > Afbeeldingen;
tekstveld zonder omliggend kader; Plaatje bewerken in nieuwe popup-shell.
========================================================= */
/* Bio schrijfvlak: ook de omliggende container is volledig randloos/wit. */
html body #profile #bioForm #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #bioForm #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent.profile-bio-editor-content {
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
background-image: none !important;
border: 0 !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
html body #profile #bioForm #bioEdit.profile-popup-media-clean > #profileBioEditorContent > #bioEditField,
html body #bioForm #bioEdit.profile-popup-media-clean > #profileBioEditorContent > #bioEditField,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent > #bioEditField {
box-sizing: border-box !important;
margin: 0 !important;
background: #fff !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent::before,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent::after,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent > #bioEditField::before,
html body #bioEdit.profile-popup-media-clean > #profileBioEditorContent > #bioEditField::after {
content: none !important;
display: none !important;
}
/* Emoji-paneel: dezelfde structuur als Prikbordbericht plaatsen. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-tools-content,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-header,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-popover,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-popover .emoji-picker {
background: #fff !important;
background-image: none !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body {
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 12px !important;
overflow: hidden !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-popover {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-popover .emoji-picker {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
flex-direction: column !important;
gap: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 0 !important;
}
/* Eén zichtbare actieve categorie + compact dropdown-icoon, net als Prikbord. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
position: relative !important;
z-index: 3 !important;
box-sizing: border-box !important;
display: flex !important;
flex: 0 0 auto !important;
width: 100% !important;
min-width: 0 !important;
min-height: 38px !important;
margin: 0 0 -1px !important;
padding: 0 !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
box-sizing: border-box !important;
display: flex !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
align-items: flex-end !important;
overflow: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button {
display: none !important;
box-sizing: border-box !important;
min-width: 140px !important;
min-height: 38px !important;
margin: 0 -1px 0 0 !important;
padding: 7px 14px !important;
color: #222 !important;
font: inherit !important;
font-size: inherit !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: center !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e5e0da 100%) !important;
border: 1px solid #9f9992 !important;
border-radius: 5px 5px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
position: relative !important;
z-index: 3 !important;
display: block !important;
color: #222 !important;
background: #fff !important;
border-color: #9f9992 !important;
border-bottom-color: #fff !important;
font-weight: 700 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
position: relative !important;
z-index: 4 !important;
box-sizing: border-box !important;
display: grid !important;
flex: 0 0 40px !important;
width: 40px !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
place-items: center !important;
color: #202020 !important;
cursor: pointer !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e5e0da 100%) !important;
border: 1px solid #9f9992 !important;
border-radius: 5px 5px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control:is(:hover,:focus-within) {
background: linear-gradient(180deg,#fff 0%,#ece8e3 100%) !important;
border-color: #918b84 !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control > svg {
display: block !important;
width: 21px !important;
height: 21px !important;
fill: currentColor !important;
stroke: none !important;
pointer-events: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer !important;
opacity: 0 !important;
border: 0 !important;
}
/* Witte inhoud zoals Vormgeving > Afbeeldingen. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid {
box-sizing: border-box !important;
display: grid !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px !important;
grid-template-columns: repeat(5,minmax(0,1fr)) !important;
gap: 7px !important;
background: #fff !important;
border: 1px solid #9f9992 !important;
border-radius: 0 4px 4px 4px !important;
box-shadow: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid button {
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 4px !important;
background: #fff !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
font-size: 23px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
border-color: #a8a39d !important;
background: #f7f5f2 !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid button.is-image-emoji img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 32px !important;
max-height: 32px !important;
margin: auto !important;
object-fit: contain !important;
}
/* Emoji-knop in WYSIWYG: open = wit, zodat hij bij het witte paneel hoort. */
html body #bioEdit.profile-popup-media-clean #bioEditOptions .emoji-trigger:is(.is-active,[aria-expanded="true"]) {
color: #222 !important;
background: #fff !important;
border-color: #9f9992 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
/* ---------------------------------------------------------
Plaatje bewerken: nieuwe Media-popup-shell i.p.v. oude overlaylook.
--------------------------------------------------------- */
html body > .picture-editor-window-overlay {
box-sizing: border-box !important;
padding: 16px !important;
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
grid-template-rows: 40px minmax(0,1fr) !important;
width: min(1200px,calc(100vw - 32px)) !important;
height: min(780px,calc(100vh - 32px)) !important;
min-width: 0 !important;
min-height: 500px !important;
margin: 0 !important;
overflow: hidden !important;
border: 4px solid #557A3E !important;
border-radius: 9px !important;
background: #557A3E !important;
box-shadow: 0 0 0 1px rgba(36,54,29,.42),0 3px 8px rgba(0,0,0,.30),0 16px 34px rgba(0,0,0,.24) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup > .picture-editor-window-header.guestbook-window-header {
box-sizing: border-box !important;
display: flex !important;
min-width: 0 !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 2px 7px 2px 10px !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 2px !important;
color: #fff !important;
background: linear-gradient(180deg,#82A969 0%,#557A3E 100%) !important;
border: 0 !important;
border-bottom: 2px solid #557A3E !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup > .picture-editor-window-header .guestbook-window-title {
margin: 0 !important;
color: #fff !important;
font-family: "Trebuchet MS",Verdana,Arial,sans-serif !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-shadow: 1px 1px 0 #345529 !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup > .picture-editor-window-header .picture-editor-window-controls {
margin-left: auto !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup > .picture-editor-window-body {
box-sizing: border-box !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
border: 0 !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup.is-minimized {
width: min(560px,calc(100vw - 32px)) !important;
height: 40px !important;
min-height: 40px !important;
grid-template-rows: 40px !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup.is-minimized > .picture-editor-window-body {
display: none !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup.is-maximized {
width: calc(100vw - 16px) !important;
height: calc(100vh - 16px) !important;
min-height: 0 !important;
border-radius: 7px !important;
}
@media (max-width: 700px) {
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button {
min-width: 108px !important;
padding-inline: 9px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid {
grid-template-columns: repeat(4,minmax(0,1fr)) !important;
padding: 8px !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup {
width: calc(100vw - 16px) !important;
height: calc(100vh - 16px) !important;
min-height: 0 !important;
}
}
/* =========================================================
r914 — Plaatje bewerken: interne layout opnieuw strak opgebouwd.
Header blijft de sitebrede Media-shell; inhoud volgt:
tabs 100% breed -> preview links / opties rechts -> footer.
========================================================= */
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 40px minmax(0, 1fr) !important;
width: min(1120px, calc(100vw - 32px)) !important;
height: min(720px, calc(100vh - 32px)) !important;
min-width: 760px !important;
min-height: 560px !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup > .picture-editor-window-body {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
background: #fff !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-editor-mount,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-view {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: minmax(0, 1fr) 58px !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-view > .profile-bio-picture-edit-header {
display: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-white {
box-sizing: border-box !important;
display: grid !important;
grid-row: 1 !important;
grid-column: 1 !important;
grid-template-columns: minmax(0, 58fr) minmax(330px, 42fr) !important;
grid-template-rows: 42px minmax(0, 1fr) !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #fff !important;
}
/* De tabs lopen over de volle editorbreedte, zoals Media > Foto bewerken. */
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs {
box-sizing: border-box !important;
grid-column: 1 / -1 !important;
grid-row: 1 !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
height: 42px !important;
margin: 0 !important;
padding: 5px 7px !important;
align-items: center !important;
gap: 3px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: #f3f0e9 !important;
border: 0 !important;
border-bottom: 1px solid #cfd6ce !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab {
box-sizing: border-box !important;
flex: 0 0 auto !important;
min-width: 0 !important;
min-height: 30px !important;
height: 30px !important;
margin: 0 !important;
padding: 5px 11px !important;
color: #202020 !important;
font: inherit !important;
font-size: var(--base-font-size, 14px) !important;
font-weight: 400 !important;
line-height: 18px !important;
text-align: left !important;
white-space: nowrap !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 2px !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:hover,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:focus-visible {
color: #111 !important;
background: #e5f1fb !important;
border-color: #70a9d8 !important;
outline: 0 !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:is(.is-active,[aria-selected="true"]) {
color: #111 !important;
background: #fff !important;
border-color: #9f9992 !important;
box-shadow: inset 0 1px 0 #fff !important;
}
/* Preview links: altijd midden-midden en nooit groter dan het beschikbare vlak. */
html body > .picture-editor-window-overlay .profile-bio-picture-edit-preview {
position: relative !important;
box-sizing: border-box !important;
grid-column: 1 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 24px !important;
overflow: hidden !important;
background:
linear-gradient(45deg, #dedede 25%, transparent 25%),
linear-gradient(-45deg, #dedede 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #dedede 75%),
linear-gradient(-45deg, transparent 75%, #dedede 75%),
#f7f7f7 !important;
background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
background-size: 20px 20px !important;
border: 0 !important;
border-right: 1px solid #d5dbe0 !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-canvas {
position: absolute !important;
top: 50% !important;
left: 50% !important;
display: block !important;
width: auto !important;
height: auto !important;
max-width: calc(100% - 48px) !important;
max-height: calc(100% - 48px) !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
transform-origin: center !important;
background: transparent !important;
box-shadow: 0 5px 18px rgba(0,0,0,.18) !important;
}
/* Opties rechts zijn één rustig wit vlak; alleen dit deel scrollt indien nodig. */
html body > .picture-editor-window-overlay .profile-bio-picture-edit-panels {
box-sizing: border-box !important;
grid-column: 2 !important;
grid-row: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 18px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: #fff !important;
border: 0 !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-panel[hidden] {
display: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-panel:not([hidden]) {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: #fff !important;
}
html body > .picture-editor-window-overlay .profile-photo-option-card,
html body > .picture-editor-window-overlay .profile-bio-picture-filter-layout,
html body > .picture-editor-window-overlay .profile-bio-picture-filter-controls,
html body > .picture-editor-window-overlay .profile-bio-picture-filter-card {
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
/* Footer sluit direct onder beide kolommen aan en gebruikt dezelfde grijs als de sitepopups. */
html body > .picture-editor-window-overlay .profile-bio-picture-edit-footer {
box-sizing: border-box !important;
grid-column: 1 !important;
grid-row: 2 !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 58px !important;
height: 58px !important;
margin: 0 !important;
padding: 11px 15px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
background: #f3f0e9 !important;
border: 0 !important;
border-top: 1px solid #cfd6ce !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-footer > div {
display: flex !important;
margin-left: auto !important;
align-items: center !important;
gap: 8px !important;
}
/* Maximaliseren houdt exact dezelfde interne verhoudingen. */
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup.is-maximized {
width: calc(100vw - 16px) !important;
height: calc(100vh - 16px) !important;
min-width: 0 !important;
min-height: 0 !important;
}
@media (max-width: 820px) {
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup {
width: calc(100vw - 16px) !important;
height: calc(100vh - 16px) !important;
min-width: 0 !important;
min-height: 0 !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-white {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 42px minmax(260px, 52vh) minmax(0, auto) !important;
overflow-y: auto !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs {
grid-column: 1 !important;
grid-row: 1 !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-preview {
grid-column: 1 !important;
grid-row: 2 !important;
min-height: 260px !important;
border-right: 0 !important;
border-bottom: 1px solid #d5dbe0 !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-panels {
grid-column: 1 !important;
grid-row: 3 !important;
height: auto !important;
overflow: visible !important;
}
}
/* r915 — Plaatje bewerken: alleen definitieve kleuren voor mini/maxi/sluiten.
Formaat, positie en interne editor-layout blijven r914. */
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control:not(.guestbook-window-close) {
border-color: #707070 !important;
background-color: #dddddd !important;
background-image: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control:not(.guestbook-window-close):hover,
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control:not(.guestbook-window-close):focus-visible {
border-color: #626262 !important;
background-color: #f2f2f2 !important;
background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 42%, #e8e8e8 47%, #d9d9d9 100%) !important;
box-shadow: 0 0 3px rgba(0,0,0,.22) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control:not(.guestbook-window-close):active {
border-color: #666666 !important;
background-color: #d9d9d9 !important;
background-image: linear-gradient(to bottom, #cfcfcf 0%, #dadada 42%, #e5e5e5 47%, #eeeeee 100%) !important;
box-shadow: inset 0 -1px 6px rgba(0,0,0,.18) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control.guestbook-window-close {
border-color: #8f2923 !important;
background-color: #c84239 !important;
background-image: linear-gradient(to bottom, #f7aaa4 0%, #ed8178 42%, #dc5c52 47%, #c84239 100%) !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control.guestbook-window-close:hover,
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control.guestbook-window-close:focus-visible {
border-color: #792019 !important;
background-color: #d24a40 !important;
background-image: linear-gradient(to bottom, #ffc0bb 0%, #f58f86 42%, #e9675d 47%, #d24a40 100%) !important;
box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup
> .picture-editor-window-header.guestbook-window-header
> .picture-editor-window-controls.guestbook-window-controls
> button.picture-editor-window-control.guestbook-window-control.guestbook-window-close:active {
border-color: #742019 !important;
background-color: #b7352d !important;
background-image: linear-gradient(to bottom, #b7352d 0%, #ca453c 42%, #dc5b51 47%, #eb766d 100%) !important;
box-shadow: inset 0 -1px 6px rgba(83,18,14,.30) !important;
}
/* r916 — Emoji actieve tab + select in dezelfde tabstijl als het voorbeeld. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
min-height: 47px !important;
margin: 0 0 -1px !important;
align-items: flex-end !important;
gap: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
display: flex !important;
align-items: flex-end !important;
flex: 0 1 auto !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 160px !important;
height: 46px !important;
margin: 0 8px 0 0 !important;
padding: 0 22px !important;
color: #1f1f1f !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 400 !important;
line-height: 1 !important;
text-align: center !important;
white-space: nowrap !important;
background: #ffffff !important;
border: 1px solid #9f9992 !important;
border-bottom-color: #ffffff !important;
border-radius: 6px 6px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
width: 220px !important;
min-width: 220px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
border: 1px solid #9f9992 !important;
border-bottom-color: #9f9992 !important;
border-radius: 6px 6px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
overflow: hidden !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control:is(:hover,:focus-within) {
background: linear-gradient(180deg,#ffffff 0%,#ece8e3 100%) !important;
border-color: #8d8882 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control > svg {
display: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
right: 15px !important;
width: 0 !important;
height: 0 !important;
margin-top: -2px !important;
border-left: 5px solid transparent !important;
border-right: 5px solid transparent !important;
border-top: 7px solid #555 !important;
pointer-events: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: relative !important;
inset: auto !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 40px 0 18px !important;
opacity: 1 !important;
color: #1f1f1f !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 400 !important;
line-height: 44px !important;
box-shadow: none !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select:focus {
outline: 0 !important;
box-shadow: none !important;
}
@media (max-width: 720px) {
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
flex-wrap: wrap !important;
gap: 6px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
min-width: 140px !important;
height: 44px !important;
margin-right: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
width: min(100%, 220px) !important;
min-width: 160px !important;
height: 44px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
line-height: 42px !important;
}
}
/* =========================================================
r917 — Bio/Plaatje bewerken afronding
- Emoji-select als compact icoon
- Geplaatste emoji's op teksthoogte
- Bio headerknoppen definitief dezelfde popupstijl
- Dubbele groene rand bij Plaatje bewerken verwijderd
========================================================= */
/* Emoji: actieve categorie blijft tekst-tab; select ernaast is alleen icoon. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
position: relative !important;
display: grid !important;
flex: 0 0 46px !important;
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 !important;
place-items: center !important;
overflow: hidden !important;
color: #222 !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
border: 1px solid #9f9992 !important;
border-radius: 6px 6px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control:is(:hover,:focus-within) {
background: linear-gradient(180deg,#fff 0%,#ece8e3 100%) !important;
border-color: #8d8882 !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control::after {
content: none !important;
display: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control > svg {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 22px !important;
height: 22px !important;
fill: currentColor !important;
stroke: none !important;
pointer-events: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
color: transparent !important;
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
}
/* In Bio ingevoegde en op profiel getoonde emoji's lopen mee met tekstgrootte. */
html body #bioEdit.profile-popup-media-clean #bioEditField img.profile-inline-emoji-image,
html body #bioEdit.profile-popup-media-clean #bioEditField img.snoeten-emoji-rendered,
html body #bioEdit.profile-popup-media-clean #bioEditField img[data-snoeten-emoji],
html body #profile #bio-text img.profile-inline-emoji-image,
html body #profile #bio-text img.snoeten-emoji-rendered,
html body #profile #bio-text img[data-snoeten-emoji] {
display: inline-block !important;
width: auto !important;
height: 1.05em !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 1.25em !important;
max-height: 1.05em !important;
margin: 0 .08em !important;
padding: 0 !important;
object-fit: contain !important;
vertical-align: -.12em !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Bio-headerknoppen: exact dezelfde familie als de overige nieuwe popupvensters. */
html body #bioForm #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls.guestbook-window-controls,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls.guestbook-window-controls {
position: static !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
}
html body #bioForm #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control {
position: relative !important;
box-sizing: border-box !important;
display: block !important;
flex: 0 0 28px !important;
width: 28px !important;
min-width: 28px !important;
height: 25px !important;
min-height: 25px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
appearance: none !important;
-webkit-appearance: none !important;
opacity: 1 !important;
filter: none !important;
overflow: hidden !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
border: 1px solid #707070 !important;
border-radius: 3px !important;
background-color: #dedede !important;
background-image: linear-gradient(to bottom,#f2f2f2 0%,#ebebeb 42%,#dddddd 47%,#cfcfcf 100%) !important;
box-shadow: none !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button:is(.bio-window-minimize,.bio-window-maximize):is(:hover,:focus-visible) {
border-color: #626262 !important;
background-color: #e7e7e7 !important;
background-image: linear-gradient(to bottom,#fff 0%,#f2f2f2 42%,#e5e5e5 47%,#d7d7d7 100%) !important;
box-shadow: 0 0 3px rgba(0,0,0,.22) !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button:is(.bio-window-minimize,.bio-window-maximize):active {
background-color: #dfdfdf !important;
background-image: linear-gradient(to bottom,#d5d5d5 0%,#e0e0e0 42%,#ececec 47%,#f2f2f2 100%) !important;
box-shadow: inset 0 -1px 6px rgba(0,0,0,.18) !important;
}
html body #bioForm #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close {
border-color: #8f2923 !important;
background-color: #d85b52 !important;
background-image: linear-gradient(to bottom,#f7aaa4 0%,#ed8178 42%,#dc5c52 47%,#c84239 100%) !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close:is(:hover,:focus-visible) {
border-color: #792019 !important;
background-color: #e96a61 !important;
background-image: linear-gradient(to bottom,#ffc0bb 0%,#f58f86 42%,#e9675d 47%,#d24a40 100%) !important;
box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
outline: 0 !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close:active {
background-color: #c84a41 !important;
background-image: linear-gradient(to bottom,#b7352d 0%,#ca453c 42%,#dc5b51 47%,#eb766d 100%) !important;
box-shadow: inset 0 -1px 6px rgba(83,18,14,.30) !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-minimize::before {
left: 7px !important;
bottom: 6px !important;
width: 12px !important;
height: 2px !important;
background: #4e4e4e !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-maximize::before {
left: 5px !important;
top: 5px !important;
width: 12px !important;
height: 10px !important;
border: 2px solid #4e4e4e !important;
border-top-width: 3px !important;
background: transparent !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-close::before,
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-close::after {
left: 5px !important;
top: 10px !important;
width: 13px !important;
height: 2px !important;
background: #fff !important;
}
/* Plaatje bewerken: maar één groene buitenrand. Oude outline/ring volledig weg. */
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup {
border: 4px solid #557A3E !important;
outline: 0 !important;
outline-offset: 0 !important;
box-shadow: 0 3px 8px rgba(0,0,0,.30), 0 16px 34px rgba(0,0,0,.24) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:focus,
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:focus-visible {
outline: 0 !important;
box-shadow: 0 3px 8px rgba(0,0,0,.30), 0 16px 34px rgba(0,0,0,.24) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup > .picture-editor-window-body,
html body > .picture-editor-window-overlay .profile-bio-picture-editor-mount,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-view,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-white {
outline: 0 !important;
box-shadow: none !important;
}
/* r918 — Emoji-tabgroep strak aaneengesloten: actieve tab hoger, icoonselect iets lager. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
display: flex !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0 !important;
min-height: 46px !important;
margin: 0 0 -1px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
display: flex !important;
flex: 0 0 auto !important;
align-items: flex-end !important;
margin: 0 !important;
padding: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
position: relative !important;
z-index: 3 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 160px !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 22px !important;
color: #222222 !important;
-webkit-text-fill-color: #222222 !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 400 !important;
line-height: 1 !important;
text-shadow: none !important;
background: #ffffff !important;
border: 1px solid #9f9992 !important;
border-bottom-color: #ffffff !important;
border-radius: 6px 0 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
position: relative !important;
z-index: 2 !important;
display: grid !important;
flex: 0 0 44px !important;
place-items: center !important;
box-sizing: border-box !important;
width: 44px !important;
min-width: 44px !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 0 0 -1px !important;
padding: 0 !important;
color: #333333 !important;
-webkit-text-fill-color: #333333 !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
border: 1px solid #9f9992 !important;
border-radius: 0 6px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control:is(:hover,:focus-within) {
color: #222222 !important;
-webkit-text-fill-color: #222222 !important;
background: linear-gradient(180deg,#ffffff 0%,#ece8e3 100%) !important;
border-color: #8d8882 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control > svg {
display: block !important;
width: 21px !important;
height: 21px !important;
color: #333333 !important;
fill: currentColor !important;
stroke: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
@media (max-width: 720px) {
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
flex-wrap: nowrap !important;
gap: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
min-width: 132px !important;
height: 44px !important;
min-height: 44px !important;
margin: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
width: 42px !important;
min-width: 42px !important;
height: 40px !important;
min-height: 40px !important;
margin-left: -1px !important;
}
}
/* r919 — actieve Emoji-tab terug blauw. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: 0 1px 0 rgba(34, 66, 110, .35) !important;
background: linear-gradient(180deg, #90b6e3 0%, #6f96cc 52%, #5b81ba 100%) !important;
border-color: #5a7ead !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]):is(:hover,:focus-visible) {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: linear-gradient(180deg, #9ec1ea 0%, #7ca2d6 52%, #658bc2 100%) !important;
border-color: #5479aa !important;
}
/* r920 — Emoji-tabgroep zoals de tabs van Plaatje bewerken; Bio-headerknoppen idem. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
display: flex !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0 !important;
min-height: 52px !important;
margin: 0 0 -1px !important;
padding: 6px 0 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
display: flex !important;
flex: 0 0 auto !important;
align-items: flex-end !important;
margin: 0 !important;
padding: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
position: relative !important;
z-index: 3 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 172px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
color: #202020 !important;
-webkit-text-fill-color: #202020 !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 400 !important;
line-height: 1 !important;
text-shadow: none !important;
white-space: nowrap !important;
background: #ffffff !important;
border: 1px solid #a9a39c !important;
border-bottom-color: #ffffff !important;
border-radius: 3px 3px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
position: relative !important;
z-index: 2 !important;
display: grid !important;
flex: 0 0 40px !important;
place-items: center !important;
box-sizing: border-box !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 0 0 -1px !important;
padding: 0 !important;
color: #444444 !important;
-webkit-text-fill-color: #444444 !important;
background: #ffffff !important;
border: 1px solid #a9a39c !important;
border-bottom-color: #ffffff !important;
border-radius: 3px 3px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control:is(:hover,:focus-within) {
color: #222222 !important;
-webkit-text-fill-color: #222222 !important;
background: #ffffff !important;
border-color: #8d8882 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control > svg {
display: block !important;
width: 18px !important;
height: 18px !important;
color: #444444 !important;
fill: currentColor !important;
stroke: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control::after {
content: none !important;
display: none !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid {
border-color: #a9a39c !important;
border-radius: 0 4px 4px 4px !important;
}
@media (max-width: 720px) {
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
min-height: 48px !important;
padding-top: 4px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
min-width: 148px !important;
height: 38px !important;
min-height: 38px !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
}
}
/* Bio-headerknoppen exact dezelfde kleurfamilie als Plaatje bewerken. */
html body #bioForm #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control:not(.bio-window-close),
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control:not(.bio-window-close) {
border-color: #707070 !important;
background-color: #dddddd !important;
background-image: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control:not(.bio-window-close):hover,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control:not(.bio-window-close):focus-visible {
border-color: #626262 !important;
background-color: #f2f2f2 !important;
background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 42%, #e8e8e8 47%, #d9d9d9 100%) !important;
box-shadow: 0 0 3px rgba(0,0,0,.22) !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control:not(.bio-window-close):active {
border-color: #666666 !important;
background-color: #d9d9d9 !important;
background-image: linear-gradient(to bottom, #cfcfcf 0%, #dadada 42%, #e5e5e5 47%, #eeeeee 100%) !important;
box-shadow: inset 0 -1px 6px rgba(0,0,0,.18) !important;
}
html body #bioForm #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close {
border-color: #8f2923 !important;
background-color: #c84239 !important;
background-image: linear-gradient(to bottom, #f7aaa4 0%, #ed8178 42%, #dc5c52 47%, #c84239 100%) !important;
box-shadow: none !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close:hover,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close:focus-visible {
border-color: #792019 !important;
background-color: #d24a40 !important;
background-image: linear-gradient(to bottom, #ffc0bb 0%, #f58f86 42%, #e9675d 47%, #d24a40 100%) !important;
box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.bio-window-close:active {
border-color: #742019 !important;
background-color: #b7352d !important;
background-image: linear-gradient(to bottom, #b7352d 0%, #ca453c 42%, #dc5b51 47%, #eb766d 100%) !important;
box-shadow: inset 0 -1px 6px rgba(83,18,14,.30) !important;
}
/* r921 — Emoji dropdown leesbaar, Plaatje-tabs actief blauw, Bio-close rood, Plaatje-venster minder hoog. */
/* Emoji: zwarte letters in de categorie-select en grijze verloopknop. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control:is(:hover,:focus-within) {
color: #333333 !important;
-webkit-text-fill-color: #333333 !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
border-color: #a9a39c !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control > svg {
color: #444444 !important;
fill: currentColor !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select option {
color: #222222 !important;
-webkit-text-fill-color: #222222 !important;
background: #ffffff !important;
}
/* Actieve Emoji-tab geen aparte hover-state meer. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]):hover,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]):focus-visible {
color: #202020 !important;
-webkit-text-fill-color: #202020 !important;
background: #ffffff !important;
border-color: #a9a39c !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
text-shadow: none !important;
}
/* Plaatje bewerken: actieve tabs weer blauw. */
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:is(.is-active,[aria-selected="true"]) {
color: #ffffff !important;
background: linear-gradient(180deg,#90b6e3 0%,#6f96cc 52%,#5b81ba 100%) !important;
border-color: #5a7ead !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:is(.is-active,[aria-selected="true"]):hover,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:is(.is-active,[aria-selected="true"]):focus-visible {
color: #ffffff !important;
background: linear-gradient(180deg,#9ec1ea 0%,#7ca2d6 52%,#658bc2 100%) !important;
border-color: #5479aa !important;
}
/* Plaatje bewerken: vensterhoogte strakker op inhoud zodat de witte rand onderaan verdwijnt. */
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup {
grid-template-rows: 40px auto !important;
height: auto !important;
max-height: calc(100vh - 32px) !important;
min-height: 0 !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup > .picture-editor-window-body,
html body > .picture-editor-window-overlay .profile-bio-picture-editor-mount,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-view,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-white {
height: auto !important;
min-height: 0 !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-view {
grid-template-rows: auto 58px !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-white {
grid-template-rows: 42px auto !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-preview,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-panels {
height: auto !important;
min-height: 360px !important;
}
/* Bio bewerken: sluitknop expliciet rood met hover. */
html body #bioForm #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control.guestbook-window-close.bio-window-close,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control.guestbook-window-close.bio-window-close {
border-color: #8f2923 !important;
background-color: #c84239 !important;
background-image: linear-gradient(to bottom, #f7aaa4 0%, #ed8178 42%, #dc5c52 47%, #c84239 100%) !important;
color: transparent !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control.guestbook-window-close.bio-window-close:hover,
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control.guestbook-window-close.bio-window-close:focus-visible {
border-color: #792019 !important;
background-color: #d24a40 !important;
background-image: linear-gradient(to bottom, #ffc0bb 0%, #f58f86 42%, #e9675d 47%, #d24a40 100%) !important;
box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header.guestbook-window-header > .bio-window-controls > button.guestbook-window-control.guestbook-window-close.bio-window-close:active {
border-color: #742019 !important;
background-color: #b7352d !important;
background-image: linear-gradient(to bottom, #b7352d 0%, #ca453c 42%, #dc5b51 47%, #eb766d 100%) !important;
box-shadow: inset 0 -1px 6px rgba(83,18,14,.30) !important;
}
/* r922 — Emoji scrollt als volledig blok; tabs strak aaneen. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body {
display: block !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-gutter: stable !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .profile-bio-emoji-popover,
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-picker {
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-panel-body .emoji-grid {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100% !important;
min-height: 40px !important;
margin: 0 0 -1px !important;
padding: 0 !important;
overflow: visible !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
display: flex !important;
flex: 0 0 auto !important;
align-items: flex-end !important;
margin: 0 !important;
padding: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
border-radius: 3px 0 0 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
display: grid !important;
flex: 0 0 38px !important;
place-items: center !important;
box-sizing: border-box !important;
width: 38px !important;
min-width: 38px !important;
height: 36px !important;
min-height: 36px !important;
margin: 0 0 0 -1px !important;
padding: 0 !important;
border-radius: 0 3px 0 0 !important;
}
/* r922 — Plaatje bewerken: actief = oude hoverkleur; geen hover op niet-actief. */
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:not(.is-active):not([aria-selected="true"]):hover,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:not(.is-active):not([aria-selected="true"]):focus-visible {
color: #202020 !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:is(.is-active,[aria-selected="true"]) {
color: #111111 !important;
background: #e5f1fb !important;
border-color: #70a9d8 !important;
box-shadow: none !important;
}
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:is(.is-active,[aria-selected="true"]):hover,
html body > .picture-editor-window-overlay .profile-bio-picture-edit-tabs .profile-photo-edit-tab:is(.is-active,[aria-selected="true"]):focus-visible {
color: #111111 !important;
background: #e5f1fb !important;
border-color: #70a9d8 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* r924 — Emoji actieve tab + icoon-tab volledig aaneengesloten zonder kier. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar {
gap: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories {
gap: 0 !important;
margin-right: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
position: relative !important;
z-index: 2 !important;
margin-right: 0 !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-select-control {
position: relative !important;
z-index: 1 !important;
margin-left: -1px !important;
margin-right: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 4px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* r925 — Plaatje bewerken: geen lege witte strook meer onder de footer.
Oude 100%-hoogtes uit picture-editor-window-r614 worden hier definitief geneutraliseerd. */
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) {
height: fit-content !important;
block-size: fit-content !important;
min-height: 0 !important;
max-height: calc(100vh - 32px) !important;
grid-template-rows: 40px max-content !important;
align-content: start !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) > .picture-editor-window-body {
display: block !important;
height: fit-content !important;
block-size: fit-content !important;
min-height: 0 !important;
max-height: calc(100vh - 72px) !important;
align-self: start !important;
overflow: hidden !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-editor-mount,
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-view {
height: fit-content !important;
block-size: fit-content !important;
min-height: 0 !important;
max-height: none !important;
align-self: start !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-view {
grid-template-rows: max-content 58px !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-white {
height: fit-content !important;
block-size: fit-content !important;
min-height: 0 !important;
grid-template-rows: 42px minmax(360px, 1fr) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-preview,
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-panels {
height: 500px !important;
min-height: 500px !important;
max-height: min(500px, calc(100vh - 172px)) !important;
}
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-footer {
align-self: start !important;
margin-bottom: 0 !important;
}
@media (max-height: 720px) {
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-preview,
html body > .picture-editor-window-overlay > .picture-editor-window.snoeten-site-popup:not(.is-maximized):not(.is-minimized) .profile-bio-picture-edit-panels {
height: calc(100vh - 172px) !important;
min-height: 320px !important;
max-height: calc(100vh - 172px) !important;
}
}
/* =========================================================
r926 — Prikbordbericht plaatsen: Plaatjes + Emoji dezelfde
vormgeving als Bio bewerken. Bio zelf blijft verder intact.
========================================================= */
html body #form-posts #bioEdit :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content) {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 360px !important;
height: 100% !important;
max-height: calc(100dvh - 200px) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 0 !important;
border-left: 1px solid #d5dbe0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
html body #form-posts #bioEdit :is(.profile-bio-picture-tools-content,.profile-bio-emoji-tools-content)[hidden] { display: none !important; }
html body #form-posts #bioEdit :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) {
box-sizing: border-box !important;
display: flex !important;
flex: 0 0 auto !important;
min-height: 50px !important;
margin: 0 !important;
padding: 8px 12px 8px 16px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #d5dbe0 !important;
}
html body #form-posts #bioEdit :is(.profile-bio-picture-panel-header,.profile-bio-emoji-panel-header) h2 {
margin: 0 !important;
color: #222222 !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: 20px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
html body #form-posts #bioEdit :is(.profile-bio-picture-close,.profile-bio-emoji-close) {
width: 34px !important;
min-width: 34px !important;
height: 30px !important;
min-height: 30px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 20px !important;
line-height: 1 !important;
}
html body #form-posts #bioEdit :is(.profile-bio-picture-panel-body,.profile-bio-emoji-panel-body) {
box-sizing: border-box !important;
display: block !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 12px !important;
background: #ffffff !important;
border: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-picture-panel-body { overflow: auto !important; }
html body #form-posts #bioEdit .profile-bio-picture-storage {
display: block !important;
margin: 0 0 10px !important;
color: #555 !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
line-height: 1.4 !important;
}
html body #form-posts #bioEdit .profile-bio-picture-panel-body .photo-manager-ui {
display: flex !important;
min-height: 0 !important;
flex-direction: column !important;
gap: 10px !important;
background: #ffffff !important;
}
html body #form-posts #bioEdit .profile-bio-picture-panel-body .picture-list {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
gap: 14px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
html body #form-posts #bioEdit .profile-bio-picture-panel-body .picture-list > .profile-bio-picture-card {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
flex-direction: column !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid #d5dbe0 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
html body #form-posts #bioEdit .profile-bio-picture-preview {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-height: 170px !important;
aspect-ratio: 4 / 3 !important;
padding: 0 !important;
place-items: center !important;
overflow: hidden !important;
background-color: #fff !important;
background-image: linear-gradient(45deg,#e0e0e0 25%,transparent 25%),linear-gradient(-45deg,#e0e0e0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e0e0e0 75%),linear-gradient(-45deg,transparent 75%,#e0e0e0 75%) !important;
background-position: 0 0,0 8px,8px -8px,-8px 0 !important;
background-size: 16px 16px !important;
}
html body #form-posts #bioEdit .profile-bio-picture-preview img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
background: transparent !important;
}
html body #form-posts #bioEdit .profile-bio-picture-card-actions {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
margin: 0 !important;
padding: 10px !important;
align-items: center !important;
gap: 10px !important;
background: #f3f0e9 !important;
border-top: 1px solid #d5dbe0 !important;
}
html body #form-posts #bioEdit .profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action {
box-sizing: border-box !important;
display: inline-flex !important;
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
height: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 8px !important;
align-items: center !important;
justify-content: center !important;
color: #000 !important;
background: linear-gradient(to bottom,#f2f2f2 0%,#ebebeb 42%,#dddddd 47%,#cfcfcf 100%) !important;
border: 1px solid #707070 !important;
border-radius: 3px !important;
box-shadow: none !important;
}
html body #form-posts #bioEdit .profile-bio-picture-panel-body .picture-list .profile-bio-picture-card-action:is(:hover,:focus-visible) {
color: #000 !important;
background: linear-gradient(to bottom,#eaf6fd 0%,#d9f0fc 42%,#bee6fd 47%,#bce5fc 58%,#a7d9f5 100%) !important;
border-color: #3c7fb1 !important;
outline: 0 !important;
box-shadow: 0 0 3px #a7d9f5 !important;
}
html body #form-posts #bioEdit .profile-bio-picture-card-action svg {
display: block !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.8 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html body #form-posts #bioEdit .picture-upload-drop {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-height: 132px !important;
margin: 0 !important;
padding: 18px 14px !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
gap: 6px !important;
color: #5c5c5c !important;
text-align: center !important;
background: #ffffff !important;
border: 2px dashed #aaa !important;
border-radius: 8px !important;
}
html body #form-posts #bioEdit .picture-upload-drop-icon {
width: 42px !important;
height: 42px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body {
display: block !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-gutter: stable !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .profile-bio-emoji-popover,
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-picker {
position: static !important;
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar {
position: relative !important;
z-index: 3 !important;
box-sizing: border-box !important;
display: flex !important;
flex-wrap: nowrap !important;
width: 100% !important;
min-height: 40px !important;
margin: 0 0 -1px !important;
padding: 0 !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0 !important;
overflow: visible !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories {
display: flex !important;
flex: 0 0 auto !important;
align-items: flex-end !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories > button { display: none !important; }
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
position: relative !important;
z-index: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 160px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
color: #202020 !important;
-webkit-text-fill-color: #202020 !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 400 !important;
line-height: 1 !important;
text-shadow: none !important;
white-space: nowrap !important;
background: #ffffff !important;
border: 1px solid #a9a39c !important;
border-bottom-color: #ffffff !important;
border-radius: 4px 4px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]):is(:hover,:focus-visible) {
color: #202020 !important;
-webkit-text-fill-color: #202020 !important;
background: #ffffff !important;
border-color: #a9a39c !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control {
position: relative !important;
z-index: 1 !important;
display: grid !important;
flex: 0 0 38px !important;
box-sizing: border-box !important;
width: 38px !important;
min-width: 38px !important;
height: 36px !important;
min-height: 36px !important;
margin: 0 0 0 -1px !important;
padding: 0 !important;
place-items: center !important;
color: #333333 !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
border: 1px solid #a9a39c !important;
border-radius: 0 4px 0 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control > svg {
display: block !important;
width: 18px !important;
height: 18px !important;
color: #444444 !important;
fill: currentColor !important;
stroke: none !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
color: transparent !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select option {
color: #222222 !important;
background: #ffffff !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px !important;
grid-template-columns: repeat(5,minmax(0,1fr)) !important;
align-content: start !important;
gap: 7px !important;
overflow: visible !important;
background: #ffffff !important;
border: 1px solid #a9a39c !important;
border-radius: 0 4px 4px 4px !important;
box-shadow: none !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-width: 0 !important;
min-height: 44px !important;
margin: 0 !important;
padding: 5px !important;
place-items: center !important;
color: #111 !important;
font: 400 24px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif !important;
cursor: pointer !important;
background: #ffffff !important;
border: 1px solid #aaa !important;
border-radius: 0 !important;
box-shadow: inset 1px 1px 0 #fff !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
background: #e8f2ff !important;
border-color: #316ac5 !important;
outline: 1px dotted #111 !important;
outline-offset: -4px !important;
}
/* Bio + Prikbord: actieve Emoji-tab heeft ook rechtsboven radius. */
html body #bioEdit.profile-popup-media-clean .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]),
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* Bio sluitknop: harde CSS fallback. */
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-controls > button.bio-window-close {
-webkit-appearance: none !important;
appearance: none !important;
border: 1px solid #8f2923 !important;
background: linear-gradient(to bottom,#f7aaa4 0%,#ed8178 42%,#dc5c52 47%,#c84239 100%) !important;
background-color: #c84239 !important;
}
html body #bioEdit.profile-popup-media-clean > .bio-window-header .bio-window-controls > button.bio-window-close:is(:hover,:focus-visible) {
border-color: #792019 !important;
background: linear-gradient(to bottom,#ffc0bb 0%,#f58f86 42%,#e9675d 47%,#d24a40 100%) !important;
background-color: #d24a40 !important;
box-shadow: 0 0 3px rgba(145,37,30,.48) !important;
}
/* =========================================================
r927 — Prikbord: Emoji zonder rand + hover exact als Bio.
Prikbord plaatje bewerken gebruikt dezelfde popup-layout
als de Bio-variant door de losse picture-editor selectors
ook op de status/guestbook overlay te forceren.
========================================================= */
/* Prikbord Emoji: geen rand op de tegels of img; hover exact zoals Bio aanpassen. */
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid {
border: 1px solid #a9a39c !important;
border-radius: 0 4px 4px 4px !important;
background: #ffffff !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button {
background: transparent !important;
border: 0 !important;
border-radius: 5px !important;
box-shadow: none !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
background: #dceefd !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button img,
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button .emoji,
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button .emoji-image {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* r929 — Plaatje bewerken: extra r927 override verwijderd.
Bio en Prikbord gebruiken weer de stabiele gedeelde r926-layout. */
/* =========================================================
r928 — Profielgegevens: introductieblok weg + veldkaarten lichtgrijs.
========================================================= */
html body #detailsModal.profile-popup-media-clean .profile-details-panel-heading {
display: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-panel {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-form-grid,
html body #detailsModal.profile-popup-media-clean .profile-details-account-list,
html body #detailsModal.profile-popup-media-clean .profile-details-account-form-grid {
display: grid !important;
gap: 26px !important;
margin: 0 !important;
padding: 0 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-field-card,
html body #detailsModal.profile-popup-media-clean .profile-details-account-card,
html body :is(#emailModal,#passwordModal,#plusModal).profile-popup-media-clean :is(.profile-details-account-form,.profile-details-help-card,.profile-details-account-card) {
box-sizing: border-box !important;
background: #f3f3f3 !important;
border: 1px solid #cfd5d9 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-field-card {
padding: 14px 14px 16px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-account-card,
html body :is(#emailModal,#passwordModal,#plusModal).profile-popup-media-clean :is(.profile-details-account-form,.profile-details-help-card,.profile-details-account-card) {
padding: 16px !important;
}
/* r930 — Prikbord Emoji hover/focus exact gelijk aan Bio aanpassen. */
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button {
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
box-shadow: none !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
background: #f7f5f2 !important;
border-color: #a8a39d !important;
box-shadow: none !important;
outline: 0 !important;
}
/* =========================================================
r931 — Prikbord Emoji volledig gelijk aan de goede Bio-versie.
========================================================= */
html body #form-posts #bioEdit .profile-bio-emoji-panel-body {
display: block !important;
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-gutter: stable !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .profile-bio-emoji-popover,
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-picker {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100% !important;
min-height: 40px !important;
margin: 0 0 -1px !important;
padding: 0 !important;
overflow: visible !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories {
display: flex !important;
flex: 0 0 auto !important;
align-items: flex-end !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories > button { display: none !important; }
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]) {
position: relative !important;
z-index: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
min-width: 160px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 18px !important;
color: #202020 !important;
-webkit-text-fill-color: #202020 !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
font-weight: 400 !important;
line-height: 1 !important;
text-shadow: none !important;
white-space: nowrap !important;
background: #ffffff !important;
border: 1px solid #a9a39c !important;
border-bottom-color: #ffffff !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-bar .emoji-categories > button:is(.is-active,[aria-selected="true"]):is(:hover,:focus-visible) {
color: #202020 !important;
-webkit-text-fill-color: #202020 !important;
background: #ffffff !important;
border-color: #a9a39c !important;
border-bottom-color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control {
position: relative !important;
z-index: 1 !important;
display: grid !important;
flex: 0 0 38px !important;
box-sizing: border-box !important;
width: 38px !important;
min-width: 38px !important;
height: 36px !important;
min-height: 36px !important;
margin: 0 0 0 -1px !important;
padding: 0 !important;
place-items: center !important;
color: #333333 !important;
background: linear-gradient(180deg,#f7f5f2 0%,#e2ddd6 100%) !important;
border: 1px solid #a9a39c !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 4px !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control > svg {
display: block !important;
width: 18px !important;
height: 18px !important;
color: #444444 !important;
fill: currentColor !important;
stroke: none !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
color: transparent !important;
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-category-select-control .profile-bio-emoji-category-select option {
color: #222222 !important;
background: #ffffff !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid {
box-sizing: border-box !important;
display: grid !important;
flex: 1 1 auto !important;
width: 100% !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px !important;
grid-template-columns: repeat(5,minmax(0,1fr)) !important;
gap: 7px !important;
align-content: start !important;
background: #ffffff !important;
border: 1px solid #9f9992 !important;
border-radius: 0 4px 4px 4px !important;
box-shadow: none !important;
overflow: visible !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button {
box-sizing: border-box !important;
display: grid !important;
place-items: center !important;
width: 100% !important;
min-width: 0 !important;
min-height: 48px !important;
margin: 0 !important;
padding: 4px !important;
color: #111111 !important;
font: 400 23px/1 "Segoe UI Emoji","Apple Color Emoji",sans-serif !important;
cursor: pointer !important;
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
box-shadow: none !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button:is(:hover,:focus-visible) {
background: #f7f5f2 !important;
border-color: #a8a39d !important;
box-shadow: none !important;
outline: 0 !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button img,
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button .emoji,
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button .emoji-image {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body #form-posts #bioEdit .profile-bio-emoji-panel-body .emoji-grid button.is-image-emoji img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 32px !important;
max-height: 32px !important;
margin: auto !important;
object-fit: contain !important;
}
/* r932 — Profielgegevens echt: introblok weg, huidige veldkaarten lichtgrijs. */
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-intro,
html body #detailsModal.profile-popup-media-clean .profile-details-panel-heading {
display: none !important;
}
html body #detailsModal.profile-popup-media-clean :is(.profile-details-vormgeving-field-card,.profile-details-field-card,.profile-layout-option-card) {
background: #f3f3f3 !important;
border: 1px solid #cfd5d9 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
/* r933 — Ingevoegde emoji's in Prikbordbericht plaatsen volgen de tekstgrootte. */
html body #form-posts #bioEdit #bioEditField img.profile-inline-emoji-image,
html body #form-posts #bioEdit #bioEditField img.snoeten-emoji-rendered,
html body #form-posts #bioEdit #bioEditField img[data-snoeten-emoji],
html body #form-posts #bioEdit #bioEditField img.snoeten-old-smiley {
display: inline-block !important;
width: auto !important;
height: 1.05em !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: 1.25em !important;
max-height: 1.05em !important;
margin: 0 .08em !important;
padding: 0 !important;
object-fit: contain !important;
vertical-align: -.12em !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* r934 — Account exporteren + soft-delete. */
html body #detailsModal.profile-popup-media-clean .profile-account-export-card,
html body #detailsModal.profile-popup-media-clean .profile-account-delete-card {
background: #f3f3f3 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-card {
border-color: #d6b1ae !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-button {
color: #7d1914 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-button:hover,
html body #detailsModal.profile-popup-media-clean .profile-account-delete-button:focus-visible {
color: #5f100c !important;
}
/* r936 — Account > Profiel verwijderen: veilige tweestapsbevestiging in dezelfde kaart. */
html body #detailsModal.profile-popup-media-clean .profile-account-delete-card {
align-content: start !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-confirmation {
box-sizing: border-box !important;
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 12px 0 0 !important;
padding: 14px !important;
background: #ffffff !important;
border: 1px solid #c8cdd2 !important;
border-radius: 4px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-confirmation[hidden] {
display: none !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-warning {
margin: 0 0 12px !important;
line-height: 1.45 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-field {
display: grid !important;
gap: 5px !important;
margin: 0 0 10px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-field > span {
font-weight: 700 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-field > input {
box-sizing: border-box !important;
width: 100% !important;
min-height: 38px !important;
padding: 7px 10px !important;
color: #222 !important;
background: #fff !important;
border: 1px solid #bfc6cc !important;
border-radius: 3px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-actions {
display: flex !important;
justify-content: flex-end !important;
gap: 8px !important;
margin-top: 12px !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-confirm-button {
color: #fff !important;
background: linear-gradient(180deg,#df7067 0%,#c8463d 100%) !important;
border-color: #8f2923 !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-confirm-button:hover,
html body #detailsModal.profile-popup-media-clean .profile-account-delete-confirm-button:focus-visible {
background: linear-gradient(180deg,#ee8178 0%,#d75349 100%) !important;
border-color: #792019 !important;
}
html body #detailsModal.profile-popup-media-clean [data-action="prepare-delete-profile"][hidden] {
display: none !important;
}
/* r937 — Account > Profiel verwijderen: kaart neutraal zoals de overige Account-blokken. */
html body #detailsModal.profile-popup-media-clean .profile-account-delete-card {
background: #f3f3f3 !important;
border-color: #cfd5d9 !important;
color: inherit !important;
}
html body #detailsModal.profile-popup-media-clean .profile-account-delete-button,
html body #detailsModal.profile-popup-media-clean .profile-account-delete-button:hover,
html body #detailsModal.profile-popup-media-clean .profile-account-delete-button:focus-visible {
color: inherit !important;
}
/* =========================================================
r938 — Account: subvensters als verticale Account-kaarten.
========================================================= */
html body #detailsModal.profile-popup-media-clean [data-profile-details-save][hidden] {
display: none !important;
}
/* Account-kaarten gelijkmatig, nu Snoeten Plus tijdelijk weg is. */
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-account-grid {
grid-auto-rows: minmax(112px, auto) !important;
align-items: stretch !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-vormgeving-account-card {
min-height: 112px !important;
height: 100% !important;
}
html body #detailsModal.profile-popup-media-clean .profile-details-account-copy > p {
margin-bottom: 0 !important;
}
/* E-mail en wachtwoord: informatiekaart boven, formulierkaart eronder. */
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-details-editor-field {
padding: 20px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: #ffffff !important;
}
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-account-substack {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
gap: 14px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body :is(#emailModal,#passwordModal).profile-popup-media-clean :is(.profile-account-info-card,.profile-account-edit-card) {
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 16px 18px !important;
gap: 8px !important;
color: #222222 !important;
background: #f3f3f3 !important;
border: 1px solid #cfd5d9 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-account-info-card h3 {
margin: 0 0 3px !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
line-height: 1.25 !important;
font-weight: 700 !important;
}
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-account-info-card p {
margin: 0 !important;
color: #555555 !important;
line-height: 1.45 !important;
}
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-account-edit-card label {
display: grid !important;
gap: 5px !important;
margin: 0 !important;
color: #222222 !important;
font-weight: 700 !important;
}
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-account-edit-card input {
box-sizing: border-box !important;
width: 100% !important;
min-height: 38px !important;
margin: 0 0 4px !important;
padding: 7px 10px !important;
color: #222222 !important;
background: #ffffff !important;
border: 1px solid #bfc6cc !important;
border-radius: 3px !important;
box-shadow: none !important;
}
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-account-edit-card input:focus {
border-color: #6d96c4 !important;
outline: 0 !important;
box-shadow: 0 0 0 2px rgba(75,114,170,.12) !important;
}
@media (max-width: 760px) {
html body :is(#emailModal,#passwordModal).profile-popup-media-clean .profile-details-editor-field {
padding: 14px !important;
}
}
/* =========================================================
r939 — E-mail/Wachtwoord: echt dezelfde Account-popup.
Informatie boven, formulier eronder; oude 2-koloms regels uitschakelen.
========================================================= */
html body :is(#emailModal,#passwordModal).profile-account-window-dialog {
box-sizing: border-box !important;
width: min(760px, calc(100vw - 32px)) !important;
max-width: 760px !important;
min-width: min(520px, calc(100vw - 32px)) !important;
height: auto !important;
max-height: calc(100vh - 32px) !important;
overflow: hidden !important;
background: #ffffff !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog > .profile-details-editor-content {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: auto !important;
background: #ffffff !important;
border: 0 !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-details-editor-field {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 20px !important;
overflow: visible !important;
background: #ffffff !important;
border: 0 !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-account-substack {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 14px !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-account-info-card { order: 1 !important; }
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-account-edit-card { order: 2 !important; }
html body :is(#emailModal,#passwordModal).profile-account-window-dialog :is(.profile-account-info-card,.profile-account-edit-card) {
position: static !important;
float: none !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 16px 18px !important;
gap: 8px !important;
color: #222222 !important;
background: #f3f3f3 !important;
border: 1px solid #cfd5d9 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-account-info-card h3 {
margin: 0 0 3px !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
line-height: 1.25 !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-account-info-card p {
margin: 0 !important;
color: #555555 !important;
line-height: 1.45 !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-account-edit-card label {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
gap: 5px !important;
width: 100% !important;
margin: 0 !important;
color: #222222 !important;
font-weight: 700 !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-account-edit-card input {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 38px !important;
margin: 0 0 4px !important;
padding: 7px 10px !important;
color: #222222 !important;
background: #ffffff !important;
border: 1px solid #bfc6cc !important;
border-radius: 3px !important;
box-shadow: none !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog > .profile-details-editor-footer {
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
background: #f3f0e9 !important;
}
@media (max-width: 620px) {
html body :is(#emailModal,#passwordModal).profile-account-window-dialog {
width: calc(100vw - 16px) !important;
min-width: 0 !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog .profile-details-editor-field {
padding: 14px !important;
}
}
/* =========================================================
r940 — herstel popup-openlogica.
E-mail/Wachtwoord zijn standaard verborgen en alleen zichtbaar met .is-open.
De verticale Account-layout uit r939 blijft behouden.
========================================================= */
html body :is(#emailModal,#passwordModal).profile-account-window-dialog:not(.is-open) {
display: none !important;
}
html body :is(#emailModal,#passwordModal).profile-account-window-dialog.is-open {
display: grid !important;
grid-template-areas:
"window-header"
"field"
"footer" !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 40px minmax(0, auto) 58px !important;
}
/* =========================================================
r949 — Profiel verwijderen in eigen Account-popupvenster.
========================================================= */
html body #deleteProfileModal.profile-account-window-dialog {
box-sizing: border-box !important;
width: min(760px, calc(100vw - 32px)) !important;
max-width: 760px !important;
min-width: min(520px, calc(100vw - 32px)) !important;
height: auto !important;
max-height: calc(100vh - 32px) !important;
overflow: hidden !important;
background: #ffffff !important;
}
html body #deleteProfileModal.profile-account-window-dialog:not(.is-open) {
display: none !important;
}
html body #deleteProfileModal.profile-account-window-dialog.is-open {
display: grid !important;
grid-template-areas:
"window-header"
"field"
"footer" !important;
grid-template-columns: minmax(0,1fr) !important;
grid-template-rows: 40px minmax(0,auto) 58px !important;
}
html body #deleteProfileModal.profile-account-window-dialog > .profile-details-editor-content {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: auto !important;
background: #ffffff !important;
border: 0 !important;
}
html body #deleteProfileModal.profile-account-window-dialog .profile-details-editor-field {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 20px !important;
overflow: visible !important;
background: #ffffff !important;
border: 0 !important;
}
html body #deleteProfileModal.profile-account-window-dialog .profile-account-substack {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body #deleteProfileModal.profile-account-window-dialog :is(.profile-account-info-card,.profile-account-edit-card) {
position: static !important;
float: none !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 16px 18px !important;
gap: 8px !important;
color: #222222 !important;
background: #f3f3f3 !important;
border: 1px solid #cfd5d9 !important;
border-radius: 4px !important;
box-shadow: none !important;
}
html body #deleteProfileModal.profile-account-window-dialog .profile-account-info-card h3 {
margin: 0 0 3px !important;
font-family: var(--base-font, Arial, sans-serif) !important;
font-size: var(--base-font-size, 16px) !important;
line-height: 1.25 !important;
}
html body #deleteProfileModal.profile-account-window-dialog .profile-account-info-card p,
html body #deleteProfileModal.profile-account-window-dialog .profile-account-delete-warning {
margin: 0 !important;
color: #555555 !important;
line-height: 1.45 !important;
}
html body #deleteProfileModal.profile-account-window-dialog .profile-account-delete-form label {
display: grid !important;
gap: 5px !important;
width: 100% !important;
margin: 4px 0 0 !important;
color: #222222 !important;
font-weight: 700 !important;
}
html body #deleteProfileModal.profile-account-window-dialog .profile-account-delete-form input {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 38px !important;
margin: 0 0 4px !important;
padding: 7px 10px !important;
color: #222222 !important;
background: #ffffff !important;
border: 1px solid #bfc6cc !important;
border-radius: 3px !important;
box-shadow: none !important;
}
html body #deleteProfileModal.profile-account-window-dialog > .profile-details-editor-footer {
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
background: #f3f0e9 !important;
}
html body #deleteProfileModal .profile-account-delete-confirm-button {
color: #ffffff !important;
background: linear-gradient(180deg,#df7067 0%,#c8463d 100%) !important;
border-color: #8f2923 !important;
}
html body #deleteProfileModal .profile-account-delete-confirm-button:hover,
html body #deleteProfileModal .profile-account-delete-confirm-button:focus-visible {
color: #ffffff !important;
background: linear-gradient(180deg,#ee8178 0%,#d75349 100%) !important;
border-color: #792019 !important;
}
@media (max-width: 620px) {
html body #deleteProfileModal.profile-account-window-dialog {
width: calc(100vw - 16px) !important;
min-width: 0 !important;
}
html body #deleteProfileModal.profile-account-window-dialog .profile-details-editor-field {
padding: 14px !important;
}
}