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

Switch to CSS vars for variables

Browse source
This commit is contained in:
Michał Gdula 2023-03-25 16:22:32 +00:00
parent 5dab4fb53d
commit b862c74bbe
22 changed files with 263 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

50
gallery/themes/default/components/buttons/block.sass
View file

@ -1,13 +1,12 @@
@mixin btn-block($color)
background-color: rgba($color, 0)
color: $color
color: RGB($color)
&:hover
background-color: rgba($color, 0.2)
color: $color
background-color: RGBA($color, 0.1)
color: RGB($color)
&:focus-visible
outline: 2px solid rgba($color, 0.5)
outline: 2px solid RGBA($color, 0.3)
.btn-block
padding: 0.5rem 1rem
@ -26,20 +25,19 @@
font-weight: 600
text-align: center
background-color: rgba($white, 0)
color: $white
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.2)
background-color: RGBA($white, 0.1)
&:focus-visible
outline: 2px solid rgba($white, 0.5)
outline: 2px solid RGBA($white, 0.3)
&.primary
@include btn-block($primary)
@ -76,24 +74,24 @@
font-weight: 600
text-align: left
background-color: rgba($white, 0.1)
color: $white
background-color: RGBA($white, 0.1)
color: RGB($white)
border: none
border-bottom: 3px solid rgba($white, 0.1)
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)
border-color: RGBA($white, 0.3)
&:hover
border-color: rgba($white, 0.3)
border-color: RGBA($white, 0.3)
&:focus
border-color: $primary
border-color: RGBA($primary, 0.3)
outline: none
&.black
@ -117,8 +115,8 @@
font-weight: 600
text-align: center
background-color: rgba($white, 0.1)
color: $white
background-color: RGBA($white, 0.1)
color: RGB($white)
border: none
border-radius: $rad-inner
@ -133,20 +131,20 @@
cursor: pointer
&:hover
background-color: rgba($white, 0.2)
color: $white
background-color: RGBA($white, 0.2)
color: RGB($white)
&.active
background-color: rgba($primary, 0.2)
color: $primary
background-color: RGBA($primary, 0.2)
color: RGB($primary)
&.edging
background-color: rgba($white, 0.2)
color: $white
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: $critical
background-color: RGBA($critical, 0.2)
color: RGB($critical)

6
gallery/themes/default/components/buttons/info-button.sass
View file

@ -13,8 +13,8 @@
justify-content: center
align-items: center
background-color: $black2
color: $white
background-color: RGB($bg-200)
color: RGB($fg-white)
border-radius: $rad
border: none
opacity: 0
@ -24,7 +24,7 @@
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover
color: $info
color: RGB($info)
svg
margin: 0.5rem

20
gallery/themes/default/components/buttons/pill.sass
View file

@ -16,7 +16,7 @@
display: flex
background-color: $black
background-color: RGB($bg-100)
border-radius: $rad
.pill-item
@ -34,7 +34,7 @@
border: none
background-color: transparent
color: $white
color: RGB($fg-white)
svg
width: 1.25rem
@ -43,7 +43,7 @@
&:hover
cursor: pointer
color: $primary
color: RGB($primary)
.tool-tip
opacity: 1
@ -51,22 +51,22 @@
transform: translateX(calc(-50% + 1.25rem ))
.pill__critical
color: $critical
color: RGB($critical)
span
color: $critical
color: RGB($critical)
&:hover
color: $white
color: RGB($fg-white)
.pill__info
color: $info
color: RGB($info)
span
color: $info
color: RGB($info)
&:hover
color: $white
color: RGB($fg-white)
.tool-tip
margin: 0
@ -85,7 +85,7 @@
font-weight: 600
background-color: #000000
color: $white
color: RGB($fg-white)
opacity: 0
border-radius: $rad-inner

6
gallery/themes/default/components/buttons/top-of-page.sass
View file

@ -13,8 +13,8 @@
justify-content: center
align-items: center
background-color: $black2
color: $white
background-color: RGB($bg-200)
color: RGB($fg-white)
border-radius: $rad
border: none
opacity: 0
@ -24,7 +24,7 @@
transition: all 0.2s cubic-bezier(.86, 0, .07, 1)
&:hover
color: $primary
color: RGB($primary)
svg
margin: 0.5rem