lbry-desktop/ui/scss/component/_main.scss

.main-wrapper {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.main-wrapper--mac {
  margin-top: calc(var(--header-height) + var(--mac-titlebar-height));
}

.main-wrapper__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--header-height);
  padding: var(--spacing-l); // Unfortunately this is coupled with .claim-preview--tile width calculation
  padding-left: 0;
  padding-right: 0;

  > :first-child {
    flex-shrink: 0;
  }

  @media (max-width: $breakpoint-small) {
    padding: var(--spacing-xs);
    margin-top: var(--header-height-mobile);
  }

  @media (min-width: $breakpoint-large) {
    width: 100%;
  }
}

.main-wrapper__inner--filepage {
  padding: 0;
}

.main-wrapper__inner--theater-mode {
  padding-top: 0;
}

.main-wrapper__inner--auth {
  min-height: unset;
  padding: 0;
}

.sidebar--pusher {
  animation-timing-function: var(--resizing-animation-function);
  transition: transform var(--resizing-animation-timing);
  transform-origin: left;
  position: absolute;

  @media (max-width: $breakpoint-small) {
    transform: translateX(0);
    width: calc(100% - var(--spacing-m));
  }

  @media (min-width: $breakpoint-small) {
    transform: translateX(var(--side-nav-width--micro));
    width: calc(100% - ((var(--side-nav-width--micro))));
  }
}

.sidebar--pusher--filepage {
  width: 100%;
}

.sidebar--pusher--open {
  @media (min-width: $breakpoint-medium) {
    transform: translateX(var(--side-nav-width));
    width: calc(100% - var(--side-nav-width));
  }
}

.main {
  position: relative;
  width: calc(100% - 2 * var(--spacing-l));
  max-width: var(--page-max-width);
  z-index: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: calc(100vh - var(--header-height));
  padding: 0 var(--spacing-m);

  @media (max-width: $breakpoint-small) {
    width: 100%;
    min-height: calc(100vh - var(--header-height-mobile));
  }
}

.main--file-page {
  width: 100%;
  max-width: var(--page-max-width--filepage);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--spacing-m);
  padding: 0 var(--spacing-m);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;

  > :first-child {
    flex-grow: 2;
  }

  .file-page__secondary-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-top: var(--spacing-m);
    max-width: var(--page-max-width--filepage);
    margin-left: auto;
    margin-right: auto;

    > :first-child {
      flex: 1;
      max-width: 100%;
    }

    @media (min-width: $breakpoint-medium) {
      flex-direction: row;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .file-page__post-comments {
    margin-top: var(--spacing-l);

    opacity: 0;
    animation: fadeIn 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;

    @media (min-width: $breakpoint-small) {
      padding: var(--spacing-m);
    }
  }

  .file-page__info {
    margin-top: var(--spacing-m);
  }

  .file-page__recommended {
    height: 0%;
    width: 35rem;
    margin-left: var(--spacing-m);

    .card__header--between {
      align-items: center;
    }
    @media (max-width: $breakpoint-medium) {
      width: 100%;
      margin-left: 0;
      margin-top: var(--spacing-l);
    }
  }

  .file-page__recommended-collection {
    @extend .file-page__recommended;
    flex-direction: column;
    overflow-wrap: break-word;

    .card__header--between {
      align-items: flex-start !important;

      .card__title-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: var(--spacing-s);

        button {
          margin-top: var(--spacing-xxs);
        }
      }
    }

    .file-page__recommended-collection__row {
      display: block;

      @media (min-width: $breakpoint-medium) {
        max-width: 15rem;
      }

      @media (max-width: $breakpoint-medium) {
        max-width: 50rem;
      }
    }

    .collection-preview__edit-group {
      width: 1.5rem;
    }

    .claim-preview--collection-mine {
      padding-left: 6.5rem;
      position: relative;
    }
  }

  @media (max-width: $breakpoint-medium) {
    flex-direction: column;
    > :first-child {
      margin-right: 0;
    }
  }

  @media (max-width: $breakpoint-small) {
    padding: var(--spacing-xs);
    flex-direction: column;
    padding-top: 0;
  }
}

.main--theater-mode {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  width: 100vw;
  max-width: none;

  > :first-child {
    margin-right: 0;
  }

  .file-page__info {
    padding: 0 var(--spacing-m);
    margin-top: var(--spacing-m);
    max-width: var(--page-max-width--filepage);
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
  }

  .file-page__recommended {
    width: 25rem;

    @media (max-width: $breakpoint-medium) {
      width: 100%;
    }
  }

  .file-page__secondary-content {
    padding: 0 var(--spacing-s);
    flex-direction: row;

    @media (max-width: $breakpoint-medium) {
      flex-direction: column;
    }
  }
}

