demarches-normaliennes/app/assets/stylesheets/attestation_template_2_edit.scss

@import "constants";

#attestation-edit {
  .attestation-preview {
    width: 100%;

    @media (min-width: 62em) {
      height: 664px; // empirical height for an A4 ratio at this width
    }

    @media (max-width: 62em) {
      // PDF height is approximately tied to width
      height: calc(90vw * 29.7 / 21);
    }
  }

  .tiptap {
    padding: $default-spacer;
    overflow-y: scroll;
    min-height: 400px;
  }

  .editor {
    // Visual zones
    .header .flex-1,
    h1 {
      border: 1px solid var(--background-contrast-grey-hover);
      padding: $default-spacer / 2;
    }

    .header,
    h1,
    h2,
    h3 {
      margin-bottom: $default-spacer;
    }

    // Styles
    .header {
      align-content: center;

      p {
        margin-bottom: 0rem;
        font-size: 0.8rem;
      }
    }

    h1,
    h2 {
      font-size: 1.25rem;
    }

    h2 {
      line-height: 2rem;
    }

    h3 {
      font-size: 1rem; // same as text
      font-weight: bold;
      line-height: 1rem;
    }

    li p {
      margin-bottom: 0;
    }

    // Tags
    .fr-menu__list {
      max-height: 500px;
    }

    .fr-tag:not(.fr-menu .fr-tag) {
      // style span rendered by tiptap like a button/link tag
      color: var(--text-action-high-blue-france);
      background-color: var(--background-action-low-blue-france);
    }
  }

  // scss-lint:disable SelectorFormat
  #show_maybe_null + label {
    margin-bottom: 0.25rem;

    .fr-hint-text {
      position: absolute;
      top: 1.15rem;
    }
  }
}