Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Unifying style of the gallery

Browse source 
Fixed HTML and Sass layout
Moved upload and login pages to popups
Added deletion confirmation
This commit is contained in:
Michał Gdula 2023-01-25 15:13:56 +00:00
parent 0414cda5d3
commit bb98701430
44 changed files with 1777 additions and 1631 deletions
Download patch file Download diff file Expand all files Collapse all files

216
gallery/user/themes/default/ui/wrappers/image.sass Normal file
View file

@ -0,0 +1,216 @@
.image-wrapper
padding: 0
display: grid
grid-template-areas: 'info image' 'info tools'
grid-template-columns: 25rem 1fr
grid-template-rows: 1fr auto
gap: 0
height: 100vh
.image-fullscreen
margin: 0
padding: 0 0 0 3.5rem
width: 100%
height: 100dvh
position: fixed
top: -100%
left: 0
display: flex
opacity: 0 // hide
background-color: rgba($black, 0.8)
backdrop-filter: blur(1rem)
z-index: 21
box-sizing: border-box
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center
transform: scale(0.8)
&__active
top: 0
opacity: 1 // show
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
img
transform: scale(1)
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
.image-container
margin: auto
padding: 0.5rem
width: 100%
height: 100%
display: flex
overflow: hidden
grid-area: image
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center
border-radius: $rad
.image-info__container
margin: 0
padding: 0
width: 100%
height: 100%
display: flex
flex-direction: column
background-color: $black
overflow-y: auto
grid-area: info
.image-info
margin: 0
padding: 0
width: 100%
display: flex
flex-direction: column
background-color: $black
border-radius: $rad
.image-info__header
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
display: flex
justify-content: start
align-items: center
gap: 0.5rem
background-color: $black2
svg
margin: 0
padding: 0
width: 1.25rem
height: 1.25rem
fill: $primary
h2
margin: 0
padding: 0
font-size: 1.25rem
font-weight: 600
color: $primary
text-overflow: ellipsis
overflow: hidden
.image-info__content
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 0.5rem
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
color: $white
text-overflow: ellipsis
overflow: hidden
#image-tools
margin-bottom: 0.5rem
grid-area: tools
@media (max-width: 1100px)
.image-wrapper
padding: 0.5rem
display: flex !important
flex-direction: column
gap: 0.5rem
height: auto
.image-container
margin: 0 auto
padding: 0
max-height: 69vh
img
max-height: 69vh
#image-tools
margin: 0
.image-info__container
margin: 0
padding: 0
width: 100%
height: auto
display: flex
flex-direction: column
gap: 0.5rem
background: none
.image-info__container
border-radius: $rad
.image-info__header
border-radius: $rad $rad 0 0
@media (max-width: $breakpoint)
.image-fullscreen
padding: 0 0 3.5rem 0
.image-wrapper
padding-bottom: 4rem