diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss index ce6902abc..2862a1921 100644 --- a/ui/scss/component/_markdown-editor.scss +++ b/ui/scss/component/_markdown-editor.scss @@ -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 diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index 21e459281..fde589f40 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -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 { diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 7021c8e8d..4a23b023e 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -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; diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 96120294b..9b825a48c 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -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);