.main--full-width {
  @extend .main;
  max-width: none;
}

.main--auth-page {
  width: 100%;
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--spacing-s);

  @media (min-width: $breakpoint-small) {
    margin-top: var(--spacing-main-padding);
    padding: 0 var(--spacing-l);
  }
}

.main--settings-page {
  width: 100%;
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--spacing-m);
  padding: 0 var(--spacing-m);

  @media (max-width: $breakpoint-small) {
    padding: 0 0;
  }

  .card__subtitle {
    margin: 0 0 var(--spacing-s) 0;
    font-size: var(--font-small);
  }

  .button--inverse {
    color: var(--color-primary);
  }
}

.main--markdown {
  flex-direction: column;
}

.main__auth-content {
  display: flex;
  position: relative;
  flex-direction: column;
  padding-bottom: var(--spacing-xl);

  @media (min-width: $breakpoint-small) {
    flex-direction: row;

    > :first-child {
      position: fixed;
      background-color: var(--color-background);
      width: calc(40% - var(--spacing-l));
      margin-top: var(--spacing-xl);
    }

    > :nth-child(2) {
      width: 50%;
      margin-left: auto;
    }
  }

  @media (min-width: $breakpoint-medium) {
    > :first-child {
      width: calc(30% - var(--spacing-l));
      max-width: 25rem;
    }

    > :nth-child(2) {
      width: 50%;
      margin-left: auto;
    }
  }
}

.main--buy {
  @extend .main--auth-page;
  max-width: 30rem;
  min-height: 400px;

  .card {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  iframe {
    min-height: 420px;
    background-color: var(--color-card-background);
    margin-bottom: 2rem;
  }

  .sm:bg-grey-lighter {
    background-color: var(--color-card-background);
  }
}

.main--send {
  @extend .main--buy;
  max-width: 34rem;
}

.main--swap {
  @extend .main--buy;
  max-width: 34rem;
}

.main--report-content {
  @extend .main--auth-page;
  max-width: 40rem;
}

.main--empty {
  align-self: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 var(--spacing-m);
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-l);
  width: 100%;

  > .card {
    width: 100%;
  }

  @media (min-width: $breakpoint-small) {
    margin-top: 100px;
    margin-bottom: 100px;
  }
}

.main--launching {
  width: 100vw;
  height: 100vh;
  background-color: var(--color-background);
}

.main--contained {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 60rem;
  text-align: left;

  & > * {
    width: 100%;
  }
}

.main--hoisted {
  margin-top: calc(var(--spacing-s) * -1);
  @media (min-width: $breakpoint-small) {
    margin-top: calc(var(--spacing-l) * -1);
  }
}

.main__sign-in,
.main__sign-up {
  max-width: 27rem;
  margin-left: auto;
  margin-right: auto;
}

.main__sign-up--graphic {
  max-width: 47rem;

  .card__first-pane {
    width: 50%;
    @media (max-width: $breakpoint-small) {
      width: 100%;
    }
  }

  .card__second-pane {
    width: 50%;
    @media (max-width: $breakpoint-small) {
      width: 100%;
    }

    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-login-graphic-background);

    .signup-image {
      @media (max-width: $breakpoint-small) {
        width: 50%;
      }
    }
  }

  .card__title {
    font-size: var(--font-title);
    font-weight: var(--font-weight-bold);
  }

  .card__main-actions {
    border: none;
  }
}

.main__channel-creation {
  margin-left: auto;
  margin-right: auto;
  max-width: 32rem;
}

// maybe remove all REMOVE
.main-wrapper--scrollbar {
  // The W3C future standard; currently supported by Firefox only.
  // It'll hopefully auto fallback to this when 'webkit-scrollbar' below is deprecated in the future.
  scrollbar-width: auto;
  scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
}

.main-wrapper--scrollbar *::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.main-wrapper--scrollbar *::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track-bg);
}

.main-wrapper--scrollbar *::-webkit-scrollbar-thumb {
  // Don't set 'border-radius' because Firefox's 'scrollbar-xx'
  // standard currently doesn't support it. Stick with square
  // scrollbar for all browsers.
  background-color: var(--color-scrollbar-thumb-bg);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb-bg);
  border-radius: 10px;
}