improved image viewer and some css
All checks were successful
Run Integration Tests / test (push) Successful in 29s
All checks were successful
Run Integration Tests / test (push) Successful in 29s
This commit is contained in:
parent
7cd5e80468
commit
5fdbe231d1
7 changed files with 120 additions and 134 deletions
|
@ -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');
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue