Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 03:26:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Functional settings menu plus sass stuff apparently?

Browse source
This commit is contained in:
Michał Gdula 2023-09-27 11:32:39 +01:00
parent 1a59e413a9
commit 317c875cf0
22 changed files with 256 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

6
onlylegs/static/sass/components/banner.sass
View file

@ -44,7 +44,7 @@
width: 100%
height: 100%
background: linear-gradient(to right, var(--background-100), transparent)
background: linear-gradient(to right, var(--background-100), transparent 80%, var(--background-100) 100%)
z-index: +1
@ -157,7 +157,7 @@
margin-left: auto
width: auto
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
.banner,
.banner-small
&::after
@ -169,7 +169,7 @@
max-height: 30vh
.banner-filter
background: linear-gradient(to bottom, var(--background-100), transparent)
background: linear-gradient(to top, var(--background-100), transparent)
.banner-content
padding: 0.5rem

12
onlylegs/static/sass/components/buttons/block.sass
View file

@ -39,35 +39,35 @@
&:hover, &:focus-visible
background-color: var(--primary)
color: var(--white)
color: var(--black)
&.success
background-color: var(--success-transparent)
color: var(--success)
&:hover, &:focus-visible
background-color: var(--success)
color: var(--white)
color: var(--black)
&.warning
background-color: var(--warning-transparent)
color: var(--warning)
&:hover, &:focus-visible
background-color: var(--warning)
color: var(--white)
color: var(--black)
&.critical
background-color: var(--danger-transparent)
color: var(--danger)
&:hover, &:focus-visible
background-color: var(--danger)
color: var(--white)
color: var(--black)
&.info
background-color: var(--info-transparent)
color: var(--info)
&:hover, &:focus-visible
background-color: var(--info)
color: var(--white)
color: var(--black)
&.black
background-color: var(--black-transparent)
color: var(--white)
@ -201,4 +201,4 @@
&.error
background-color: var(--danger)
color: var(--danger)
color: var(--black)

4
onlylegs/static/sass/components/buttons/top-of-page.sass
View file

@ -13,7 +13,7 @@
justify-content: center
align-items: center
background-color: var(--background-300)
background-color: var(--background-100)
color: var(--foreground-white)
border-radius: calc(var(--rad) / 2)
border: none
@ -34,6 +34,6 @@
right: 0.75rem
opacity: 1
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
.top-of-page
bottom: 4.25rem

2
onlylegs/static/sass/components/context-menu.sass
View file

@ -31,7 +31,7 @@
overflow: hidden
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
transition: transform 0.35s var(--animation-bounce), opacity 0.35s var(--animation-bounce)
transform-origin: center center
opacity: 0.5
transform: scale(0, 0)

8
onlylegs/static/sass/components/gallery.sass
View file

@ -26,7 +26,7 @@
box-sizing: border-box
overflow: hidden
transition: box-shadow 0.2s cubic-bezier(.79, .14, .15, .86)
transition: box-shadow 0.2s var(--animation-smooth)
.image-filter
margin: 0
@ -47,7 +47,7 @@
opacity: 0 // hide
z-index: +4
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
transition: opacity 0.2s var(--animation-smooth)
.image-title,
.image-subtitle
@ -163,7 +163,7 @@
border-radius: calc(var(--rad) / 2)
box-shadow: 0 0 0.4rem 0.25rem var(--black-transparent)
transition: transform 0.2s cubic-bezier(.79, .14, .15, .86)
transition: transform 0.2s var(--animation-smooth)
&.size-1
.data-1
@ -218,5 +218,5 @@
grid-template-columns: auto auto auto
.gallery-item
margin: 0.35rem
margin: 0.1rem
position: relative

17
onlylegs/static/sass/components/image-view.sass
View file

@ -58,13 +58,6 @@ details
font-size: 1.1rem
font-weight: 500
&[open]
summary
margin-bottom: 0.5rem
> i.collapse-indicator
transform: rotate(90deg)
p
margin: 0
padding: 0
@ -137,6 +130,16 @@ details
tr:last-of-type td
padding-bottom: 0
&[open]
summary
margin-bottom: 0.5rem
> i.collapse-indicator
transform: rotate(90deg)
&:last-of-type
margin-bottom: 0
.img-colours
width: 100%

2
onlylegs/static/sass/components/navigation.sass
View file

@ -78,7 +78,7 @@ nav
background-color: currentColor
border-radius: calc(var(--rad) / 2)
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
nav
width: 100vw
height: 3.5rem

6
onlylegs/static/sass/components/notification.sass
View file

@ -32,7 +32,7 @@
position: relative
background-color: var(--background-300)
background-color: var(--background-400)
border-radius: calc(var(--rad) / 2)
color: var(--foreground-white)
opacity: 0
@ -97,7 +97,7 @@
justify-content: center
align-items: center
background-color: var(--background-200)
background-color: var(--background-300)
i
font-size: 1.25rem
@ -119,7 +119,7 @@
line-height: 1
text-align: left
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
.notifications
bottom: 3.8rem
width: calc(100vw - 0.6rem)

