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

25
gallery/static/sass/animations.sass Normal file
View file

@ -0,0 +1,25 @@
@keyframes imgLoading
0%
background-position: -468px 0
100%
background-position: 468px 0
@keyframes notificationTimeout
0%
left: -100%
height: 3px
90%
left: 0%
height: 3px
95%
left: 0%
height: 0
100%
left: 0%
height: 0
@keyframes uploadingLoop
0%
left: -100%
100%
left: 100%

137
gallery/static/sass/components/banner.sass Normal file
View file

@ -0,0 +1,137 @@
.banner
width: 100%
height: 30rem
position: relative
background-color: RGB($bg-300)
color: RGB($fg-white)
transition: opacity 0.3s ease-in-out
&::after
content: ''
width: $rad
height: calc(#{$rad} * 2)
position: absolute
bottom: calc(#{$rad} * -2)
left: 0
background-color: RGB($bg-bright)
border-radius: $rad 0 0 0
box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100)
img
position: absolute
inset: 0
width: 100%
height: 100%
background-color: inherit
object-fit: cover
object-position: center center
.banner-filter
position: absolute
inset: 0
width: 100%
height: 100%
background: linear-gradient(to right, RGB($primary), transparent)
z-index: +1
.banner-content
padding: 1rem
width: 100%
height: 100%
position: absolute
inset: 0
display: flex
flex-direction: column
justify-content: flex-end
z-index: +2
h1, p
margin: 0
padding: 0
width: 100%
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
text-align: left
h1
font-size: 6.9rem
font-weight: 800
color: RGB($primary)
p
font-size: 1rem
font-weight: 600
&.small
height: 3.5rem
background-color: RGB($bg-100)
.banner-content
padding: 0.5rem
flex-direction: row
justify-content: flex-start
align-items: center
gap: 1rem
h1
width: auto
padding-bottom: 0.25rem
font-size: 1.5rem
p
width: auto
font-size: 0.9rem
@media (max-width: $breakpoint)
.banner
width: 100%
height: 17rem
&::after
display: none
.banner-content
padding: 0.5rem
display: flex
justify-content: center
align-items: center
h1
font-size: 3rem
text-align: center
p
font-size: 1.1rem
text-align: center
&.small
.banner-content
justify-content: center
h1
text-align: center
p
display: none

153
gallery/static/sass/components/buttons/block.sass Normal file
View file

@ -0,0 +1,153 @@
@mixin btn-block($color)
color: RGB($color)
&:hover
background-color: RGBA($color, 0.1)
color: RGB($color)
&:focus-visible
outline: 2px solid RGBA($color, 0.3)
.btn-block
padding: 0.5rem 1rem
width: auto
min-height: 2.5rem
display: flex
justify-content: center
align-items: center
gap: 0.5rem
position: relative
font-size: 1rem
font-weight: 600
text-align: center
background-color: transparent
color: RGB($white)
border: none
border-radius: $rad-inner
cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
&:hover
background-color: RGBA($white, 0.1)
&:focus-visible
outline: 2px solid RGBA($white, 0.3)
&.primary
@include btn-block($primary)
&.critical
@include btn-block($critical)
&.warning
@include btn-block($warning)
&.success
@include btn-block($success)
&.info
@include btn-block($info)
&.black
@include btn-block($black)
.input-block
padding: 0.5rem 1rem
width: auto
min-height: 2.5rem
display: flex
justify-content: flex-start
align-items: center
position: relative
font-size: 1rem
font-weight: 600
text-align: left
background-color: RGBA($white, 0.1)
color: RGB($white)
border: none
border-bottom: 3px solid RGBA($white, 0.1)
border-radius: $rad-inner
cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
&:not(:focus):not([value=""]):not(:placeholder-shown)
border-color: RGBA($white, 0.3)
&:hover
border-color: RGBA($white, 0.3)
&:focus
border-color: RGB($primary)
outline: none
&.black
@include btn-block($black)
.fileDrop-block
padding: 1rem 1.25rem
width: 100%
min-height: 2.5rem
display: flex
flex-direction: column
justify-content: center
align-items: center
gap: 0.5rem
position: relative
font-size: 1rem
font-weight: 600
text-align: center
background-color: RGBA($white, 0.1)
color: RGB($white)
border: none
border-radius: $rad-inner
cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
input
position: absolute
inset: 0
opacity: 0
cursor: pointer
&:hover
background-color: RGBA($white, 0.2)
color: RGB($white)
&:focus-visible
outline: 2px solid RGBA($white, 0.3)
&.active
background-color: RGBA($primary, 0.2)
color: RGB($primary)
&.edging
background-color: RGBA($white, 0.2)
color: RGB($white)
input
display: none // So it doesnt get in the way of the drop as that breaks things
&.error
background-color: RGBA($critical, 0.2)
color: RGB($critical)

41
gallery/static/sass/components/buttons/info-button.sass Normal file
View file

@ -0,0 +1,41 @@
.info-button
margin: 0
padding: 0
width: auto
height: auto
position: fixed
bottom: 0.75rem
right: -3rem
display: flex
justify-content: center
align-items: center
background-color: RGB($bg-300)
color: RGB($fg-white)
border-radius: $rad
border: none
opacity: 0
z-index: 20
cursor: pointer
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover
color: RGB($info)
svg
margin: 0.5rem
width: 1.25rem
height: 1.25rem
&.show
right: 0.75rem
opacity: 1
@media (max-width: $breakpoint)
.info-button
bottom: 4.25rem

118
gallery/static/sass/components/buttons/pill.sass Normal file
View file

@ -0,0 +1,118 @@
.pill-row
margin: 0
padding: 0
width: 100%
height: auto
display: flex
justify-content: center
align-items: center
gap: 0.5rem
> div
margin: 0
padding: 0
display: flex
background-color: RGB($bg-100)
border-radius: $rad
.pill-item
margin: 0
padding: 0.5rem
width: 2.5rem
height: 2.5rem
display: flex
justify-content: center
align-items: center
position: relative
border: none
background-color: transparent
color: RGB($fg-white)
svg
width: 1.25rem
height: 1.25rem
&:hover
cursor: pointer
color: RGB($primary)
.tool-tip
opacity: 1
top: -2.3rem
transform: translateX(calc(-50% + 1.25rem ))
.pill__critical
color: RGB($critical)
span
background: RGB($critical)
color: RGB($fg-white)
svg
color: RGB($critical)
&:hover
color: RGB($fg-white)
.pill__info
color: RGB($info)
span
color: RGB($info)
&:hover
color: RGB($fg-white)
.tool-tip
margin: 0
padding: 0.35rem 0.7rem
width: auto
display: block
position: absolute
top: -1.7rem
left: 0
transform: translateX(calc(-50% + 1.25rem ))
font-size: 0.9rem
font-weight: 700
background-color: #000000
color: RGB($fg-white)
opacity: 0
border-radius: $rad-inner
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1)
pointer-events: none
svg
margin: 0
font-size: 1rem
width: 0.75rem
height: 0.75rem
display: block
position: absolute
left: 50%
bottom: -0.46rem
transform: translateX(-50%)
color: #000000
@media (max-width: $breakpoint)
.tool-tip
display: none

