amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-25 03:18:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feature: dialog-night

Browse Source
This commit is contained in:
JimQing 2020-05-17 18:16:26 +08:00
parent 8a3f855282
commit 1d822fb6ef
5 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/assets/less/theme.less
View File

@ -6,11 +6,14 @@
@nightFontColor: gray; @nightFontColor: gray;
@nightLinkColor: #8e9eb9; @nightLinkColor: #8e9eb9;
@nightLinkTextColor: #84868b; @nightLinkTextColor: #84868b;
@nightBorderColor: #ffffff; @nightWhiteColor: #ffffff;
@nightButtonBg: #1e1e1e; @nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #84868b; @nightButtonHoverColor: #84868b;
.container_night { .container_night {
background-color: @nightBgColor; background-color: @nightBgColor;
.el-main {
background-color: @nightBgColor;
}
.CodeMirror { .CodeMirror {
caret-color: @nightFontColor; caret-color: @nightFontColor;
color: @nightFontColor; color: @nightFontColor;
@ -25,7 +28,11 @@
background-color: @nightCodeMirrorColor; background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102); box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
} }
.cm-s-xq-light span.cm-variable-2 { .cm-s-style-mirror .CodeMirror-matchingbracket {
color: @nightWhiteColor!important;
background: rgb(30, 30, 30)!important;
}
.cm-s-xq-light span.cm-variable-2, .cm-s-style-mirror span.cm-tag {
color: @nightFontColor; color: @nightFontColor;
} }
.cm-s-xq-light .CodeMirror-activeline-background { .cm-s-xq-light .CodeMirror-activeline-background {
@ -41,20 +48,31 @@
background-color: @nightHeaderColor; background-color: @nightHeaderColor;
} }
.el-button { .el-button {
color: @nightBorderColor; color: @nightWhiteColor;
background-color: @nightCodeMirrorColor; background-color: @nightCodeMirrorColor;
border: 1px solid #eeeeee; border: 1px solid transparent;
} }
.el-button.is-plain:focus, .el-button.is-plain:hover { .el-button.is-plain:focus, .el-button.is-plain:hover {
background: @nightButtonBg; background: @nightButtonBg;
color: @nightButtonHoverColor; color: @nightWhiteColor;
border: 1px solid @nightButtonHoverColor; border: 1px solid @nightWhiteColor;
i { i {
color: @nightButtonHoverColor; color: @nightWhiteColor;
}
}
.insert__dialog, .about__dialog {
.el-dialog {
background-color: @nightBgColor;
}
.el-dialog__body {
color: @nightWhiteColor;
}
.el-dialog__title, .el-form-item__label {
color: @nightWhiteColor;
} }
} }
i { i {
color: #ffffff; color: @nightWhiteColor;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
background-color: @nightCodeMirrorColor; background-color: @nightCodeMirrorColor;

2
src/components/codeMirror/aboutDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog title="关于" :visible="aboutDialogVisible" @close="$emit('close')" width="30%" center> <el-dialog title="关于" class="about__dialog" :visible="aboutDialogVisible" @close="$emit('close')" width="30%" center>
<div style="text-align: center;"> <div style="text-align: center;">
<h3>一款高度简洁的微信 Markdown 编辑器</h3> <h3>一款高度简洁的微信 Markdown 编辑器</h3>
</div> </div>

12
src/components/codeMirror/insertForm.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-dialog title="插入表格" :visible="dialogFormVisible" @close="$emit('close')"> <el-dialog title="插入表格" class="insert__dialog" :visible="dialogFormVisible" @close="$emit('close')">
<el-form :model="config.form"> <el-form class="insert__form" :model="config.form">
<el-form-item label="行数(表头不计入行数)"> <el-form-item label="行数(表头不计入行数)">
<el-input v-model="config.form.rows"></el-input> <el-input v-model="config.form.rows"></el-input>
</el-form-item> </el-form-item>
@ -9,8 +9,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="success" plain @click="$emit('close')">取 消</el-button> <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
<el-button type="success" @click="insertTable">确 定</el-button> <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
@ -31,7 +31,11 @@ export default {
} }
}, },
computed: { computed: {
btnType() {
return !this.nightMode ? 'success' : 'default';
},
...mapState({ ...mapState({
nightMode: state=> state.nightMode,
editor: state=> state.editor editor: state=> state.editor
}) })
}, },

5
src/view/CodemirrorEditor.vue
View File

@ -250,6 +250,11 @@ export default {
padding-top: 12px; padding-top: 12px;
overflow: hidden; overflow: hidden;
} }
.el-main {
transition: all .3s;
padding: 0;
margin: 20px;
}
.container { .container {
transition: all .3s; transition: all .3s;
} }