Add HTML & Markdown preview in dashboard and revise pages
This commit is contained in:
inubimambo
@@ -740,20 +740,231 @@ body {
|
||||
border-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
/* Rendered Markdown Styles */
|
||||
.rendered-markdown {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.rendered-markdown h1,
|
||||
.rendered-markdown h2,
|
||||
.rendered-markdown h3,
|
||||
.rendered-markdown h4,
|
||||
.rendered-markdown h5,
|
||||
.rendered-markdown h6 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.rendered-markdown h1 {
|
||||
font-size: 1.75rem;
|
||||
border-bottom: 2px solid #e1e4e8;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rendered-markdown h2 {
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.rendered-markdown h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.rendered-markdown h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rendered-markdown h5,
|
||||
.rendered-markdown h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.rendered-markdown p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.rendered-markdown strong,
|
||||
.rendered-markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rendered-markdown em,
|
||||
.rendered-markdown i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.rendered-markdown ul,
|
||||
.rendered-markdown ol {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.rendered-markdown li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.rendered-markdown li > p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rendered-markdown ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.rendered-markdown ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.rendered-markdown blockquote {
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem 1rem;
|
||||
border-left: 4px solid #dfe2e5;
|
||||
background-color: #f6f8fa;
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
.rendered-markdown blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.rendered-markdown pre {
|
||||
background-color: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.45;
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
font-family: 'Courier New', Consolas, monospace;
|
||||
}
|
||||
|
||||
.rendered-markdown code {
|
||||
background-color: rgba(27, 31, 35, 0.05);
|
||||
border-radius: 3px;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
padding: 0.2em 0.4em;
|
||||
font-family: 'Courier New', Consolas, monospace;
|
||||
}
|
||||
|
||||
.rendered-markdown pre code {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.rendered-markdown table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rendered-markdown table th,
|
||||
.rendered-markdown table td {
|
||||
border: 1px solid #dfe2e5;
|
||||
padding: 6px 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rendered-markdown table th {
|
||||
background-color: #f6f8fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rendered-markdown table tr:nth-child(2n) {
|
||||
background-color: #f6f8fa;
|
||||
}
|
||||
|
||||
.rendered-markdown a {
|
||||
color: #0366d6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rendered-markdown a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.rendered-markdown hr {
|
||||
border: none;
|
||||
border-top: 1px solid #e1e4e8;
|
||||
height: 1px;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.rendered-markdown img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Display mode toggle styling */
|
||||
#display-mode-toggle .btn-outline-secondary {
|
||||
border-color: #6c757d;
|
||||
color: #6c757d;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#display-mode-toggle .btn-check:checked + .btn-outline-secondary {
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#display-mode-toggle .btn-outline-secondary:hover {
|
||||
background-color: #5c636a;
|
||||
border-color: #565e64;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Alert for format detection */
|
||||
.alert-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.message-text .code-block {
|
||||
.rendered-markdown {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rendered-markdown h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.rendered-markdown h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.rendered-markdown h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.rendered-markdown pre {
|
||||
padding: 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.message-text .formatted-list {
|
||||
padding-left: 1.2rem;
|
||||
.rendered-markdown table {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.message-text h3,
|
||||
.message-text h4,
|
||||
.message-text h5 {
|
||||
font-size: 0.95rem;
|
||||
.rendered-markdown ul,
|
||||
.rendered-markdown ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user