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

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)