/* LinkedIn Feed – Entwickelt von Matthias Biela, urform – https://www.urform.de – info@urform.de */ /* * LinkedIn Feed – Darstellung * * Alle Werte kommen als CSS-Variablen und Daten-Attribute aus „LinkedIn Feed → Darstellung“. * Leere Farbfelder setzen keine Variable – dann greift der Fallback (Akzentfarbe bzw. Theme). * * Spalten richten sich nach der Breite des Feeds: über 760 px Desktop, bis 760 px Tablet, * bis 480 px Handy. Die Breite misst linkedin-feed.js (data-size="d|t|m"); ohne JavaScript * greifen ersatzweise die Bildschirmbreiten 1024 px / 640 px. * Bewusst KEINE CSS Container Queries: deren Größen-Eindämmung lässt den Feed in * Flexbox-Containern (z. B. Elementor) auf 0 px Breite schrumpfen. */ .uflf { --uflf-cols-d: 3; --uflf-cols-t: 2; --uflf-cols-m: 1; --uflf-view-d: 3; --uflf-view-t: 2; --uflf-view-m: 1; --uflf-gap: 24px; --uflf-list-img: 36%; --uflf-bg: #fff; --uflf-border: #e2e2e2; --uflf-border-w: 1px; --uflf-radius: 8px; --uflf-r-tl: 8px; --uflf-r-tr: 8px; --uflf-r-br: 8px; --uflf-r-bl: 8px; --uflf-padding: 20px; --uflf-shadow: none; --uflf-shadow-h: 0 14px 34px rgba(0, 0, 0, .14); --uflf-anim: 250ms; --uflf-ratio: 16/10; --uflf-img-fit: cover; --uflf-img-pos: 50% 50%; --uflf-overlay: #000; --uflf-overlay-o: 0; --uflf-overlay-oh: 0; --uflf-font: inherit; --uflf-size: 16px; --uflf-line-height: 1.55; --uflf-text-weight: 400; --uflf-text: inherit; --uflf-align: left; --uflf-lines: 0; --uflf-muted: #6b6b6b; --uflf-date-size: 13px; --uflf-date-weight: 400; --uflf-date-case: none; --uflf-accent: #0a66c2; --uflf-btn-text: #fff; --uflf-btn-size: 15px; --uflf-btn-weight: 600; --uflf-btn-case: none; --uflf-btn-letter: 0px; --uflf-btn-py: 10px; --uflf-btn-px: 18px; --uflf-btn-radius: 6px; --uflf-btn-bw: 2px; --uflf-btn-icon-size: 16px; --uflf-btn-icon-gap: 12px; --uflf-btn-anim: 250ms; --uflf-btn-ease: ease; --uflf-nav-size: 42px; --uflf-nav-radius: 50%; --uflf-nav-icon-size: 40; --uflf-nav-bw: 0px; --uflf-nav-shadow: none; --uflf-nav-offset: 10px; --uflf-dot-size: 9px; --uflf-bar-w: 100%; --uflf-bar-h: 2px; --uflf-bar-th: 4px; --uflf-sw-list: 40%; --uflf-sw-gap: 48px; --uflf-sw-fade: 700ms; --uflf-sw-size: 16px; --uflf-sw-weight: 400; --uflf-sw-weight-a: 400; --uflf-sw-pad: 16px; --uflf-sw-line-auto: rgba(128, 128, 128, .35); position: relative; display: block; width: 100%; max-width: 100%; min-width: 0; font-family: var(--uflf-font); font-size: var(--uflf-size); line-height: var(--uflf-line-height); color: var(--uflf-text); } .uflf *, .uflf *::before, .uflf *::after { box-sizing: border-box; } /* ---------- Spalten je Breite ---------- */ .uflf-track { --uflf-cols: var(--uflf-cols-d); --uflf-view: var(--uflf-view-d); gap: var(--uflf-gap); } @media (max-width: 1024px) { .uflf:not([data-size]) .uflf-track { --uflf-cols: var(--uflf-cols-t); --uflf-view: var(--uflf-view-t); } } @media (max-width: 640px) { .uflf:not([data-size]) .uflf-track { --uflf-cols: var(--uflf-cols-m); --uflf-view: var(--uflf-view-m); } } .uflf[data-size="t"] .uflf-track { --uflf-cols: var(--uflf-cols-t); --uflf-view: var(--uflf-view-t); } .uflf[data-size="m"] .uflf-track { --uflf-cols: var(--uflf-cols-m); --uflf-view: var(--uflf-view-m); } /* ---------- Karte ---------- */ .uflf-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--uflf-bg); border: var(--uflf-border-w) solid var(--uflf-border); border-radius: var(--uflf-radius); box-shadow: var(--uflf-shadow); overflow: hidden; color: inherit; transition: transform var(--uflf-anim) ease, box-shadow var(--uflf-anim) ease, border-color var(--uflf-anim) ease, background-color var(--uflf-anim) ease; } /* Ecken einzeln: oben links, oben rechts, unten rechts, unten links */ .uflf[data-radius-each="1"] .uflf-card { border-radius: var(--uflf-r-tl) var(--uflf-r-tr) var(--uflf-r-br) var(--uflf-r-bl); } .uflf .uflf-card:hover { background: var(--uflf-bg-h, var(--uflf-bg)); border-color: var(--uflf-border-h, var(--uflf-border)); } .uflf[data-card-hover="lift"] .uflf-card:hover { transform: translateY(-4px); box-shadow: var(--uflf-shadow-h); } .uflf[data-card-hover="shadow"] .uflf-card:hover { box-shadow: var(--uflf-shadow-h); } .uflf[data-card-hover="scale"] .uflf-card:hover { transform: scale(1.02); } .uflf[data-card-hover="border"] .uflf-card:hover { border-color: var(--uflf-border-h, var(--uflf-accent)); } /* Ganze Karte klickbar: der LinkedIn-Link wird über die Karte gespannt, Links im Text bleiben klickbar. */ .uflf[data-card-link="1"] .uflf-text a, .uflf[data-card-link="1"] .uflf-article { position: relative; z-index: 4; } .uflf[data-card-link="1"][data-button="0"][data-btn] .uflf-card .uflf-more { position: static; display: block; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } /* ---------- Bild ---------- */ .uflf .uflf-media { position: relative; display: block; aspect-ratio: var(--uflf-ratio); overflow: hidden; background: var(--uflf-img-bg, rgba(0, 0, 0, .05)); } .uflf-media img, .uflf-placeholder { display: block; width: 100%; height: 100%; object-fit: var(--uflf-img-fit); object-position: var(--uflf-img-pos); transition: transform calc(var(--uflf-anim) * 1.6) ease, filter var(--uflf-anim) ease; } .uflf-placeholder { min-height: 120px; } .uflf[data-ratio="auto"] .uflf-media { aspect-ratio: auto; } .uflf[data-ratio="auto"] .uflf-media img { height: auto; } .uflf-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--uflf-overlay); opacity: var(--uflf-overlay-o); transition: opacity var(--uflf-anim) ease; pointer-events: none; } .uflf-card:hover .uflf-media::before { opacity: var(--uflf-overlay-oh); } .uflf[data-img-hover="zoom"] .uflf-card:hover .uflf-media img { transform: scale(1.05); } .uflf[data-img-hover="grayscale"] .uflf-media img { filter: grayscale(1); } .uflf[data-img-hover="grayscale"] .uflf-card:hover .uflf-media img { filter: grayscale(0); } .uflf[data-img-hover="darken"] .uflf-card:hover .uflf-media img { filter: brightness(.75); } .uflf[data-img-hover="brighten"] .uflf-card:hover .uflf-media img { filter: brightness(1.12); } .uflf-media.is-video::after { content: ""; position: absolute; inset: 50% auto auto 50%; z-index: 2; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat; } /* ---------- Text ---------- */ .uflf-body { display: flex; flex-direction: column; gap: .65em; flex: 1; padding: var(--uflf-padding); text-align: var(--uflf-align); } .uflf-date { order: 1; font-size: var(--uflf-date-size); font-weight: var(--uflf-date-weight); text-transform: var(--uflf-date-case); color: var(--uflf-muted); } .uflf[data-date-pos="bottom"] .uflf-date { order: 4; } .uflf-text { order: 2; margin: 0; font-weight: var(--uflf-text-weight); overflow-wrap: anywhere; } .uflf .uflf-text a { color: var(--uflf-link, var(--uflf-accent)); text-decoration: none; transition: color var(--uflf-anim) ease; } .uflf .uflf-text a:hover { color: var(--uflf-link-h, var(--uflf-link, var(--uflf-accent))); text-decoration: underline; } .uflf[data-clamp]:not([data-clamp="0"]) .uflf-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--uflf-lines); line-clamp: var(--uflf-lines); overflow: hidden; } .uflf .uflf-article { order: 3; display: block; padding: .6em .75em; border-left: 3px solid var(--uflf-art-line, var(--uflf-accent)); background: var(--uflf-art-bg, rgba(0, 0, 0, .03)); color: var(--uflf-art-text, inherit); font-weight: 600; text-align: left; text-decoration: none; } /* ---------- Button / Link ---------- * Mit „.uflf“ davor, damit Theme-Regeln wie „:root :where(a)“ (theme.json) oder Elementor-Linkfarben nicht gewinnen. * Hintergründe nur als background-color – background-image ist für die Animationen reserviert. */ .uflf .uflf-card .uflf-more { order: 5; align-self: flex-start; margin-top: auto; font-size: var(--uflf-btn-size); font-weight: var(--uflf-btn-weight); text-transform: var(--uflf-btn-case); letter-spacing: var(--uflf-btn-letter); line-height: 1.25; text-decoration: none; background-repeat: no-repeat; transition-property: color, background-color, background-size, background-position, border-color, transform, box-shadow, filter; transition-duration: var(--uflf-btn-anim); transition-timing-function: var(--uflf-btn-ease); } /* ---------- Theme-/Elementor-Effekte am Link abschalten ---------- * Viele Themes gestalten jeden Link mit eigener Unterstreichung, Linien-Animation (::before/::after) * oder Hintergrundbild. Bei „Textlink“, „Button“ und „Button mit Rahmen“ gestaltet nur das Plugin – * bei „Nur eigene Klassen“ bleibt alles dem Theme überlassen. * :where() hält die Spezifität niedrig, damit die Plugin-Effekte (Linie, Füllung, Glanz) weiter greifen. */ .uflf:where(:not([data-btn="theme"])) .uflf-card a.uflf-more { background-image: none; box-shadow: none; text-shadow: none; text-decoration: none; border-image: none; } .uflf[data-btn="link"] .uflf-card a.uflf-more { padding: 0; border: 0; border-radius: 0; background-color: transparent; } .uflf:where(:not([data-btn="theme"])) .uflf-card a.uflf-more::before, .uflf:where(:not([data-btn="theme"])) .uflf-card a.uflf-more::after { position: static; inset: auto; width: auto; min-width: 0; max-width: none; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; filter: none; clip-path: none; -webkit-mask: none; mask: none; font: inherit; color: inherit; letter-spacing: inherit; text-decoration: none; vertical-align: baseline; animation: none; transition: none; } .uflf:not([data-btn="theme"]):not([data-card-link="1"]) .uflf-card a.uflf-more::before, .uflf[data-arrow="0"]:not([data-btn="theme"]) .uflf-card a.uflf-more::after { content: none; display: none; } /* Pfeil hinter dem Text (nicht bei „Nur eigene Klassen“ – dort gehört ::after dem Theme) */ .uflf[data-arrow="1"]:not([data-btn="theme"]) .uflf-card a.uflf-more::after { content: "\00a0→"; display: inline-block; transition: transform var(--uflf-btn-anim) var(--uflf-btn-ease); } /* Ganze Karte klickbar: unsichtbare Fläche über der Karte */ .uflf[data-card-link="1"] .uflf-more::before, .uflf[data-card-link="1"]:not([data-btn="theme"]) .uflf-card a.uflf-more::before { content: ""; display: block; position: absolute; inset: 0; z-index: 3; background: transparent; } .uflf[data-btn-align="center"] .uflf-more { align-self: center; } .uflf[data-btn-align="right"] .uflf-more { align-self: flex-end; } .uflf[data-btn-align="full"] .uflf-more { align-self: stretch; text-align: center; } /* Textlink */ .uflf[data-btn="link"] .uflf-card .uflf-more, .uflf[data-btn="link"] .uflf-card .uflf-more:visited { color: var(--uflf-more, var(--uflf-accent)); } .uflf[data-btn="link"] .uflf-card .uflf-more:hover, .uflf[data-btn="link"] .uflf-card .uflf-more:focus-visible { color: var(--uflf-more-h, var(--uflf-more, var(--uflf-accent))); } /* Button gefüllt bzw. mit Rahmen */ .uflf[data-btn="button"] .uflf-card .uflf-more, .uflf[data-btn="outline"] .uflf-card .uflf-more { padding: var(--uflf-btn-py) var(--uflf-btn-px); border: var(--uflf-btn-bw) solid var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent))); border-radius: var(--uflf-btn-radius); } .uflf[data-btn="button"] .uflf-card .uflf-more, .uflf[data-btn="button"] .uflf-card .uflf-more:visited { background-color: var(--uflf-btn-bg, var(--uflf-accent)); color: var(--uflf-btn-text); } .uflf[data-btn="button"] .uflf-card .uflf-more:hover, .uflf[data-btn="button"] .uflf-card .uflf-more:focus-visible { background-color: var(--uflf-btn-bg-h, var(--uflf-btn-bg, var(--uflf-accent))); color: var(--uflf-btn-text-h, var(--uflf-btn-text)); border-color: var(--uflf-btn-border-h, var(--uflf-btn-bg-h, var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent))))); } /* Ohne eigene Hover-Farbe: leicht aufhellen, damit der Button reagiert */ .uflf[data-btn="button"]:not([style*="--uflf-btn-bg-h"]) .uflf-card .uflf-more:hover { filter: brightness(1.08); } .uflf[data-btn="outline"] .uflf-card .uflf-more, .uflf[data-btn="outline"] .uflf-card .uflf-more:visited { background-color: transparent; color: var(--uflf-btn-otext, var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent)))); } .uflf[data-btn="outline"] .uflf-card .uflf-more:hover, .uflf[data-btn="outline"] .uflf-card .uflf-more:focus-visible { background-color: var(--uflf-btn-bg-h, var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent)))); color: var(--uflf-btn-text-h, var(--uflf-btn-text)); border-color: var(--uflf-btn-border-h, var(--uflf-btn-border, var(--uflf-btn-bg, var(--uflf-accent)))); } /* Symbol im Button (Bild aus der Mediathek), vor oder hinter dem Text */ .uflf .uflf-card .uflf-more.has-icon { display: inline-flex; align-items: center; } .uflf .uflf-card .uflf-more .uflf-btn-icon { display: block; flex: none; width: var(--uflf-btn-icon-size); height: var(--uflf-btn-icon-size); max-width: none; margin: 0 var(--uflf-btn-icon-gap) 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: contain; } .uflf[data-btn-icon-pos="right"] .uflf-card .uflf-more .uflf-btn-icon { order: 2; margin: 0 0 0 var(--uflf-btn-icon-gap); } .uflf[data-btn-icon-pos="right"] .uflf-card .uflf-more.has-icon::after { order: 3; } .uflf[data-btn-align="full"] .uflf-card .uflf-more.has-icon { justify-content: center; } /* „Nur eigene Klassen“: keine Plugin-Stile außer Position – Theme/Elementor übernimmt */ .uflf[data-btn="theme"] .uflf-card .uflf-more { font-size: revert; font-weight: revert; text-transform: revert; letter-spacing: revert; line-height: revert; } /* ---------- Button-Animation bei Hover ---------- * Dauer und Verlauf: --uflf-btn-anim / --uflf-btn-ease (gelten auch für die Slider-Pfeile). */ .uflf { --uflf-btn-fill: var(--uflf-btn-bg-h, var(--uflf-more-h, var(--uflf-accent))); } .uflf[data-btn-hover="lift"] .uflf-card .uflf-more:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); } .uflf[data-btn="link"][data-btn-hover="lift"] .uflf-card .uflf-more:hover { box-shadow: none; } .uflf[data-btn-hover="grow"] .uflf-card .uflf-more:hover { transform: scale(1.06); } .uflf[data-btn-hover="shrink"] .uflf-card .uflf-more:hover { transform: scale(.95); } .uflf[data-btn-hover="shadow"] .uflf-card .uflf-more:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .22); } .uflf[data-btn-hover="arrow"] .uflf-card .uflf-more:hover::after, .uflf[data-btn-hover="arrow"]:not([data-btn="theme"]) .uflf-card a.uflf-more:hover::after { transform: translateX(5px); } .uflf[data-btn-hover="underline"] .uflf-card .uflf-more:hover { text-decoration: underline; text-underline-offset: 3px; } /* Linie wächst von links unter dem Text */ .uflf[data-btn-hover="line"] .uflf-card .uflf-more { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-position: 0 100%; } .uflf[data-btn-hover="line"] .uflf-card .uflf-more:hover { background-size: 100% 2px; } .uflf[data-btn="button"][data-btn-hover="line"] .uflf-card .uflf-more, .uflf[data-btn="outline"][data-btn-hover="line"] .uflf-card .uflf-more { background-position: 50% calc(100% - 6px); background-origin: content-box; } /* Füllung schiebt sich hinein (Farbe: Hover-Hintergrund) */ .uflf[data-btn-hover="fill-left"] .uflf-card .uflf-more, .uflf[data-btn-hover="fill-up"] .uflf-card .uflf-more { background-image: linear-gradient(var(--uflf-btn-fill), var(--uflf-btn-fill)); } .uflf[data-btn-hover="fill-left"] .uflf-card .uflf-more { background-size: 0% 100%; background-position: 0 0; } .uflf[data-btn-hover="fill-up"] .uflf-card .uflf-more { background-size: 100% 0%; background-position: 0 100%; } .uflf[data-btn-hover="fill-left"] .uflf-card .uflf-more:hover, .uflf[data-btn-hover="fill-up"] .uflf-card .uflf-more:hover { background-size: 100% 100%; filter: none; } .uflf[data-btn="button"][data-btn-hover^="fill"] .uflf-card .uflf-more:hover { background-color: var(--uflf-btn-bg, var(--uflf-accent)); } .uflf[data-btn="outline"][data-btn-hover^="fill"] .uflf-card .uflf-more:hover { background-color: transparent; } .uflf[data-btn="link"][data-btn-hover^="fill"] .uflf-card .uflf-more:hover { color: var(--uflf-btn-text-h, var(--uflf-btn-text)); } /* Glanz läuft über den Button */ .uflf[data-btn-hover="shine"] .uflf-card .uflf-more { background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); background-size: 250% 100%; background-position: 100% 0; } .uflf[data-btn-hover="shine"] .uflf-card .uflf-more:hover { background-position: 0 0; filter: none; } /* Pulsieren, solange die Maus darauf ist */ @keyframes uflf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } .uflf[data-btn-hover="pulse"] .uflf-card .uflf-more:hover { animation: uflf-pulse calc(var(--uflf-btn-anim) * 3 + 300ms) var(--uflf-btn-ease) infinite; } /* Wippen */ @keyframes uflf-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } } .uflf[data-btn-hover="wobble"] .uflf-card .uflf-more:hover { animation: uflf-wobble calc(var(--uflf-btn-anim) * 2 + 200ms) var(--uflf-btn-ease); } /* ---------- Elemente ein-/ausblenden ---------- */ .uflf[data-image="0"] .uflf-media, .uflf[data-date="0"] .uflf-date, .uflf[data-text="0"] .uflf-text, .uflf[data-article="0"] .uflf-article, .uflf[data-button="0"]:not([data-card-link="1"]) .uflf-more { display: none; } /* ---------- Layout: Raster ---------- */ .uflf--grid .uflf-track { display: grid; grid-template-columns: repeat(var(--uflf-cols), minmax(0, 1fr)); align-items: stretch; } /* ---------- Layout: Liste ---------- */ .uflf--list .uflf-track { display: flex; flex-direction: column; } .uflf--list .uflf-card { flex-direction: row; } .uflf--list[data-list-img="right"] .uflf-card { flex-direction: row-reverse; } .uflf--list .uflf-media { flex: 0 0 var(--uflf-list-img); aspect-ratio: auto; min-height: 200px; } .uflf--list .uflf-media img { position: absolute; inset: 0; } .uflf--list[data-list-img="top"] .uflf-card, .uflf--list[data-image="0"] .uflf-card, .uflf--list .uflf-card:not(:has(.uflf-media)) { flex-direction: column; } .uflf--list[data-list-img="top"] .uflf-media { flex: none; aspect-ratio: var(--uflf-ratio); min-height: 0; } .uflf--list[data-list-img="top"] .uflf-media img { position: static; } @media (max-width: 640px) { .uflf--list:not([data-size]) .uflf-card { flex-direction: column; } .uflf--list:not([data-size]) .uflf-media { flex: none; aspect-ratio: var(--uflf-ratio); min-height: 0; } .uflf--list:not([data-size]) .uflf-media img { position: static; } } .uflf--list[data-size="m"] .uflf-card { flex-direction: column; } .uflf--list[data-size="m"] .uflf-media { flex: none; aspect-ratio: var(--uflf-ratio); min-height: 0; } .uflf--list[data-size="m"] .uflf-media img { position: static; } /* ---------- Layout: Slider ---------- */ .uflf--slider .uflf-viewport { position: relative; } .uflf--slider .uflf-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 6px 2px 10px; /* Platz für Schatten und Hover-Bewegung */ } .uflf--slider .uflf-track::-webkit-scrollbar { display: none; } .uflf--slider .uflf-track:focus-visible { outline: 2px solid var(--uflf-accent); outline-offset: 4px; } .uflf--slider .uflf-card { flex: 0 0 calc((100% - (var(--uflf-view) - 1) * var(--uflf-gap)) / var(--uflf-view)); scroll-snap-align: start; } .uflf-nav { display: none; } .uflf--slider .uflf-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; } .uflf { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .uflf[data-nav-shape="chevron"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .uflf[data-nav-shape="chevron-thin"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .uflf[data-nav-shape="chevron-bold"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .uflf[data-nav-shape="arrow"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .uflf[data-nav-shape="arrow-thin"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .uflf[data-nav-shape="triangle"] { --uflf-nav-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='black'/%3E%3C/svg%3E"); } /* Pfeil-Schaltflächen: Grundform „gefüllt“ */ .uflf .uflf-nav .uflf-prev, .uflf .uflf-nav .uflf-next { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--uflf-nav-size); height: var(--uflf-nav-size); padding: 0; border: var(--uflf-nav-bw) solid var(--uflf-nav-border, transparent); border-radius: var(--uflf-nav-radius); background: var(--uflf-nav-bg, var(--uflf-accent)); color: var(--uflf-nav-icon, var(--uflf-btn-text)); box-shadow: var(--uflf-nav-shadow); cursor: pointer; transition-property: opacity, background-color, color, border-color, transform, box-shadow; transition-duration: var(--uflf-btn-anim); transition-timing-function: var(--uflf-btn-ease); } /* Symbol als Maske: Farbe = Textfarbe der Schaltfläche, Form per data-nav-shape */ .uflf .uflf-nav .uflf-prev::before, .uflf .uflf-nav .uflf-next::before { content: ""; display: block; width: calc(var(--uflf-nav-size) * var(--uflf-nav-icon-size) / 100); height: calc(var(--uflf-nav-size) * var(--uflf-nav-icon-size) / 100); background: currentColor; -webkit-mask: var(--uflf-nav-svg) center / contain no-repeat; mask: var(--uflf-nav-svg) center / contain no-repeat; transition: transform var(--uflf-btn-anim) var(--uflf-btn-ease); } .uflf .uflf-nav .uflf-prev::before { transform: scaleX(-1); } .uflf .uflf-nav .uflf-prev:hover, .uflf .uflf-nav .uflf-next:hover { background: var(--uflf-nav-bg-h, var(--uflf-nav-bg, var(--uflf-accent))); color: var(--uflf-nav-icon-h, var(--uflf-nav-icon, var(--uflf-btn-text))); border-color: var(--uflf-nav-border-h, var(--uflf-nav-border, transparent)); } /* Stil „Rahmen“: transparent, Symbol und Rahmen in Akzentfarbe, bei Hover gefüllt */ .uflf[data-nav-style="outline"] .uflf-nav .uflf-prev, .uflf[data-nav-style="outline"] .uflf-nav .uflf-next { background: transparent; border-color: var(--uflf-nav-border, var(--uflf-nav-bg, var(--uflf-accent))); border-width: max(var(--uflf-nav-bw), 1px); color: var(--uflf-nav-icon, var(--uflf-nav-bg, var(--uflf-accent))); } .uflf[data-nav-style="outline"] .uflf-nav .uflf-prev:hover, .uflf[data-nav-style="outline"] .uflf-nav .uflf-next:hover { background: var(--uflf-nav-bg-h, var(--uflf-nav-bg, var(--uflf-accent))); border-color: var(--uflf-nav-border-h, var(--uflf-nav-bg-h, var(--uflf-nav-border, var(--uflf-nav-bg, var(--uflf-accent))))); color: var(--uflf-nav-icon-h, var(--uflf-btn-text)); } /* Stil „nur Symbol“: kein Hintergrund, kein Rahmen */ .uflf[data-nav-style="icon"] .uflf-nav .uflf-prev, .uflf[data-nav-style="icon"] .uflf-nav .uflf-next, .uflf[data-nav-style="icon"] .uflf-nav .uflf-prev:hover, .uflf[data-nav-style="icon"] .uflf-nav .uflf-next:hover { background: transparent; border-color: transparent; box-shadow: none; } .uflf[data-nav-style="icon"] .uflf-nav .uflf-prev, .uflf[data-nav-style="icon"] .uflf-nav .uflf-next { color: var(--uflf-nav-icon, var(--uflf-accent)); } .uflf[data-nav-style="icon"] .uflf-nav .uflf-prev:hover, .uflf[data-nav-style="icon"] .uflf-nav .uflf-next:hover { color: var(--uflf-nav-icon-h, var(--uflf-nav-icon, var(--uflf-accent))); } /* Hover-Bewegung */ .uflf[data-nav-hover="grow"] .uflf-nav .uflf-prev:not(:disabled):hover, .uflf[data-nav-hover="grow"] .uflf-nav .uflf-next:not(:disabled):hover { transform: scale(1.1); } .uflf[data-nav-hover="slide"] .uflf-nav .uflf-next:not(:disabled):hover::before { transform: translateX(3px); } .uflf[data-nav-hover="slide"] .uflf-nav .uflf-prev:not(:disabled):hover::before { transform: scaleX(-1) translateX(3px); } .uflf .uflf-nav .uflf-prev:disabled, .uflf .uflf-nav .uflf-next:disabled { opacity: .3; cursor: default; } .uflf .uflf-nav .uflf-prev:focus-visible, .uflf .uflf-nav .uflf-next:focus-visible, .uflf .uflf-nav .uflf-dots button:focus-visible { outline: 2px solid var(--uflf-accent); outline-offset: 3px; } /* Position */ .uflf[data-nav="below-sides"] .uflf-nav { justify-content: space-between; } .uflf[data-nav="below-sides"] .uflf-dots { flex: 1; } .uflf[data-nav="sides"] .uflf-nav .uflf-prev, .uflf[data-nav="sides"] .uflf-nav .uflf-next { position: absolute; top: calc(50% - var(--uflf-nav-size) / 2 - 20px); z-index: 5; } .uflf[data-nav="sides"] .uflf-nav .uflf-prev { left: var(--uflf-nav-offset); } .uflf[data-nav="sides"] .uflf-nav .uflf-next { right: var(--uflf-nav-offset); } .uflf--slider[data-nav="top"] { padding-top: calc(var(--uflf-nav-size) + 12px); } .uflf[data-nav="top"] .uflf-nav .uflf-prev, .uflf[data-nav="top"] .uflf-nav .uflf-next { position: absolute; top: 0; z-index: 5; } .uflf[data-nav="top"] .uflf-nav .uflf-next { right: max(0px, var(--uflf-nav-offset)); } .uflf[data-nav="top"] .uflf-nav .uflf-prev { right: calc(max(0px, var(--uflf-nav-offset)) + var(--uflf-nav-size) + 8px); } .uflf--slider[data-nav="top"].is-static { padding-top: 0; } .uflf-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--uflf-dot-size) * .9); } .uflf .uflf-nav .uflf-dots button { width: var(--uflf-dot-size); height: var(--uflf-dot-size); padding: 0; border: 0; border-radius: 50%; background: var(--uflf-dot, var(--uflf-accent)); opacity: .25; cursor: pointer; transition: opacity var(--uflf-anim), transform var(--uflf-anim), background-color var(--uflf-anim); } .uflf[style*="--uflf-dot:"] .uflf-nav .uflf-dots button { opacity: 1; } .uflf .uflf-nav .uflf-dots button[aria-current="true"] { background: var(--uflf-dot-active, var(--uflf-dot, var(--uflf-accent))); opacity: 1; transform: scale(1.25); } /* Fortschritt als Balken: ein Balken gleitet über eine Linie – synchron zur Scrollposition des Sliders */ .uflf-bar { display: none; } .uflf--slider[data-indicator="bar"] .uflf-dots { display: none; } .uflf--slider[data-indicator="bar"] .uflf-bar { display: block; position: relative; flex: 0 1 var(--uflf-bar-w); width: var(--uflf-bar-w); min-width: 60px; height: max(16px, var(--uflf-bar-th)); /* größere Klickfläche als die Linie selbst */ cursor: pointer; touch-action: pan-y; /* senkrecht scrollen bleibt möglich, waagrecht zieht den Balken */ user-select: none; -webkit-user-select: none; } .uflf .uflf-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--uflf-bar-h); transform: translateY(-50%); background: var(--uflf-bar-line, rgba(0, 0, 0, .12)); } .uflf .uflf-bar-thumb { position: absolute; left: 0; top: 50%; width: 30%; height: var(--uflf-bar-th); margin-top: calc(var(--uflf-bar-th) / -2); background: var(--uflf-bar-thumb, var(--uflf-accent)); will-change: transform; cursor: grab; } .uflf.is-dragging .uflf-bar-thumb { cursor: grabbing; } .uflf[data-bar-round="1"] .uflf-bar::before, .uflf[data-bar-round="1"] .uflf-bar-thumb { border-radius: 999px; } .uflf[data-nav="below-sides"][data-indicator="bar"] .uflf-bar { margin: 0 auto; } .uflf[data-arrows="0"] .uflf-nav .uflf-prev, .uflf[data-arrows="0"] .uflf-nav .uflf-next, .uflf[data-dots="0"] .uflf-dots, .uflf[data-dots="0"] .uflf-bar { display: none; } .uflf--slider[data-arrows="0"][data-dots="0"] .uflf-nav { display: none; } .uflf.is-static .uflf-nav { display: none; } /* alle Karten passen ins Bild */ /* ---------- Layout: Wechselliste ---------- * Titel untereinander neben dem Bild. Der aktive Beitrag blendet ein; alle Beiträge liegen übereinander in * einer Rasterzelle – die Höhe richtet sich nach dem höchsten, beim Wechsel springt nichts. */ .uflf-switch-list { display: none; } @supports (color: color-mix(in srgb, red 50%, transparent)) { .uflf { --uflf-sw-line-auto: color-mix(in srgb, currentColor 28%, transparent); } } .uflf.uflf--switch { display: grid; grid-template-columns: var(--uflf-sw-list) minmax(0, 1fr); column-gap: var(--uflf-sw-gap); row-gap: var(--uflf-gap); align-items: start; } .uflf--switch[data-sw-side="right"] { grid-template-columns: minmax(0, 1fr) var(--uflf-sw-list); } .uflf--switch[data-sw-side="right"] .uflf-switch-list { order: 2; } .uflf--switch[data-sw-valign="center"] .uflf-switch-list { align-self: center; } .uflf--switch[data-sw-valign="end"] .uflf-switch-list { align-self: end; } .uflf--switch .uflf-nav { display: none; } .uflf--switch .uflf-viewport { min-width: 0; } .uflf--switch .uflf-track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } /* Beiträge übereinander, nur der aktive ist sichtbar (unsichtbare sind auch für Tastatur und Vorleser aus) */ .uflf--switch .uflf-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--uflf-sw-fade) ease, visibility 0s linear var(--uflf-sw-fade), transform var(--uflf-anim) ease, box-shadow var(--uflf-anim) ease, border-color var(--uflf-anim) ease, background-color var(--uflf-anim) ease; } .uflf--switch .uflf-card.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity var(--uflf-sw-fade) ease, visibility 0s, transform var(--uflf-anim) ease, box-shadow var(--uflf-anim) ease, border-color var(--uflf-anim) ease, background-color var(--uflf-anim) ease; } .uflf--switch[data-sw-body="0"] .uflf-card .uflf-body { display: none; } /* Bild zoomt beim Einblenden leicht heran */ .uflf--switch[data-sw-zoom="1"] .uflf-media img { transition: transform calc(var(--uflf-sw-fade) * 3) cubic-bezier(.2, .7, .2, 1), filter var(--uflf-anim) ease; } .uflf--switch[data-sw-zoom="1"] .uflf-card:not(.is-active) .uflf-media img { transform: scale(1.08); } /* Titel-Liste */ .uflf--switch .uflf-switch-list { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--uflf-sw-line, var(--uflf-sw-line-auto)); color: var(--uflf-sw-color, inherit); } /* Theme-/Elementor-Stile für