path: root/client/src/app/shared/shared-forms/markdown-textarea.component.scss

@use 'sass:math';
@use '_variables' as *;
@use '_mixins' as *;

$nav-preview-tab-height: 30px;
$base-padding: 15px;
$input-border-radius: 3px;

.root {
  display: flex;
  flex-direction: column;

  textarea {
    @include peertube-textarea(100%, 150px);

    background-color: pvar(--markdownTextareaBackgroundColor);

    font-family: monospace;
    font-size: 13px;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .nav-preview {
    padding: 10px;

    border: 1px solid pvar(--inputBorderColor);
    border-top: 1px dashed pvar(--inputBorderColor);

    border-bottom-right-radius: $input-border-radius;
    border-bottom-left-radius: $input-border-radius;

    display: flex;
    flex-grow: 1;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    border-bottom: 2px solid pvar(--mainColor);

    .maximize-button {
      @include margin-left(15px);

      opacity: 0.6;
      cursor: default;

      &:not(.disabled) {
        cursor: pointer;

        &:hover,
        &:active {
          opacity: 1;
        }
      }
    }
  }

  .nav-pills {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    > * {
      font-size: 0.9em !important;
    }
  }

  .tab-content {
    min-height: 75px;
    max-height: 210px;
    padding: $base-padding;

    overflow-y: auto;
    word-wrap: break-word;

    border: 1px solid pvar(--inputBorderColor);
    border-top: 0;

    border-bottom-left-radius: $input-border-radius;
    border-bottom-right-radius: $input-border-radius;
  }

  &.maximized {
    z-index: #{z(root-header) - 1};
    position: fixed;
    top: $header-height;
    left: $menu-width;

    max-height: none !important;
    max-width: none !important;
    width: calc(100% - #{$menu-width});
    height: calc(100vh - #{$header-height});

    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 1fr;

    background-color: pvar(--mainBackgroundColor);

    .nav-preview {
      grid-row: 1;
      grid-column: 1 / 3;

      border: 0;
      border-bottom: 2px solid pvar(--mainColor);

      padding: 20px 0;
      width: 100% !important;

      .maximize-button {
        @include margin-right(15px);
      }
    }

    textarea {
      grid-column: 1;

      border: 0;
      border-right: 1px dashed pvar(--inputBorderColor);

      resize: none;
    }

    ::ng-deep .tab-content {
      grid-column: 2;

      border: 0;

      display: block;
      overflow-y: auto;
      word-wrap: break-word;

      scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
    }

    textarea,
    ::ng-deep .tab-content {
      grid-row: 2;

      height: 100% !important;
      max-height: none !important;
      border-radius: 0;

      padding: 15px;
    }

    @media screen and (max-width: $mobile-view) {
      grid-template-rows: auto 45% 1fr;
      grid-template-columns: 1fr;

      .nav-preview {
        grid-column: 1;
      }

      textarea {
        grid-row: 2;
        grid-column: 1;
        border: 0;
        border-bottom: 1px dashed pvar(--inputBorderColor);;
      }

      ::ng-deep .tab-content {
        grid-column: 1;
        grid-row: 3;
      }
    }
  }
}

:host-context(.main-col.expanded) {
  .root.maximized {
    left: 0;
    width: 100%;
  }
}