Refine modal arrows and counter

This commit is contained in:
Your Name 2026-01-02 02:18:56 -05:00
parent f5bf27a56e
commit 6a0dcc650d
2 changed files with 6 additions and 6 deletions

View File

@ -247,7 +247,7 @@ function applyPostDetails(modalWrap, post) {
? `<img src="${escapeHtml(heroImageSrc)}" data-fullsrc="${escapeHtml(heroFullSrc)}" alt="" loading="lazy" data-gallery-index="0" />` ? `<img src="${escapeHtml(heroImageSrc)}" data-fullsrc="${escapeHtml(heroFullSrc)}" alt="" loading="lazy" data-gallery-index="0" />`
: `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(post)}"></i><span>${escapeHtml(normCatLabel(post))}</span></div></div>`; : `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(post)}"></i><span>${escapeHtml(normCatLabel(post))}</span></div></div>`;
const arrowHtml = heroHasGallery const arrowHtml = heroHasGallery
? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left" /></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right" /></button>` ? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left"></i></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right"></i></button>`
: ""; : "";
const indicatorHtml = heroHasGallery const indicatorHtml = heroHasGallery
? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>` ? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`

View File

@ -898,8 +898,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
position:absolute; position:absolute;
top:50%; top:50%;
transform:translateY(-50%) scale(0.95); transform:translateY(-50%) scale(0.95);
width:52px; width:60px;
height:52px; height:60px;
border-radius:50%; border-radius:50%;
border:1px solid rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.35);
background: rgba(0,0,0,0.55); background: rgba(0,0,0,0.55);
@ -924,7 +924,7 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
.sw-modal-gallery-indicator{ .sw-modal-gallery-indicator{
position:absolute; position:absolute;
top:0.75rem; top:0.75rem;
right:calc(10px + 52px + 10px); right:calc(10px + 60px + 14px);
padding:0.2rem 0.65rem; padding:0.2rem 0.65rem;
border-radius:999px; border-radius:999px;
background:rgba(0,0,0,0.6); background:rgba(0,0,0,0.6);
@ -950,8 +950,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
@media (max-width: 768px) { @media (max-width: 768px) {
.sw-modal-hero-arrow{ .sw-modal-hero-arrow{
width:46px; width:54px;
height:46px; height:54px;
border-width:0; border-width:0;
background:rgba(15,23,42,0.7); background:rgba(15,23,42,0.7);
} }