Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

fixes for image viewer

Browse source
This commit is contained in:
partisan 2024-10-06 22:43:24 +02:00
parent f95636799d
commit 5822b75d66
2 changed files with 154 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

137
static/css/style.css
View file

@ -1542,6 +1542,70 @@ p {
box-shadow: 0 0 10px var(--box-shadow);
}
#image-viewer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.9);
z-index: 999;
display: none;
justify-content: center;
align-items: center;
}
#image-viewer {
position: relative;
max-width: 80%;
max-height: 80%;
background: var(--search-bg);
padding: 20px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
#viewer-image {
max-width: 100%;
max-height: 60vh;
}
#viewer-title {
font-size: 18px;
color: var(--text-color);
margin-bottom: 10px;
}
#viewer-source-button {
color: var(--link);
text-decoration: none;
font-size: 16px;
}
.image-view-close {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: row;
align-items: center;
}
.image-view-close .btn-nostyle {
margin-left: 5px;
}
#viewer-close-button,
#viewer-prev-button,
#viewer-next-button {
color: var(--text-color);
font-size: 36px;
cursor: pointer;
user-select: none;
}
body, h1, p, a, input, button {
color: var(--text-color); /* Applies the text color based on theme */
background-color: var(--background-color); /* Applies the background color based on theme */
@ -1998,76 +2062,3 @@ body, h1, p, a, input, button {
--box-shadow: #ffffff20;
}
} */
/* Image Viewer Overlay */
#image-viewer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.9);
z-index: 999;
display: none;
justify-content: center;
align-items: center;
}
#image-viewer {
position: relative;
max-width: 80%;
max-height: 80%;
background: var(--search-bg);
padding: 20px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
#viewer-image {
max-width: 100%;
max-height: 60vh;
}
#viewer-info {
margin-top: 15px;
}
#viewer-title {
font-size: 18px;
color: var(--text-color);
margin-bottom: 10px;
}
#viewer-source-button {
color: var(--link);
text-decoration: none;
font-size: 16px;
}
#viewer-close-button,
#viewer-prev-button,
#viewer-next-button {
position: absolute;
top: 10px;
color: #fff;
font-size: 36px;
cursor: pointer;
user-select: none;
}
#viewer-close-button {
right: 10px;
}
#viewer-prev-button {
left: 10px;
top: 50%;
transform: translateY(-50%);
}
#viewer-next-button {
right: 10px;
top: 50%;
transform: translateY(-50%);
}