Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 07:12:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: some improvements for image zooming

Browse Source
This commit is contained in:
saicaca
2024-07-28 18:46:16 +08:00
parent 09e084fd5b
commit f96cf6fdae
4 changed files with 83 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/GlobalStyles.astro
View File

@@ -264,6 +264,23 @@ color_set({
html.is-animating .transition-swup-fade {
@apply opacity-0 translate-y-4
}
/* PhotoSwipe */
.pswp__button {
@apply transition bg-black/40 hover:bg-black/50 active:bg-black/60 flex items-center justify-center mr-0 w-12 h-12 !important;
}
.pswp__button--zoom, .pswp__button--close {
@apply mt-4 rounded-xl active:scale-90 !important;
}
.pswp__button--zoom {
@apply mr-2.5 !important;
}
.pswp__button--close {
@apply mr-4 !important;
}
.custom-md img, #post-cover img {
@apply cursor-zoom-in
}
}
@keyframes fade-in-up {

2
src/components/misc/ImageWrapper.astro
View File

@@ -32,7 +32,7 @@ if (isLocal) {
const imageClass = 'w-full h-full object-cover';
const imageStyle = `object-position: ${position}`
---
<div class:list={[className, 'overflow-hidden relative']}>
<div id={id} class:list={[className, 'overflow-hidden relative']}>
<div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
{isLocal && img && <Image src={img} alt={alt || ""} class={imageClass} style={imageStyle}/>}
{!isLocal && <img src={isPublic ? url(src) : src} alt={alt || ""} class={imageClass} style={imageStyle}/>}