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

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