/* * 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: 1.25em; 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: .75em; } .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; } }