Refine modal arrows and counter
This commit is contained in:
parent
f5bf27a56e
commit
6a0dcc650d
|
|
@ -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>`
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue