Advertisement

← vibesdk

src/routes/chat/components/markdown-docs-preview.css

2.6 KB Download file
@media print {
  /* Hide navigation and UI elements */
  .docs-sidebar,
  .export-buttons,
  button,
  [role="navigation"],
  [role="toolbar"],
  .Toastier {
    display: none !important;
  }

  /* Optimize main content */
  .prose {
    max-width: 100% !important;
    color: #000 !important;
    background: #fff !important;
  }

  /* Typography optimization */
  body {
    background: white !important;
    color: black !important;
  }

  article {
    width: 100% !important;
  }

  /* Heading page breaks */
  h1 {
    page-break-before: always;
    page-break-after: avoid;
    margin-top: 0 !important;
  }

  h2,
  h3 {
    page-break-inside: avoid;
    page-break-after: avoid;
  }

  /* Paragraph widow/orphan control */
  p {
    widows: 3 !important;
    orphans: 3 !important;
    page-break-inside: avoid;
  }

  /* Code blocks */
  pre {
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    background: #f5f5f5 !important;
    padding: 12px !important;
    overflow-x: auto;
  }

  code {
    color: #000 !important;
    background: transparent !important;
  }

  /* Tables */
  table {
    page-break-inside: avoid;
    border-collapse: collapse;
    width: 100%;
  }

  th,
  td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
    text-align: left;
  }

  th {
    background: #f0f0f0 !important;
    font-weight: bold;
  }

  /* List formatting */
  ul,
  ol {
    page-break-inside: avoid;
  }

  li {
    page-break-inside: avoid;
  }

  /* Links - make URLs visible */
  a {
    color: #0066cc !important;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
    word-break: break-all;
  }

  /* Blockquotes */
  blockquote {
    page-break-inside: avoid;
    border-left: 4px solid #ccc;
    padding-left: 12px;
    color: #333 !important;
    background: #f9f9f9 !important;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    page-break-inside: avoid;
  }

  /* Margins for print */
  body {
    margin: 0;
    padding: 0;
  }

  article {
    margin: 0;
    padding: 0;
  }

  /* Prevent color printing issues */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Page size and margins */
  @page {
    margin: 2cm;
    size: A4;
  }

  /* Hide empty pages */
  .no-print {
    display: none !important;
  }
}

/* Print button styling (hide only during print) */
.export-button-container {
  print {
    display: none !important;
  }
}