mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-01-25 15:51:42 +00:00
217 lines
3.3 KiB
Sass
217 lines
3.3 KiB
Sass
|
.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
|