discourse_theme_ran/scss/main.scss

@use "lib/viewport";

:root {
  --main-grid-gap: 0.5em;
  --dream-glow-a: oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.45) h / 0.18);
  --dream-glow-b: oklch(from var(--accent-color) calc(l * 1.2) calc(c * 0.35) calc(h + 26deg) / 0.14);
  --dream-glow-c: oklch(from var(--accent-color) calc(l * 0.95) calc(c * 0.4) calc(h - 20deg) / 0.12);
}

html:not(:has(.has-full-page-chat)) {
  background-color: var(--background-color);

  @include viewport.until(sm) {
    background-color: var(--d-content-background);
  }
}

body {
  -webkit-font-smoothing: antialiased;
  position: relative;

  @include viewport.until(sm) {
    background-color: var(--d-content-background);
  }
}

body:not(.has-full-page-chat, .wizard)::before,
body:not(.has-full-page-chat, .wizard)::after {
  content: "";
  position: fixed;
  width: min(42vw, 32rem);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

body:not(.has-full-page-chat, .wizard)::before {
  top: 5rem;
  left: -8rem;
  background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 65%);
  animation: dreamy-float-a 18s ease-in-out infinite alternate;
}

body:not(.has-full-page-chat, .wizard)::after {
  right: -6rem;
  bottom: 2rem;
  background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 62%);
  animation: dreamy-float-b 22s ease-in-out infinite alternate;
}

.d-header-wrap,
#main-outlet-wrapper,
.sidebar-wrapper,
.sidebar-hamburger-dropdown {
  position: relative;
  z-index: 1;
}

@keyframes dreamy-float-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(3rem, -1.5rem, 0) scale(1.08);
  }
}

@keyframes dreamy-float-b {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-2.5rem, 2rem, 0) scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.has-full-page-chat, .wizard)::before,
  body:not(.has-full-page-chat, .wizard)::after {
    animation: none;
  }
}

#main-outlet-wrapper {
  gap: var(--main-grid-gap);
}

body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
  grid-column-gap: var(--main-grid-gap);
  background-color: var(--background-color);
}

body.has-full-page-chat:not(.has-sidebar-page) {
  .d-header {
    background-color: var(--background-color);
  }

  #main-outlet-wrapper {
    gap: var(--main-grid-gap);

    @include viewport.until(lg) {
      gap: 0;
    }
  }
}

body.has-sidebar-page #main-outlet-wrapper {
  grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;

  #main-outlet {
    max-width: unset;
  }
}

body:not(.has-sidebar-page) #main-outlet-wrapper {
  @include viewport.from(lg) {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }
}

body:not(.has-full-page-chat, .wizard) {
  @include viewport.from(xl) {
    background-color: var(--background-color);
  }

  #main-outlet-wrapper {
    @include viewport.until(lg) {
      --main-grid-gap: 0;
    }

    @media screen and (width >= 768px) {
      gap: var(--main-grid-gap);
    }

    #main-outlet {
      width: 100%;
      max-width: unset;
      padding-bottom: var(--spacing-block-l);
      border-radius: var(--d-border-radius-large);
      background-color: var(--d-content-background);

      @include viewport.until(lg) {
        border-radius: 0;
      }

      html.composer-open & {
        padding-bottom: var(--composer-height);
      }

      > *:not(.experimental-screen, .activate-account) {
        @include viewport.from(lg) {
          box-sizing: border-box;
          max-width: 1000px;
          margin-inline: auto;
          padding-inline: var(--spacing-inline-l);
        }
      }
    }
  }
}

@include viewport.until(sm) {
  .welcome-banner {
    display: none;
  }
}

#list-area {
  .show-more.has-topics {
    @include viewport.from(lg) {
      width: auto;
      right: 50%;
      transform: translateX(50%);

      .alert {
        padding: var(--spacing-block-sm) var(--spacing-inline-m);
        border-radius: var(--d-border-radius-large);
        font-size: var(--font-down-1-rem);
      }
    }
  }

  .topic-list-body {
    padding-top: var(--spacing-block-m);
  }
}

aside.onebox {
  background-color: var(--d-content-background);
}

.d-editor-preview-wrapper {
  border-radius: var(--d-border-radius);
  padding: 1em;
  background-color: var(--d-content-background);
}

.no-ember {
  #main-outlet {
    border-radius: var(--d-border-radius-large);
    margin: 0 var(--main-grid-gap) var(--main-grid-gap) var(--main-grid-gap);
    padding: 2em;
    max-height: calc(100vh - 50px - 1em - var(--main-grid-gap));
  }
}