style: unify lightbox CSS, adapt entry-cover and post-card blur
remove the duplicated .image-viewer-* and .md-image-lightbox-* rules (~93 lines); add a single .lightbox-* set sized/positioned by JS transform. entry-cover and post-card-cover now target the blur-img structure (4:3 ratio on cards, cover-fill on entry cover).
This commit is contained in:
parent
cb8c42e833
commit
940236d84f
151
input.css
151
input.css
@ -198,10 +198,15 @@
|
|||||||
margin-bottom: var(--content-gap-paper);
|
margin-bottom: var(--content-gap-paper);
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-cover img {
|
/* 封面用 blur-img 结构：去 margin、保持圆角，内层 img cover 填充 */
|
||||||
|
.entry-cover .blur-img {
|
||||||
|
margin: 0;
|
||||||
border-radius: var(--radius-paper);
|
border-radius: var(--radius-paper);
|
||||||
|
}
|
||||||
|
.entry-cover img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-content {
|
.post-content {
|
||||||
@ -521,113 +526,85 @@
|
|||||||
text-underline-offset: 0.3rem;
|
text-underline-offset: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-viewer-overlay {
|
/* ========== 统一灯箱（Medium 风格） ========== */
|
||||||
|
.lightbox-overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
background: rgba(0, 0, 0, 0.92);
|
background: rgba(0, 0, 0, 0.92);
|
||||||
display: flex;
|
opacity: 1;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
animation: fadeIn 0.2s ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-viewer-content {
|
/* 灯箱图片：绝对定位，尺寸/位置由 JS 的 transform 控制。
|
||||||
position: relative;
|
transform-origin 为 top left，配合 translate+scale 实现原地缩放。 */
|
||||||
max-width: 90vw;
|
.lightbox-img {
|
||||||
max-height: 90vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-viewer-img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 90vh;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: var(--radius-paper);
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-viewer-close {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2.5rem;
|
left: 0;
|
||||||
right: 0;
|
top: 0;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
transform-origin: top left;
|
||||||
border: none;
|
max-width: none;
|
||||||
color: white;
|
max-height: none;
|
||||||
font-size: 1.5rem;
|
object-fit: contain;
|
||||||
width: 2rem;
|
opacity: 1;
|
||||||
height: 2rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: background 0.2s ease-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-viewer-close:hover {
|
.lightbox-caption {
|
||||||
background: rgba(255, 255, 255, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-image-lightbox-overlay {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
left: 0;
|
||||||
z-index: 50;
|
|
||||||
background: rgba(0, 0, 0, 0.92);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 2rem;
|
|
||||||
animation: fadeIn 0.2s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-image-lightbox-content {
|
|
||||||
position: relative;
|
|
||||||
max-width: 90vw;
|
|
||||||
max-height: 90vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-image-lightbox-content img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 90vh;
|
|
||||||
object-fit: contain;
|
|
||||||
border-radius: var(--radius-paper);
|
|
||||||
}
|
|
||||||
|
|
||||||
.md-image-lightbox-close {
|
|
||||||
position: absolute;
|
|
||||||
top: -2.5rem;
|
|
||||||
right: 0;
|
right: 0;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(255, 255, 255, 0.85);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-counter {
|
||||||
|
position: fixed;
|
||||||
|
right: 1.5rem;
|
||||||
|
bottom: 1.5rem;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: rgba(255, 255, 255, 0.7);
|
||||||
font-size: 1.5rem;
|
font-size: 3rem;
|
||||||
width: 2rem;
|
line-height: 1;
|
||||||
height: 2rem;
|
width: 3rem;
|
||||||
border-radius: 50%;
|
height: 5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
z-index: 2;
|
||||||
align-items: center;
|
border-radius: 0.5rem;
|
||||||
justify-content: center;
|
transition: color 0.2s ease-out, background 0.2s ease-out;
|
||||||
transition: background 0.2s ease-out;
|
|
||||||
}
|
}
|
||||||
|
.lightbox-nav:hover {
|
||||||
.md-image-lightbox-close:hover {
|
color: #fff;
|
||||||
background: rgba(255, 255, 255, 0.4);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
.lightbox-prev { left: 1rem; }
|
||||||
|
.lightbox-next { right: 1rem; }
|
||||||
|
|
||||||
.post-card-cover {
|
/* 卡片封面：blur-img 结构，固定 4:3 比例，hover 缩放 */
|
||||||
overflow: hidden;
|
.post-card-cover-blur {
|
||||||
border-radius: var(--radius-paper);
|
margin: 0;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
}
|
}
|
||||||
|
.post-card-cover-blur img {
|
||||||
.post-card-cover img {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
transition: transform 0.3s ease-out;
|
transition: transform 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
.group:hover .post-card-cover-blur img {
|
||||||
.post-card-cover:hover img {
|
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user