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

Remove theme manager in favour of webassets

Browse source
This commit is contained in:
Michał Gdula 2023-04-03 00:58:22 +00:00
parent c89df1613d
commit f540c234f3
26 changed files with 7 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

230
gallery/static/sass/components/elements/upload-panel.sass Normal file
View file

@ -0,0 +1,230 @@
.upload-panel
position: fixed
left: 3.5rem
bottom: 0
display: none
width: calc(100% - 3.5rem)
height: 100vh
background-color: transparent
overflow: hidden
z-index: 68
transition: background-color 0.25s cubic-bezier(0.76, 0, 0.17, 1)
h3
margin: 0
padding: 0
font-size: 1.5rem
font-weight: 700
color: RGB($primary)
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
color: RGB($fg-white)
form
margin: 0
padding: 0
width: 100%
display: flex
flex-direction: column
align-items: center
gap: 0.5rem
input, button
width: 100%
.click-off
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: +1
.container
padding: 1rem
position: absolute
bottom: 0
left: -400px
width: 400px
height: 100%
display: flex
flex-direction: column
gap: 1rem
background-color: RGB($bg-200)
opacity: 0
z-index: +2
transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), bottom 0.25s cubic-bezier(0.76, 0, 0.17, 1), opacity 0.25s cubic-bezier(0.76, 0, 0.17, 1)
#dragIndicator
display: none
position: absolute
top: 0
left: 0
width: 100%
height: 5rem
z-index: +1
&::after
content: ''
width: 8rem
height: 3px
position: absolute
top: 0.5rem
left: 50%
transform: translate(-50%, -50%)
background-color: RGB($bg-400)
border-radius: $rad-inner
.upload-jobs
display: flex
flex-direction: column
gap: 0.5rem
border-radius: $rad
overflow-y: auto
.job
width: 100%
height: 5rem
min-height: 5rem
position: relative
display: flex
align-items: center
gap: 0.5rem
background-color: RGB($bg-200)
border-radius: $rad
overflow: hidden
img
position: absolute
top: 0
left: 0
width: 100%
height: 5rem
object-fit: cover
.img-filter
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-image: linear-gradient(to right, RGB($bg-100), transparent)
.job__status
margin: 0
padding: 0
position: absolute
top: 0.5rem
left: 0.5rem
font-size: 1rem
font-weight: 600
color: RGB($fg-white)
z-index: +3
transition: color 0.25s cubic-bezier(0.76, 0, 0.17, 1)
.progress
width: 100%
height: $rad-inner
position: absolute
bottom: 0
left: -100%
background-color: RGB($primary)
animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite
z-index: +5
transition: left 1s cubic-bezier(0.76, 0, 0.17, 1)
&.critical
.job__status, .progress
color: RGB($critical)
&.success
.job__status
color: RGB($success)
.progress
height: 0
animation: none
&.warning
.job__status, .progress
color: RGB($warning)
&.critical, &.success, &.warning
.progress
height: 0
&.open
background-color: $bg-transparent
.container
left: 0
opacity: 1
@media (max-width: $breakpoint)
.upload-panel
width: 100%
height: calc(100vh - 3.5rem)
height: calc(100dvh - 3.5rem)
left: 0
bottom: 3.5rem
.container
width: 100%
height: 95%
left: 0
bottom: calc(-100vh + 3.5rem)
border-radius: $rad $rad 0 0
#dragIndicator
display: block
&.open
.container
left: 0
bottom: 0