6
onlylegs/static/sass/components/pop-up.sass
View file

@ -38,12 +38,12 @@
display: flex
flex-direction: column
background-color: var(--background-200)
background-color: var(--background-400)
border-radius: var(--rad)
overflow: hidden
z-index: +2
transition: transform 0.2s var(--animation-smooth)
transition: transform 0.2s var(--animation-bounce)
.pop-up-header
margin: 0 0 0.5rem 0
@ -133,7 +133,7 @@
.pop-up-wrapper
transform: translate(-50%, 50%) scale(1)
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
.pop-up
.pop-up-wrapper
max-width: calc(100% - 0.75rem)

4
onlylegs/static/sass/components/tags.sass
View file

@ -13,7 +13,7 @@
border-radius: calc(var(--rad) / 2)
border: none
background-color: var(--primary--transparent)
background-color: var(--primary-transparent)
color: var(--primary)
cursor: pointer
@ -23,4 +23,4 @@
font-size: 1.15rem
&:hover
background-color: var(--primary--transparent)
background-color: var(--primary-transparent)

14
onlylegs/static/sass/components/upload-panel.sass
View file

@ -13,7 +13,7 @@
overflow: hidden
z-index: 68
transition: background-color 0.25s cubic-bezier(0.76, 0, 0.17, 1)
transition: background-color 0.25s var(--animation-smooth)
h3
margin: 0
@ -70,7 +70,7 @@
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)
transition: left 0.25s var(--animation-smooth), bottom 0.25s var(--animation-smooth)
#dragIndicator
display: none
@ -97,7 +97,7 @@
background-color: var(--background-400)
border-radius: calc(var(--rad) / 2)
transition: width 0.25s var(--animation-bounce)
transition: width 0.25s var(--animation-smooth)
&.dragging #dragIndicator::after
width: 9rem
@ -163,7 +163,7 @@
z-index: +3
transition: color 0.25s cubic-bezier(0.76, 0, 0.17, 1)
transition: color 0.25s var(--animation-smooth)
.progress
width: 100%
@ -175,10 +175,10 @@
background-color: var(--primary)
animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite
animation: uploadingLoop 1s var(--animation-smooth) infinite
z-index: +5
transition: left 1s cubic-bezier(0.76, 0, 0.17, 1)
transition: left 1s var(--animation-smooth)
&.critical
.job__status, .progress
@ -203,7 +203,7 @@
.container
left: 0
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
.upload-panel
width: 100%
height: calc(100vh - 3.5rem)

11
onlylegs/static/sass/style.sass
View file

@ -57,7 +57,7 @@ body
color: var(--foreground-white)
overflow-x: hidden
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
body
padding: 0 0 3.5rem 0
@ -71,10 +71,13 @@ main
color: var(--foreground-black)
border-radius: var(--rad)
overflow: hidden
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
main
margin: 0 0.5rem
// border-radius: 0
header
position: sticky
top: 0
.error-page
min-height: 100%
@ -100,7 +103,7 @@ main
font-size: 1.25rem
font-weight: 400
text-align: center
@media (max-width: var(--breakpoint))
@media (max-width: 800px)
.error-page
h1
font-size: 4.5rem

16
onlylegs/static/sass/variables.sass
View file

@ -1,6 +1,6 @@
\:root
--background-hsl-hue: 0
--background-hsl-saturation: 2%
--background-hsl-hue: 69
--background-hsl-saturation: 25%
--background-100: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 6%)
--background-200: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 8%)
@ -13,14 +13,15 @@
--background-shade: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 6%, 0.5)
--foreground-gray: rgb(102, 102, 102)
--foreground-white: rgb(232, 227, 227)
--foreground-gray: rgb(102, 102, 102)
--foreground-black: rgb(16, 16, 16)
--black: rgb(20, 20, 20)
--black-transparent: rgba(20, 20, 20, 0.2)
--white: rgb(232, 227, 227)
--white-transparent: rgba(232, 227, 227, 0.2)
--red: rgb(182, 100, 103)
--red-transparent: rgba(182, 100, 103, 0.1)
--orange: rgb(217, 140, 95)
@ -33,12 +34,17 @@
--blue-transparent: rgba(141, 163, 185, 0.1)
--purple: rgb(169, 136, 176)
--purple-transparent: rgba(169, 136, 176, 0.1)
--primary: rgb(183, 169, 151)
--primary-transparent: rgba(183, 169, 151, 0.1)
--warning: var(--orange)
--warning-transparent: var(--orange-transparent)
--danger: var(--red)
--danger-transparent: var(--red-transparent)
--success: var(--green)
--success-transparent: var(--green-transparent)
--info: var(--blue)
--info-transparent: var(--blue-transparent)
--rad: 0.4rem
@ -47,4 +53,4 @@
--breakpoint: 800px
--font-family: 'Rubik', sans-serif
--font-family: 'Switzer', sans-serif