/* * This CSS is required to make the React app fill the entire viewport. * The default browser styles for and do not stretch to 100% height, * so we must set this explicitly. This allows Tailwind's min-h-screen to work correctly. */ @import "tailwindcss"; html, body, #root { height: 100%; width: 100%; margin: 0; padding: 0; } /* * The following styles are for a clean, flat aesthetic. * You can customize the font and background color here. */ body { font-family: var(--font-body), 'Inter', sans-serif; background-color: var(--color-background, #f7fafc); /* A light gray background color */ color: var(--color-text, #1f2937); } .markdown-content table { display: table; width: auto; /* prevent stretching full screen */ max-width: max-content; } .markdown-content { line-height: 1.7; font-size: 1rem; color: var(--color-text, #000000); } /* Headings */ .markdown-content h1 { font-size: 2.25rem; /* 36px */ font-weight: 800; margin-top: 2.5rem; margin-bottom: 1rem; color: var(--color-text, #000000); } .markdown-content h2 { font-size: 1.75rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: var(--color-text, #000000); } .markdown-content h3 { font-size: 1.5rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.75rem; color: var(--color-text, #000000); } .markdown-content h4, .markdown-content h5, .markdown-content h6 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text, #000000); } /* Paragraphs */ .markdown-content p { margin-top: 1rem; margin-bottom: 1rem; } /* Blockquotes */ .markdown-content blockquote { border-left: 4px solid var(--color-primary, #3b82f6); padding-left: 1rem; margin: 1.5rem 0; color: var(--color-text-secondary, #9ca3af); font-style: italic; } /* Lists */ .markdown-content ul, .markdown-content ol { margin: 1.25rem 0 1.25rem 1.5rem; padding-left: 1rem; } .markdown-content ul { list-style-type: disc; } .markdown-content ol { list-style-type: decimal; } .markdown-content li { margin: 0.5rem 0; } .markdown-content li > ul, .markdown-content li > ol { margin-top: 0.5rem; margin-bottom: 0.5rem; } /* Horizontal Rule */ .markdown-content hr { border: none; border-top: 1px solid var(--color-border, #4b5563); margin: 2rem 0; } /* Code blocks */ .markdown-content pre { background-color: var(--color-surface, #1f2937); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--color-border, #374151); } .markdown-content pre code { background: none; color: var(--color-text, #e5e7eb); padding: 0; font-size: 0.9rem; } /* Inline code */ .markdown-content code { font-family: 'Courier New', Courier, monospace; background-color: var(--color-surface, #374151); color: var(--color-accent, #a7f3d0); padding: 0.2em 0.4em; border-radius: 0.25rem; } /* Emphasis */ .markdown-content em { font-style: italic; color: var(--color-text, #000000); } .markdown-content strong { font-weight: 700; color: var(--color-text, #000000); } /* Links */ .markdown-content a { color: var(--color-primary, #3b82f6); text-decoration: underline; } .markdown-content a:hover { color: var(--color-secondary, #60a5fa); } /* Images */ .markdown-content img { display: block; width: 100%; border-radius: 0.5rem; margin-top: 1rem; margin-bottom: 1rem; } /* Tables */ .markdown-content table { border-collapse: collapse; margin: 2rem 0; width: 100%; font-size: 0.95rem; } .markdown-content th, .markdown-content td { padding: 0.75rem 1rem; border: 1px solid var(--color-border, #4b5563); text-align: left; vertical-align: top; } .markdown-content th { background-color: var(--color-surface, #777777); font-weight: 600; color: var(--color-text, #f3f4f6); } /* Strikethrough */ .markdown-content del, .markdown-content s { text-decoration: line-through; color: var(--color-text-secondary, #9ca3af); } .headercontainer { padding-left: 2rem; padding-right: 2rem; } /* Standard HTML elements support */ .markdown-content sub { font-size: 0.8em; vertical-align: sub; } .markdown-content sup { font-size: 0.8em; vertical-align: super; } /* Details/Summary for collapsible content */ .markdown-content details { border: 1px solid var(--color-border, #d1d5db); border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; background-color: var(--color-surface, #f9fafb); } .markdown-content details summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text, #374151); } .markdown-content details[open] { background-color: var(--color-background, #f3f4f6); } .markdown-content details[open] summary { margin-bottom: 1rem; border-bottom: 1px solid var(--color-border, #d1d5db); padding-bottom: 0.5rem; } /* Footnotes */ .markdown-content sup a { font-size: 0.75em; vertical-align: super; color: var(--color-primary, #3b82f6); } .markdown-content .footnotes { font-size: 0.9rem; border-top: 1px solid var(--color-border, #4b5563); margin-top: 2rem; padding-top: 1rem; } .markdown-content .footnotes ol { list-style-type: decimal; margin-left: 1.5rem; } .markdown-content .footnotes li { margin: 0.5rem 0; } /* Standard alert/callout styling using blockquotes with emoji */ .markdown-content blockquote p:first-child:before { /* This will style blockquotes that start with emoji as callouts */ } /* You can use standard blockquotes for callouts: > ℹ️ **Info**: This is an info callout > ⚠️ **Warning**: This is a warning > ❌ **Error**: This is an error */ /* WYSIWYG Editor Styling */ .w-md-editor { background-color: white; } .w-md-editor-text-textarea, .w-md-editor-text { font-size: 14px !important; font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important; } .w-md-editor-preview { background-color: white; } /* Custom toolbar styling */ .w-md-editor-toolbar { border-bottom: 1px solid #e5e7eb; background-color: #f9fafb; } .w-md-editor-toolbar-child button { color: #374151; } .w-md-editor-toolbar-child button:hover { background-color: #e5e7eb; } /* Editor content area */ .w-md-editor-text-container { border: none !important; } /* Preview styling to match our markdown content */ .w-md-editor-preview .wmde-markdown { padding: 16px; color: #374151; line-height: 1.75; } .w-md-editor-preview .wmde-markdown h1, .w-md-editor-preview .wmde-markdown h2, .w-md-editor-preview .wmde-markdown h3, .w-md-editor-preview .wmde-markdown h4, .w-md-editor-preview .wmde-markdown h5, .w-md-editor-preview .wmde-markdown h6 { color: #1f2937; font-weight: 700; } .w-md-editor-preview .wmde-markdown code { background-color: #f3f4f6; padding: 2px 4px; border-radius: 4px; font-size: 0.875em; } .w-md-editor-preview .wmde-markdown pre { background-color: #f3f4f6; border-radius: 8px; padding: 16px; } .w-md-editor-preview .wmde-markdown blockquote { border-left: 4px solid #3b82f6; padding-left: 16px; margin: 16px 0; font-style: italic; color: #6b7280; } .w-md-editor-preview .wmde-markdown table { border-collapse: collapse; width: 100%; margin: 16px 0; } .w-md-editor-preview .wmde-markdown table th, .w-md-editor-preview .wmde-markdown table td { border: 1px solid #d1d5db; padding: 8px 12px; text-align: left; } .w-md-editor-preview .wmde-markdown table th { background-color: #f9fafb; font-weight: 600; } /* Tab styling */ .w-md-editor-tab { background-color: #f3f4f6 !important; color: #6b7280 !important; border: 1px solid #d1d5db !important; } .w-md-editor-tab.active { background-color: white !important; color: #1f2937 !important; border-bottom-color: white !important; } /* Theme-aware utility classes */ .theme-bg { background-color: var(--color-background, #ffffff); } .theme-surface { background-color: var(--color-surface, #ffffff); } .theme-text { color: var(--color-text, #1f2937); } .theme-text-secondary { color: var(--color-text-secondary, #6b7280); } .theme-primary { color: var(--color-primary, #3b82f6); } .theme-bg-primary { background-color: var(--color-primary, #3b82f6); } .theme-secondary { color: var(--color-secondary, #8b5cf6); } .theme-accent { color: var(--color-accent, #10b981); } .theme-border { border-color: var(--color-border, #d1d5db); } /* Button variants */ .btn-theme-primary { background-color: var(--color-primary, #3b82f6); color: white; border: 1px solid var(--color-primary, #3b82f6); } .btn-theme-primary:hover { background-color: var(--color-secondary, #1d4ed8); border-color: var(--color-secondary, #1d4ed8); } .btn-theme-secondary { background-color: var(--color-secondary, #8b5cf6); color: white; border: 1px solid var(--color-secondary, #8b5cf6); } .btn-theme-secondary:hover { opacity: 0.9; }