File Explorer: CodeMirror + EasyMDE statt Preview
This commit is contained in:
Meleki committed
1 parent
b4521a95ef
commit
bba82aad7e
18 files changed
+410
-87
No files matched your search
+120
-35
@@ -106,53 +106,138 @@
|
||||
}
|
||||
|
||||
|
||||
/* Preview */
|
||||
/* ── CodeMirror / EasyMDE gemeinsame Wrapper-Basis ── */
|
||||
|
||||
.fe-preview {
|
||||
.fe-cm-wrap,
|
||||
.fe-mde-wrap {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fe-line-numbers {
|
||||
padding: .5em;
|
||||
background: var(--f1-bg);
|
||||
color: var(--text);
|
||||
opacity: var(--semi-transparent);
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
border-right: var(--border-width) solid var(--f1-border);
|
||||
flex-shrink: 0;
|
||||
min-width: 3em;
|
||||
}
|
||||
|
||||
.fe-line-numbers div {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.fe-textarea {
|
||||
.fe-mde-wrap .EasyMDEContainer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: var(--f2-bg);
|
||||
color: var(--text);
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fe-cm-wrap .CodeMirror,
|
||||
.fe-mde-wrap .CodeMirror,
|
||||
.fe-mde-wrap .EasyMDEContainer .CodeMirror {
|
||||
flex: 1;
|
||||
height: 100% !important;
|
||||
font-family: var(--mono) !important;
|
||||
line-height: 1.5;
|
||||
padding: .5em;
|
||||
outline: none;
|
||||
overflow-y: auto;
|
||||
white-space: pre;
|
||||
tab-size: 4;
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
max-height: unset;
|
||||
background: var(--f2-bg) !important;
|
||||
color: var(--text) !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.fe-textarea:hover {
|
||||
border-color: transparent;
|
||||
.fe-cm-wrap .CodeMirror-scroll,
|
||||
.fe-mde-wrap .CodeMirror-scroll {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.fe-textarea::selection {
|
||||
background: rgba(180, 68, 17, 0.35);
|
||||
.fe-cm-wrap .CodeMirror-gutters,
|
||||
.fe-mde-wrap .CodeMirror-gutters {
|
||||
background: var(--f1-bg) !important;
|
||||
border-right: var(--border-width) solid var(--f1-border) !important;
|
||||
}
|
||||
|
||||
.fe-cm-wrap .CodeMirror-linenumber,
|
||||
.fe-mde-wrap .CodeMirror-linenumber {
|
||||
color: var(--text) !important;
|
||||
opacity: var(--semi-transparent);
|
||||
}
|
||||
|
||||
.fe-cm-wrap .CodeMirror-cursor,
|
||||
.fe-mde-wrap .CodeMirror-cursor {
|
||||
border-left-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.fe-cm-wrap .CodeMirror-selected,
|
||||
.fe-mde-wrap .CodeMirror-selected {
|
||||
background: rgba(180, 68, 17, 0.3) !important;
|
||||
}
|
||||
|
||||
/* ── Syntax Highlighting (theme: default übersteuern) ── */
|
||||
|
||||
.fe-cm-wrap .cm-keyword,
|
||||
.fe-mde-wrap .cm-keyword { color: #c678dd !important; }
|
||||
|
||||
.fe-cm-wrap .cm-def,
|
||||
.fe-mde-wrap .cm-def { color: #61afef !important; }
|
||||
|
||||
.fe-cm-wrap .cm-variable,
|
||||
.fe-mde-wrap .cm-variable { color: var(--text) !important; }
|
||||
|
||||
.fe-cm-wrap .cm-variable-2,
|
||||
.fe-mde-wrap .cm-variable-2 { color: #e06c75 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-variable-3,
|
||||
.fe-mde-wrap .cm-variable-3 { color: #56b6c2 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-property,
|
||||
.fe-mde-wrap .cm-property { color: #e06c75 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-operator,
|
||||
.fe-mde-wrap .cm-operator { color: #56b6c2 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-string,
|
||||
.fe-mde-wrap .cm-string { color: #98c379 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-string-2,
|
||||
.fe-mde-wrap .cm-string-2 { color: #98c379 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-number,
|
||||
.fe-mde-wrap .cm-number { color: #d19a66 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-atom,
|
||||
.fe-mde-wrap .cm-atom { color: #d19a66 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-comment,
|
||||
.fe-mde-wrap .cm-comment { color: #5c6370 !important; font-style: italic; }
|
||||
|
||||
.fe-cm-wrap .cm-meta,
|
||||
.fe-mde-wrap .cm-meta { color: #c678dd !important; }
|
||||
|
||||
.fe-cm-wrap .cm-qualifier,
|
||||
.fe-mde-wrap .cm-qualifier { color: #e5c07b !important; }
|
||||
|
||||
.fe-cm-wrap .cm-builtin,
|
||||
.fe-mde-wrap .cm-builtin { color: #e5c07b !important; }
|
||||
|
||||
.fe-cm-wrap .cm-tag,
|
||||
.fe-mde-wrap .cm-tag { color: #e06c75 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-attribute,
|
||||
.fe-mde-wrap .cm-attribute { color: #d19a66 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-type,
|
||||
.fe-mde-wrap .cm-type { color: #56b6c2 !important; }
|
||||
|
||||
.fe-cm-wrap .cm-error,
|
||||
.fe-mde-wrap .cm-error { color: #f44 !important; }
|
||||
|
||||
/* Markdown spezifisch (EasyMDE) */
|
||||
.fe-mde-wrap .cm-header { color: #e5c07b !important; font-weight: bold; }
|
||||
.fe-mde-wrap .cm-strong { color: var(--text-accent) !important; font-weight: bold; }
|
||||
.fe-mde-wrap .cm-em { color: #c678dd !important; font-style: italic; }
|
||||
.fe-mde-wrap .cm-link { color: #61afef !important; }
|
||||
.fe-mde-wrap .cm-url { color: #98c379 !important; }
|
||||
.fe-mde-wrap .cm-quote { color: #5c6370 !important; font-style: italic; }
|
||||
|
||||
/* EasyMDE Toolbar/Statusbar/Preview ausblenden */
|
||||
.fe-mde-wrap .editor-toolbar,
|
||||
.fe-mde-wrap .editor-statusbar,
|
||||
.fe-mde-wrap .editor-preview-side,
|
||||
.fe-mde-wrap .editor-preview-full {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
Reference in new issue
Block a user