41
gallery/static/sass/components/buttons/top-of-page.sass Normal file
View file

@ -0,0 +1,41 @@
.top-of-page
margin: 0
padding: 0
width: auto
height: auto
position: fixed
bottom: 0.75rem
right: -3rem
display: flex
justify-content: center
align-items: center
background-color: RGB($bg-300)
color: RGB($fg-white)
border-radius: $rad
border: none
opacity: 0
z-index: 20
cursor: pointer
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover
color: RGB($primary)
svg
margin: 0.5rem
width: 1.25rem
height: 1.25rem
&.show
right: 0.75rem
opacity: 1
@media (max-width: $breakpoint)
.top-of-page
bottom: 4.25rem

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

245
gallery/static/sass/components/gallery.sass Normal file
View file

@ -0,0 +1,245 @@
.gallery-grid
margin: 0
padding: 0.5rem
width: 100%
display: grid
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
gap: 0.5rem
.gallery-item
margin: 0
padding: 0
height: auto
position: relative
border-radius: $rad-inner
box-sizing: border-box
overflow: hidden
.image-filter
margin: 0
padding: 0.5rem
width: 100%
min-height: 30%
height: auto
position: absolute
left: 0
bottom: 0
display: flex
flex-direction: column
justify-content: flex-end
background-image: linear-gradient(to top, rgba($bg-100, 0.5), transparent)
opacity: 0 // hide
z-index: +4
transition: background-image 0.3s cubic-bezier(.79, .14, .15, .86), opacity 0.3s cubic-bezier(.79, .14, .15, .86)
.image-title,
.image-subtitle
margin: 0
padding: 0
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
color: RGB($fg-white)
text-shadow: 0px 0px 2px RGB($fg-black)
.image-title
font-size: 0.9rem
font-weight: 800
.image-subtitle
font-size: 0.8rem
font-weight: 600
img
width: 100%
height: 100%
position: absolute
inset: 0
object-fit: cover
object-position: center
transform: scale(1.05)
background-color: RGB($bg-bright)
filter: blur(0.5rem)
opacity: 0
transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
&.loaded
filter: blur(0)
opacity: 1
&:after
content: ""
display: block
padding-bottom: 100%
&:hover
.image-filter
background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
opacity: 1
img
transform: scale(1)
.group-item
margin: 0
padding: 0
height: auto
position: relative
border-radius: $rad-inner
box-sizing: border-box
overflow: hidden
.image-filter
margin: 0
padding: 0.5rem
width: 100%
min-height: 30%
height: auto
position: absolute
left: 0
bottom: 0
display: flex
flex-direction: column
justify-content: flex-end
background-image: linear-gradient(to top, rgba($bg-100, 0.8), transparent)
z-index: +4
.image-title,
.image-subtitle
margin: 0
padding: 0
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
color: RGB($fg-white)
text-shadow: 0px 0px 2px RGB($fg-black)
.image-title
font-size: 0.9rem
font-weight: 800
.image-subtitle
font-size: 0.8rem
font-weight: 600
.images
margin: 0
padding: 0
width: 100%
height: 100%
position: absolute
inset: 0
display: block
background-color: RGB($bg-bright)
img
width: 100%
height: 100%
position: absolute
top: 0
left: 0
object-fit: cover
object-position: center
background-color: RGB($bg-bright)
border-radius: $rad-inner
box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
filter: blur(0.5rem)
opacity: 0
transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
&.loaded
filter: blur(0)
opacity: 1
&.size-1
.data-1
transform: scale(0.8) rotate(3deg)
&.size-2
.data-1
transform: scale(0.7) rotate(-3deg) translate(10%, 10%)
z-index: +2
.data-2
transform: scale(0.7) rotate(3deg) translate(-10%, -10%)
z-index: +1
&.size-3
.data-1
transform: scale(0.6) rotate(3deg) translate(-25%, 25%)
z-index: +3
.data-2
transform: scale(0.6) rotate(-5deg) translate(25%, 10%)
z-index: +2
.data-3
transform: scale(0.6) rotate(-1deg) translate(-15%, -25%)
z-index: +1
&:after
content: ""
display: block
padding-bottom: 100%
&:hover
.images
&.size-1
.data-1
transform: scale(0.9) rotate(0deg)
&.size-2
.data-1
transform: scale(0.75) rotate(-1deg) translate(12%, 14%)
z-index: +2
.data-2
transform: scale(0.75) rotate(1deg) translate(-12%, -10%)
z-index: +1
&.size-3
.data-1
transform: scale(0.65) rotate(1deg) translate(-24%, 24%)
z-index: +3
.data-2
transform: scale(0.65) rotate(-2deg) translate(24%, 10%)
z-index: +2
.data-3
transform: scale(0.65) rotate(0deg) translate(-15%, -25%)
z-index: +1
@media (max-width: 800px)
.gallery-grid
grid-template-columns: auto auto auto

42
gallery/static/sass/components/image-view/background.sass Normal file
View file

@ -0,0 +1,42 @@
.background
width: 100%
height: 100vh
position: fixed
top: 0
left: 0
background-color: RGB($bg-300)
background-image: linear-gradient(to right, RGB($bg-400) 15%, RGB($bg-200) 35%, RGB($bg-400) 50%)
background-size: 1000px 640px
animation: imgLoading 1.8s linear infinite forwards
user-select: none
overflow: hidden
z-index: 1
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: RGB($fg-white)
filter: blur(1rem)
transform: scale(1.1)
object-fit: cover
object-position: center center
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: +1

42
gallery/static/sass/components/image-view/fullscreen.sass Normal file
View file

@ -0,0 +1,42 @@
.image-fullscreen
margin: 0
padding: 0 0 0 3.5rem
width: 100%
height: 100%
height: 100dvh
position: fixed
top: 0
left: 0
display: none
opacity: 0 // hide
background-color: $bg-transparent
z-index: 21
box-sizing: border-box
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
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)
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
&.active
opacity: 1 // show
img
transform: scale(1)

21
gallery/static/sass/components/image-view/image.sass Normal file
View file

@ -0,0 +1,21 @@
.image-container
margin: auto
padding: 0.5rem
width: 100%
height: 100%
display: flex
overflow: hidden
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center

208
gallery/static/sass/components/image-view/info-tab.sass Normal file
View file

@ -0,0 +1,208 @@
.info-container
width: 100%
height: 100%
display: flex
flex-direction: column
gap: 0
background-color: RGB($bg-200)
overflow-y: auto
.info-tab
width: 100%
display: flex
flex-direction: column
position: relative
background-color: RGB($bg-200)
border-radius: $rad
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
&.collapsed
height: 2.5rem
.collapse-indicator
transform: rotate(90deg)
.info-table
padding: 0
opacity: 0
.collapse-indicator
width: 1.25rem
height: 1.25rem
position: absolute
top: 0.6rem
right: 0.6rem
color: RGB($primary)
z-index: +2
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
user-select: none
.info-header
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
display: flex
justify-content: start
align-items: center
gap: 0.5rem
position: sticky
top: 0
z-index: +1
background-color: RGB($bg-200)
svg
margin: 0
padding: 0
width: 1.25rem
height: 1.25rem
fill: RGB($primary)
h2
margin: 0
padding: 0
font-size: 1.1rem
font-weight: 600
color: RGB($primary)
text-overflow: ellipsis
overflow: hidden
.info-table
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 1rem
color: RGB($fg-white)
overflow-x: hidden
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
text-overflow: ellipsis
overflow: hidden
.link
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
text-align: center
line-height: 1
color: RGB($primary)
cursor: pointer
text-decoration: none
&:hover
text-decoration: underline
table
margin: 0
padding: 0
width: 100%
overflow-x: hidden
border-collapse: collapse
tr
margin: 0
padding: 0
width: 100%
white-space: nowrap
td
padding-bottom: 0.5rem
td:first-child
padding-right: 0.5rem
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td:last-child
padding: 0
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td.empty-table
opacity: 0.3
tr:last-of-type td
padding-bottom: 0
.img-colours
width: 100%
display: flex
gap: 0.5rem
span
margin: 0
padding: 0
width: 1.5rem
height: 1.5rem
display: flex
justify-content: center
align-items: center
border-radius: $rad-inner
// border: 1px solid RGB($white)
.img-groups
width: 100%
display: flex
flex-wrap: wrap
gap: 0.5rem
@media (max-width: 1100px)
.info-container
gap: 0.5rem

65
gallery/static/sass/components/image-view/view.sass Normal file
View file

@ -0,0 +1,65 @@
@import 'background'
@import 'fullscreen'
@import 'info-tab'
@import 'image'
.image-grid
padding: 0
position: relative
display: grid
grid-template-areas: 'info image' 'info tools'
grid-template-columns: 25rem 1fr
grid-template-rows: 1fr auto
gap: 0
height: 100vh
z-index: 3
#image-info
grid-area: info
#image-tools
grid-area: tools
padding: 0 0 0.5rem 0
#image-container
grid-area: image
@media (max-width: 1100px)
.image-grid
padding: 0.5rem
display: flex
flex-direction: column
gap: 0.5rem
height: auto
.image-container
margin: 0 auto
padding: 0
max-height: 69vh
img
max-height: 69vh
#image-tools
padding: 0
.info-container
background: transparent
.info-header
border-radius: $rad $rad 0 0
.info-tab.collapsed .info-header
border-radius: $rad
@media (max-width: $breakpoint)
.image-fullscreen
padding: 0 0 3.5rem 0

