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;

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

.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;

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

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

.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: column;
    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 (max-width: $breakpoint-medium) {
      section + .empty__wrap {
        margin: var(--spacing-m);
      }
    }
  }

  @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);
    }

    @media (max-width: $breakpoint-small) {
      .card__header--between {
        padding: var(--spacing-xxs);
      }
    }
  }

  .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;
    margin: 0;
    padding: 0;

    .file-page__secondary-content {
      margin: 0;
      padding: 0;
    }

    .card {
      border-radius: 0;
      margin-bottom: 0px !important;
      padding: 0;
    }

    .file-page__recommended {
      margin-top: 0px !important;
    }
  }
}

.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--livestream {
  @extend .main--file-page;
  margin: 0;
  padding: 0;
  max-width: none;

  .card-stack {
    margin-top: var(--spacing-m);
    margin-bottom: var(--spacing-m);

    @media (min-width: ($breakpoint-large + 300px)) {
      max-width: calc(var(--page-max-width--filepage) / 1.25);
      margin-left: auto;
      margin-right: auto;
    }

    @media (min-width: $breakpoint-medium) and (max-width: ($breakpoint-large + 300px)) {
      max-width: calc(100vw - var(--livestream-comments-width) - var(--spacing-m) * 3);
      margin-left: var(--spacing-m);
      margin-right: var(--spacing-m);
    }

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

  .main__right-side {
    width: var(--livestream-comments-width);

    @media (max-width: $breakpoint-medium) {
      width: 100%;
      margin-bottom: var(--spacing-m);
    }
  }

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

    .card {
      margin: 0;
    }

    .card-stack {
      margin: 0;
    }
  }

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

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

.main--popout-chat {
  @extend .main;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

.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);
  }

  .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;
}