rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Wiki Photo-Gallery mit Thumbnails + Lightbox, alle Fotos einer Rasse anklickbar (SW by-v664)

Browse source
This commit is contained in:
rene 2026-05-03 21:23:41 +02:00
parent 1d1171e5f2
commit 84e6bfdd82
5 changed files with 223 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

133
backend/static/css/components.css
View file

@ -5571,6 +5571,139 @@ html.modal-open {
border-radius: 0;
}
/* ── Wiki Gallery ────────────────────────────────────────── */
.wiki-gallery-wrap {
position: relative;
margin-bottom: var(--space-3);
}
.wiki-gallery-main {
width: 100%;
height: 240px;
object-fit: cover;
object-position: center top;
border-radius: var(--radius-lg);
display: block;
}
.wiki-gallery-strip {
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding: var(--space-2) 0 0;
scrollbar-width: none;
}
.wiki-gallery-strip::-webkit-scrollbar { display: none; }
.wiki-gallery-thumb {
flex-shrink: 0;
width: 64px; height: 64px;
border-radius: var(--radius-md);
overflow: hidden;
border: 2px solid transparent;
padding: 0;
background: none;
cursor: pointer;
position: relative;
transition: border-color .15s;
}
.wiki-gallery-thumb.active { border-color: var(--c-primary); }
.wiki-gallery-thumb img {
width: 100%; height: 100%; object-fit: cover;
}
.wiki-gallery-thumb-label {
position: absolute;
bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,.55);
color: #fff;
font-size: 8px;
padding: 2px 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wiki-gallery-expand {
position: absolute;
top: var(--space-2);
right: var(--space-2);
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(0,0,0,.45);
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
transition: background .15s;
}
.wiki-gallery-expand:hover { background: rgba(0,0,0,.65); }
/* ── Wiki Lightbox ───────────────────────────────────────── */
#wiki-lightbox {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
}
.wlb-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.88);
backdrop-filter: blur(6px);
}
.wlb-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
max-width: min(92vw, 680px);
width: 100%;
gap: var(--space-2);
}
.wlb-img {
width: 100%;
max-height: 72vh;
object-fit: contain;
border-radius: var(--radius-lg);
}
.wlb-close {
position: absolute;
top: -44px;
right: 0;
background: rgba(255,255,255,.12);
border: none;
color: #fff;
width: 36px; height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.wlb-prev, .wlb-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,.12);
border: none;
color: #fff;
width: 40px; height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
transition: background .15s;
}
.wlb-prev { left: -48px; }
.wlb-next { right: -48px; }
.wlb-prev:hover, .wlb-next:hover { background: rgba(255,255,255,.25); }
.wlb-caption { color: rgba(255,255,255,.75); font-size: var(--text-sm); }
.wlb-counter { color: rgba(255,255,255,.45); font-size: var(--text-xs); }
/* Steckbrief-Grid */
.wiki-steckbrief-grid {
display: grid;