170
gallery/static/sass/components/navigation.sass Normal file
View file

@ -0,0 +1,170 @@
.navigation
margin: 0
padding: 0
width: 3.5rem
height: 100%
height: 100dvh
display: flex
flex-direction: column
justify-content: space-between
position: fixed
top: 0
left: 0
background-color: RGB($bg-100)
color: RGB($fg-white)
z-index: 69
.logo
margin: 0
padding: 0
width: 3.5rem
height: 3.5rem
min-height: 3.5rem
display: flex
flex-direction: row
align-items: center
.navigation-spacer
height: 100%
.navigation-item
margin: 0
padding: 0
width: 3.5rem
height: 3.5rem
min-height: 3.5rem
position: relative
display: flex
flex-direction: row
justify-content: center
align-items: center
background-color: transparent
border: none
text-decoration: none
> svg
margin: 0
padding: 0.5rem
width: 2.5rem
height: 2.5rem
border-radius: $rad-inner
color: RGB($fg-white)
transition: color 0.2s ease-out, transform 0.2s ease-out
.tool-tip
margin: 0
padding: 0.35rem 0.7rem
display: block
position: absolute
top: 50%
left: 3rem
transform: translateY(-50%)
font-size: 0.9rem
font-weight: 700
background-color: #000000
color: RGB($fg-white)
opacity: 0
border-radius: $rad-inner
transition: opacity 0.2s cubic-bezier(.76,0,.17,1), left 0.2s cubic-bezier(.76,0,.17,1)
pointer-events: none
> 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: #000000
&:hover
> svg
background: RGBA($fg-white, 0.1)
span
opacity: 1
left: 3.9rem
&.selected
> svg
color: RGB($primary)
&::before
content: ''
display: block
position: absolute
top: 3px
left: 0
width: 3px
height: calc(100% - 6px)
background-color: RGB($primary)
border-radius: $rad-inner
@media (max-width: $breakpoint)
.navigation
width: 100vw
height: 3.5rem
flex-direction: row
justify-content: space-around
position: fixed
top: unset
bottom: 0
left: 0
> span
display: none
.logo
display: none
.navigation-item
margin: 0.25rem
padding: 0
width: 3rem
height: 3rem
min-height: 3rem
.tool-tip
display: none
&.selected::before
top: unset
bottom: 0
left: 0
width: 100%
height: 3px

136
gallery/static/sass/style.sass Normal file
View file

@ -0,0 +1,136 @@
// Default theme for OnlyLegs by FluffyBean
// Mockup link: https://www.figma.com/file/IMZT5kZr3sAngrSHSGu5di/OnlyLegs?node-id=0%3A1
@import "variables"
@import "animations"
@import "components/elements/notification"
@import "components/elements/pop-up"
@import "components/elements/upload-panel"
@import "components/elements/tags"
@import "components/elements/labels"
@import "components/navigation"
@import "components/banner"
@import "components/gallery"
@import "components/buttons/top-of-page"
@import "components/buttons/info-button"
@import "components/buttons/pill"
@import "components/buttons/block"
@import "components/image-view/view"
// Reset
*
box-sizing: border-box
font-family: $font
::-webkit-scrollbar
width: 0.5rem
::-webkit-scrollbar-track
background: RGB($bg-200)
::-webkit-scrollbar-thumb
background: RGB($primary)
::-webkit-scrollbar-thumb:hover
background: RGB($fg-white)
html, body
margin: 0
padding: 0
min-height: 100vh
max-width: 100vw
background-color: RGB($fg-white)
scroll-behavior: smooth
overflow-x: hidden
.wrapper
margin: 0
padding: 0 0 0 3.5rem
min-height: 100vh
display: flex
flex-direction: column
background-color: RGB($bg-bright)
color: RGB($bg-100)
.big-text
height: 20rem
display: flex
flex-direction: column
justify-content: center
align-items: center
color: RGB($bg-100)
h1
margin: 0 2rem
font-size: 4rem
font-weight: 900
text-align: center
p
margin: 0 2rem
max-width: 40rem
font-size: 1rem
font-weight: 400
text-align: center
.error-page
width: 100%
height: 100vh
display: flex
flex-direction: column
justify-content: center
align-items: center
background-color: RGB($bg-bright)
h1
margin: 0 2rem
font-size: 6.9rem
font-weight: 900
text-align: center
color: $primary
p
margin: 0 2rem
max-width: 40rem
font-size: 1.25rem
font-weight: 400
text-align: center
color: $fg-black
@media (max-width: $breakpoint)
.wrapper
padding: 0 0 3.5rem 0
.big-text
height: calc(75vh - 3.5rem)
h1
font-size: 3.5rem
.error-page
height: calc(100vh - 3.5rem)
h1
font-size: 4.5rem
p
max-width: 100%
font-size: 1rem

