App.scss

//Variables
.App {
  //Text
  --size-text-label: 13px;
  --size-text-main: 15px;
  --size-text-title: 17px;
  --size-text-input: 24px;
  --size-border-radius: 12px;

  //Animations
  --animation-speed: 0.2s;

  //Colors
  --color-body: #0b0b0d;
  --color-surface: #161619;
  --color-text-primary: #dfdfe6;
  --color-text-secondary: #616166;
  --color-border: #222226;
  --color-accent: #3964e6;
  --color-accent-secondary: #3e6cf7;
  --color-modal-authorize: rgba(22, 22, 25, 0.1);
  --color-modal-button: rgba(255, 255, 255, 0.1);

  &.light {
    --color-body: #fafafa;
    --color-surface: #ffffff;
    --color-text-primary: #0b0b0d;
    --color-text-secondary: #616166;
    --color-border: #f5f5f5;
    --color-accent: #3964e6;
    --color-accent-secondary: #3e6cf7;
    --color-modal-authorize: rgba(22, 22, 25, 0.1);
    --color-modal-button: rgba(255, 255, 255, 0.1);
  }
}

//Smooth theme switching
body.theme-switch,
body.theme-switch *,
body.theme-switch *:before,
body.theme-switch *:after {
  transition: all 500ms !important;
  transition-delay: 0 !important;
}

.App {
  //With custom scrollbar wrapper it must have this
  position: absolute;

  min-height: 100%;

  padding: 75px;
  text-align: center;
  min-width: 100%;
  color: var(--color-text-primary);
  background-color: var(--color-body);

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

  //States
  &.dark {
    background-color: var(--color-body);
  }
  &.fullscreen {
    padding: 0;
  }

  .fragment {
    position: relative;
    margin-bottom: 25px;
    h2 {
      margin: 0 0 15px 0;
    }
  }

  .surface {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--size-border-radius);

    display: flex;
    flex-direction: column;

    .content {
      background-color: var(--color-local-background);
    }

    //States
    &.fullscreen {
      min-width: 100%;
      min-height: 100vh;

      border-radius: 0px;

      .content {
        min-height: calc(100vh - 66px);
      }
    }

    &.mobile {
      flex-direction: column-reverse;
    }

    .content {
      display: flex;

      //States
      &.mobile.two-column {
        flex-wrap: wrap;
      }
    }
  }
}