mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-01-18 04:18:35 +00:00
Michał
e3bc937036
Fix small UI not having correct controlls on empy groups Not being able to login Overflowing text on upload button
177 lines
3.3 KiB
Sass
177 lines
3.3 KiB
Sass
@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-checkbox
|
|
padding: 0
|
|
display: flex
|
|
justify-content: flex-start
|
|
align-items: center
|
|
gap: 0.5rem
|
|
|
|
position: relative
|
|
|
|
label
|
|
font-size: 1rem
|
|
font-weight: 600
|
|
text-align: left
|
|
|
|
color: RGB($fg-white)
|
|
|
|
.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
|
|
overflow: hidden
|
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
|
|
|
|
input
|
|
position: absolute
|
|
inset: 0
|
|
opacity: 0
|
|
cursor: pointer
|
|
|
|
.status
|
|
width: 100%
|
|
white-space: nowrap
|
|
text-overflow: ellipsis
|
|
text-align: center
|
|
overflow: hidden
|
|
|
|
&: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)
|