legal-markdown-js/dist/styles/highlight.css

Node.js implementation of LegalMarkdown for processing legal documents with markdown and YAML - Complete feature parity with Ruby version

/**
 * Highlight Styles for Legal Documents
 * 
 * Provides visual indicators for:
 * - Imported values (blue): Fields filled from data
 * - Missing values (red): Required fields without values  
 * - Logic fields (yellow): Fields with conditional logic or mixins
 */

/* Imported values - Successfully filled from data */
.imported-value,
.legal-field.imported-value {
  border: 1px solid #0066cc;
  border-radius: 2px;
  padding: 1px 3px;
  background-color: #e6f3ff;
  color: #004085;
  display: inline;
  vertical-align: baseline;
  white-space: normal;
}

/* Nested elements in imported values */
.imported-value a,
.legal-field.imported-value a {
  display: inline;
  white-space: normal;
  line-height: inherit;
  vertical-align: baseline;
}

/* Print styles for imported values */
@media print {
  .imported-value,
  .legal-field.imported-value {
    border-color: #0066cc;
    background-color: #e6f3ff;
    color: #004085;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Missing values - Required fields without data */
.missing-value,
.legal-field.missing-value {
  border: 1px solid #dc3545;
  border-radius: 2px;
  padding: 1px 3px;
  background-color: #fff5f5;
  color: #dc3545;
  display: inline;
  vertical-align: baseline;
  white-space: normal;
  font-weight: 500;
}

/* Nested elements in missing values */
.missing-value a,
.legal-field.missing-value a {
  display: inline;
  white-space: normal;
  line-height: inherit;
  vertical-align: baseline;
}

/* Print styles for missing values */
@media print {
  .missing-value,
  .legal-field.missing-value {
    border-color: #dc3545;
    background-color: #fff5f5;
    color: #dc3545;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Logic fields - Fields with conditional logic or mixins */
.highlight,
.legal-field.highlight {
  border: 1px solid #ffc107;
  border-radius: 2px;
  padding: 3px 3px;
  background-color: #f9f3df;
  color: #856404;
  display: inline;
  vertical-align: baseline;
  white-space: normal;
  margin: 1px 0;
}

/* Nested highlighting */
.highlight .imported-value,
.highlight .missing-value,
.legal-field.highlight .legal-field.imported-value,
.legal-field.highlight .legal-field.missing-value {
  margin: 0;
  padding: 0 3px;
  border-radius: 1px;
}

/* Print styles for logic fields */
@media print {
  .highlight,
  .legal-field.highlight {
    border-color: #ffc107;
    background-color: #f9f3df;
    color: #856404;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Additional helper classes */

/* Legend for highlighting */
.highlight-legend {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
  page-break-inside: avoid;
}

.highlight-legend h3 {
  margin-top: 0;
  font-size: 1.1em;
}

.highlight-legend ul {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0 0;
}

.highlight-legend li {
  margin: 5px 0;
  padding: 5px 10px;
  border-radius: 3px;
}

.highlight-legend .imported-example {
  background-color: #e6f3ff;
  border: 1px solid #0066cc;
  color: #004085;
}

.highlight-legend .missing-example {
  background-color: #fff5f5;
  border: 1px solid #dc3545;
  color: #dc3545;
}

.highlight-legend .logic-example {
  background-color: #f9f3df;
  border: 1px solid #ffc107;
  color: #856404;
}

/* Ensure visibility in different contexts */
@media screen {
  .imported-value,
  .missing-value,
  .highlight,
  .legal-field.imported-value,
  .legal-field.missing-value,
  .legal-field.highlight {
    transition: background-color 0.2s ease;
  }
  
  .imported-value:hover,
  .legal-field.imported-value:hover {
    background-color: #cce5ff;
  }
  
  .missing-value:hover,
  .legal-field.missing-value:hover {
    background-color: #ffe5e5;
  }
  
  .highlight:hover,
  .legal-field.highlight:hover {
    background-color: #fff3cd;
  }
}