mirror of
https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git
synced 2026-07-03 23:51:26 +00:00
57 lines
1.1 KiB
CSS
57 lines
1.1 KiB
CSS
|
.image-preview-dialog {
|
||
|
|
padding: 0;
|
||
|
|
border: none;
|
||
|
|
background: transparent;
|
||
|
|
max-width: min(96vw, 1200px);
|
||
|
|
max-height: 96vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-preview-dialog::backdrop {
|
||
|
|
background: rgba(0, 0, 0, 0.72);
|
||
|
|
backdrop-filter: blur(6px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-preview-dialog img {
|
||
|
|
display: block;
|
||
|
|
max-width: 96vw;
|
||
|
|
max-height: 90vh;
|
||
|
|
object-fit: contain;
|
||
|
|
border-radius: 16px;
|
||
|
|
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-preview-close:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-preview-close:focus-visible {
|
||
|
|
outline: 2px solid rgba(125, 162, 255, 0.9);
|
||
|
|
outline-offset: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-preview-close {
|
||
|
|
position: fixed;
|
||
|
|
top: 1.25rem;
|
||
|
|
right: 1.25rem;
|
||
|
|
z-index: 1;
|
||
|
|
width: 2.4rem;
|
||
|
|
height: 2.4rem;
|
||
|
|
border: none;
|
||
|
|
border-radius: 999px;
|
||
|
|
background: transparent;
|
||
|
|
color: var(--text-color-dark);
|
||
|
|
font-size: 2.6rem;
|
||
|
|
line-height: 1;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .image-preview-close:hover {
|
||
|
|
background: rgba(0, 0, 0, 0.75);
|
||
|
|
} */
|
||
|
|
|
||
|
|
/* 给文章图片一个可点击提示 */
|
||
|
|
.prose img,
|
||
|
|
.markdown-body img,
|
||
|
|
article img {
|
||
|
|
cursor: zoom-in;
|
||
|
|
}
|