diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 01d0278ab..7d5551a00 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -312,8 +312,6 @@ export default {
@import './vue-easymde/vue-easymde.css';
@import 'highlight.js/scss/base16/equilibrium-gray-light';
-$editor-border-color: #ddd;
-
.editor {
.clear {
clear: both;
@@ -337,7 +335,7 @@ $editor-border-color: #ddd;
.CodeMirror {
padding: .5rem;
- border: 1px solid $editor-border-color;
+ border: 1px solid var(--grey-200) !important;
background: var(--white);
&-lines pre {
@@ -363,12 +361,13 @@ $editor-border-color: #ddd;
}
.editor-toolbar {
- background: #ffffff;
- border-top: 1px solid $editor-border-color;
- border-left: 1px solid $editor-border-color;
- border-right: 1px solid $editor-border-color;
+ background: var(--grey-50);
+ border: 1px solid var(--grey-200);
+ border-bottom: none;
button {
+ color: var(--grey-700);
+
svg {
vertical-align: middle;
@@ -383,6 +382,15 @@ $editor-border-color: #ddd;
top: 24px;
margin-left: -3px;
}
+
+ &:hover {
+ background: var(--grey-200);
+ border-color: var(--grey-300);
+ }
+ }
+
+ i.separator {
+ border-color: var(--grey-200) !important;
}
}
diff --git a/src/components/input/editorConfig.js b/src/components/input/editorConfig.js
index 1629eccd9..4daee10b8 100644
--- a/src/components/input/editorConfig.js
+++ b/src/components/input/editorConfig.js
@@ -14,112 +14,112 @@ export function createEasyMDEConfig({ placeholder, uploadImage, imageUploadFunct
name: 'heading-1',
action: EasyMDE.toggleHeading1,
title: i18n.global.t('input.editor.heading1'),
- icon: '',
+ icon: '',
},
{
name: 'heading-2',
action: EasyMDE.toggleHeading2,
title: i18n.global.t('input.editor.heading2'),
- icon: '',
+ icon: '',
},
{
name: 'heading-3',
action: EasyMDE.toggleHeading3,
title: i18n.global.t('input.editor.heading3'),
- icon: '',
+ icon: '',
},
{
name: 'heading-smaller',
action: EasyMDE.toggleHeadingSmaller,
title: i18n.global.t('input.editor.headingSmaller'),
- icon: '',
+ icon: '',
},
{
name: 'heading-bigger',
action: EasyMDE.toggleHeadingBigger,
title: i18n.global.t('input.editor.headingBigger'),
- icon: '',
+ icon: '',
},
'|',
{
name: 'bold',
action: EasyMDE.toggleBold,
title: i18n.global.t('input.editor.bold'),
- icon: '',
+ icon: '',
},
{
name: 'italic',
action: EasyMDE.toggleItalic,
title: i18n.global.t('input.editor.italic'),
- icon: '',
+ icon: '',
},
{
name: 'strikethrough',
action: EasyMDE.toggleStrikethrough,
title: i18n.global.t('input.editor.strikethrough'),
- icon: '',
+ icon: '',
},
{
name: 'code',
action: EasyMDE.toggleCodeBlock,
title: i18n.global.t('input.editor.code'),
- icon: '',
+ icon: '',
},
{
name: 'quote',
action: EasyMDE.toggleBlockquote,
title: i18n.global.t('input.editor.quote'),
- icon: '',
+ icon: '',
},
{
name: 'unordered-list',
action: EasyMDE.toggleUnorderedList,
title: i18n.global.t('input.editor.unorderedList'),
- icon: '',
+ icon: '',
},
{
name: 'ordered-list',
action: EasyMDE.toggleOrderedList,
title: i18n.global.t('input.editor.orderedList'),
- icon: '',
+ icon: '',
},
'|',
{
name: 'clean-block',
action: EasyMDE.cleanBlock,
title: i18n.global.t('input.editor.cleanBlock'),
- icon: '',
+ icon: '',
},
{
name: 'link',
action: EasyMDE.drawLink,
title: i18n.global.t('input.editor.link'),
- icon: '',
+ icon: '',
},
{
name: 'image',
action: EasyMDE.drawImage,
title: i18n.global.t('input.editor.image'),
- icon: '',
+ icon: '',
},
{
name: 'table',
action: EasyMDE.drawTable,
title: i18n.global.t('input.editor.table'),
- icon: '',
+ icon: '',
},
{
name: 'horizontal-rule',
action: EasyMDE.drawHorizontalRule,
title: i18n.global.t('input.editor.horizontalRule'),
- icon: '',
+ icon: '',
},
'|',
{
name: 'side-by-side',
action: EasyMDE.toggleSideBySide,
title: i18n.global.t('input.editor.sideBySide'),
- icon: '',
+ icon: '',
},
{
name: 'guide',
@@ -127,7 +127,7 @@ export function createEasyMDEConfig({ placeholder, uploadImage, imageUploadFunct
window.open('https://www.markdownguide.org/basic-syntax/', '_blank')
},
title: i18n.global.t('input.editor.guide'),
- icon: '',
+ icon: '',
},
],
}