Hangar/frontend/assets/_markdown.scss

@import "~vuetify/src/styles/styles";

.page-rendered {
  //padding: 10px 20px 20px 20px;
  overflow: hidden;
  max-width: 100%;
  padding: 20px;

  table tr > th {
    padding: 5px;
  }
  table tr:nth-child(2n) {
    background-color: map-get($grey, 'lighten-4');
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
  }
  img {
    max-width: 100%;
  }

  table tr > td,
  .page-rendered table tr > th {
    padding: 10px;
    border: 1px solid map-get($grey, 'lighten-2');
  }

  code {
    background-color: map-get($grey, 'lighten-4');
    color: black;
  }

  a code {
    color: map-get($blue, 'lighten-1');

    &:hover {
      text-decoration: underline;
    }
  }

  h1,
  h2 {
    border-bottom: 1px solid map-get($grey, 'lighten-2');
    padding-bottom: 2px;
  }

  .headeranchor {
    visibility: hidden;
    text-decoration: none;
    padding-top: 68px; // So links to header's show up below the toolbar
  }

  .headeranchor:hover {
    visibility: visible;
  }

  h1,
  h2,
  h3 {
    .headeranchor {
      margin-left: -18px;

      .v-icon {
        font-size: 16px;
      }
    }
  }

  h4,
  h5,
  h6 {
    .headeranchor {
      margin-left: -12px;

      .v-icon {
        font-size: 12px;
      }
    }
  }

  h1:hover,
  h2:hover,
  h3:hover,
  h4:hover,
  h5:hover,
  h6:hover, {
    .headeranchor {
      visibility: visible;
    }
  }

  .footnotes {
    p {
      display: inline-block;
    }
  }

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