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

Fixing inconsistent sass files

Browse source 
Removed useless styling
Fixed date
This commit is contained in:
Michał Gdula 2023-03-08 13:36:35 +00:00
parent 99c1d81869
commit 56c82513ba
31 changed files with 805 additions and 1009 deletions
Download patch file Download diff file Expand all files Collapse all files

96
gallery/themes/default/components/banner.sass Normal file
View file

@ -0,0 +1,96 @@
.banner
width: 100%
height: 40vh
position: relative
background-color: $black
color: $black
overflow: hidden
transition: opacity 0.3s ease-in-out
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: $black
object-fit: cover
object-position: center center
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
z-index: +1
.banner-content
padding: 1rem
width: 100%
height: inherit
position: relative
display: flex
flex-direction: column
justify-content: flex-end
gap: 0.5rem
z-index: +2
h1
margin: 0
padding: 0
font-size: 6.9rem
font-weight: 700
line-height: 1
text-align: left
color: $black
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
line-height: 1
text-align: left
color: $black
@media (max-width: $breakpoint)
.banner
width: 100vw
height: 25vh
span
background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
.banner-content
padding: 0.5rem
display: flex
justify-content: center
align-items: center
h1
font-size: 3.5rem
text-align: center
p
font-size: 1.1rem
text-align: center

37
gallery/themes/default/components/buttons/jumpUp.sass Normal file
View file

@ -0,0 +1,37 @@
.jumpUp
margin: 0
padding: 0.5rem
width: 2.5rem
height: 2.5rem
position: fixed
bottom: 0.75rem
right: -3rem
display: flex // hidden
justify-content: center
align-items: center
border-radius: 50%
background-color: $black
color: $white
opacity: 0 // hidden
z-index: 2
cursor: pointer
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover
background-color: $black
color: $primary
.jumpUp--show
right: 0.75rem
opacity: 1
@media (max-width: $breakpoint)
.jumpUp
bottom: 4.25rem

94
gallery/themes/default/components/buttons/pill.sass Normal file
View file

@ -0,0 +1,94 @@
.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: $black
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: $white
svg
width: 1.25rem
height: 1.25rem
&:hover
cursor: pointer
color: $primary
.tool-tip
opacity: 1
top: -2.5rem
transform: translateX(calc(-50% + 1.25rem ))
.pill__critical
color: $critical
span
color: $critical
&:hover
color: $white
.pill__info
color: $info
span
color: $info
&:hover
color: $white
.tool-tip
margin: 0
padding: 0.5rem 0.75rem
width: auto
display: block
position: absolute
top: -1.7rem
left: 0
transform: translateX(calc(-50% + 1.25rem ))
font-size: 1rem
font-weight: 600
background-color: $black2
color: $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

126
gallery/themes/default/components/elements/notification.sass Normal file
View file

@ -0,0 +1,126 @@
@mixin notification($color)
color: $color
.sniffle__notification-time
background-color: $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: $black
border-radius: $rad-inner
color: $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)
.sniffle__notification-icon
margin: 0
padding: 1rem
width: auto
height: auto
display: flex
justify-content: center
align-items: center
background-color: $black2
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: $white
animation: notificationTimeout 5.1s linear
@each $name, $colour in (success: $success, error: $critical, warning: $warning, info: $info)
.sniffle__notification--#{$name}
@include notification($colour)
.sniffle__notification-show
opacity: 1
transform: scale(1)
.sniffle__notification--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
@media (max-width: $breakpoint)
.notifications
width: calc(100vw - 0.6rem)
height: auto
.sniffle__notification
width: 100%
.sniffle__notification-time
width: 100%
.sniffle__notification--hide
opacity: 0
transform: translateY(-5rem)

276
gallery/themes/default/components/elements/pop-up.sass Normal file
View file

