mirror of
https://github.com/doocs/md.git
synced 2024-11-28 13:36:32 +08:00
feature: dialog-night
This commit is contained in:
JimQing
parent
8a3f855282
commit
1d822fb6ef
@ -6,11 +6,14 @@
|
||||
@nightFontColor: gray;
|
||||
@nightLinkColor: #8e9eb9;
|
||||
@nightLinkTextColor: #84868b;
|
||||
@nightBorderColor: #ffffff;
|
||||
@nightWhiteColor: #ffffff;
|
||||
@nightButtonBg: #1e1e1e;
|
||||
@nightButtonHoverColor: #84868b;
|
||||
.container_night {
|
||||
background-color: @nightBgColor;
|
||||
.el-main {
|
||||
background-color: @nightBgColor;
|
||||
}
|
||||
.CodeMirror {
|
||||
caret-color: @nightFontColor;
|
||||
color: @nightFontColor;
|
||||
@ -25,7 +28,11 @@
|
||||
background-color: @nightCodeMirrorColor;
|
||||
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;
|
||||
}
|
||||
.cm-s-xq-light .CodeMirror-activeline-background {
|
||||
@ -41,20 +48,31 @@
|
||||
background-color: @nightHeaderColor;
|
||||
}
|
||||
.el-button {
|
||||
color: @nightBorderColor;
|
||||
color: @nightWhiteColor;
|
||||
background-color: @nightCodeMirrorColor;
|
||||
border: 1px solid #eeeeee;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.el-button.is-plain:focus, .el-button.is-plain:hover {
|
||||
background: @nightButtonBg;
|
||||
color: @nightButtonHoverColor;
|
||||
border: 1px solid @nightButtonHoverColor;
|
||||
color: @nightWhiteColor;
|
||||
border: 1px solid @nightWhiteColor;
|
||||
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 {
|
||||
color: #ffffff;
|
||||
color: @nightWhiteColor;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
background-color: @nightCodeMirrorColor;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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;">
|
||||
<h3>一款高度简洁的微信 Markdown 编辑器</h3>
|
||||
</div>
|
||||
|
||||
@ -26,24 +26,24 @@
|
||||
<el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
|
||||
<el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
|
||||
:label="font.label" :value="font.value">
|
||||
<span class="select-item-left">{{ font.label }}</span>
|
||||
<span class="select-item-right">Abc</span>
|
||||
<span class="select-item-left">{{ font.label }}</span>
|
||||
<span class="select-item-right">Abc</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
|
||||
<el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
|
||||
<span class="select-item-left">{{ size.label }}</span>
|
||||
<span class="select-item-right">{{ size.desc }}</span>
|
||||
<span class="select-item-left">{{ size.label }}</span>
|
||||
<span class="select-item-right">{{ size.desc }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
|
||||
<el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
|
||||
<span class="select-item-left">{{ color.label }}</span>
|
||||
<span class="select-item-right">{{ color.hex }}</span>
|
||||
<span class="select-item-left">{{ color.label }}</span>
|
||||
<span class="select-item-right">{{ color.hex }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-dialog title="插入表格" :visible="dialogFormVisible" @close="$emit('close')">
|
||||
<el-form :model="config.form">
|
||||
<el-dialog title="插入表格" class="insert__dialog" :visible="dialogFormVisible" @close="$emit('close')">
|
||||
<el-form class="insert__form" :model="config.form">
|
||||
<el-form-item label="行数(表头不计入行数)">
|
||||
<el-input v-model="config.form.rows"></el-input>
|
||||
</el-form-item>
|
||||
@ -9,8 +9,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="success" plain @click="$emit('close')">取 消</el-button>
|
||||
<el-button type="success" @click="insertTable">确 定</el-button>
|
||||
<el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
|
||||
<el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@ -31,7 +31,11 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
btnType() {
|
||||
return !this.nightMode ? 'success' : 'default';
|
||||
},
|
||||
...mapState({
|
||||
nightMode: state=> state.nightMode,
|
||||
editor: state=> state.editor
|
||||
})
|
||||
},
|
||||
|
||||
@ -250,6 +250,11 @@ export default {
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-main {
|
||||
transition: all .3s;
|
||||
padding: 0;
|
||||
margin: 20px;
|
||||
}
|
||||
.container {
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user