/* * JIG Gallery Manager – Frontend * Farben und Maße kommen aus den Plugin-Einstellungen (CSS-Variablen im ). */ .jgm-overview { margin: 0 0 2em; } /* ---------------------------------------------------------- Layout: Liste */ .jgm-overview--list .jgm-row { display: flex; align-items: stretch; gap: 0; margin-bottom: var(--jgm-gap, 16px); background: var(--jgm-panel, #fdf3d8); border-radius: var(--jgm-radius, 6px); overflow: hidden; } .jgm-row__media { flex: 0 0 var(--jgm-thumb-width, 300px); max-width: var(--jgm-thumb-width, 300px); display: flex; align-items: center; justify-content: center; padding: var(--jgm-frame, 12px); background: var(--jgm-accent, #eec643); text-decoration: none; } .jgm-row__img { display: block; width: 100%; height: auto; border-radius: calc(var(--jgm-radius, 6px) / 1.5); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); } .jgm-row__placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; background: rgba(0, 0, 0, .08); border-radius: calc(var(--jgm-radius, 6px) / 1.5); } /* Bild rechts statt links */ .jgm-overview--media-right .jgm-row { flex-direction: row-reverse; } .jgm-row__date { margin: 0 0 .15em; font-size: .875em; font-weight: 600; opacity: .7; letter-spacing: .01em; } .jgm-card__date { display: block; margin-bottom: .15em; font-size: .8em; font-weight: 600; opacity: .7; } .jgm-row__body { flex: 1 1 auto; min-width: 0; padding: 1.25em 1.5em; color: var(--jgm-text, #1a1a1a); } .jgm-row__title { margin: 0 0 .2em; font-size: 1.25em; line-height: 1.3; } .jgm-row__title a { color: var(--jgm-link, #1a1a1a); text-decoration: none; } .jgm-row__title a:hover, .jgm-row__title a:focus { text-decoration: underline; } .jgm-row__subtitle { margin: 0 0 .5em; font-weight: 600; } .jgm-row__text { margin: 0 0 .5em; } .jgm-row__text p { margin: 0 0 .3em; } .jgm-row__meta { margin: .6em 0 0; font-size: .875em; opacity: .75; display: flex; flex-wrap: wrap; gap: 0 1em; } /* -------------------------------------------------------- Layout: Kacheln */ .jgm-overview--cards { display: grid; gap: var(--jgm-gap, 16px); grid-template-columns: repeat(3, minmax(0, 1fr)); } .jgm-overview--cards.jgm-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .jgm-overview--cards.jgm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jgm-overview--cards.jgm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .jgm-overview--cards.jgm-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .jgm-overview--cards.jgm-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .jgm-card { background: var(--jgm-panel, #fdf3d8); border-radius: var(--jgm-radius, 6px); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .jgm-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } .jgm-card__link { display: block; text-decoration: none; color: var(--jgm-text, #1a1a1a); } .jgm-card__media { position: relative; display: block; background: var(--jgm-accent, #eec643); padding: var(--jgm-frame, 12px); } .jgm-card__img { display: block; width: 100%; height: auto; border-radius: calc(var(--jgm-radius, 6px) / 1.5); } .jgm-card__badge { position: absolute; right: 1.1em; bottom: 1.1em; background: rgba(0, 0, 0, .65); color: #fff; font-size: .75em; line-height: 1; padding: .35em .6em; border-radius: 999px; } .jgm-card__body { display: block; padding: .9em 1em 1.1em; } .jgm-card__title { display: block; font-weight: 700; color: var(--jgm-link, #1a1a1a); } .jgm-card__subtitle { display: block; margin-top: .2em; font-size: .875em; opacity: .75; } /* -------------------------------------------------------- Layout: Kompakt */ .jgm-overview--compact { list-style: none; margin: 0 0 2em; padding: 0; } .jgm-compact__item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5em; padding: .6em .25em; border-bottom: 1px solid rgba(0, 0, 0, .1); } .jgm-compact__item a { color: var(--jgm-link, #1a1a1a); font-weight: 600; text-decoration: none; } .jgm-compact__meta { font-size: .875em; opacity: .7; } /* ------------------------------------------------ Filter & Seitennavigation */ .jgm-filter { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1.25em; } .jgm-filter__item { display: inline-block; padding: .4em .9em; border-radius: 999px; background: var(--jgm-panel, #fdf3d8); color: var(--jgm-text, #1a1a1a); text-decoration: none; font-size: .9em; line-height: 1.4; } .jgm-filter__item.is-active, .jgm-filter__item:hover { background: var(--jgm-accent, #eec643); } .jgm-pagination { display: flex; flex-wrap: wrap; gap: .35em; margin: 1.5em 0; } .jgm-pagination .page-numbers { display: inline-block; padding: .35em .75em; border-radius: var(--jgm-radius, 6px); background: var(--jgm-panel, #fdf3d8); color: var(--jgm-text, #1a1a1a); text-decoration: none; } .jgm-pagination .page-numbers.current { background: var(--jgm-accent, #eec643); font-weight: 700; } /* ------------------------------------------------------------- Einzelseite */ .jgm-single-head { margin: 0 0 1.2em; } .jgm-single-head__title { margin: 0 0 .15em; line-height: 1.25; } .jgm-single-head__subtitle { margin: 0 0 .3em; font-weight: 600; opacity: .85; } .jgm-single-meta { display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin: 0 0 1.2em; font-size: .9em; opacity: .8; } .jgm-single-grid { margin-top: 1.5em; } /* --------------------------------------------------------------- Sonstiges */ .jgm-cats { list-style: none; margin: 0 0 1.5em; padding: 0; } .jgm-cats--inline { display: flex; flex-wrap: wrap; gap: .5em; } .jgm-cats--inline li a { display: inline-block; padding: .35em .8em; border-radius: 999px; background: var(--jgm-panel, #fdf3d8); color: var(--jgm-text, #1a1a1a); text-decoration: none; } .jgm-empty, .jgm-notice { padding: 1em; background: var(--jgm-panel, #fdf3d8); border-radius: var(--jgm-radius, 6px); } /* ------------------------------------------------------------------ Mobil */ @media (max-width: 782px) { .jgm-overview--list .jgm-row { flex-direction: column; } .jgm-row__media { flex-basis: auto; max-width: none; } .jgm-row__img { max-width: 420px; margin: 0 auto; } .jgm-overview--cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 480px) { .jgm-overview--cards { grid-template-columns: 1fr !important; } } /* ------------------------------------------------------------- Videos */ .jgm-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--jgm-gap, 16px); margin: var(--jgm-gap, 16px) 0; } .jgm-video { margin: 0; } .jgm-video .wp-video, .jgm-video video { width: 100% !important; height: auto; border-radius: var(--jgm-radius, 6px); } .jgm-video__caption { margin-top: .4em; font-size: .9em; color: var(--jgm-text, #1a1a1a); opacity: .8; } .jgm-video-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--jgm-gap, 16px); margin: var(--jgm-gap, 16px) 0; } .jgm-video-link { margin: 0; } /* Eingebettete Player auf die volle Breite bringen und Seitenverhältnis halten. */ .jgm-video-link iframe, .jgm-video-link .wp-video, .jgm-video-link video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--jgm-radius, 6px); display: block; } /* Zwei-Klick-Vorschaufläche (DSGVO): nichts wird geladen, bis geklickt wird. */ .jgm-consent { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em; aspect-ratio: 16 / 9; padding: 1em 1.2em; text-align: center; background: #1d2327; color: #fff; border-radius: var(--jgm-radius, 6px); overflow: hidden; } .jgm-consent-play { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.1em; font-size: 1em; font-weight: 600; color: #fff; background: #c00; border: 0; border-radius: 4px; cursor: pointer; transition: background .15s ease, transform .15s ease; } .jgm-consent[data-provider="vimeo"] .jgm-consent-play { background: #1ab7ea; } .jgm-consent-play:hover { transform: scale(1.04); } .jgm-consent-icon { display: inline-block; width: 0; height: 0; border-style: solid; border-width: .45em 0 .45em .75em; border-color: transparent transparent transparent #fff; } .jgm-consent-note { margin: 0; max-width: 40em; font-size: .82em; line-height: 1.45; opacity: .9; } .jgm-consent-note a { color: #fff; text-decoration: underline; } /* Nach dem Klick füllt der Player die Fläche vollständig aus. */ .jgm-consent-loaded { display: block; padding: 0; } .jgm-consent-loaded iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--jgm-radius, 6px); display: block; } .jgm-video-extlink { display: inline-block; padding: .6em 1em; color: var(--jgm-link, #1a1a1a); } /* ------------------------------------------------- Knopf unter der Galerie */ .jgm-single-button { margin: calc(var(--jgm-gap, 16px) * 1.4) 0 var(--jgm-gap, 16px); text-align: center; } .jgm-single-button__link { display: inline-block; padding: .7em 1.6em; font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--jgm-text, #1a1a1a); background: var(--jgm-accent, #eec643); border-radius: var(--jgm-radius, 6px); transition: transform .12s ease, filter .12s ease; } .jgm-single-button__link:hover, .jgm-single-button__link:focus { transform: translateY(-1px); filter: brightness(.94); color: var(--jgm-text, #1a1a1a); } /* Selbst gehostetes Video (.mp4 o. ä.) im internen Player. */ .jgm-video-file { margin: 0; } .jgm-html5-video { width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; border-radius: var(--jgm-radius, 6px); display: block; }