mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Move colours to HSL, probably a mistake
This commit is contained in:
parent
9821db72c6
commit
1a59e413a9
29 changed files with 852 additions and 730 deletions
|
|
@ -2,7 +2,7 @@
|
|||
.banner-small
|
||||
width: 100%
|
||||
position: relative
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
.link
|
||||
padding: 0.1rem 0.3rem
|
||||
|
|
@ -10,15 +10,15 @@
|
|||
text-decoration: none
|
||||
font-weight: 500
|
||||
|
||||
background-color: RGB($fg-white)
|
||||
color: RGB($fg-black)
|
||||
border-radius: $rad-inner
|
||||
background-color: var(--foreground-white)
|
||||
color: var(--foreground-black)
|
||||
border-radius: calc(var(--radius) / 2)
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: RGB($fg-black)
|
||||
color: RGB($fg-white)
|
||||
background-color: var(--foreground-black)
|
||||
color: var(--foreground-white)
|
||||
|
||||
.banner
|
||||
height: 30rem
|
||||
|
|
@ -26,7 +26,8 @@
|
|||
|
||||
img
|
||||
position: absolute
|
||||
inset: 0
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
|
@ -43,7 +44,7 @@
|
|||
width: 100%
|
||||
height: 100%
|
||||
|
||||
background: linear-gradient(to right, RGB($bg-100), transparent)
|
||||
background: linear-gradient(to right, var(--background-100), transparent)
|
||||
|
||||
z-index: +1
|
||||
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
font-size: 6.9rem
|
||||
font-weight: 700
|
||||
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
.banner-info
|
||||
grid-area: info
|
||||
|
|
@ -104,8 +105,8 @@
|
|||
width: 6.9rem
|
||||
height: 6.9rem
|
||||
|
||||
background-color: RGB($primary)
|
||||
border-radius: $rad
|
||||
background-color: var(--primary)
|
||||
border-radius: var(--rad)
|
||||
overflow: hidden
|
||||
|
||||
.banner-small
|
||||
|
|
@ -144,7 +145,7 @@
|
|||
font-weight: 700
|
||||
font-size: 1.5rem
|
||||
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
.banner-info
|
||||
margin-right: 0.6rem
|
||||
|
|
@ -156,7 +157,7 @@
|
|||
margin-left: auto
|
||||
width: auto
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
.banner,
|
||||
.banner-small
|
||||
&::after
|
||||
|
|
@ -168,7 +169,7 @@
|
|||
max-height: 30vh
|
||||
|
||||
.banner-filter
|
||||
background: linear-gradient(to bottom, RGB($bg-100), transparent)
|
||||
background: linear-gradient(to bottom, var(--background-100), transparent)
|
||||
|
||||
.banner-content
|
||||
padding: 0.5rem
|
||||
|
|
@ -192,7 +193,7 @@
|
|||
display: none
|
||||
|
||||
.pill-row
|
||||
margin-top: 0rem
|
||||
margin-top: 0
|
||||
|
||||
.banner-picture
|
||||
margin: 0 auto
|
||||
|
|
|
|||
|
|
@ -1,14 +1,3 @@
|
|||
@mixin btn-block($color)
|
||||
background-color: RGBA($color, 0.1)
|
||||
color: RGB($color)
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: RGBA($color, 0.15)
|
||||
color: RGB($color)
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($color, 0.2)
|
||||
|
||||
|
||||
.btn-block
|
||||
padding: 0.4rem 0.7rem
|
||||
|
||||
|
|
@ -26,19 +15,17 @@
|
|||
font-weight: 400
|
||||
text-align: center
|
||||
|
||||
background-color: RGBA($white, 0.1)
|
||||
color: RGB($white)
|
||||
background-color: var(--white-transparent)
|
||||
color: var(--white)
|
||||
border: none
|
||||
border-radius: $rad-inner
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
outline: none
|
||||
|
||||
cursor: pointer
|
||||
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: RGBA($white, 0.2)
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
|
||||
background-color: var(--white-transparent)
|
||||
|
||||
&.transparent
|
||||
background-color: transparent
|
||||
|
|
@ -47,20 +34,50 @@
|
|||
text-decoration: underline
|
||||
|
||||
&.primary
|
||||
@include btn-block($primary)
|
||||
&.critical
|
||||
@include btn-block($critical)
|
||||
&.warning
|
||||
@include btn-block($warning)
|
||||
background-color: var(--primary-transparent)
|
||||
color: var(--primary)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: var(--primary)
|
||||
color: var(--white)
|
||||
&.success
|
||||
@include btn-block($success)
|
||||
background-color: var(--success-transparent)
|
||||
color: var(--success)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: var(--success)
|
||||
color: var(--white)
|
||||
&.warning
|
||||
background-color: var(--warning-transparent)
|
||||
color: var(--warning)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: var(--warning)
|
||||
color: var(--white)
|
||||
&.critical
|
||||
background-color: var(--danger-transparent)
|
||||
color: var(--danger)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: var(--danger)
|
||||
color: var(--white)
|
||||
&.info
|
||||
@include btn-block($info)
|
||||
background-color: var(--info-transparent)
|
||||
color: var(--info)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: var(--info)
|
||||
color: var(--white)
|
||||
&.black
|
||||
@include btn-block($black)
|
||||
background-color: var(--black-transparent)
|
||||
color: var(--white)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: var(--black)
|
||||
color: var(--white)
|
||||
|
||||
&.disabled, &:disabled
|
||||
color: RGB($fg-dim)
|
||||
color: var(--foreground-gray)
|
||||
cursor: unset
|
||||
|
||||
.input-checkbox
|
||||
|
|
@ -77,7 +94,7 @@
|
|||
font-weight: 400
|
||||
text-align: left
|
||||
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
.input-block
|
||||
padding: 0.4rem 0.7rem
|
||||
|
|
@ -95,28 +112,32 @@
|
|||
font-weight: 400
|
||||
text-align: left
|
||||
|
||||
background-color: RGBA($white, 0.1)
|
||||
color: RGB($white)
|
||||
background-color: var(--white-transparent)
|
||||
color: var(--white)
|
||||
border: none
|
||||
border-bottom: 3px solid RGBA($white, 0.1)
|
||||
border-radius: $rad-inner
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
|
||||
border-bottom: 3px solid var(--white-transparent)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
outline: none
|
||||
|
||||
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: var(--white-transparent)
|
||||
|
||||
&:hover
|
||||
border-color: RGBA($white, 0.3)
|
||||
border-color: var(--white-transparent)
|
||||
|
||||
&:focus
|
||||
border-color: RGB($primary)
|
||||
border-color: var(--primary)
|
||||
|
||||
&.black
|
||||
@include btn-block($black)
|
||||
background-color: var(--black-transparent)
|
||||
color: var(--white)
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: var(--black)
|
||||
color: var(--white)
|
||||
|
||||
.fileDrop-block
|
||||
padding: 1rem 1.25rem
|
||||
|
|
@ -136,11 +157,10 @@
|
|||
font-weight: 400
|
||||
text-align: center
|
||||
|
||||
background-color: RGBA($white, 0.1)
|
||||
color: RGB($white)
|
||||
background-color: var(--white-transparent)
|
||||
color: var(--white)
|
||||
border: none
|
||||
border-radius: $rad-inner
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
outline: none
|
||||
|
||||
cursor: pointer
|
||||
|
|
@ -164,24 +184,21 @@
|
|||
overflow: hidden
|
||||
|
||||
&:hover, &:focus-visible
|
||||
background-color: RGBA($white, 0.2)
|
||||
color: RGB($white)
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
|
||||
background-color: var(--white-transparent)
|
||||
color: var(--white)
|
||||
|
||||
&.active
|
||||
background-color: RGBA($primary, 0.2)
|
||||
color: RGB($primary)
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($primary, 0.3)
|
||||
background-color: var(--primary-transparent)
|
||||
color: var(--primary)
|
||||
|
||||
&.edging
|
||||
background-color: RGBA($white, 0.2)
|
||||
color: RGB($white)
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)
|
||||
background-color: var(--white-transparent)
|
||||
color: var(--white)
|
||||
|
||||
input
|
||||
display: none // So it doesnt get in the way of the drop as that breaks things
|
||||
// So it doesnt get in the way of the drop as that breaks things
|
||||
display: none
|
||||
|
||||
&.error
|
||||
background-color: RGBA($critical, 0.2)
|
||||
color: RGB($critical)
|
||||
// box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($critical, 0.3)
|
||||
background-color: var(--danger)
|
||||
color: var(--danger)
|
||||
|
|
|
|||
|
|
@ -1,39 +0,0 @@
|
|||
.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)
|
||||
|
||||
i
|
||||
margin: 0.5rem
|
||||
font-size: 1.25rem
|
||||
|
||||
&:hover
|
||||
color: RGB($info)
|
||||
|
||||
&.show
|
||||
right: 0.75rem
|
||||
opacity: 1
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.info-button
|
||||
bottom: 4.25rem
|
||||
|
|
@ -16,9 +16,8 @@
|
|||
|
||||
display: flex
|
||||
|
||||
background-color: RGB($bg-200)
|
||||
border-radius: $rad
|
||||
// box-shadow: 0 1px 0 RGB($bg-100), 0 -1px 0 RGB($bg-300)
|
||||
background-color: var(--background-200)
|
||||
border-radius: var(--rad)
|
||||
|
||||
.pill-text
|
||||
margin: 0
|
||||
|
|
@ -37,9 +36,9 @@
|
|||
font-size: 1rem
|
||||
font-weight: 400
|
||||
|
||||
background-color: RGB($bg-200)
|
||||
color: RGB($fg-white)
|
||||
border-radius: $rad
|
||||
background-color: var(--background-200)
|
||||
color: var(--foreground-white)
|
||||
border-radius: var(--rad)
|
||||
|
||||
.pill-item
|
||||
margin: 0
|
||||
|
|
@ -58,7 +57,7 @@
|
|||
|
||||
border: none
|
||||
background-color: transparent
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
i
|
||||
font-size: 1.25rem
|
||||
|
|
@ -66,34 +65,34 @@
|
|||
&:hover
|
||||
cursor: pointer
|
||||
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
&.disabled, &:disabled
|
||||
color: RGB($fg-dim)
|
||||
color: var(--foreground-dim)
|
||||
cursor: unset
|
||||
|
||||
.pill__critical
|
||||
color: RGB($critical)
|
||||
color: var(--danger)
|
||||
|
||||
span
|
||||
background: RGB($critical)
|
||||
color: RGB($fg-white)
|
||||
background: var(--danger)
|
||||
color: var(--foreground-white)
|
||||
|
||||
i
|
||||
color: RGB($critical)
|
||||
color: var(--danger)
|
||||
|
||||
&:hover
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
.pill__info
|
||||
color: RGB($info)
|
||||
color: var(--info)
|
||||
|
||||
span
|
||||
color: RGB($info)
|
||||
color: var(--info)
|
||||
|
||||
&:hover
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
.tool-tip
|
||||
display: none
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
background-color: RGB($bg-300)
|
||||
color: RGB($fg-white)
|
||||
border-radius: $rad
|
||||
background-color: var(--background-300)
|
||||
color: var(--foreground-white)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
border: none
|
||||
opacity: 0
|
||||
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
font-size: 1.25rem
|
||||
|
||||
&:hover
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
&.show
|
||||
right: 0.75rem
|
||||
opacity: 1
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
.top-of-page
|
||||
bottom: 4.25rem
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
align-items: flex-start
|
||||
gap: 0.25rem
|
||||
|
||||
background-color: RGB($bg-300)
|
||||
border: 1px solid RGB($bg-200)
|
||||
background-color: var(--background-300)
|
||||
border: 1px solid var(--background-200)
|
||||
border-radius: 6px
|
||||
|
||||
overflow: hidden
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
text-align: center
|
||||
font-size: 1.2rem
|
||||
font-weight: 400
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
.contextMenuItem
|
||||
margin: 0
|
||||
|
|
@ -61,22 +61,22 @@
|
|||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
background-color: RGB($bg-300)
|
||||
color: RGB($fg-white)
|
||||
background-color: var(--background-300)
|
||||
color: var(--foreground-white)
|
||||
border: none
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
.contextMenuItem:hover
|
||||
background-color: RGB($bg-200)
|
||||
background-color: var(--background-200)
|
||||
.contextMenuItem__critical
|
||||
color: RGB($critical)
|
||||
color: var(--danger)
|
||||
.contextMenuItem__warning
|
||||
color: RGB($warning)
|
||||
color: var(--warning)
|
||||
.contextMenuItem__success
|
||||
color: RGB($success)
|
||||
color: var(--success)
|
||||
.contextMenuItem__info
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
.contextMenuText
|
||||
margin: 0
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
height: 1px
|
||||
|
||||
border: none
|
||||
background-color: RGB($bg-200)
|
||||
background-color: var(--background-200)
|
||||
|
||||
.contextMenu__show
|
||||
opacity: 1
|
||||
|
|
|
|||
|
|
@ -12,22 +12,17 @@
|
|||
font-weight: 700
|
||||
|
||||
.gallery-grid
|
||||
margin: 0
|
||||
padding: 0.35rem
|
||||
|
||||
width: 100%
|
||||
|
||||
display: grid
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
|
||||
gap: 0.5rem
|
||||
|
||||
.gallery-item
|
||||
margin: 0.35rem
|
||||
padding: 0
|
||||
|
||||
position: relative
|
||||
|
||||
border-radius: $rad-inner
|
||||
box-shadow: 0 0.15rem 0.4rem 0.1rem RGBA($bg-100, 0.4)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
box-shadow: 0 0.15rem 0.4rem 0.1rem var(--black-transparent)
|
||||
|
||||
box-sizing: border-box
|
||||
overflow: hidden
|
||||
|
|
@ -48,7 +43,7 @@
|
|||
flex-direction: column
|
||||
justify-content: flex-end
|
||||
|
||||
background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
|
||||
background-image: linear-gradient(to top, var(--black-transparent), transparent)
|
||||
opacity: 0 // hide
|
||||
|
||||
z-index: +4
|
||||
|
|
@ -63,8 +58,8 @@
|
|||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
color: RGB($fg-white)
|
||||
text-shadow: 0px 0px 2px RGB($fg-black)
|
||||
color: var(--foreground-white)
|
||||
text-shadow: 0 0 2px var(--foreground-black)
|
||||
|
||||
.image-title
|
||||
font-size: 0.9rem
|
||||
|
|
@ -84,21 +79,20 @@
|
|||
object-fit: cover
|
||||
object-position: center
|
||||
|
||||
background-color: RGB($bg-bright)
|
||||
background-color: var(--background-bright)
|
||||
|
||||
&:hover
|
||||
box-shadow: 0 0.2rem 0.4rem 0.1rem RGBA($bg-100, 0.6)
|
||||
box-shadow: 0 0.2rem 0.4rem 0.1rem var(--black-transparent)
|
||||
|
||||
.image-filter
|
||||
opacity: 1
|
||||
|
||||
.group-item
|
||||
margin: 0.35rem
|
||||
padding: 0
|
||||
|
||||
position: relative
|
||||
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
|
||||
box-sizing: border-box
|
||||
overflow: hidden
|
||||
|
|
@ -119,7 +113,7 @@
|
|||
flex-direction: column
|
||||
justify-content: flex-end
|
||||
|
||||
background-image: linear-gradient(to top, rgba($bg-100, 0.8), transparent)
|
||||
background-image: linear-gradient(to top, var(--black-transparent), transparent)
|
||||
|
||||
z-index: +4
|
||||
|
||||
|
|
@ -132,8 +126,8 @@
|
|||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
color: RGB($fg-white)
|
||||
text-shadow: 0px 0px 2px RGB($fg-black)
|
||||
color: var(--foreground-white)
|
||||
text-shadow: 0 0 2px var(--foreground-black)
|
||||
|
||||
.image-title
|
||||
font-size: 0.9rem
|
||||
|
|
@ -165,9 +159,9 @@
|
|||
object-fit: cover
|
||||
object-position: center
|
||||
|
||||
background-color: RGB($bg-bright)
|
||||
border-radius: $rad-inner
|
||||
box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
|
||||
background-color: var(--background-800)
|
||||
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)
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
top: 0
|
||||
left: 0
|
||||
bottom: 0
|
||||
background-image: linear-gradient(90deg, $bg-transparent, transparent)
|
||||
background-image: linear-gradient(90deg, var(--background-shade), transparent)
|
||||
overflow-y: auto
|
||||
transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
||||
z-index: 2
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
left: -27rem
|
||||
@media (max-width: 1100px)
|
||||
.info-container
|
||||
padding: 0 0.5rem 0 0.5rem
|
||||
padding: 0
|
||||
width: 100%
|
||||
position: relative
|
||||
background: none
|
||||
|
|
@ -32,9 +32,9 @@ details
|
|||
padding: 0.5rem
|
||||
display: flex
|
||||
flex-direction: column
|
||||
background-color: RGB($bg-300)
|
||||
color: RGB($fg-white)
|
||||
border-radius: $rad
|
||||
background-color: var(--background-300)
|
||||
color: var(--foreground-white)
|
||||
border-radius: var(--rad)
|
||||
overflow: hidden
|
||||
|
||||
summary
|
||||
|
|
@ -44,7 +44,7 @@ details
|
|||
justify-content: flex-start
|
||||
align-items: center
|
||||
position: relative
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
> i
|
||||
margin-right: 0
|
||||
|
|
@ -79,7 +79,7 @@ details
|
|||
margin: 0
|
||||
padding: 0
|
||||
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
|
@ -91,7 +91,7 @@ details
|
|||
width: 1.1rem
|
||||
height: 1.1rem
|
||||
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
|
||||
object-fit: cover
|
||||
|
||||
|
|
@ -154,7 +154,7 @@ details
|
|||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
border: none
|
||||
|
||||
i
|
||||
|
|
@ -197,7 +197,9 @@ details
|
|||
max-height: 100%
|
||||
object-fit: contain
|
||||
object-position: center
|
||||
border-radius: $rad
|
||||
border-radius: var(--rad)
|
||||
|
||||
transition: border-radius 0.3s cubic-bezier(0.76, 0, 0.17, 1)
|
||||
|
||||
&.collapsed
|
||||
padding: 0
|
||||
|
|
@ -207,6 +209,7 @@ details
|
|||
border-radius: 0
|
||||
@media (max-width: 1100px)
|
||||
.image-container
|
||||
padding: 0 0 0.5rem 0
|
||||
position: relative
|
||||
left: 0
|
||||
|
||||
|
|
@ -218,17 +221,17 @@ details
|
|||
max-height: 69vh
|
||||
|
||||
&.collapsed
|
||||
padding: 0.5rem
|
||||
padding: 0 0 0.5rem 0
|
||||
left: 0
|
||||
|
||||
picture img
|
||||
border-radius: $rad
|
||||
border-radius: var(--rad)
|
||||
|
||||
.background
|
||||
position: absolute
|
||||
inset: 0
|
||||
background-color: RGB($bg-300)
|
||||
background-image: linear-gradient(to right, RGB($bg-400) 15%, RGB($bg-200) 35%, RGB($bg-400) 50%)
|
||||
background-color: var(--background-300)
|
||||
background-image: linear-gradient(to right, var(--background-400) 15%, var(--background-200) 35%, var(--background-400) 50%)
|
||||
background-size: 1000px 640px
|
||||
animation: imgLoading 1.8s linear infinite forwards
|
||||
user-select: none
|
||||
|
|
@ -240,7 +243,7 @@ details
|
|||
inset: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
background-color: RGB($fg-white)
|
||||
background-color: var(--foreground-white)
|
||||
filter: blur(3rem) saturate(1.2) brightness(0.7)
|
||||
transform: scale(1.1)
|
||||
object-fit: cover
|
||||
|
|
|
|||
|
|
@ -42,27 +42,27 @@ nav
|
|||
> i
|
||||
padding: 0.5rem
|
||||
font-size: 1.3rem
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
color: inherit
|
||||
|
||||
> .nav-pfp
|
||||
padding: 0.4rem
|
||||
width: 2.3rem
|
||||
height: 2.3rem
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
|
||||
&:hover
|
||||
> i, .nav-pfp
|
||||
background: RGBA($fg-white, 0.1)
|
||||
background: var(--white-transparent)
|
||||
|
||||
&.selected
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
&::before
|
||||
content: ''
|
||||
|
|
@ -76,9 +76,9 @@ nav
|
|||
height: calc(100% - 1rem)
|
||||
|
||||
background-color: currentColor
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
nav
|
||||
width: 100vw
|
||||
height: 3.5rem
|
||||
|
|
@ -91,7 +91,7 @@ nav
|
|||
bottom: 0
|
||||
left: 0
|
||||
|
||||
background-color: RGB($background)
|
||||
background-color: var(--background-100)
|
||||
|
||||
> span
|
||||
display: none
|
||||
|
|
|
|||
|
|
@ -3,12 +3,6 @@
|
|||
width: 0
|
||||
100%
|
||||
width: 100%
|
||||
|
||||
@mixin notification($color)
|
||||
color: RGB($color)
|
||||
|
||||
&::after
|
||||
background-color: RGB($color)
|
||||
|
||||
.notifications
|
||||
margin: 0
|
||||
|
|
@ -38,9 +32,9 @@
|
|||
|
||||
position: relative
|
||||
|
||||
background-color: RGB($bg-300)
|
||||
border-radius: $rad-inner
|
||||
color: RGB($fg-white)
|
||||
background-color: var(--background-300)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
color: var(--foreground-white)
|
||||
opacity: 0
|
||||
transform: scale(0.8)
|
||||
|
||||
|
|
@ -59,19 +53,27 @@
|
|||
bottom: 0
|
||||
left: 0
|
||||
|
||||
background-color: RGB($fg-white)
|
||||
background-color: var(--foreground-white)
|
||||
|
||||
z-index: +2
|
||||
animation: notificationTimeout 5.1s ease-out forwards
|
||||
|
||||
&.success
|
||||
@include notification($success)
|
||||
color: var(--success)
|
||||
&::after
|
||||
background-color: var(--success)
|
||||
&.warning
|
||||
@include notification($warning)
|
||||
color: var(--warning)
|
||||
&::after
|
||||
background-color: var(--warning)
|
||||
&.critical
|
||||
@include notification($critical)
|
||||
color: var(--danger)
|
||||
&::after
|
||||
background-color: var(--danger)
|
||||
&.info
|
||||
@include notification($info)
|
||||
color: var(--info)
|
||||
&::after
|
||||
background-color: var(--info)
|
||||
|
||||
&.show
|
||||
opacity: 1
|
||||
|
|
@ -95,7 +97,7 @@
|
|||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
background-color: RGB($bg-200)
|
||||
background-color: var(--background-200)
|
||||
|
||||
i
|
||||
font-size: 1.25rem
|
||||
|
|
@ -117,7 +119,7 @@
|
|||
line-height: 1
|
||||
text-align: left
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
.notifications
|
||||
bottom: 3.8rem
|
||||
width: calc(100vw - 0.6rem)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
display: none
|
||||
|
||||
background-color: $bg-transparent
|
||||
background-color: var(--background-shade)
|
||||
opacity: 0
|
||||
|
||||
z-index: 101
|
||||
|
|
@ -38,12 +38,12 @@
|
|||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
background-color: RGB($bg-200)
|
||||
border-radius: $rad
|
||||
background-color: var(--background-200)
|
||||
border-radius: var(--rad)
|
||||
overflow: hidden
|
||||
|
||||
z-index: +2
|
||||
transition: transform 0.2s $animation-smooth
|
||||
transition: transform 0.2s var(--animation-smooth)
|
||||
|
||||
.pop-up-header
|
||||
margin: 0 0 0.5rem 0
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
font-weight: 700
|
||||
text-align: left
|
||||
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
p
|
||||
margin: 0
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
font-weight: 400
|
||||
text-align: left
|
||||
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
svg
|
||||
width: 1rem
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
vertical-align: middle
|
||||
|
||||
a, .link
|
||||
color: RGB($primary)
|
||||
color: var(--primary)
|
||||
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
|
@ -127,15 +127,13 @@
|
|||
justify-content: flex-end
|
||||
gap: 0.5rem
|
||||
|
||||
// background-color: RGB($bg-100)
|
||||
|
||||
&.active
|
||||
opacity: 1
|
||||
|
||||
.pop-up-wrapper
|
||||
transform: translate(-50%, 50%) scale(1)
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
.pop-up
|
||||
.pop-up-wrapper
|
||||
max-width: calc(100% - 0.75rem)
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
justify-content: center
|
||||
gap: 1rem
|
||||
|
||||
background-color: RGB($bg-400)
|
||||
color: RGB($fg-white)
|
||||
border: 2px solid RGB($bg-200)
|
||||
border-radius: $rad-inner
|
||||
background-color: var(--background-400)
|
||||
color: var(--foreground-white)
|
||||
border: 2px solid var(--background-200)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
|
||||
h2
|
||||
margin: 0
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
font-weight: 500
|
||||
text-decoration: none
|
||||
|
||||
border-radius: $rad-inner
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
border: none
|
||||
background-color: RGBA($primary, 0.1)
|
||||
color: RGB($primary)
|
||||
background-color: var(--primary--transparent)
|
||||
color: var(--primary)
|
||||
|
||||
cursor: pointer
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
|
||||
|
|
@ -23,4 +23,4 @@
|
|||
font-size: 1.15rem
|
||||
|
||||
&:hover
|
||||
background-color: RGBA($primary, 0.2)
|
||||
background-color: var(--primary--transparent)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
height: 100vh
|
||||
|
||||
background-color: transparent
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
overflow: hidden
|
||||
z-index: 68
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
flex-direction: column
|
||||
gap: 1rem
|
||||
|
||||
background-color: RGB($bg-200)
|
||||
background-color: var(--background-200)
|
||||
|
||||
z-index: +2
|
||||
|
||||
|
|
@ -94,21 +94,21 @@
|
|||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
|
||||
background-color: RGB($bg-400)
|
||||
border-radius: $rad-inner
|
||||
background-color: var(--background-400)
|
||||
border-radius: calc(var(--rad) / 2)
|
||||
|
||||
transition: width 0.25s $animation-bounce
|
||||
transition: width 0.25s var(--animation-bounce)
|
||||
|
||||
&.dragging #dragIndicator::after
|
||||
width: 9rem
|
||||
background-color: RGB($primary)
|
||||
background-color: var(--primary)
|
||||
|
||||
.upload-jobs
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 0.5rem
|
||||
|
||||
border-radius: $rad
|
||||
border-radius: var(--rad)
|
||||
|
||||
overflow-y: auto
|
||||
|
||||
|
|
@ -123,8 +123,8 @@
|
|||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
background-color: RGB($bg-200)
|
||||
border-radius: $rad
|
||||
background-color: var(--background-200)
|
||||
border-radius: var(--rad)
|
||||
|
||||
overflow: hidden
|
||||
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
width: 100%
|
||||
height: 100%
|
||||
|
||||
background-image: linear-gradient(to right, RGB($bg-100), transparent)
|
||||
background-image: linear-gradient(to right, var(--background-100), transparent)
|
||||
|
||||
.job__status
|
||||
margin: 0
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
font-size: 1rem
|
||||
font-weight: 600
|
||||
|
||||
color: RGB($fg-white)
|
||||
color: var(--foreground-white)
|
||||
|
||||
z-index: +3
|
||||
|
||||
|
|
@ -167,13 +167,13 @@
|
|||
|
||||
.progress
|
||||
width: 100%
|
||||
height: $rad-inner
|
||||
height: calc(var(--rad) / 2)
|
||||
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: -100%
|
||||
|
||||
background-color: RGB($primary)
|
||||
background-color: var(--primary)
|
||||
|
||||
animation: uploadingLoop 1s cubic-bezier(0.76, 0, 0.17, 1) infinite
|
||||
|
||||
|
|
@ -182,28 +182,28 @@
|
|||
|
||||
&.critical
|
||||
.job__status, .progress
|
||||
color: RGB($critical)
|
||||
color: var(--critical)
|
||||
&.success
|
||||
.job__status
|
||||
color: RGB($success)
|
||||
color: var(--success)
|
||||
.progress
|
||||
height: 0
|
||||
animation: none
|
||||
&.warning
|
||||
.job__status, .progress
|
||||
color: RGB($warning)
|
||||
color: var(--warning)
|
||||
|
||||
&.critical, &.success, &.warning
|
||||
.progress
|
||||
height: 0
|
||||
|
||||
&.open
|
||||
background-color: $bg-transparent
|
||||
background-color: var(--background-shade)
|
||||
|
||||
.container
|
||||
left: 0
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
.upload-panel
|
||||
width: 100%
|
||||
height: calc(100vh - 3.5rem)
|
||||
|
|
@ -219,7 +219,7 @@
|
|||
left: 0
|
||||
bottom: -100vh
|
||||
|
||||
border-radius: $rad $rad 0 0
|
||||
border-radius: var(--rad) var(--rad) 0 0
|
||||
|
||||
#dragIndicator
|
||||
display: block
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue