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

fix markdown editor styles on dark mode

Browse source
This commit is contained in:
Sean Yesmunt 2018-10-31 14:51:48 -04:00
parent 1837cef751
commit a7c2fdad1b
2 changed files with 45 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/scss/component/_markdown-editor.scss
View file

@ -16,16 +16,14 @@
}
.CodeMirror-selected {
background-color: transparent;
// background-color: transparent;
}
.CodeMirror-selectedtext {
background-color: $lbry-teal-5;
color: $lbry-white;
}
.cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
background: none;
text-decoration: underline;
text-decoration-color: $lbry-red-3;
text-decoration-style: dotted;
@ -65,7 +63,7 @@
}
a {
color: $lbry-black !important;
color: $lbry-black;
transition: opacity 0.3s ease;
&:not(.active),
@ -85,12 +83,6 @@
}
}
.editor-preview {
background-color: rgba($lbry-gray-1, 0.5);
border: none;
font-size: calc(var(--font-size-subtext-multiple) * 1em);
}
.editor-statusbar {
color: rgba($lbry-black, 0.5);
}

43
src/renderer/scss/themes/_dark.scss
View file

@ -130,4 +130,47 @@ html[data-theme='dark'] {
border: 1px solid rgba($lbry-gray-1, 0.1);
color: $lbry-gray-3;
}
// Markdown editor on publish page
.form-field--SimpleMDE {
.editor-toolbar {
background-color: rgba($lbry-white, 0.2);
a {
color: $lbry-white !important; // We need to use !important to override the CodeMirror styles
&:hover {
color: $lbry-black !important;
}
}
&.disabled-for-preview {
a:not(.no-disable) {
background-color: transparent;
}
// The markdown preview button is highlighted during preview when the other buttons are disabled
a.no-disable {
background-color: rgba($lbry-white, 0.3);
}
}
}
.CodeMirror {
border-left: 1px solid rgba($lbry-white, 0.2);
border-right: 1px solid rgba($lbry-white, 0.2);
border-bottom: 1px solid rgba($lbry-white, 0.2);
background-color: rgba($lbry-white, 0.1);
color: $lbry-white;
.CodeMirror-selectedtext {
color: $lbry-black;
}
.editor-preview.editor-preview-active {
background-color: $lbry-gray-5;
color: $lbry-black;
}
}
}
}