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

body {
  overflow-x: hidden;
}

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

.sidebar--pusher {
  animation-timing-function: var(--resizing-animation-function);
  transition: transform var(--resizing-animation-timing);
  transform-origin: top center;
  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: scaleX(0.9) translateX(calc(5.4 * var(--spacing-l))) scaleY(0.9);
  }
}

.main-wrapper__inner--auth {
  padding: 0;

  .main--auth-page {
    min-height: unset;

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

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

    .claim-preview__wrapper--inline {
      .media__subtitle {
        padding-bottom: 0;
        a.button {
          display: inline-block !important;
        }
      }
    }

    .date_time {
      font-size: var(--font-small);
    }

    .comment__meta-information {
      .date_time {
        font-size: var(--font-xsmall) !important;
        color: rgba(var(--color-text-base), 0.6);

        &:hover {
          color: var(--color-text);
        }
      }
    }

    @media (min-width: $breakpoint-medium) {
      flex-direction: row;
    }
    @media (max-width: $breakpoint-medium) {
      section + .empty__wrap {
        margin: var(--spacing-m);
      }
      .claim-preview__wrapper--inline {
        .claim-preview-metadata {
          .claim-tile__info {
            margin-top: 0;
          }
        }
        .media__subtitle {
          padding-bottom: 1;
          a.button {
            display: inline-block !important;
          }
        }
        .button--alt {
          padding: var(--spacing-s);
        }
        .button-following {
          padding-left: var(--spacing-m);
          padding-right: var(--spacing-m);
        }
      }
    }
    @media (max-width: $breakpoint-small) {
      margin-top: var(--spacing-xs) !important;
      .claim-preview__wrapper {
        padding: 0 !important;
        .claim-preview-info {
          margin-top: 2px;
          margin-bottom: -2px;
          .claim-preview__title {
            span {
              font-size: var(--font-small);
            }
          }
        }
        .claim-tile__info {
          .media__subtitle {
            margin-bottom: 1px;
          }
        }
      }
    }
  }

  .media__subtitle--centered::before {
    content: '•';
    margin-right: var(--spacing-s);
  }

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

    @media (max-width: $breakpoint-small) {
      margin-top: 0;
      .card {
        padding: 0;
        .card__first-pane {
          .card__main-actions {
            .button--alt:last-of-type {
              top: -1px;
              float: right;
              margin-right: 0;
            }
            .comment__sort {
              .button--alt:last-of-type {
                top: unset;
                float: unset;
                margin-right: unset;
              }
            }
          }
        }
      }
    }
  }

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

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

    .card__first-pane {
      .card__header--between {
        .card__title-section {
          display: none !important;
        }
      }
      .card__body.card__body--list {
        border-top: unset;
      }
    }

    .card__header--between {
      align-items: unset;
      .card__title-section--body-list {
        margin-top: auto;
      }
    }

    .claim-preview-metadata {
      .claim-tile__info {
        margin-top: 0;
        .media__subtitle {
          .button__content {
            margin-top: 0;
            .channel-name {
              margin-top: 0;
            }
          }
          span,
          .date_time {
            margin-top: 0px;
          }
        }
      }
      .claim-preview__title {
        .truncated-text {
          -webkit-line-clamp: 2 !important;
        }
      }
      .channel-thumbnail {
        display: none;
        width: 1.4rem;
        height: 1.4rem;
        /*
        @media (max-width: $breakpoint-small) {
          display: flex;
          margin-right: var(--spacing-xs);
        }*/
      }
    }

    @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);
        padding-bottom: var(--spacing-s);
        padding-left: 0;
      }
    }
  }

  .file-page__recommended-collection {
    @extend .file-page__recommended;

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

    .card__title-section--body-list {
      width: 100%;
    }

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

    .card__title-actions-container {
      position: absolute;
      top: 0;
      right: 0;
      height: unset;
      display: unset;
      flex-direction: unset;
      .card__title-actions {
        padding: 0;
        .button {
          height: 2rem;
          padding: 0.5rem;
        }
      }

      @media (max-width: $breakpoint-small) {
        top: calc(var(--spacing-s) * -1);
      }
    }

    .file-page__recommended-collection__row {
      display: block;
      max-width: unset;
      width: 100%;
      align-items: center;
      color: var(--color-text);
      &:hover {
        color: var(--color-primary);
      }

      &:nth-child(2) {
        display: flex;
        margin-top: calc(var(--spacing-m) * -1 - 10px);
        .button {
          flex: auto;
          .button__content {
            flex-direction: column;
            justify-content: center;
            .color-override {
              stroke: var(--color-primary);
            }
          }
        }
      }

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

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

      @media (max-width: $breakpoint-small) {
        // display: inline-block;
        max-width: unset;
        width: 100%;
        .button--file-action {
          height: unset;
          margin-right: var(--spacing-xxxs);
          .button__content {
            padding: var(--spacing-xxs);
            margin: 0;
          }
        }
        .button--file-action:last-of-type {
          margin-right: 0;
        }
      }
    }

    a {
      .file-page__recommended-collection__row {
        @media (max-width: $breakpoint-small) {
          width: calc(100% - var(--spacing-xl));
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }

  .file-page__playlist-collection {
    @extend .file-page__recommended-collection;

    .card__first-pane {
      .card__header--between {
        .card__title-section {
          display: unset !important;
        }
      }
    }

    .file-page__playlist-collection__row {
      @extend .file-page__recommended-collection__row;

      .button--file-action {
        &:hover {
          .icon {
            stroke: white !important;
          }
        }
      }
    }
  }

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

  @media (max-width: $breakpoint-small) {
    padding: var(--spacing-xs);
    // margin-top: var(--spacing-s);
    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: var(--spacing-xxs);
    }

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

.main--video-page {
  @media (min-width: $breakpoint-medium) {
    $recommended-width: calc(var(--recommended-content-width) - var(--spacing-l) * 3 - var(--spacing-m) * 2);

    display: grid;
    grid-template-columns: 1fr $recommended-width;
    justify-content: space-between;
    gap: var(--spacing-l);

    .file-page__recommended,
    .file-page__playlist-collection {
      margin: 0 !important;
      height: 100% !important;
      width: 100% !important;
      overflow: hidden;
    }
  }
}

.card__title-section--body-list {
  display: unset !important;
  // width: 100%;
  div {
    flex: auto;
  }

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

.main--upcoming {
  @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__video-container {
    max-height: unset;
  }

  .file-page__recommended {
    @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;
    }
  }

  .file-page__recommended {
    margin-top: 10px;
  }
}

.main--livestream {
  @extend .main--file-page;

  @media (min-width: 1750px) {
    padding: 0;
    width: 100%;
    max-width: var(--page-max-width--filepage);
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--livestream-comments-width));
    justify-content: space-between;
    justify-items: end;
    gap: var(--spacing-m);

    .livestream__chat {
      margin: 0 !important;
    }
  }

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

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

    @media (max-width: $breakpoint-small) {
      .help--notice {
        margin: var(--spacing-xs);
        margin-top: var(--spacing-xs);
        margin-bottom: var(--spacing-xs);
      }
    }
  }

  .card__body {
    .date_time {
      font-size: var(--font-small);
    }
  }

  @media (max-width: $breakpoint-medium) {
    padding: 0 var(--spacing-s);

    .card__main-actions {
      .claim-preview__wrapper {
        a {
          .button__content {
            // align-items: unset;
          }
        }
      }
    }
  }

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

    .card {
      margin: 0;
      .card__first-pane {
        .card__main-actions {
          .claim-preview {
            align-items: unset;
          }
        }
      }
    }

    .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) {
    .section__header--actions {
      .section__actions--inline:last-of-type {
        .button__label {
          display: none;
        }
      }
    }
  }
  .card__body--list {
    background-color: rgba(var(--color-header-background-base), 0.4);

    border-radius: var(--border-radius);
    border-top: unset;

    .settings-row {
      padding: var(--spacing-s);
      border-bottom: 1px solid var(--color-border);

      .settings-row__value {
        .button__content {
          &:hover {
            color: var(--color-secondary);
          }
        }
      }
      .fieldset-group--smushed {
        label {
          margin-left: 0;
        }
        fieldset-section:last-of-type {
          margin-left: 2px;
        }
      }
    }
    .settings-row:first-of-type {
      margin-top: var(--spacing-xxxs);
    }
    .settings-row:last-of-type {
      border-bottom: unset;
    }

    .card__main-actions {
      border-top: unset;
    }
  }

  .button--secondary {
    background-color: var(--color-header-button) !important;
    .button__content {
      .icon {
        stroke: var(--color-text) !important;
      }
      .button__label {
        color: var(--color-text) !important;
      }
    }
    &:hover {
      background-color: var(--color-primary) !important;
      .button__content {
        .icon {
          stroke: var(--color-primary-contrast) !important;
        }
        .button__label {
          color: var(--color-primary-contrast) !important;
        }
      }
    }
  }

  @media (max-width: $breakpoint-small) {
    padding: 0 0;
    .wunderbar__wrapper {
      margin-right: 0;
      .wunderbar {
        padding-left: 0;
        .icon {
          left: 11px;
        }
      }
    }
  }

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

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

  .card__title-section {
    padding-bottom: 0;
  }
  .card__title-section:not(:first-child) {
    padding-top: var(--spacing-l);
  }

  .section__actions--between:first-child {
    margin-top: var(--spacing-s);
  }
  .section__actions--between {
    border-top: unset;
    margin-top: 0;
    padding-top: var(--spacing-s);
    padding-bottom: var(--spacing-s);
    margin-left: auto;
    position: relative;

    .settings-row__value {
      align-self: start;
    }

    .settings-row__title {
      color: rgba(var(--color-text-base), 0.9);
    }
    .settings-row__subtitle {
      color: rgba(var(--color-text-base), 0.6);
    }

    &:hover:not(.opacity-30) {
      .settings-row__title {
        color: rgba(var(--color-text-base), 1);
      }
    }
  }

  .tags--remove {
    .button {
      background-color: var(--color-header-background);
      color: var(--color-text);
    }
  }

  .claim-preview__wrapper--channel {
    .menu__button {
      right: var(--spacing-s);
    }
    .claim-tile__info {
      margin-top: 0;
      padding-bottom: var(--spacing-xxxs);
      .claim-preview-metadata-sub-upload {
        margin-top: 3px;
      }
    }
    .button--secondary {
      background-color: var(--color-header-button) !important;
      &:hover {
        .button__label {
          color: var(--color-text) !important;
        }
      }
    }
    .claim__tags {
      a.button {
        .button__content {
          margin-top: -3px;
          .button__label {
            overflow: unset;
          }
        }
      }
    }
  }
  .claim-preview__wrapper--channel.placeholder {
    .media__thumb {
      width: 6rem !important;
      height: 6rem;
      border-radius: 50%;
    }
    .channel-thumbnail {
      display: none;
    }
    @media (max-width: $breakpoint-small) {
      .media__thumb {
        width: 4rem !important;
        height: 4rem;
      }
    }
  }
}

.main--markdown {
  flex-direction: column;
  .claim-preview__wrapper {
    .claim-tile__info {
      margin-top: 0;
      padding-bottom: var(--spacing-xxxs);
      .claim-preview-metadata-sub-upload {
        margin-top: 3px;
      }
      .channel-name {
        margin-top: -8px;
      }
    }
  }
  .post__info--grouped {
    .button__content {
      color: var(--color-primary);
      .icon {
        color: var(--color-text-subtitle);
      }
      &:hover {
        color: var(--color-secondary);
      }
    }
  }

  .markdown-preview {
    p {
      .button--uri-indicator {
        .channel-name {
          color: var(--color-primary);
          font-size: var(--font-large);
          @media (max-width: $breakpoint-small) {
            font-size: var(--font-base);
          }
          &:hover {
            color: var(--color-secondary);
          }
        }
      }
    }
  }

  .file-page__post-comments {
    p {
      .button--uri-indicator {
        .channel-name {
          font-size: var(--font-small);
          @media (max-width: $breakpoint-small) {
            font-size: var(--font-xsmall);
          }
        }
      }
    }
  }

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

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

  .form-field__two-column {
    display: flex;
    .comment__char-count-mde {
      margin-left: auto;
      padding-bottom: 2px;
      padding-right: 0;
    }
  }
}

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

  @media (max-width: $breakpoint-small) {
    margin-top: var(--spacing-m);

    .card__title {
      font-size: var(--font-large) !important;
    }
  }
}

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

  .card__first-pane {
    width: 50%;
    @media (max-width: $breakpoint-small) {
      width: 100%;
    }
  }
  .card__second-pane {
    width: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

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

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

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

  .card__main-actions {
    border: none;
  }
}

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

// Temp hacks until 'section__actions--no-margin' is generic again.
.main__discover {
  .section__actions--no-margin {
    @media (max-width: $breakpoint-small) {
      width: unset; // It was being set to '100%' at the base level.
    }
  }

  .claim-preview {
    .claim-preview__text {
      overflow: hidden;
    }
    .claim-preview-metadata {
      .claim-tile__info {
        .media__subtitle {
          width: calc(100% - 2.1rem);
          .button {
            display: inline;
            @media (max-width: $breakpoint-small) {
              .button__content {
                width: 100%;
                .channel-name {
                  width: 100%;
                  p {
                    width: 99%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
          span:not(.channel-name) {
            font-size: var(--font-xsmall);
          }
        }
      }
    }
  }
}

// Temp hacks until 'section__actions--no-margin' is generic again.
.main__channelsFollowing {
  .section__actions--no-margin {
    @media (max-width: $breakpoint-small) {
      text-align: left; // It was forced to 'right' at the base level.
      .button--secondary {
        width: unset; // It was being set to '100%' at the base level.
      }
    }
  }
}

.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: 6px;
  scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg);
}

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

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