LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Codebox theming

Browse source
This commit is contained in:
Yamboy1 2020-01-18 20:13:11 +13:00 • committed by Sean Yesmunt
parent 4f4abdd3fa
commit f990e4bd16
3 changed files with 104 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/viewers/codeViewer.jsx
View file

@ -43,7 +43,7 @@ class CodeViewer extends React.PureComponent<Props> {
// Auto detect syntax with file contentType // Auto detect syntax with file contentType
mode: contentType, mode: contentType,
// Adaptive theme // Adaptive theme
theme: theme === 'dark' ? 'one-dark' : 'default', theme: theme === 'dark' ? 'monokai' : 'default',
// Hide the cursor // Hide the cursor
readOnly: true, readOnly: true,
// Styled text selection // Styled text selection

9
ui/scss/component/_markdown-editor.scss
View file

@ -1,8 +1,5 @@
.CodeMirror { .CodeMirror {
border-top: none; border: 1px solid var(--color-input-border);
border-right: 1px solid var(--color-input-border);
border-bottom: 1px solid var(--color-input-border);
border-left: 1px solid var(--color-input-border);
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius);
background: var(--color-input-bg); background: var(--color-input-bg);
@ -13,6 +10,10 @@
} }
} }
.CodeMirror-wrap {
overflow: hidden;
}
.editor-toolbar { .editor-toolbar {
background-color: var(--color-header-background); background-color: var(--color-header-background);
border: none; border: none;

210
ui/scss/component/_syntax-highlighter.scss
View file

@ -1,114 +1,100 @@
// Name: one-dark 1.1.1 /* Based on Sublime Text's Monokai theme */
// Author: Török Ádám (http://github.com/Aerobird98)
// Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax)
// basic .cm-s-monokai.CodeMirror {
.CodeMirror { background: #212529;
&.cm-s-one-dark { color: #f8f8f2;
color: #abb2bf; }
.cm-s-monokai div.CodeMirror-selected {
.CodeMirror-cursor { background: #717273;
border-left: 2px solid #56b6c2; }
} .cm-s-monokai .CodeMirror-gutters {
background: #212529;
.CodeMirror-lines { border-right: 0px;
background-color: transparent; }
} .cm-s-monokai .CodeMirror-guttermarker {
color: white;
// addon: edit/machingbrackets.js & addon: edit/matchtags.js }
.CodeMirror-matchingbracket, .cm-s-monokai .CodeMirror-guttermarker-subtle {
.CodeMirror-matchingtag { color: #d0d0d0;
border-bottom: 2px solid #56b6c2; }
color: #abb2bf !important; .cm-s-monokai .CodeMirror-linenumber {
background-color: transparent; color: #d0d0d0;
} }
.cm-s-monokai .CodeMirror-cursor {
.CodeMirror-nonmatchingbracket { border-left: 1px solid #f8f8f0;
border-bottom: 2px solid #e06c75; }
color: #abb2bf !important;
background-color: transparent; .cm-s-monokai span.cm-comment {
} color: #ada6a7;
}
// addon: fold/foldgutter.js .cm-s-monokai span.cm-atom {
.CodeMirror-foldmarker, color: #ae81ff;
.CodeMirror-foldgutter, }
.CodeMirror-foldgutter-open, .cm-s-monokai span.cm-number {
.CodeMirror-foldgutter-folded { color: #ae81ff;
border: none; }
text-shadow: none;
color: #5c6370 !important; .cm-s-monokai span.cm-comment.cm-attribute {
background-color: transparent; color: #97b757;
} }
.cm-s-monokai span.cm-comment.cm-def {
// basic syntax color: #bc9262;
.cm-atom, }
.cm-attribute, .cm-s-monokai span.cm-comment.cm-tag {
.cm-number, color: #bc6283;
.cm-qualifier, }
.cm-strong { .cm-s-monokai span.cm-comment.cm-type {
color: #d19a66; color: #5998a6;
} }
.cm-bracket, .cm-s-monokai span.cm-property,
.cm-meta, .cm-s-monokai span.cm-attribute {
.cm-punctuation, color: #a6e22e;
.cm-m-css.cm-property { }
color: #abb2bf; .cm-s-monokai span.cm-keyword {
} color: #f92672;
}
.cm-builtin, .cm-s-monokai span.cm-builtin {
.cm-error, color: #66d9ef;
.cm-header, }
.cm-negative, .cm-s-monokai span.cm-string {
.cm-positive, color: #e6db74;
.cm-tag, }
.cm-variable {
color: #e06c75; .cm-s-monokai span.cm-variable {
} color: #f8f8f2;
}
.cm-comment, .cm-s-monokai span.cm-variable-2 {
.cm-quote { color: #9effff;
color: #5c6370; }
} .cm-s-monokai span.cm-variable-3,
.cm-s-monokai span.cm-type {
.cm-def { color: #66d9ef;
color: #e5c07b; }
} .cm-s-monokai span.cm-def {
color: #fd971f;
.cm-em, }
.cm-keyword { .cm-s-monokai span.cm-bracket {
color: #c678dd; color: #f8f8f2;
} }
.cm-s-monokai span.cm-tag {
.cm-comment, color: #f92672;
.cm-em, }
.cm-quote { .cm-s-monokai span.cm-header {
font-style: italic; color: #ae81ff;
} }
.cm-s-monokai span.cm-link {
.cm-link, color: #ae81ff;
.cm-string { }
color: #98c379; .cm-s-monokai span.cm-error {
} background: #f92672;
color: #f8f8f0;
.cm-link { }
border-bottom: 1px solid #98c379;
} .cm-s-monokai .CodeMirror-activeline-background {
background: #373831;
.cm-operator, }
.cm-property, .cm-s-monokai .CodeMirror-matchingbracket {
.cm-m-css.cm-atom, text-decoration: underline;
.cm-m-css.cm-builtin, color: white !important;
.cm-m-lua.cm-variable {
color: #56b6c2;
}
.cm-strong {
font-weight: bold;
}
.cm-m-css.cm-variable {
color: #828997;
}
}
} }