diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less index 24e62ce..0cd2090 100644 --- a/src/assets/less/theme.less +++ b/src/assets/less/theme.less @@ -12,120 +12,120 @@ @nightLineColor: #84868b; .container_night { + background-color: @nightBgColor; + + .el-main { background-color: @nightBgColor; + } - .el-main { - background-color: @nightBgColor; + .CodeMirror { + caret-color: @nightFontColor; + color: @nightFontColor; + background-color: @nightCodeMirrorColor; + box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102); + } + + .output_night { + .preview { + background-color: @nightPreviewColor; + box-shadow: 0 0 70px rgba(0, 0, 0, 0.3); } - .CodeMirror { - caret-color: @nightFontColor; - color: @nightFontColor; - background-color: @nightCodeMirrorColor; - box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102); + .preview-wrapper { + background-color: @nightCodeMirrorColor; + box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102); } - .output_night { - .preview { - background-color: @nightPreviewColor; - box-shadow: 0 0 70px rgba(0, 0, 0, 0.3); - } + .code-snippet__fix { + background-color: rgb(238, 238, 238); + } + } - .preview-wrapper { - background-color: @nightCodeMirrorColor; - box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102); - } + .cm-s-style-mirror .CodeMirror-matchingbracket { + color: @nightWhiteColor !important; + background: rgb(30, 30, 30) !important; + } - .code-snippet__fix { - background-color: rgb(238, 238, 238); - } + .cm-s-xq-light span.cm-variable-2, + .cm-s-style-mirror span.cm-tag { + color: @nightFontColor; + } + + .cm-s-xq-light .CodeMirror-activeline-background { + background-color: transparent; + } + + .cm-s-xq-light span.cm-string { + color: @nightLinkColor; + } + + .cm-s-xq-light span.cm-link { + color: @nightLinkTextColor; + } + + .editor__header { + background-color: @nightHeaderColor; + } + + .el-button { + color: @nightWhiteColor; + background-color: @nightCodeMirrorColor; + border: 1px solid transparent; + } + + .el-button.is-plain:focus, + .el-button.is-plain:hover { + background: @nightButtonBg; + color: @nightWhiteColor; + border: 1px solid @nightWhiteColor; + + i { + color: @nightWhiteColor; + } + } + + .insert__dialog, + .about__dialog, + .reset__dialog, + .upload__dialog { + .el-dialog { + background-color: @nightBgColor; } - .cm-s-style-mirror .CodeMirror-matchingbracket { - color: @nightWhiteColor !important; - background: rgb(30, 30, 30) !important; + .el-dialog__body { + color: @nightWhiteColor; } - .cm-s-xq-light span.cm-variable-2, - .cm-s-style-mirror span.cm-tag { - color: @nightFontColor; + .el-dialog__title, + .el-form-item__label { + color: @nightWhiteColor; } - .cm-s-xq-light .CodeMirror-activeline-background { - background-color: transparent; + .el-tabs__item { + color: @nightActiveCodeMirrorColor; } - .cm-s-xq-light span.cm-string { - color: @nightLinkColor; + .el-tabs__nav-wrap::after { + background-color: @nightLineColor; } - .cm-s-xq-light span.cm-link { - color: @nightLinkTextColor; + .is-active { + color: @nightWhiteColor; } - .editor__header { - background-color: @nightHeaderColor; + .el-upload-dragger { + background-color: @nightButtonBg; } + } - .el-button { - color: @nightWhiteColor; - background-color: @nightCodeMirrorColor; - border: 1px solid transparent; - } + ::v-deep .el-icon-upload, + .el-icon-download, + .el-icon-refresh, + .el-icon-s-grid { + color: @nightWhiteColor; + } - .el-button.is-plain:focus, - .el-button.is-plain:hover { - background: @nightButtonBg; - color: @nightWhiteColor; - border: 1px solid @nightWhiteColor; - - i { - color: @nightWhiteColor; - } - } - - .insert__dialog, - .about__dialog, - .reset__dialog, - .upload__dialog { - .el-dialog { - background-color: @nightBgColor; - } - - .el-dialog__body { - color: @nightWhiteColor; - } - - .el-dialog__title, - .el-form-item__label { - color: @nightWhiteColor; - } - - .el-tabs__item { - color: @nightActiveCodeMirrorColor; - } - - .el-tabs__nav-wrap::after { - background-color: @nightLineColor; - } - - .is-active { - color: @nightWhiteColor; - } - - .el-upload-dragger { - background-color: @nightButtonBg; - } - } - - ::v-deep .el-icon-upload, - .el-icon-download, - .el-icon-refresh, - .el-icon-s-grid { - color: @nightWhiteColor; - } - - ::-webkit-scrollbar { - background-color: @nightCodeMirrorColor; - } -} \ No newline at end of file + ::-webkit-scrollbar { + background-color: @nightCodeMirrorColor; + } +} diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue index 0223161..067e2c2 100644 --- a/src/components/CodemirrorEditor/rightClickMenu.vue +++ b/src/components/CodemirrorEditor/rightClickMenu.vue @@ -38,23 +38,27 @@ export default { data() { return { menu: [ - [{ - text: "上传图片", - key: "insertPic", - }, - { - text: "插入表格", - key: "insertTable", - }, - { - text: "页面重置", - key: "pageReset", - }], - [{ - text: "下载MD文档", - key: "downLoad", - }] - ] + [ + { + text: "上传图片", + key: "insertPic", + }, + { + text: "插入表格", + key: "insertTable", + }, + { + text: "页面重置", + key: "pageReset", + }, + ], + [ + { + text: "下载MD文档", + key: "downLoad", + }, + ], + ], }; }, methods: { @@ -74,7 +78,7 @@ export default { position: absolute; border-radius: 4px; background-color: #ffffff; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); z-index: 9999; }