AquaDX/AquaNet/src/app.sass

@import "vars"
@import 'lxgw-wenkai-lite-webfont/style.css'

html
  height: 100%

body
  font-family: $font
  line-height: 1.5
  font-weight: 400
  width: 100%
  height: 100%
  margin: 0
  overflow-x: hidden

  color-scheme: dark
  color: rgba(255, 255, 255, 0.87)
  background-color: $c-bg

  font-synthesis: none
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

a
  font-weight: 500
  color: $c-main
  text-decoration: inherit

a:hover
  color: $c-main

h1
  font-size: 3.2em
  line-height: 1.1


.card
  display: flex
  flex-direction: column

  border-radius: $border-radius
  padding: 12px 16px
  background: $ov-light


blockquote
  $c1: rgba(255, 149, 149, 0.05)
  $c2: rgba(255, 152, 152, 0.12)
  background: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 20px)
  padding: 10px 20px 10px 20px
  margin: 16px 0
  border-left: solid #ff7c7c 3px
  border-radius: $border-radius


#app
  width: 100%
  height: 100%


main:not(.no-margin)
  max-width: 1280px

  margin: 0 auto
  padding-bottom: 100px


button
  border-radius: $border-radius
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-size: 1em
  font-weight: 500
  font-family: inherit
  background-color: $ov-lighter
  opacity: 0.9
  cursor: pointer
  transition: $transition

button:hover
  border-color: $c-main

button:focus, button:focus-visible
  color: $c-main
  outline: none

button.error
  color: unset
  &:hover
    border-color: $c-error
    color: $c-error
    //background: $c-error
    //border-color: transparent

button.icon
  padding: 0.6em
  font-size: 1.2em
  border-radius: 50px
  @extend .flex-center

.level-0
  //--lv-color: #6ED43E
  --lv-color: 110, 212, 62

.level-1
  //--lv-color: #F7B807
  --lv-color: 247, 184, 7

.level-2
  //--lv-color: #FF828D
  --lv-color: 255, 130, 141

.level-3
  //--lv-color: #A051DC
  --lv-color: 160, 81, 220

.level-4
  //--lv-color: #c299e7
  --lv-color: 194, 153, 231

.error
  color: $c-error

input
  border-radius: $border-radius
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-size: 1em
  font-weight: 500
  font-family: inherit
  background-color: $ov-lighter
  transition: $transition
  box-sizing: border-box

select
  border-radius: $border-radius
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-size: 1em
  font-weight: 500
  font-family: inherit
  background-color: $ov-lighter
  transition: $transition
  box-sizing: border-box

input[type="checkbox"]
  width: 1.2em
  height: 1.2em
  margin: 0
  padding: 0
  border: 1px solid $c-main
  background-color: $ov-lighter
  appearance: none
  cursor: pointer
  flex-shrink: 0

  &:checked
    background-color: $c-main
    border-color: $c-main

label
  cursor: pointer

input:focus, input:focus-visible
  border: 1px solid $c-main
  outline: none

input.error
  border: 1px solid $c-error

.flex-center
  display: flex
  justify-content: center
  align-items: center


.inline-flex-center
  display: inline-flex
  justify-content: center
  align-items: center

.clickable
  cursor: pointer
  user-select: none


// Content containers
.content-main
  display: flex
  flex-direction: column
  gap: 20px
  margin: 100px auto 0
  padding: 32px 32px 128px
  min-height: 100%
  max-width: $w-max

  background-color: darken($c-bg, 3%)
  border-radius: 16px 16px 0 0

  @media (max-width: #{$w-max + (64px) * 2})
    margin: 100px 32px 0

  @media (max-width: $w-mobile)
    margin: 100px 0 0

  .fw-block
    margin-left: -32px
    margin-right: -32px
    padding: 12px 32px
    background-color: $ov-darker
    // Inner shadow
    box-shadow: inset 0 10px 10px -2px $c-shadow, inset 0 -10px 10px -2px $c-shadow

  > h2.outer-title, > .outer-title-options
    margin-top: -5rem
    margin-bottom: 1rem

    @media (max-width: $w-mobile)
      text-align: center

  > .outer-title-options
    display: flex
    justify-content: space-between
    align-items: center

    nav
      display: flex
      flex-direction: row
      gap: 10px
      top: 4px

    @media (max-width: $w-mobile)
      flex-direction: column

  > h2, > .outer-title-options > h2
    margin: 0

main.content
  @extend .content-main

// Not used. still need a lot of work
.content-popup
  position: absolute
  inset: 0

  > div
    @extend .content-main
    position: absolute
    inset: 0
    top: 100px
    background: rgba(darken($c-bg, 3%), 0.9)
    backdrop-filter: blur(5px)
    box-shadow: 0 0 10px 6px rgba(black, 0.4)
    max-width: calc($w-max + 20px)

    @media (max-width: #{$w-max + (64px) * 2})
      margin: 100px 22px 0

    @media (max-width: $w-mobile)
      margin: 100px 0 0



// Overlay
.overlay
  position: fixed
  inset: 0

  background-color: rgba(0, 0, 0, 0.5)

  display: flex
  justify-content: center
  align-items: center

  z-index: 1000
  backdrop-filter: blur(5px)

  h2, p
    user-select: none
    margin: 0

  > div
    background-color: $c-bg
    padding: 2rem
    border-radius: $border-radius

    display: flex
    flex-direction: column
    gap: 1rem

    max-width: 400px

.no-margin
  margin: 0

nav
  > div, > a
    cursor: pointer
    transition: $transition
    text-decoration: underline 1px solid transparent
    text-underline-offset: 0.1em

    display: flex
    align-items: center
    color: unset
    font-weight: unset

    &:hover
      color: $c-main
      text-decoration-color: $c-main
      text-underline-offset: 0.5em

    &.active
      color: $c-main


.hide-scrollbar
  &::-webkit-scrollbar
    display: none
  -ms-overflow-style: none
  scrollbar-width: none


.aqua-tooltip
  box-shadow: 0 0 5px 0 $c-shadow
  border-radius: $border-radius
  position: absolute
  padding: 4px 8px
  background: $ov-lighter
  backdrop-filter: blur(5px)