97
gallery/static/sass/variables.sass Normal file
View file

@ -0,0 +1,97 @@
$bg-transparent: rgba(var(--bg-dim), 0.8)
$bg-dim: var(--bg-dim)
$bg-bright: var(--bg-bright)
$bg-100: var(--bg-100)
$bg-200: var(--bg-200)
$bg-300: var(--bg-300)
$bg-400: var(--bg-400)
$bg-500: var(--bg-500)
$bg-600: var(--bg-600)
$fg-dim: var(--fg-dim)
$fg-white: var(--fg-white)
$fg-black: var(--fg-black)
$black: var(--black)
$white: var(--white)
$red: var(--red)
$orange: var(--orange)
$yellow: var(--yellow)
$green: var(--green)
$blue: var(--blue)
$purple: var(--purple)
$primary: var(--primary)
$warning: var(--warning)
$critical: var(--critical)
$success: var(--success)
$info: var(--info)
$rad: var(--rad)
$rad-inner: var(--rad-inner)
$animation-smooth: var(--animation-smooth)
$animation-bounce: var(--animation-bounce)
$font: 'Manrope', sans-serif
$breakpoint: 800px
\:root
--bg-dim: 16, 16, 16
--bg-bright: 232, 227, 227
--bg-100: 21, 21, 21
--bg-200: #{red(adjust-color(rgb(21, 21, 21), $lightness: 2%)), green(adjust-color(rgb(21, 21, 21), $lightness: 2%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 2%))}
--bg-300: #{red(adjust-color(rgb(21, 21, 21), $lightness: 4%)), green(adjust-color(rgb(21, 21, 21), $lightness: 4%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 4%))}
--bg-400: #{red(adjust-color(rgb(21, 21, 21), $lightness: 6%)), green(adjust-color(rgb(21, 21, 21), $lightness: 6%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 6%))}
--bg-500: #{red(adjust-color(rgb(21, 21, 21), $lightness: 8%)), green(adjust-color(rgb(21, 21, 21), $lightness: 8%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 8%))}
--bg-600: #{red(adjust-color(rgb(21, 21, 21), $lightness: 10%)), green(adjust-color(rgb(21, 21, 21), $lightness: 10%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 10%))}
--fg-dim: 102, 102, 102
--fg-white: 232, 227, 227
--fg-black: 16, 16, 16
--black: 21, 21, 21
--white: 232, 227, 227
--red: 182, 100, 103
--orange: 217, 140, 95
--yellow: 217, 188, 140
--green: 140, 151, 125
--blue: 141, 163, 185
--purple: 169, 136, 176
--primary: var(--green) // 183, 169, 151
--warning: var(--orange)
--critical: var(--red)
--success: var(--green)
--info: var(--blue)
--rad: 6px
--rad-inner: calc(var(--rad) / 2)
--animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
--animation-bounce: cubic-bezier(.68,-0.55,.27,1.55)
--breakpoint: 800px
@font-face
font-family: 'Work Sans'
src: url('fonts/worksans-regular.woff2')
font-weight: 400
@font-face
font-family: 'Work Sans'
src: url('fonts/worksans-bold.woff2')
font-weight: 600
@font-face
font-family: 'Work Sans'
src: url('fonts/worksans-black.woff2')
font-weight: 900
@font-face
font-family: 'Manrope'
src: url('fonts/Manrope[wght].woff2') format('woff2')
font-style: normal
font-display: swap