die
lfr-editable rendert) ervan erven via `inherit`. Specificity 0,5,0
beats ReadSpeaker's `.rsbtn span` (0,1,1). */
.umcg-header__readspeaker.rsbtn .rsbtn_play.umcg-button-header.umcg-button-header--secondary * {
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
text-transform: inherit;
text-decoration: inherit;
}
/* Het label inside .rsbtn_play heeft in DS --secondary een lichter font-weight.
ReadSpeaker voegt `aria-hidden="true"` toe aan children en kan ze via zijn
skin proberen te verbergen — we resetten daarom visibility/opacity/position/
sr-only-clipping zodat ons label niet wordt weggeknepen.
BELANGRIJK: zet hier GEEN `display`. DS regelt de label-zichtbaarheid
responsive — `.umcg-header__action .umcg-button-header__label` is
`display:none` op mobiel (header-acties zijn dan icon-only) en
`display:inline` op desktop. Door display vrij te laten blijft die logica
intact: de mobiele Voorlezen-knop toont alleen het icoon, de desktop-knop
icoon + label. (Eerder forceerde deze regel `display:inline-block`, waardoor
het label óók op mobiel verscheen en de icon-only-variant niet werd gebruikt.) */
.umcg-header__readspeaker.rsbtn .rsbtn_play .umcg-button-header__label,
.umcg-header__readspeaker.rsbtn .rsbtn_play .umcg-button-header__label[aria-hidden="true"] {
font-weight: var(--umcg-font-weight-light);
letter-spacing: var(--umcg-tracking-wide);
visibility: visible;
opacity: 1;
position: static;
width: auto;
height: auto;
margin: 0;
padding: 0;
overflow: visible;
clip: auto;
clip-path: none;
white-space: normal;
}
/* Idem voor de icon-wrap. */
.umcg-header__readspeaker.rsbtn .rsbtn_play .umcg-button-header__icon-wrap,
.umcg-header__readspeaker.rsbtn .rsbtn_play .umcg-button-header__icon-wrap[aria-hidden="true"] {
display: inline-flex;
visibility: visible;
opacity: 1;
position: static;
width: auto;
height: auto;
}
/* De inner
die door lfr-editable wordt gerendered binnen de label-span:
forceer inline-display zodat hij niet als blok onder het icoon valt. */
.umcg-header__readspeaker.rsbtn .rsbtn_play .umcg-button-header__label > div,
.umcg-header__readspeaker.rsbtn .rsbtn_play .umcg-button-header__label > span {
display: inline;
margin: 0;
padding: 0;
}
/* Speaker bar — absoluut onder de knop. */
.umcg-header__readspeaker.rsbtn .rsbtn_exp {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 100;
height: auto;
width: auto;
padding: 0;
background: transparent;
border: 0;
}
/* Specificity bump 0,5,0 om ReadSpeaker's `.rsbtn.rsexpanded .rsbtn_exp
.rsbtn_exp_inner` (0,4,0) te beat'en. Onze wrapper heeft na klik altijd
.umcg-header__action + .umcg-header__readspeaker + .rsbtn +
.rsexpanded, dus die chain matched 1-op-1. */
.umcg-header__action.umcg-header__readspeaker.rsbtn.rsexpanded .rsbtn_exp_inner {
display: inline-flex;
flex-wrap: nowrap;
align-items: stretch;
top: 0;
height: auto;
background-color: var(--umcg-color-surface-neutral-white);
border: 1px solid var(--umcg-color-surface-secondary-300);
border-radius: var(--umcg-radius-default);
box-shadow: 1px 1px 16px 0 #0031831a;
}
/* Player-buttons als button-group: gelijkmatige hoogte, witte achtergrond,
verticale separators tussen, rounded corners op eerste/laatste. */
.umcg-header__readspeaker.rsbtn .rsbtn_player_item {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--umcg-color-surface-neutral-white);
border: 0;
padding: 0 calc(var(--umcg-spacing) * 4);
height: 40px;
line-height: 1;
color: var(--umcg-color-text-on-light-default);
cursor: pointer;
font-family: inherit;
font-size: var(--umcg-font-size-sm);
}
.umcg-header__readspeaker.rsbtn .rsbtn_player_item:hover {
background-color: var(--umcg-color-surface-cards-blue-light);
color: var(--umcg-color-text-on-light-default);
}
.umcg-header__readspeaker.rsbtn .rsbtn_player_item:focus-visible {
outline: 2px solid var(--umcg-color-border-focus-on-light-alt);
outline-offset: -2px;
z-index: 1;
}
/* Verticale separator tussen player-buttons (niet vóór de eerste). */
.umcg-header__readspeaker.rsbtn .rsbtn_player_item + .rsbtn_player_item::before {
content: "";
position: absolute;
left: 0;
top: calc(var(--umcg-spacing) * 2);
bottom: calc(var(--umcg-spacing) * 2);
width: 1px;
background-color: var(--umcg-color-surface-secondary-300);
}
/* Eerste en laatste player-button matchen de rounded corners van de card. */
.umcg-header__readspeaker.rsbtn .rsbtn_exp_inner > .rsbtn_player_item:first-child {
border-top-left-radius: var(--umcg-radius-default);
border-bottom-left-radius: var(--umcg-radius-default);
}
.umcg-header__readspeaker.rsbtn .rsbtn_player_item.rsbtn_closer {
border-top-right-radius: var(--umcg-radius-default);
border-bottom-right-radius: var(--umcg-radius-default);
}
/* Verberg tekst-labels naast de iconen — icons-only player-row. */
.umcg-header__readspeaker.rsbtn .rsbtn_btnlabel {
display: none;
}
/* Loading-progress balk: ReadSpeaker zet `style="left: -150px; display: block;"`
inline via JS. We willen hem niet zichtbaar (loose progress-bar buiten de
speaker bar). !important nodig om inline display: block te overrulen. */
.umcg-header__readspeaker.rsbtn .rs-player-loadindicator {
display: none !important;
}
/* Status-overlay (error-meldingen zoals "Fout opgetreden, probeer nogmaals")
blijft zichtbaar — belangrijk voor gebruikersfeedback. */
.umcg-header__readspeaker.rsbtn .rsbtn_status_overlay {
padding: calc(var(--umcg-spacing) * 2);
font-size: var(--umcg-font-size-sm);
color: var(--umcg-color-text-on-light-default);
}
/* Volume- en speed-dropdown sliders: ReadSpeaker plakt deze als verticale
sliders boven de bijbehorende button. Laat ze hun eigen styling
behouden (default ReadSpeaker chrome is acceptabel voor deze dropdowns). */
/* -----------------------------------------------------------------------------
Skip-links (umcg-ds-theme/portal_normal.ftl).
Toegankelijkheid: het eerste tabbare element op de pagina is een verborgen
link die op focus zichtbaar wordt en focus verplaatst naar de
in de drop-zone-master-ds fragment.
We linken bewust naar onze eigen container i.p.v. Liferay's automatisch
ge-emit'de
, zodat editors kunnen kiezen waar de
skip-link landt (= waar de master-page-content begint).
----------------------------------------------------------------------------- */
.umcg-skip-links {
position: relative;
z-index: 6000;
}
.umcg-skip-links__link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
background-color: var(--umcg-color-bg-on-light-default, #fff);
border: 1px solid var(--umcg-color-text-on-light-hyperlink, #003a73);
color: var(--umcg-color-text-on-light-hyperlink, #003a73);
padding: calc(var(--umcg-spacing) * 3) calc(var(--umcg-spacing) * 4);
border-radius: var(--umcg-radius-default, .25rem);
font-size: 1rem;
text-decoration: underline;
}
.umcg-skip-links__link:active,
.umcg-skip-links__link:focus,
.umcg-skip-links__link:focus-visible {
position: absolute;
left: calc(var(--umcg-spacing) * 4);
top: calc(var(--umcg-spacing) * 4);
width: auto;
height: auto;
overflow: visible;
outline: 2px solid var(--umcg-color-text-on-light-hyperlink, #003a73);
outline-offset: 2px;
z-index: 6001;
}
.umcg-slider__item .umcg-slider__media picture {
display: flex;
justify-content: center;
}
/* -----------------------------------------------------------------------------
Rich-text table styling (paragraph-ds / lead-ds).
The DS embedded CSS reset (`*, ::before, ::after { border: 0 solid }`)
wipes the browser-default borders off WYSIWYG-inserted markup.
.umcg-rich-text currently has no rules for raw tables, so editor-emitted
tables render as unstyled blocks without grid lines.
Project-local override until the upstream DS adds .umcg-rich-text table
rules. Scoped to .umcg-rich-text so the structural .umcg-table BEM
component is not affected.
----------------------------------------------------------------------------- */
.umcg-rich-text table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--umcg-color-surface-table-head);
}
.umcg-rich-text table th,
.umcg-rich-text table td {
padding: calc(var(--umcg-spacing) * 2) calc(var(--umcg-spacing) * 3);
border: 1px solid var(--umcg-color-surface-table-head);
text-align: left;
vertical-align: top;
}
.umcg-rich-text table th {
font-weight: var(--umcg-font-weight-semibold);
}
/* -----------------------------------------------------------------------------
Hide Asset Publisher full-content header chrome on DS-migrated pages.
Liferay's AssetPublisher (display style "Volledige inhoud weergeven") emits
a `.component-title.h4` wrapper containing a `.header-back-to` arrow link
above the article body. This sits outside the ADT and is not configurable
per-page, so we strip it via CSS for DS-styled articles.
----------------------------------------------------------------------------- */
.default-asset-publisher .component-title.h4 {
display: none;
}
/* -----------------------------------------------------------------------------
Responsive visibility helpers
Gebruikt o.a. door umcg.nl-templates die een sectie als accordion op mobiel
tonen en als flat text_block op desktop (MobieleWeergaveVoorSectie='accordeon').
Breakpoint is gelijk aan de DS-standaard (>=1024px = desktop).
----------------------------------------------------------------------------- */
.umcg-only-mobile {
display: block;
}
.umcg-only-desktop {
display: none;
}
@media (min-width: 1024px) {
.umcg-only-mobile {
display: none;
}
.umcg-only-desktop {
display: block;
}
}
/* -----------------------------------------------------------------------------
Rich-text afbeeldingen met component-styling (UMCGDEV-1110)
De HtmlContentTransformer injecteert bij afbeeldingen in webcontent-rich-text
de image-ds fragmentstructuur (figure.umcg-image > picture/img +
span.umcg-image__source + figcaption). Binnen .umcg-rich-text winnen de
generieke figure-regels uit de embedded CSS (display: flex, hogere
specificiteit) echter van .umcg-image; herstel hier de component-look:
grid met bron-overlay onderin beeld en de beeldverhouding-varianten.
----------------------------------------------------------------------------- */
.umcg-rich-text .umcg-image__source {
color: var(--umcg-color-text-on-light-default-alt);
font-size: var(--umcg-font-size-xs);
font-weight: var(--umcg-font-weight-regular);
line-height: var(--umcg-line-height-xs);
}
.umcg-rich-text figure.umcg-image {
display: grid;
}
.umcg-rich-text figure.umcg-image > img,
.umcg-rich-text figure.umcg-image > picture {
grid-area: 1 / 1;
aspect-ratio: 16 / 9;
}
.umcg-rich-text figure.umcg-image > img,
.umcg-rich-text figure.umcg-image > picture > img {
object-fit: cover;
height: 100%;
}
.umcg-rich-text figure.umcg-image > figcaption {
grid-column: 1;
}
.umcg-rich-text figure.umcg-image[data-image-ratio='16:10'] > img,
.umcg-rich-text figure.umcg-image[data-image-ratio='16:10'] > picture {
aspect-ratio: 16 / 10;
}
.umcg-rich-text figure.umcg-image[data-image-ratio='16:9'] > img,
.umcg-rich-text figure.umcg-image[data-image-ratio='16:9'] > picture {
aspect-ratio: 16 / 9;
}
.umcg-rich-text figure.umcg-image[data-image-ratio='4:3'] > img,
.umcg-rich-text figure.umcg-image[data-image-ratio='4:3'] > picture {
aspect-ratio: 4 / 3;
}
.umcg-rich-text figure.umcg-image[data-image-ratio='1:1'] > img,
.umcg-rich-text figure.umcg-image[data-image-ratio='1:1'] > picture {
aspect-ratio: 1;
}
.umcg-rich-text figure.umcg-image[data-image-ratio='2:3'] > img,
.umcg-rich-text figure.umcg-image[data-image-ratio='2:3'] > picture {
aspect-ratio: 2 / 3;
}
/* -----------------------------------------------------------------------------
Contact-panel: redacteurs- in het rich-text-veld stylen als __title
De umcg.nl DS-templates vullen het contact-panel van de hero met één
rich-text-veld (HeroTekstBlok) en onderdrukken de aparte
umcg-contact__title (contact_title=""). Een door de redacteur getypte
in dat veld valt daardoor terug op de generieke .umcg-rich-text h2
(font-size-h2) — veel te groot. Geef zo'n h2 dezelfde typografie als
.umcg-contact--default .umcg-contact__title (handoff hero-contact-panel
3.0.1). Specificiteit (0,2,1) wint van .umcg-rich-text h2 (0,1,1),
onafhankelijk van laadvolgorde.
----------------------------------------------------------------------------- */
.umcg-contact--default .umcg-contact__content h2 {
width: 100%;
color: var(--umcg-color-text-on-light-heading);
font-size: var(--umcg-font-size-lg);
line-height: var(--umcg-line-height-h4);
font-weight: var(--umcg-font-weight-medium);
}
/* Quote — overflow-wrap houdt de quotetekst binnen de quote;
max-width: fit-content houdt de foto rond. */
.umcg-quote__text {
overflow-wrap: anywhere;
}
.umcg-quote .umcg-quote__media .umcg-quote__image {
max-width:fit-content;
}
/* In edit-mode klikken doorlaten naar de editables onder de stretched-link
overlay van de klikbare kaart. */
body.has-edit-mode-menu .umcg-quote--link .umcg-quote__link::before {
pointer-events: none;
}
/* -----------------------------------------------------------------------------
Cookie-notice: geen flash bij paginaload
Het paneel rendert zonder hidden-attribuut en wordt door de DS-CSS dus
direct getoond. Houd het verborgen tot behaviors.js het enhanced heeft;
die beslist in dezelfde synchrone slag over tonen of verbergen.
----------------------------------------------------------------------------- */
.umcg-cookie-notice-advanced[data-cookie-notice]:not([data-cookie-notice-enhanced='true']) {
display: none;
}
.umcg-section-background-blue {
padding: var(--umcg-space-scale-600);
border-radius: var(--umcg-radius-default);
background-color: var(--umcg-color-surface-cards-blue-light);
}
@media (min-width: 768px) {
.umcg-section-background-blue {
padding: var(--umcg-space-scale-1000);
}
}
/* -----------------------------------------------------------------------------
Legacy button cta-button-darkblue is hardcoded in rich-text content. Override the DS embedded button styling
----------------------------------------------------------------------------- */
.umcg-rich-text {
a.button.cta-button-darkblue {
display: inline-flex;
align-items: center;
gap: var(--umcg-space-scale-200);
max-width: 100%;
border-radius: var(--umcg-radius-default);
padding-inline: var(--umcg-space-lg);
padding-block: var(--umcg-space-sm);
font-size: var(--umcg-font-size-sm);
line-height: var(--umcg-line-height-sm);
font-weight: var(--umcg-font-weight-medium);
background-color: var(--umcg-color-button-secondary-default);
color: var(--umcg-color-text-on-light-hyperlink);
text-decoration-line: none;
cursor: pointer;
}
@media (hover: hover) {
.button.cta-button-darkblue:hover {
background-color: var(--umcg-color-button-secondary-hover);
color: var(--umcg-color-text-on-light-hyperlink-hover);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.08em;
}
}
.button.cta-button-darkblue:active {
background-color: var(--umcg-color-button-secondary-active);
}
.button.cta-button-darkblue:focus-visible {
color: var(--umcg-color-text-on-light-default);
outline: 2px solid var(--umcg-color-border-focus-on-light-alt);
outline-offset: -2px;
border-radius: 2px;
}
.button.cta-button-darkblue[aria-disabled='true'] {
pointer-events: none;
color: var(--umcg-color-text-on-light-default);
opacity: var(--umcg-opacity-disabled);
}
}