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

33
gallery/static/sass/components/elements/labels.sass Normal file
View file

@ -0,0 +1,33 @@
.label
padding: 0.4rem 0.7rem
display: block
position: absolute
font-size: 0.9rem
font-weight: 600
background-color: RGB($bg-dim)
color: RGB($fg-white)
border-radius: $rad-inner
opacity: 0
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)
pointer-events: none
z-index: 999
svg
margin: 0
font-size: 1rem
width: 0.75rem
height: 0.75rem
display: block
position: absolute
top: 50%
left: -0.45rem
transform: translateY(-50%)
color: RGB($bg-dim)

131
gallery/static/sass/components/elements/notification.sass Normal file
View file

@ -0,0 +1,131 @@
@mixin notification($color)
color: RGB($color)
.sniffle__notification-time
background-color: RGB($color)
.notifications
margin: 0
padding: 0
width: 450px
height: auto
position: fixed
top: 0.3rem
right: 0.3rem
display: flex
flex-direction: column
z-index: 621
.sniffle__notification
margin: 0 0 0.3rem 0
padding: 0
width: 450px
height: auto
max-height: 100px
display: flex
flex-direction: row
position: relative
background-color: RGB($bg-300)
border-radius: $rad-inner
color: RGB($fg-white)
opacity: 0
transform: scale(0.8)
box-sizing: border-box
overflow: hidden
transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
&.success
@include notification($success)
&.warning
@include notification($warning)
&.critical
@include notification($critical)
&.info
@include notification($info)
&.show
opacity: 1
transform: scale(1)
&.hide
margin: 0
max-height: 0
opacity: 0
transform: translateX(100%)
transition: all 0.4s ease-in-out, max-height 0.2s ease-in-out
.sniffle__notification-icon
margin: 0
padding: 1rem
width: auto
height: auto
display: flex
justify-content: center
align-items: center
background-color: RGB($bg-200)
svg
width: 1.25rem
height: 1.25rem
.sniffle__notification-text
margin: 0
padding: 1rem
width: auto
height: auto
display: flex
flex-direction: column
justify-self: center
align-self: center
font-size: 1rem
font-weight: 600
line-height: 1
text-align: left
.sniffle__notification-time
margin: 0
padding: 0
width: 450px
height: 3px
position: absolute
bottom: 0px
left: 0px
background-color: RGB($fg-white)
animation: notificationTimeout 5.1s linear
@media (max-width: $breakpoint)
.notifications
width: calc(100vw - 0.6rem)
height: auto
.sniffle__notification
width: 100%
&.hide
opacity: 0
transform: translateY(-5rem)
.sniffle__notification-time
width: 100%

170
gallery/static/sass/components/elements/pop-up.sass Normal file
View file

@ -0,0 +1,170 @@
.pop-up
width: 100%
height: 100vh
position: fixed
inset: 0
display: none
background-color: $bg-transparent
opacity: 0
z-index: 101
transition: opacity 0.2s ease
.pop-up__click-off
width: 100%
height: 100vh
position: absolute
top: 0
left: 0
z-index: +1
.pop-up-wrapper
margin: 0
padding: 0
width: 621px
height: auto
position: absolute
bottom: 50%
left: 50%
transform: translate(-50%, 50%) scale(0.8)
display: flex
flex-direction: column
background-color: RGB($bg-200)
border-radius: $rad
overflow: hidden
z-index: +2
transition: transform 0.2s $animation-smooth
.pop-up-header
margin: 0
padding: 1rem
width: 100%
height: auto
display: flex
flex-direction: column
gap: 0.5rem
overflow-y: auto
overflow-x: hidden
text-size-adjust: auto
text-overflow: ellipsis
h2, h3
margin: 0
width: 100%
position: sticky
top: 0
font-size: 1.5rem
font-weight: 800
text-align: center
color: RGB($fg-white)
p
margin: 0
width: 100%
font-size: 1rem
font-weight: 500
text-align: center
color: RGB($fg-white)
svg
width: 1rem
height: 1rem
display: inline-block
vertical-align: middle
a, .link
font-size: 1rem
font-weight: 500
text-align: center
line-height: 1
color: RGB($primary)
cursor: pointer
text-decoration: none
&:hover
text-decoration: underline
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 40vh
border-radius: $rad-inner
form
margin: 0
padding: 0
width: 100%
height: auto
display: flex
flex-direction: column
gap: 0.5rem
justify-content: center
.pop-up-controlls
margin: 0
padding: 0.25rem
width: 100%
height: auto
display: flex
flex-direction: row
justify-content: flex-end
gap: 0.25rem
background-color: RGB($bg-100)
&.active
opacity: 1
.pop-up-wrapper
transform: translate(-50%, 50%) scale(1)
@media (max-width: $breakpoint)
.pop-up
.pop-up-wrapper
width: calc(100% - 0.75rem)
max-height: 95vh
.pop-up-content
max-height: 100%
img
max-height: 50vh
.pop-up-controlls button
width: 100%
&.active
opacity: 1

27
gallery/static/sass/components/elements/tags.sass Normal file
View file

@ -0,0 +1,27 @@
.tag-icon
margin: 0
padding: 0.25rem 0.5rem
display: flex
align-items: center
justify-content: center
gap: 0.25rem
font-size: 0.9rem
font-weight: 500
text-decoration: none
border-radius: $rad-inner
border: none
background-color: RGBA($primary, 0.1)
color: RGB($primary)
cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
svg
width: 1.15rem
height: 1.15rem
&:hover
background-color: RGBA($primary, 0.3)

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