@ -0,0 +1,276 @@
@mixin pop-up-btn($color, $fill: false)
@if $fill
color: $white
background-color: $color
border: 2px solid $color
&:hover
background-color: $white
color: $color
@else
color: $color
background-color: $white
border: 2px solid $color
&:hover
background-color: $color
color: $white
.pop-up
width: calc(100% - 3.5rem)
height: 100vh
position: fixed
top: 100%
left: 3.5rem
background-color: rgba($black, 0.8)
opacity: 0
z-index: 101
transition: opacity 0.2s ease
.pop-up__click-off
width: 100vw
height: 100vh
height: 100dvh
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: $white
border-radius: $rad
overflow: hidden
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
z-index: +2
.pop-up-content
margin: 0
padding: 0.5rem 0.5rem 0
width: 100%
height: auto
max-height: 50vh
display: flex
flex-direction: column
gap: 0.5rem
overflow-y: auto
overflow-x: hidden
text-size-adjust: auto;
text-overflow: ellipsis
h3
margin: 0
width: 100%
position: sticky
top: 0
font-size: 2.5rem
font-weight: 600
text-align: center
line-height: 1
color: $black
background-color: $white
p
margin: 0
width: 100%
font-size: 1rem
font-weight: 500
text-align: center
line-height: 1
color: $black
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.5rem
width: 100%
height: auto
display: flex
flex-direction: row
justify-content: flex-end
gap: 0.5rem
.pop-up__btn
margin: 0
padding: 0.5rem 1rem
width: auto
height: 2.5rem
display: flex
justify-content: center
align-items: center
font-size: 1rem
font-weight: 600
text-align: center
line-height: 1
border-radius: $rad-inner
cursor: pointer
transition: background-color 0.2s ease, color 0.2s ease
@include pop-up-btn($black)
&:focus
outline: none
.pop-up__btn-fill
@include pop-up-btn($black, true)
@each $name, $colour in (primary: $primary, info: $info, warning: $warning, critical: $critical)
.pop-up__btn-#{$name}
@include pop-up-btn($colour)
.pop-up__btn-#{$name}-fill
@include pop-up-btn($colour, true)
.pop-up__input
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
font-size: 1rem
font-weight: 600
text-align: left
line-height: 1
border-radius: $rad-inner
background-color: $white
border: 2px solid $black
&:focus
outline: none
border-color: $primary
.pop-up__link
color: $primary
text-decoration: none
&:hover
text-decoration: underline
cursor: pointer
.pop-up__active
opacity: 1
top: 0
.pop-up-wrapper
transform: translate(-50%, 50%) scale(1)
.pop-up__hide
opacity: 0
transition: opacity 0.2s ease
.pop-up-wrapper
transform: translate(-50%, 50%) scaleY(0)
transition: transform 0.2s ease
@media (max-width: $breakpoint)
.pop-up
width: 100%
height: 100vh
height: 100dvh
position: fixed
left: 0
bottom: 0
backdrop-filter: blur(0.5rem)
.pop-up-wrapper
width: calc(100vw - 1rem)
max-height: calc(100vh - 1rem)
max-height: calc(100dvh - 1rem)
left: 0.5rem
bottom: 0.5rem
border-radius: $rad
transform: translateY(5rem)
.pop-up-content
max-height: 100%
img
max-height: 50vh
.pop-up-controlls
flex-direction: column
justify-content: center
.pop-up__btn
width: 100%
.pop-up__active
opacity: 1
top: unset
.pop-up-wrapper
transform: translateY(0)
.pop-up__hide
opacity: 0
transition: opacity 0.2s ease
.pop-up-wrapper
transform: translateY(5rem)
transition: transform 0.2s ease

219
gallery/themes/default/components/elements/upload-panel.sass Normal file
View file

@ -0,0 +1,219 @@
.upload-panel
position: fixed
top: 0
left: 0
display: none
width: 100%
height: 100vh
background-color: rgba($black, 0)
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: 600
color: $white
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
color: $white
form
margin: 0
padding: 0
width: 100%
display: flex
flex-direction: column
align-items: center
gap: 0.5rem
input
margin: 0
padding: 0.5rem 1rem
width: 100%
height: 2.5rem
font-size: 1rem
font-weight: 600
color: $white
background-color: $black2
border: none
border-radius: $rad-inner
&::placeholder
color: $white
button
margin: 0
padding: 0.5rem 1rem
width: 100%
height: 2.5rem
font-size: 1rem
font-weight: 600
color: $white
background-color: $primary
border: none
border-radius: $rad-inner
cursor: pointer
&:hover
background-color: $black2
color: $primary
.click-off
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: +1
.container
padding: 0.5rem
position: absolute
top: 0
left: calc(-400px + 3.5rem)
width: 400px
height: 100%
display: flex
flex-direction: column
gap: 1rem
background-color: $black
opacity: 0
z-index: +2
transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), opacity 0.25s cubic-bezier(0.76, 0, 0.17, 1)
.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: $black2
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, rgba($black, 0.8), rgba($black, 0))
.job__status
margin: 0
padding: 0
position: absolute
top: 0.5rem
left: 0.5rem
font-size: 1rem
font-weight: 600
color: $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: $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: $critical
&.success
.job__status
color: $success
.progress
height: 0
animation: none
&.warning
.job__status, .progress
color: $warning
&.critical, &.success, &.warning
.progress
height: 0
&.open
background-color: rgba($black, 0.5)
.container
left: 3.5rem
opacity: 1

