StableDiffusion/WebUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix clipping in lightbox image viewer

Browse Source
This commit is contained in:
AUTOMATIC 2023-03-25 08:28:21 +03:00
parent 4697def235
commit 889f5e38a1
1 changed files with 25 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
style.css
View File

@ -426,86 +426,51 @@ div.dimensions-tools{
/* fullpage image viewer */ /* fullpage image viewer */
#lightboxModal{ #lightboxModal{
display: none; display: none;
position: fixed; position: fixed;
z-index: 1001; z-index: 1001;
padding-top: 100px; left: 0;
left: 0; top: 0;
top: 0; width: 100%;
width: 100%; height: 100%;
height: 100%; overflow: auto;
overflow: auto; background-color: rgba(20, 20, 20, 0.95);
background-color: rgba(20, 20, 20, 0.95); user-select: none;
user-select: none; -webkit-user-select: none;
-webkit-user-select: none; flex-direction: column;
} }
.modalControls { .modalControls {
display: grid; display: flex;
grid-template-columns: 32px 32px 32px 1fr 32px; gap: 1em;
grid-template-areas: "zoom tile save space close"; padding: 1em;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 16px;
gap: 16px;
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
} }
.modalClose { .modalClose {
grid-area: close; margin-left: auto;
} }
.modalControls span{
.modalZoom {
grid-area: zoom;
}
.modalSave {
grid-area: save;
}
.modalTileImage {
grid-area: tile;
}
.modalClose,
.modalZoom,
.modalTileImage {
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.modalSave {
color: white; color: white;
font-size: 28px; font-size: 35px;
margin-top: 8px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
width: 1em;
} }
.modalClose:hover, .modalControls span:hover, .modalControls span:focus{
.modalClose:focus, color: #999;
.modalSave:hover, text-decoration: none;
.modalSave:focus,
.modalZoom:hover,
.modalZoom:focus {
color: #999;
text-decoration: none;
cursor: pointer;
} }
#modalImage { #lightboxModal > img {
display: block; display: block;
margin: auto; margin: auto;
width: auto; width: auto;
} }
.modalImageFullscreen { #lightboxModal > img.modalImageFullscreen{
object-fit: contain; object-fit: contain;
height: 90%; height: 100%;
} }
.modalPrev, .modalPrev,