mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26: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
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// Default theme for OnlyLegs by FluffyBean
|
||||
// Mockup link: https://www.figma.com/file/IMZT5kZr3sAngrSHSGu5di/OnlyLegs?node-id=0%3A1
|
||||
|
||||
|
||||
@import "variables"
|
||||
@import "animations"
|
||||
|
||||
|
|
@ -15,7 +16,6 @@
|
|||
@import "components/gallery"
|
||||
|
||||
@import "components/buttons/top-of-page"
|
||||
@import "components/buttons/info-button"
|
||||
@import "components/buttons/pill"
|
||||
@import "components/buttons/block"
|
||||
|
||||
|
|
@ -24,17 +24,17 @@
|
|||
|
||||
*
|
||||
box-sizing: border-box
|
||||
scrollbar-color: RGB($primary) transparent
|
||||
font-family: $font
|
||||
scrollbar-color: var(--primary) transparent
|
||||
font-family: var(--font-family)
|
||||
|
||||
::-webkit-scrollbar
|
||||
width: 0.5rem
|
||||
::-webkit-scrollbar-track
|
||||
background: RGB($bg-200)
|
||||
background: var(--background-200)
|
||||
::-webkit-scrollbar-thumb
|
||||
background: RGB($primary)
|
||||
background: var(--primary)
|
||||
::-webkit-scrollbar-thumb:hover
|
||||
background: RGB($fg-white)
|
||||
background: var(--foreground-white)
|
||||
|
||||
html
|
||||
margin: 0
|
||||
|
|
@ -51,27 +51,30 @@ body
|
|||
display: grid
|
||||
grid-template-rows: auto 1fr auto
|
||||
|
||||
background-color: RGB($background)
|
||||
color: RGB($foreground)
|
||||
font-family: var(--font-family)
|
||||
|
||||
background-color: var(--background-100)
|
||||
color: var(--foreground-white)
|
||||
|
||||
overflow-x: hidden
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
body
|
||||
padding: 0 0 3.5rem 0
|
||||
|
||||
main
|
||||
margin: 0 0.5rem 0.5rem 0
|
||||
padding: 0.5rem
|
||||
display: flex
|
||||
flex-direction: column
|
||||
position: relative
|
||||
background: RGBA($white, 1)
|
||||
color: RGB($fg-black)
|
||||
border-radius: $rad
|
||||
background: var(--background-800)
|
||||
color: var(--foreground-black)
|
||||
border-radius: var(--rad)
|
||||
overflow: hidden
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
main
|
||||
margin: 0
|
||||
border-radius: 0
|
||||
margin: 0 0.5rem
|
||||
// border-radius: 0
|
||||
|
||||
.error-page
|
||||
min-height: 100%
|
||||
|
|
@ -88,7 +91,7 @@ main
|
|||
font-weight: 900
|
||||
text-align: center
|
||||
|
||||
color: $primary
|
||||
color: var(--primary)
|
||||
|
||||
p
|
||||
margin: 0 2rem
|
||||
|
|
@ -97,7 +100,7 @@ main
|
|||
font-size: 1.25rem
|
||||
font-weight: 400
|
||||
text-align: center
|
||||
@media (max-width: $breakpoint)
|
||||
@media (max-width: var(--breakpoint))
|
||||
.error-page
|
||||
h1
|
||||
font-size: 4.5rem
|
||||
|
|
|
|||
|
|
@ -1,80 +1,50 @@
|
|||
$bg-transparent: rgba(var(--bg-dim), 0.8)
|
||||
$bg-dim: var(--bg-dim)
|
||||
$bg-bright: var(--bg-bright)
|
||||
$bg-100: var(--bg-100)
|
||||
$bg-200: var(--bg-200)
|
||||
$bg-300: var(--bg-300)
|
||||
$bg-400: var(--bg-400)
|
||||
$bg-500: var(--bg-500)
|
||||
$bg-600: var(--bg-600)
|
||||
|
||||
$fg-dim: var(--fg-dim)
|
||||
$fg-white: var(--fg-white)
|
||||
$fg-black: var(--fg-black)
|
||||
|
||||
$black: var(--black)
|
||||
$white: var(--white)
|
||||
$red: var(--red)
|
||||
$orange: var(--orange)
|
||||
$yellow: var(--yellow)
|
||||
$green: var(--green)
|
||||
$blue: var(--blue)
|
||||
$purple: var(--purple)
|
||||
|
||||
$primary: var(--primary)
|
||||
$warning: var(--warning)
|
||||
$critical: var(--critical)
|
||||
$success: var(--success)
|
||||
$info: var(--info)
|
||||
|
||||
$rad: var(--rad)
|
||||
$rad-inner: var(--rad-inner)
|
||||
|
||||
$animation-smooth: var(--animation-smooth)
|
||||
$animation-bounce: var(--animation-bounce)
|
||||
|
||||
$font: 'Rubik', sans-serif
|
||||
$breakpoint: 800px
|
||||
|
||||
|
||||
// New variables, Slowly moving over to them because I suck at planning ahead and coding reeee
|
||||
$background: var(--bg-100)
|
||||
$foreground: var(--fg-white)
|
||||
|
||||
|
||||
\:root
|
||||
--bg-dim: 16, 16, 16
|
||||
--bg-bright: 232, 227, 227
|
||||
--bg-100: 21, 21, 21
|
||||
--bg-200: #{red(adjust-color(rgb(21, 21, 21), $lightness: 2%)), green(adjust-color(rgb(21, 21, 21), $lightness: 2%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 2%))}
|
||||
--bg-300: #{red(adjust-color(rgb(21, 21, 21), $lightness: 4%)), green(adjust-color(rgb(21, 21, 21), $lightness: 4%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 4%))}
|
||||
--bg-400: #{red(adjust-color(rgb(21, 21, 21), $lightness: 6%)), green(adjust-color(rgb(21, 21, 21), $lightness: 6%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 6%))}
|
||||
--bg-500: #{red(adjust-color(rgb(21, 21, 21), $lightness: 8%)), green(adjust-color(rgb(21, 21, 21), $lightness: 8%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 8%))}
|
||||
--bg-600: #{red(adjust-color(rgb(21, 21, 21), $lightness: 10%)), green(adjust-color(rgb(21, 21, 21), $lightness: 10%)), blue(adjust-color(rgb(21, 21, 21), $lightness: 10%))}
|
||||
--background-hsl-hue: 0
|
||||
--background-hsl-saturation: 2%
|
||||
|
||||
--fg-dim: 102, 102, 102
|
||||
--fg-white: 232, 227, 227
|
||||
--fg-black: 16, 16, 16
|
||||
--background-100: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 6%)
|
||||
--background-200: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 8%)
|
||||
--background-300: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 10%)
|
||||
--background-400: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 12%)
|
||||
--background-500: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 14%)
|
||||
--background-600: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 16%)
|
||||
--background-700: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 18%)
|
||||
--background-800: rgb(232, 227, 227)
|
||||
|
||||
--black: 21, 21, 21
|
||||
--white: 232, 227, 227
|
||||
--red: 182, 100, 103
|
||||
--orange: 217, 140, 95
|
||||
--yellow: 217, 188, 140
|
||||
--green: 140, 151, 125
|
||||
--blue: 141, 163, 185
|
||||
--purple: 169, 136, 176
|
||||
--background-shade: hsl(var(--background-hsl-hue), var(--background-hsl-saturation), 6%, 0.5)
|
||||
|
||||
--primary: var(--green) // 183, 169, 151
|
||||
--foreground-gray: rgb(102, 102, 102)
|
||||
--foreground-white: rgb(232, 227, 227)
|
||||
--foreground-black: rgb(16, 16, 16)
|
||||
|
||||
--black: rgb(20, 20, 20)
|
||||
--black-transparent: rgba(20, 20, 20, 0.2)
|
||||
--white: rgb(232, 227, 227)
|
||||
--white-transparent: rgba(232, 227, 227, 0.2)
|
||||
--red: rgb(182, 100, 103)
|
||||
--red-transparent: rgba(182, 100, 103, 0.1)
|
||||
--orange: rgb(217, 140, 95)
|
||||
--orange-transparent: rgba(217, 140, 95, 0.1)
|
||||
--yellow: rgb(217, 188, 140)
|
||||
--yellow-transparent: rgba(217, 188, 140, 0.1)
|
||||
--green: rgb(140, 151, 125)
|
||||
--green-transparent: rgba(140, 151, 125, 0.1)
|
||||
--blue: rgb(141, 163, 185)
|
||||
--blue-transparent: rgba(141, 163, 185, 0.1)
|
||||
--purple: rgb(169, 136, 176)
|
||||
--purple-transparent: rgba(169, 136, 176, 0.1)
|
||||
|
||||
--primary: rgb(183, 169, 151)
|
||||
--warning: var(--orange)
|
||||
--critical: var(--red)
|
||||
--danger: var(--red)
|
||||
--success: var(--green)
|
||||
--info: var(--blue)
|
||||
|
||||
--rad: 0.5rem
|
||||
--rad-inner: calc(var(--rad) / 2)
|
||||
--rad: 0.4rem
|
||||
|
||||
--animation-smooth: cubic-bezier(0.76, 0, 0.17, 1)
|
||||
--animation-bounce: cubic-bezier(.68,-0.55,.27,1.55)
|
||||
|
||||
--breakpoint: 800px
|
||||
|
||||
--font-family: 'Rubik', sans-serif
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue