insomnia/app/ui/css/components/markdown-editor.less

@import '../constants/dimensions';
@import '../constants/colors';
@import '../constants/fonts';

.markdown-editor {
  border: 1px solid var(--hl-md);
  box-sizing: border-box;

  .markdown-editor__edit {
    padding: @padding-xs @padding-sm;
  }

  &.markdown-editor--dynamic-height {
    .CodeMirror-scroll {
      // Not sure why this style doesn't work on .CodeMirror...
      max-height: 30vh;
    }

    .input {
      height: auto !important;
    }
  }

  &:not(.markdown-editor--dynamic-height) .markdown-editor__edit {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;

    .input {
      height: 100%;
    }
  }

  .markdown-editor__preview {
    max-height: 35vh;
    padding: @padding-sm;
    overflow: auto;

    .markdown-editor__preview__content {
      max-width: 34em;
      margin-right: auto;

      h1 {
        font-size: @font-size-xxl;
        border-bottom: 1px solid var(--hl-sm);
        font-weight: bold;
      }

      h2 {
        font-size: @font-size-xl;
        border-bottom: 1px solid var(--hl-sm);
        font-weight: bold;
      }

      h3 {
        font-size: @font-size-lg;
        font-weight: bold;
      }

      h4 {
        font-size: @font-size-md;
        font-weight: bold;
        opacity: 0.9;
      }

      h5 {
        font-size: @font-size-sm;
        font-weight: bold;
        opacity: 0.9;
      }

      h6 {
        font-size: @font-size-sm;
        font-weight: bold;
        opacity: 0.8;
      }

      & > * {
        line-height: 1.7em;
        margin: @padding-sm 0 @padding-md 0;
        padding: 0;

        &:first-child {
          margin-top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      blockquote {
        border-left: 0.4em solid var(--hl-md);
        padding: @padding-xxs @padding-md;

        p {
          margin: @padding-xs 0;
        }
      }

      *:not(pre) > code {
        padding: @padding-xxs @padding-xs;
        font-size: @font-size-sm;
        line-height: @font-size-xs;
        font-family: @font-monospace;
      }

      code {
        background-color: var(--hl-xs);
        border: 1px solid var(--hl-sm);
        border-radius: @radius-sm;
      }

      pre > code {
        padding: @padding-sm;
      }

      & > ul {
        padding-left: @padding-xs;
        list-style: disc;

        ul {
          list-style: circle;
        }
      }

      ul {
        margin-left: @padding-md;
      }

      .hljs {
        width: 100%;
        box-sizing: border-box;

        .hljs-meta,
        .hljs-comment,
        .hljs-quote {
          color: var(--hl);
          font-style: italic;
        }

        .hljs-keyword,
        .hljs-selector-tag,
        .hljs-subst {
          color: var(--color-font);
        }

        .hljs-number,
        .hljs-literal,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-built_in,
        .hljs-builtin-name,
        .hljs-type,
        .hljs-class .hljs-title,
        .hljs-tag .hljs-attr {
          color: var(--color-surprise);
        }

        .hljs-symbol,
        .hljs-bullet,
        .hljs-title,
        .hljs-section,
        .hljs-selector-id,
        .hljs-doctag {
          color: var(--color-danger);
        }

        .hljs-string {
          color: var(--color-notice);
        }

        .hljs-subst {
          font-weight: normal;
        }

        .hljs-tag,
        .hljs-name,
        .hljs-attr,
        .hljs-regexp,
        .hljs-link,
        .hljs-attribute {
          color: var(--color-success);
        }

        .hljs-deletion {
          background: #fdd;
        }

        .hljs-addition {
          background: #dfd;
        }

        .hljs-emphasis {
          font-style: italic;
        }

        .hljs-strong {
          font-weight: bold;
        }
      }
    }
  }
}