devghost/dist/reporter/templates/styles.d.ts

👻 Find dead code, dead imports, and dead dependencies before they haunt your project

/**
 * CSS styles for the HTML report
 * Includes dark/light mode, responsive design, and animations
 */
export declare const reportStyles = "\n:root {\n  /* Light mode colors */\n  --bg-primary: #ffffff;\n  --bg-secondary: #f8f9fa;\n  --bg-card: #ffffff;\n  --text-primary: #1a1a1a;\n  --text-secondary: #6c757d;\n  --text-muted: #adb5bd;\n  --border-color: #dee2e6;\n  --accent-primary: #6366f1;\n  --accent-secondary: #8b5cf6;\n  --success: #10b981;\n  --warning: #f59e0b;\n  --error: #ef4444;\n  --info: #3b82f6;\n  \n  /* Gradients */\n  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);\n  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n  --gradient-error: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n  \n  /* Shadows */\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n}\n\n[data-theme=\"dark\"] {\n  --bg-primary: #0f172a;\n  --bg-secondary: #1e293b;\n  --bg-card: #1e293b;\n  --text-primary: #f1f5f9;\n  --text-secondary: #cbd5e1;\n  --text-muted: #64748b;\n  --border-color: #334155;\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);\n  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);\n  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;\n  background: var(--bg-primary);\n  color: var(--text-primary);\n  line-height: 1.6;\n  transition: background 0.3s ease, color 0.3s ease;\n}\n\n.container {\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n/* Header */\n.header {\n  background: var(--gradient-primary);\n  color: white;\n  padding: 2rem;\n  border-radius: 1rem;\n  margin-bottom: 2rem;\n  box-shadow: var(--shadow-lg);\n  position: relative;\n  overflow: hidden;\n}\n\n.header::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 300px;\n  height: 300px;\n  background: rgba(255, 255, 255, 0.1);\n  border-radius: 50%;\n  transform: translate(50%, -50%);\n}\n\n.header-content {\n  position: relative;\n  z-index: 1;\n}\n\n.header h1 {\n  font-size: 2.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.header-subtitle {\n  font-size: 1.1rem;\n  opacity: 0.95;\n}\n\n.header-meta {\n  margin-top: 1rem;\n  display: flex;\n  gap: 2rem;\n  font-size: 0.9rem;\n  opacity: 0.9;\n}\n\n/* Action Buttons Section */\n.action-buttons-section {\n  margin-bottom: 2rem;\n}\n\n.action-buttons-container {\n  background: var(--bg-card);\n  border: 1px solid var(--border-color);\n  border-radius: 1rem;\n  padding: 1.5rem;\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: var(--shadow-md);\n}\n\n.action-btn {\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 0.75rem;\n  font-weight: 600;\n  font-size: 0.95rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: all 0.3s ease;\n  box-shadow: var(--shadow-sm);\n}\n\n.action-btn .btn-icon {\n  font-size: 1.2rem;\n}\n\n.action-btn.primary {\n  background: var(--gradient-primary);\n  color: white;\n}\n\n.action-btn.primary:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--shadow-md);\n}\n\n.action-btn.secondary {\n  background: var(--bg-secondary);\n  color: var(--text-primary);\n  border: 2px solid var(--border-color);\n}\n\n.action-btn.secondary:hover {\n  border-color: var(--accent-primary);\n  transform: translateY(-2px);\n}\n\n.time-estimate {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.25rem;\n  background: var(--bg-secondary);\n  border-radius: 0.75rem;\n  border: 2px solid var(--border-color);\n}\n\n.estimate-icon {\n  font-size: 1.5rem;\n}\n\n.estimate-text {\n  color: var(--text-secondary);\n  font-size: 0.9rem;\n}\n\n.estimate-text strong {\n  color: var(--text-primary);\n  font-weight: 700;\n}\n\n/* Theme Toggle */\n.theme-toggle {\n  position: fixed;\n  top: 2rem;\n  right: 2rem;\n  background: var(--bg-card);\n  border: 2px solid var(--border-color);\n  border-radius: 50%;\n  width: 3rem;\n  height: 3rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: var(--shadow-md);\n  transition: all 0.3s ease;\n  z-index: 1000;\n  font-size: 1.5rem;\n}\n\n.theme-toggle:hover {\n  transform: translateY(-2px) scale(1.1);\n  box-shadow: var(--shadow-lg);\n}\n\n/* Stats Grid */\n.stats-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n}\n\n.stat-card {\n  background: var(--bg-card);\n  border: 1px solid var(--border-color);\n  border-radius: 1rem;\n  padding: 1.5rem;\n  box-shadow: var(--shadow-md);\n  transition: all 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.stat-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 4px;\n  height: 100%;\n  background: var(--gradient-primary);\n}\n\n.stat-card.success::before { background: var(--gradient-success); }\n.stat-card.warning::before { background: var(--gradient-warning); }\n.stat-card.error::before { background: var(--gradient-error); }\n\n.stat-card:hover {\n  transform: translateY(-4px);\n  box-shadow: var(--shadow-xl);\n}\n\n.stat-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0.5rem;\n}\n\n.stat-label {\n  font-size: 0.9rem;\n  color: var(--text-secondary);\n  font-weight: 500;\n}\n\n.stat-icon {\n  font-size: 1.5rem;\n}\n\n.stat-value {\n  font-size: 2.5rem;\n  font-weight: 700;\n  color: var(--text-primary);\n  line-height: 1;\n}\n\n.stat-subtitle {\n  font-size: 0.85rem;\n  color: var(--text-muted);\n  margin-top: 0.5rem;\n}\n\n/* Charts Section */\n.charts-section {\n  margin-bottom: 2rem;\n}\n\n.charts-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n  gap: 1.5rem;\n}\n\n.chart-card {\n  background: var(--bg-card);\n  border: 1px solid var(--border-color);\n  border-radius: 1rem;\n  padding: 1.5rem;\n  box-shadow: var(--shadow-md);\n}\n\n.chart-card h3 {\n  margin-bottom: 1rem;\n  color: var(--text-primary);\n}\n\n.chart-container {\n  position: relative;\n  height: 300px;\n}\n\n/* Issues Section */\n.issues-section {\n  margin-bottom: 2rem;\n}\n\n.section-header {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  margin-bottom: 1.5rem;\n}\n\n.section-title {\n  font-size: 1.8rem;\n  font-weight: 700;\n  color: var(--text-primary);\n}\n\n/* Search Controls */\n.search-controls {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.search-input {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 2px solid var(--border-color);\n  border-radius: 0.75rem;\n  font-size: 1rem;\n  background: var(--bg-card);\n  color: var(--text-primary);\n  transition: all 0.3s ease;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--accent-primary);\n  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.filter-buttons {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n\n.filter-btn {\n  padding: 0.5rem 1rem;\n  border: 2px solid var(--border-color);\n  border-radius: 0.5rem;\n  background: var(--bg-card);\n  color: var(--text-secondary);\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.filter-btn:hover {\n  border-color: var(--accent-primary);\n  color: var(--accent-primary);\n  transform: translateY(-2px);\n}\n\n.filter-btn.active {\n  background: var(--accent-primary);\n  border-color: var(--accent-primary);\n  color: white;\n}\n\n/* File Cards */\n.file-issues-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.file-card {\n  background: var(--bg-card);\n  border: 1px solid var(--border-color);\n  border-radius: 1rem;\n  overflow: hidden;\n  transition: all 0.3s ease;\n}\n\n.file-card:hover {\n  box-shadow: var(--shadow-md);\n}\n\n.file-card.hidden {\n  display: none;\n}\n\n.file-card-header {\n  padding: 1rem 1.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  transition: background 0.2s ease;\n  user-select: none;\n}\n\n.file-card-header:hover {\n  background: var(--bg-secondary);\n}\n\n.file-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.file-icon {\n  font-size: 1.25rem;\n  flex-shrink: 0;\n}\n\n.file-path {\n  font-family: 'Courier New', monospace;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.file-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  flex-shrink: 0;\n}\n\n.type-badge {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.5rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  white-space: nowrap;\n}\n\n.type-badge.type-import { background: rgba(239, 68, 68, 0.1); color: #ef4444; }\n.type-badge.type-export { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }\n.type-badge.type-function { background: rgba(16, 185, 129, 0.1); color: #10b981; }\n.type-badge.type-type { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }\n.type-badge.type-variable { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }\n.type-badge.type-file { background: rgba(236, 72, 153, 0.1); color: #ec4899; }\n\n.issue-count-badge {\n  padding: 0.25rem 0.75rem;\n  background: var(--accent-primary);\n  color: white;\n  border-radius: 1rem;\n  font-size: 0.85rem;\n  font-weight: 700;\n}\n\n.expand-icon {\n  font-size: 0.75rem;\n  transition: transform 0.3s ease;\n  color: var(--text-secondary);\n}\n\n.expand-icon.expanded {\n  transform: rotate(180deg);\n}\n\n.file-card-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.3s ease;\n  border-top: 1px solid transparent;\n}\n\n.file-card-content.expanded {\n  max-height: 5000px;\n  border-top-color: var(--border-color);\n}\n\n/* Issue Items */\n.issue-list {\n  list-style: none;\n  padding: 1rem 1.5rem;\n}\n\n.issue-item {\n  padding: 0.75rem;\n  margin-bottom: 0.5rem;\n  border-left: 3px solid var(--border-color);\n  border-radius: 0.5rem;\n  background: var(--bg-secondary);\n  transition: all 0.2s ease;\n}\n\n.issue-item:hover {\n  border-left-color: var(--accent-primary);\n  transform: translateX(4px);\n}\n\n.issue-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.35rem;\n}\n\n.issue-icon {\n  font-size: 1rem;\n}\n\n.issue-title {\n  font-size: 0.95rem;\n  color: var(--text-primary);\n  font-weight: 500;\n  flex: 1;\n}\n\n.issue-badge {\n  padding: 0.125rem 0.5rem;\n  background: var(--bg-primary);\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  color: var(--text-secondary);\n  font-family: 'Courier New', monospace;\n}\n\n.issue-details {\n  font-size: 0.85rem;\n  color: var(--text-secondary);\n  margin-left: 1.5rem;\n  font-family: 'Courier New', monospace;\n}\n\n/* File Tree */\n.file-tree {\n  background: var(--bg-card);\n  border: 1px solid var(--border-color);\n  border-radius: 1rem;\n  padding: 1.5rem;\n  box-shadow: var(--shadow-md);\n}\n\n.tree-item {\n  padding: 0.5rem;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\n.tree-item:hover {\n  background: var(--bg-secondary);\n}\n\n.tree-folder {\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.tree-file {\n  margin-left: 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--text-secondary);\n}\n\n.tree-badge {\n  background: var(--error);\n  color: white;\n  padding: 0.125rem 0.5rem;\n  border-radius: 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n\n/* Code Syntax Highlighting */\n.token-keyword { color: #c678dd; }\n.token-string { color: #98c379; }\n.token-number { color: #d19a66; }\n.token-function { color: #61afef; }\n.token-comment { color: #5c6370; font-style: italic; }\n.token-operator { color: #56b6c2; }\n.token-punctuation { color: #abb2bf; }\n\n/* Footer */\n.footer {\n  margin-top: 4rem;\n  padding: 2rem;\n  text-align: center;\n  color: var(--text-muted);\n  border-top: 1px solid var(--border-color);\n}\n\n.footer a {\n  color: var(--accent-primary);\n  text-decoration: none;\n  font-weight: 600;\n}\n\n.footer a:hover {\n  text-decoration: underline;\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n  background: var(--bg-card);\n  border: 2px dashed var(--border-color);\n  border-radius: 1rem;\n  margin: 2rem 0;\n}\n\n.empty-state-icon {\n  font-size: 4rem;\n  margin-bottom: 1rem;\n}\n\n.empty-state-title {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n  color: var(--success);\n}\n\n.empty-state-message {\n  color: var(--text-secondary);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .container {\n    padding: 1rem;\n  }\n  \n  .header h1 {\n    font-size: 1.8rem;\n  }\n  \n  .header-meta {\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n  \n  .stats-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .charts-grid {\n    grid-template-columns: 1fr;\n  }\n  \n  .theme-toggle {\n    top: 1rem;\n    right: 1rem;\n  }\n}\n\n/* Animations */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.stat-card,\n.issue-category,\n.chart-card {\n  animation: fadeIn 0.5s ease-out;\n}\n\n/* Utilities */\n.mt-1 { margin-top: 0.5rem; }\n.mt-2 { margin-top: 1rem; }\n.mt-3 { margin-top: 1.5rem; }\n.mt-4 { margin-top: 2rem; }\n\n.mb-1 { margin-bottom: 0.5rem; }\n.mb-2 { margin-bottom: 1rem; }\n.mb-3 { margin-bottom: 1.5rem; }\n.mb-4 { margin-bottom: 2rem; }\n\n/* Print Styles */\n@media print {\n  .theme-toggle,\n  .action-buttons-section {\n    display: none !important;\n  }\n  \n  .file-card-content {\n    max-height: none !important;\n  }\n  \n  body {\n    background: white;\n    color: black;\n  }\n}\n";
//# sourceMappingURL=styles.d.ts.map