improved image viewer and some css
All checks were successful
Run Integration Tests / test (push) Successful in 29s

This commit is contained in:
partisan 2025-04-19 21:24:27 +02:00
parent 7cd5e80468
commit 5fdbe231d1
7 changed files with 120 additions and 134 deletions

View file

@ -31,5 +31,5 @@
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url('/static/fonts/material-icons-round-v108-latin-regular.woff2') format('woff2');
src: url('/static/fonts/MaterialIcons-Round.woff2') format('woff2');
}

View file

@ -33,6 +33,7 @@
#viewer-image {
max-width: 100%;
max-height: 60vh;
border-radius: 5px;
}
/* Viewer Title */
@ -101,13 +102,13 @@
/* View Image Container */
#viewer-image-container {
background-color: var(--view-image-color);
background-color: #0000;
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-top: 20px;
}
/* Full Size and Proxy Size Links */
@ -153,14 +154,24 @@
}
/* Responsive Design */
@media only screen and (max-width: 750px) {
@media only screen and (max-width: 880px) {
#image-viewer {
width: 100%;
height: 77%;
margin-top: -33px;
height: 100% !important;
margin-top: 28px;
margin-right: 0%;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.material-icons-round {
font-size: 32px;
}
#viewer-image-container {
margin-top: 5px;
}
#viewer-image {

View file

@ -10,7 +10,7 @@
position: relative;
flex: 0 0 160px;
aspect-ratio: 1;
border-radius: 8px;
border-radius: 5px;
overflow: hidden;
background: var(--placeholder-bg);
}
@ -42,12 +42,12 @@
.duration-overlay {
position: absolute;
bottom: 8px;
right: 8px;
bottom: 2px;
right: 2px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(2px);
@ -113,7 +113,5 @@
.duration-overlay {
font-size: 11px;
padding: 3px 6px;
bottom: 6px;
right: 6px;
}
}

View file

@ -303,6 +303,7 @@ html {
}
.btn-nostyle {
font-family: 'Inter', Arial, Helvetica, sans-serif !important;
background-color: inherit;
border: none;
padding: 0px;
@ -383,10 +384,11 @@ hr {
.results .video_title {
font-size: 16px;
}
.video_title {
font-size: 16px;
}
/*
this is so stupid, separate css into general style and per result page css style to avoid this
.video_title h3 {
margin-top: 0px !important;
} */
.video_title a {
color: var(--link);
@ -406,6 +408,7 @@ hr {
width: 254px;
height: 143px;
object-fit: cover;
border-radius: 5px;
}
.video__img__results {
@ -436,13 +439,19 @@ hr {
.duration {
position: absolute;
color: #fff;
font-size: 11px;
font-size: 12px;
font-weight: 500;
padding: .5em;
background: rgba(0, 0, 0, .5);
right: 0;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
margin-top: -28px !important;
line-height: 1.3;
letter-spacing: -0.4px;
bottom: 2px;
right: 2px;
border-radius: 3px;
backdrop-filter: blur(2px);
}
.pipe {