refactor(lightbox): move .lightbox-* CSS into lightbox project, wire import
This commit is contained in:
parent
5f57d375ea
commit
b4ef906141
72
input.css
72
input.css
@ -526,78 +526,6 @@
|
|||||||
text-underline-offset: 0.3rem;
|
text-underline-offset: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 统一灯箱（Medium 风格） ========== */
|
|
||||||
.lightbox-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 50;
|
|
||||||
/* overflow:hidden 裁剪超大的 absolute img，防止原图（可能数千 px）
|
|
||||||
撑大文档可滚动区，否则会触发非预期的 scroll 事件。 */
|
|
||||||
overflow: hidden;
|
|
||||||
background: rgba(0, 0, 0, 0.92);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 灯箱图片：绝对定位，尺寸/位置由 JS 的 transform 控制。
|
|
||||||
transform-origin 为 top left，配合 translate+scale 实现原地缩放。
|
|
||||||
显式 width/height 由 JS 设置为原图尺寸，确保布局尺寸确定，
|
|
||||||
transform 只做视觉缩放，不改变占位。 */
|
|
||||||
.lightbox-img {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
transform-origin: top left;
|
|
||||||
max-width: none;
|
|
||||||
max-height: none;
|
|
||||||
object-fit: contain;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightbox-caption {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
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;
|
|
||||||
color: rgba(255, 255, 255, 0.7);
|
|
||||||
font-size: 3rem;
|
|
||||||
line-height: 1;
|
|
||||||
width: 3rem;
|
|
||||||
height: 5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 2;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: color 0.2s ease-out, background 0.2s ease-out;
|
|
||||||
}
|
|
||||||
.lightbox-nav:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
.lightbox-prev { left: 1rem; }
|
|
||||||
.lightbox-next { right: 1rem; }
|
|
||||||
|
|
||||||
/* 卡片封面：blur-img 结构，固定 4:3 比例，hover 缩放 */
|
/* 卡片封面：blur-img 结构，固定 4:3 比例，hover 缩放 */
|
||||||
.post-card-cover-blur {
|
.post-card-cover-blur {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
import { fitCentered, transformFor, originalUrl, type Rect } from "./geometry";
|
import { fitCentered, transformFor, originalUrl, type Rect } from "./geometry";
|
||||||
|
import "./style.css";
|
||||||
|
|
||||||
interface LightboxState {
|
interface LightboxState {
|
||||||
overlay: HTMLDivElement;
|
overlay: HTMLDivElement;
|
||||||
|
|||||||
71
libs/lightbox/src/style.css
Normal file
71
libs/lightbox/src/style.css
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
/* ========== 统一灯箱（Medium 风格） ========== */
|
||||||
|
.lightbox-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 50;
|
||||||
|
/* overflow:hidden 裁剪超大的 absolute img，防止原图（可能数千 px）
|
||||||
|
撑大文档可滚动区，否则会触发非预期的 scroll 事件。 */
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(0, 0, 0, 0.92);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 灯箱图片：绝对定位，尺寸/位置由 JS 的 transform 控制。
|
||||||
|
transform-origin 为 top left，配合 translate+scale 实现原地缩放。
|
||||||
|
显式 width/height 由 JS 设置为原图尺寸，确保布局尺寸确定，
|
||||||
|
transform 只做视觉缩放，不改变占位。 */
|
||||||
|
.lightbox-img {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
transform-origin: top left;
|
||||||
|
max-width: none;
|
||||||
|
max-height: none;
|
||||||
|
object-fit: contain;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-caption {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
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;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 1;
|
||||||
|
width: 3rem;
|
||||||
|
height: 5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 2;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
transition: color 0.2s ease-out, background 0.2s ease-out;
|
||||||
|
}
|
||||||
|
.lightbox-nav:hover {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.lightbox-prev { left: 1rem; }
|
||||||
|
.lightbox-next { right: 1rem; }
|
||||||
1
libs/lightbox/src/vite-env.d.ts
vendored
Normal file
1
libs/lightbox/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
Loading…
x
Reference in New Issue
Block a user