Lexical: Media form improvements

[bookstack] / resources / sass / export-styles.scss

@use "sass:math";

@use "vars";
@use "mixins";
@use "html";
@use "text";
@use "tables";
@use "content";

html, body {
  background-color: #FFF;
}

body {
  font-family: 'DejaVu Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  margin: 0;
  padding: 0;
  display: block;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.page-content {
  overflow: hidden;
}

// Prevent code block overflow on export
pre {
  padding-left: 12px;
}
pre:before {
  display: none;
}
pre code {
  white-space: pre-wrap;
}

.page-break {
  page-break-after: always;
}
@media screen {
  .page-break {
    border-top: 1px solid #DDD;
  }
}

ul.contents ul li {
  list-style: circle;
}

.chapter-hint {
  color: #888;
  margin-top: 32px;
}
.chapter-hint + h1 {
  margin-top: 0;
}

// PDF specific overrides
body.export-format-pdf {
  font-size: 14px;
  line-height: 1.2;

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
  }

  table {
    max-width: 800px !important;
    font-size: 0.8em;
    width: 100% !important;
  }

  table td {
    width: auto !important;
  }

  .page-content .float {
    float: none !important;
  }

  .page-content img.align-left, .page-content img.align-right  {
    float: none !important;
    clear: both;
    display: block;
  }

}

// DOMPDF pdf export specific overrides
body.export-format-pdf.export-engine-dompdf {
  // Fix for full width linked image sizes on DOMPDF
  .page-content a > img {
    max-width: 700px;
  }
  // Undoes the above for table images to prevent visually worse scenario, Awaiting next DOMPDF release for patch
  .page-content td a > img {
    max-width: 100%;
  }
}