126 lines
2.5 KiB
CSS
126 lines
2.5 KiB
CSS
.drop-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(15, 23, 42, 0.76);
|
|
backdrop-filter: blur(2px);
|
|
z-index: 50;
|
|
}
|
|
.drop-overlay.active {
|
|
display: flex;
|
|
}
|
|
.drop-overlay-card {
|
|
padding: 28px 34px;
|
|
border: 2px dashed #60a5fa;
|
|
border-radius: 18px;
|
|
background: rgba(30, 41, 59, 0.92);
|
|
color: #dbeafe;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
|
|
}
|
|
.image-lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px;
|
|
background: rgba(2, 6, 23, 0.88);
|
|
z-index: 60;
|
|
}
|
|
.image-lightbox.open {
|
|
display: flex;
|
|
}
|
|
.image-lightbox-dialog {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: calc(100vw - 16px);
|
|
height: calc(100vh - 16px);
|
|
max-width: calc(100vw - 16px);
|
|
max-height: calc(100vh - 16px);
|
|
padding: 8px;
|
|
border-radius: 14px;
|
|
border: 1px solid #334155;
|
|
background: rgba(15, 23, 42, 0.96);
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
|
|
overflow: hidden;
|
|
}
|
|
.image-lightbox-viewport {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
.image-lightbox-viewport.image-loading-host {
|
|
background: transparent;
|
|
}
|
|
.image-lightbox-close {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
border-radius: 999px;
|
|
}
|
|
.image-lightbox img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 12px;
|
|
background: #020617;
|
|
transform-origin: center center;
|
|
transition: transform 0.12s ease;
|
|
will-change: transform;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
.image-lightbox img.is-dragging {
|
|
transition: none;
|
|
}
|
|
.image-lightbox-toolbar {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border-radius: 12px;
|
|
background: rgba(15, 23, 42, 0.72);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.image-lightbox-toolbar button {
|
|
min-width: 52px;
|
|
padding: 8px 10px;
|
|
}
|
|
.image-lightbox-caption {
|
|
position: absolute;
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: 12px;
|
|
padding: 8px 12px;
|
|
font-size: 12px;
|
|
color: #cbd5e1;
|
|
text-align: center;
|
|
word-break: break-all;
|
|
border-radius: 10px;
|
|
background: rgba(15, 23, 42, 0.72);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.image-lightbox-caption:empty {
|
|
display: none;
|
|
}
|