earthjasonlin/mailova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(showcase): lightbox, checkbox per-card toggle, lazyload, fix toggle Y-align, remove navbar on public page

Browse Source
This commit is contained in:
Zichao Lin
2026-07-06 00:24:03 +08:00
parent 2c0229b12f
commit 66ba163ef6
7 changed files with 98 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/static/style.css
View File

@@ -227,13 +227,13 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
.empty { color: var(--text-muted); padding: 2rem; text-align: center; }
/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; margin: 0; vertical-align: middle; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 20px; transition: .2s; }
.toggle-slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-sm { width: 30px; height: 18px; }
.toggle-sm { width: 30px; height: 18px; margin: 0; }
.toggle-sm .toggle-slider::before { height: 14px; width: 14px; }
.toggle-sm input:checked + .toggle-slider::before { transform: translateX(12px); }
@@ -247,6 +247,18 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
.showcase-card-meta { display: flex; gap: .5rem; font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.85); justify-content: center; align-items: center; }
.lightbox.active { display: flex; }
.lightbox-content { position: relative; max-width: 90vw; max-height: 85vh; text-align: center; }
.lightbox-content img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 6px; }
.lightbox-caption { color: #fff; font-size: .85rem; margin-top: .5rem; text-align: center; }
.lightbox-close { position: absolute; top: .75rem; right: 1rem; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 101; line-height: 1; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 1.8rem; cursor: pointer; padding: .5rem .75rem; border-radius: 4px; z-index: 101; transition: background .2s; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.3); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
/* Responsive */
@media (max-width: 640px) {
.detail-grid { grid-template-columns: 1fr; }