luxick/luxtools-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update lightbox styles and caption handling

Browse Source
This commit is contained in:
luxick
2026-01-15 19:21:31 +01:00
parent 7c9e289740
commit cf1fcd9e96
2 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
script.js
View File

@@ -56,10 +56,11 @@
root.innerHTML = root.innerHTML =
'<div class="luxtools-lightbox-backdrop" data-luxtools-action="close"></div>' + '<div class="luxtools-lightbox-backdrop" data-luxtools-action="close"></div>' +
'<div class="luxtools-lightbox-stage">' + '<div class="luxtools-lightbox-stage">' +
'<div class="luxtools-lightbox-media">' + '<button type="button" class="luxtools-lightbox-close" data-luxtools-action="close" aria-label="Close">×</button>' +
'<img class="luxtools-lightbox-img" alt="" />' +
'<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-prev" data-luxtools-action="prev" aria-label="Previous"></button>' + '<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-prev" data-luxtools-action="prev" aria-label="Previous"></button>' +
'<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-next" data-luxtools-action="next" aria-label="Next"></button>' + '<button type="button" class="luxtools-lightbox-zone luxtools-lightbox-zone-next" data-luxtools-action="next" aria-label="Next"></button>' +
'<div class="luxtools-lightbox-media">' +
'<img class="luxtools-lightbox-img" alt="" />' +
'</div>' + '</div>' +
'<div class="luxtools-lightbox-caption"></div>' + '<div class="luxtools-lightbox-caption"></div>' +
'</div>'; '</div>';
@@ -106,7 +107,7 @@
var it = items[index]; var it = items[index];
img.src = it.full; img.src = it.full;
img.setAttribute('data-luxtools-index', String(index)); img.setAttribute('data-luxtools-index', String(index));
cap.textContent = (it.name || '').trim(); if (cap) cap.textContent = (it.name || '').trim();
} }
function close() { function close() {

50
style.css
View File

@@ -295,17 +295,22 @@ html.luxtools-noscroll body {
.luxtools-lightbox .luxtools-lightbox-caption { .luxtools-lightbox .luxtools-lightbox-caption {
position: absolute; position: absolute;
left: 0; left: 50%;
right: 0; bottom: 1.2em;
bottom: 0; transform: translateX(-50%);
padding: 0.6em 1em; display: block;
color: #fff; max-width: 60rem;
opacity: 0.9; padding: 0.4em 0.8em;
background: rgba(0, 0, 0, 0.35); color: rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.45);
border-radius: 0.4em;
font-size: 0.9em;
line-height: 1.35;
text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; pointer-events: none;
} }
/* Image-anchored prev/next zones. /* Image-anchored prev/next zones.
@@ -314,6 +319,7 @@ html.luxtools-noscroll body {
*/ */
.luxtools-lightbox button.luxtools-lightbox-zone { .luxtools-lightbox button.luxtools-lightbox-zone {
position: absolute; position: absolute;
z-index: 2;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 25%; width: 25%;
@@ -337,15 +343,7 @@ html.luxtools-noscroll body {
transform: translateY(-50%); transform: translateY(-50%);
font-size: 3em; font-size: 3em;
line-height: 1; line-height: 1;
display: inline-flex;
justify-content: center;
box-sizing: border-box;
min-height: 1.1em;
color: rgba(255, 255, 255, 0.95); color: rgba(255, 255, 255, 0.95);
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
padding: 0 0.28em;
text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9); text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
opacity: 0; opacity: 0;
transition: opacity 120ms ease-in-out; transition: opacity 120ms ease-in-out;
@@ -367,6 +365,26 @@ html.luxtools-noscroll body {
opacity: 1; opacity: 1;
} }
/* Top-right close button. */
.luxtools-lightbox button.luxtools-lightbox-close {
position: absolute;
top: 0.8em;
right: 0.8em;
z-index: 3;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 0 0.4em rgba(0, 0, 0, 0.9);
background: transparent;
border: none;
font-size: 2.5em;
cursor: pointer;
}
.luxtools-lightbox button.luxtools-lightbox-close:hover,
.luxtools-lightbox button.luxtools-lightbox-close:focus-visible {
background: rgba(0, 0, 0, 0.60);
border-radius: 999px;
}
@media (max-width: 600px) { @media (max-width: 600px) {
.luxtools-lightbox button.luxtools-lightbox-zone::after { .luxtools-lightbox button.luxtools-lightbox-zone::after {
font-size: 2.4em; font-size: 2.4em;