live preview
This commit is contained in:
@@ -326,6 +326,47 @@ body {
|
||||
.editor blockquote { border-left: 3px solid var(--secondary); margin: 0.5em 0; padding-left: 12px; color: var(--muted); }
|
||||
.editor a { color: var(--secondary); text-decoration: underline; cursor: pointer; }
|
||||
|
||||
.editor-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.editor-split .editor {
|
||||
border: none;
|
||||
border-right: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
}
|
||||
.editor-split .preview {
|
||||
background: var(--surface);
|
||||
padding: 16px 20px;
|
||||
min-height: 60vh;
|
||||
overflow-y: auto;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.editor-split.preview-hidden { grid-template-columns: 1fr; }
|
||||
.editor-split.preview-hidden .preview { display: none; }
|
||||
.editor-split.preview-hidden .editor { border-right: none; }
|
||||
.preview-toggle.active { color: var(--primary); }
|
||||
|
||||
.preview h1, .preview h2, .preview h3, .preview h4 { margin: 0.5em 0 0.25em; color: var(--secondary); }
|
||||
.preview h1 { font-size: 1.6em; }
|
||||
.preview h2 { font-size: 1.35em; }
|
||||
.preview h3 { font-size: 1.15em; }
|
||||
.preview p { margin: 0.4em 0; }
|
||||
.preview ul, .preview ol { padding-left: 1.5em; margin: 0.4em 0; }
|
||||
.preview pre { background: var(--code-bg); color: var(--code-fg); padding: 12px; border-radius: 8px; overflow-x: auto; }
|
||||
.preview code { background: color-mix(in srgb, var(--border) 55%, transparent); padding: 1px 4px; border-radius: 4px; font-size: 0.9em; }
|
||||
.preview pre code { background: none; padding: 0; }
|
||||
.preview blockquote { border-left: 3px solid var(--secondary); margin: 0.5em 0; padding-left: 12px; color: var(--muted); }
|
||||
.preview a { color: var(--secondary); text-decoration: underline; }
|
||||
.preview hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
|
||||
.preview img { max-width: 100%; }
|
||||
.preview table { border-collapse: collapse; }
|
||||
.preview th, .preview td { border: 1px solid var(--border); padding: 4px 8px; }
|
||||
|
||||
.status { margin-top: 10px; color: var(--muted); font-size: 13px; min-height: 20px; }
|
||||
.editor-hint { margin-top: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--muted); line-height: 1.6; }
|
||||
.editor-hint p { margin: 0.25em 0; }
|
||||
|
||||
Reference in New Issue
Block a user