48 lines
1.1 KiB
CSS
48 lines
1.1 KiB
CSS
/* 文档图片点击全屏查看 */
|
|
|
|
/* 正文图片：加边框、圆角与阴影，避免白色截图与正文融在一起 */
|
|
.vp-doc img {
|
|
display: block;
|
|
margin: 16px auto;
|
|
padding: 6px;
|
|
border: 1px solid var(--vp-c-divider);
|
|
border-radius: 10px;
|
|
background-color: var(--vp-c-bg-soft);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 可点击的正文图片：鼠标样式与轻微过渡 */
|
|
.vp-doc img.doc-zoomable {
|
|
cursor: zoom-in;
|
|
transition: opacity 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.vp-doc img.doc-zoomable:hover {
|
|
opacity: 0.94;
|
|
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
/* 全屏查看遮罩：默认隐藏，激活时铺满视口 */
|
|
.doc-image-viewer {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000000;
|
|
cursor: zoom-out;
|
|
}
|
|
|
|
.doc-image-viewer.active {
|
|
display: flex;
|
|
}
|
|
|
|
/* 图片按比例铺满屏幕（contain，保持完整不裁剪） */
|
|
.doc-image-viewer img {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
object-fit: contain;
|
|
cursor: zoom-out;
|
|
}
|