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

Fix color contrast in Markdown Editor (both light & dark).

Browse source 
Fixed color issues that were making things hard to read:
- selected text color, including inline code.
- HTML tags
- Horizontal rule not visible in Preview mode. While at it, I changed the color in Edit mode as well as syntax highlighting.
- blockquote (was gray over gray)

Attempted to fix uneven margins between top and bottom for inline-code and codeblock. Also, removed the extra margin to make it more nice and cosy, instead of far apart.
This commit is contained in:
infiinte-persistence 2020-06-03 05:01:21 +02:00 committed by Sean Yesmunt
parent 4aba0716dd
commit 5d1d36d4af
4 changed files with 78 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -55,9 +55,47 @@
.form-field--SimpleMDE {
margin-top: var(--spacing-l);
// Override hyperlink styles
.cm-s-easymde .CodeMirror-cursor {
border-left: 1px solid var(--color-editor-cursor);
}
.cm-s-easymde .CodeMirror-selected {
background: var(--color-editor-selected);
}
.cm-s-easymde .cm-hr {
color: var(--color-editor-tag);
}
.cm-s-easymde .cm-tag {
color: var(--color-editor-tag);
}
.cm-s-easymde .cm-attribute {
color: var(--color-editor-attr);
}
.cm-s-easymde .cm-string {
color: var(--color-editor-string);
}
.cm-s-easymde .cm-comment {
background: var(--color-editor-inline-code-bg);
padding: 3px 0px; // @todo: should fill up line-spacing instead of harcoded.
}
.cm-s-easymde .cm-link {
color: inherit;
color: var(--color-editor-link);
}
.cm-s-easymde .cm-url {
color: var(--color-editor-url);
font-style: italic;
}
.cm-s-easymde .cm-quote {
color: var(--color-editor-quote);
font-style: italic;
}
// Overriding the lbry/components form styling

11
ui/scss/component/_markdown-preview.scss
View file

@ -114,6 +114,7 @@
margin-bottom: 2rem;
position: relative;
top: 1rem;
border: 1px solid var(--color-editor-hr-preview);
}
// Code blocks
@ -123,8 +124,8 @@
word-break: break-all;
code {
margin-bottom: var(--spacing-m);
padding: var(--spacing-m);
margin-bottom: var(--spacing-medium);
padding: var(--spacing-s) var(--spacing-s) calc(var(--spacing-s) - 2px);
display: block;
white-space: pre-wrap;
}
@ -132,12 +133,12 @@
// Inline code
code {
background-color: var(--color-blockquote);
color: var(--color-editor-inline-code-fg-preview);
background-color: var(--color-editor-inline-code-bg-preview);
display: inline-block;
margin: var(--spacing-xxs);
border-radius: 0.2rem;
font-size: var(--font-small);
padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs);
padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs) calc(var(--spacing-xxs) - 5px);
}
a {

16
ui/scss/themes/dark.scss
View file

@ -98,6 +98,22 @@
// Snack
--color-snack-bg: var(--color-secondary);
// Editor
--color-editor-cursor: var(--color-text);
--color-editor-quote: #d3d3d3;
--color-editor-tag: #efbe5d;
--color-editor-attr: #68ccf9;
--color-editor-string: #ff8b6b;
--color-editor-inline-code-fg: #ce9178;
--color-editor-inline-code-fg-preview: #eeeeee;
--color-editor-inline-code-bg: rgba(20, 68, 102, 0.3);
--color-editor-inline-code-bg-preview: #8f9499;
--color-editor-selected: #264f78;
--color-editor-link: var(--color-link);
--color-editor-url: var(--color-editor-string);
--color-editor-hr: var(--color-editor-tag);
--color-editor-hr-preview: #a0a0a0;
// Ads
--color-ads-background: #475057;
--color-ads-text: #111;

16
ui/scss/themes/light.scss
View file

@ -67,6 +67,22 @@
--color-snack-bg-error: var(--color-danger);
--color-snack-upgrade: var(--color-tertiary);
// Editor
--color-editor-cursor: var(--color-text);
--color-editor-quote: #707070;
--color-editor-tag: #ea9400;
--color-editor-attr: #04b0f4;
--color-editor-string: #ff7451;
--color-editor-inline-code-fg: var(--color-text);
--color-editor-inline-code-fg-preview: #eeeeee;
--color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
--color-editor-inline-code-bg-preview: #8f9499;
--color-editor-selected: #add6ff;
--color-editor-link: var(--color-link);
--color-editor-url: var(--color-editor-string);
--color-editor-hr: var(--color-editor-tag);
--color-editor-hr-preview: #cccccc;
// Ads
--color-ads-background: #fae5ff;
--color-ads-link: var(--color-link);