112
gallery/themes/default/components/gallery.sass Normal file
View file

@ -0,0 +1,112 @@
.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
box-sizing: border-box
overflow: hidden
span
margin: 0
padding: 0.5rem
width: 100%
height: 100%
position: absolute
left: 0
bottom: 0
display: flex
flex-direction: column
justify-content: flex-end
background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
z-index: +1
opacity: 0 // hide
transform: scale(1.05) // scale up
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
h2
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
color: $primary
text-overflow: ellipsis
overflow: hidden
opacity: 0 // hide
transition: all 0.2s ease-in-out
p
margin: 0
padding: 0
font-size: 0.8rem
font-weight: 500
color: $white
text-overflow: ellipsis
overflow: hidden
opacity: 0 // hide
transition: all 0.2s ease-in-out
img
width: 100%
height: 100%
position: absolute
top: 0
left: 0
right: 0
bottom: 0
object-fit: cover
object-position: center
background-color: $white
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
&:after
content: ""
display: block
padding-bottom: 100%
&:hover
span
opacity: 1
transform: scale(1)
h2, p
opacity: 1
img
transform: scale(1.1)
@media (max-width: 800px)
.gallery-grid
grid-template-columns: auto auto auto

43
gallery/themes/default/components/image-view/background.sass Normal file
View file

@ -0,0 +1,43 @@
.background
width: 100%
height: 100vh
position: fixed
top: 0
left: 0
background-color: $white
background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 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: $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

51
gallery/themes/default/components/image-view/fullscreen.sass Normal file
View file

@ -0,0 +1,51 @@
.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)
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)
.image-fullscreen__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-fullscreen__hide
opacity: 0 // hide
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
img
transform: scaleY(0) // scale(0.8)
transition: transform 0.2s ease

21
gallery/themes/default/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

185
gallery/themes/default/components/image-view/info-tab.sass Normal file
View file

@ -0,0 +1,185 @@
.info-container
width: 100%
height: 100%
display: flex
flex-direction: column
background-color: $black
overflow-y: auto
.info-tab
width: 100%
max-height: 100%
display: flex
flex-direction: column
position: relative
background-color: $black
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: $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: $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
.info-table
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 0.5rem
color: $white
overflow-x: hidden
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
text-overflow: ellipsis
overflow: hidden
table
margin: 0
padding: 0
max-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
margin: 0
padding: 0
width: 100%
display: flex
gap: 0.5rem
span
margin: 0
padding: 0
width: 100%
height: 2rem
display: flex
justify-content: center
align-items: center
border-radius: $rad

66
gallery/themes/default/components/image-view/view.sass Normal file
View file

@ -0,0 +1,66 @@
@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
gap: 0.5rem
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

142
gallery/themes/default/components/navigation.sass Normal file
View file

@ -0,0 +1,142 @@
.navigation
margin: 0
padding: 0
width: 3.5rem
height: 100dvh
display: flex
flex-direction: column
justify-content: space-between
position: fixed
top: 0
left: 0
background-color: $black2
color: $white
z-index: 69
// Spacer
> span
height: 100%
.logo
margin: 0
padding: 0
width: 3.5rem
height: 3.5rem
min-height: 3.5rem
display: flex
flex-direction: row
align-items: center
.navigation-item
margin: 0
padding: 1rem
width: 3.5rem
height: 3.5rem
display: flex
flex-direction: row
align-items: center
position: relative
background-color: $black2
border: none
text-decoration: none
svg
margin: 0
font-size: 1.5rem
color: $white
transition: color 0.2s ease-out
span
margin: 0
padding: 0.5rem 0.75rem
display: block
position: absolute
top: 50%
left: 3rem
transform: translateY(-50%)
font-size: 1rem
font-weight: 600
background-color: $black2
color: $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
&:hover
background-color: $black2
svg
color: $primary
span
opacity: 1
left: 3.8rem
.navigation-item__selected
background: $primary
svg
color: $black
&:hover
background: $primary
svg
color: $white
@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
border-radius: $rad-inner
svg
margin: auto
width: 1.5rem
height: 1.5rem
span
display: none