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

feat: style fix

Browse Source
This commit is contained in:
jimqing 2020-11-22 20:33:04 +08:00
parent 20e0c4ffd6
commit a70a6374dc
6 changed files with 166 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,98 +6,126 @@
@nightFontColor: gray; @nightFontColor: gray;
@nightLinkColor: #8e9eb9; @nightLinkColor: #8e9eb9;
@nightLinkTextColor: #84868b; @nightLinkTextColor: #84868b;
@nightWhiteColor: #ffffff; @nightWhiteColor: #f0f0f0;
@nightButtonBg: #1e1e1e; @nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #84868b; @nightButtonHoverColor: #84868b;
@nightLineColor: #84868b;
.container_night { .container_night {
background-color: @nightBgColor;
.el-main {
background-color: @nightBgColor; background-color: @nightBgColor;
}
.CodeMirror { .el-main {
caret-color: @nightFontColor; background-color: @nightBgColor;
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);
} }
.preview-wrapper {
background-color: @nightCodeMirrorColor; .CodeMirror {
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102); caret-color: @nightFontColor;
color: @nightFontColor;
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
} }
.code-snippet__fix {
background-color: rgb(238, 238, 238); .output_night {
.preview {
background-color: @nightPreviewColor;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
}
.preview-wrapper {
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
}
.code-snippet__fix {
background-color: rgb(238, 238, 238);
}
} }
}
.cm-s-style-mirror .CodeMirror-matchingbracket { .cm-s-style-mirror .CodeMirror-matchingbracket {
color: @nightWhiteColor!important; color: @nightWhiteColor !important;
background: rgb(30, 30, 30) !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 {
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, .cm-s-xq-light span.cm-variable-2,
.about__dialog, .cm-s-style-mirror span.cm-tag {
.reset__dialog, color: @nightFontColor;
.upload__dialog {
.el-dialog {
background-color: @nightBgColor;
} }
.el-dialog__body {
color: @nightWhiteColor; .cm-s-xq-light .CodeMirror-activeline-background {
background-color: transparent;
} }
.el-dialog__title,
.el-form-item__label { .cm-s-xq-light span.cm-string {
color: @nightWhiteColor; color: @nightLinkColor;
} }
.el-tabs__item {
color: @nightActiveCodeMirrorColor; .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-button.is-plain:focus,
.el-icon-download, .el-button.is-plain:hover {
.el-icon-refresh, background: @nightButtonBg;
.el-icon-s-grid { color: @nightWhiteColor;
color: @nightWhiteColor; border: 1px solid @nightWhiteColor;
}
::-webkit-scrollbar { i {
background-color: @nightCodeMirrorColor; 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;
}
}

6
src/components/CodemirrorEditor/aboutDialog.vue
View File

@ -50,4 +50,8 @@ export default {
}; };
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
/deep/ .el-dialog {
min-width: 420px;
}
</style>

5
src/components/CodemirrorEditor/insertForm.vue
View File

@ -105,6 +105,11 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/ .el-dialog {
width: 55%;
min-height: 375px;
min-width: 440px;
}
.tb-options { .tb-options {
margin-bottom: 20px; margin-bottom: 20px;
} }

3
src/components/CodemirrorEditor/resetDialog.vue
View File

@ -40,6 +40,9 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/ .el-dialog {
min-width: 440px;
}
.reset__dialog { .reset__dialog {
text-align: center; text-align: center;
} }

57
src/components/CodemirrorEditor/rightClickMenu.vue
View File

@ -5,14 +5,16 @@
class="menu" class="menu"
:style="`left: ${left}px;top: ${top}px;`" :style="`left: ${left}px;top: ${top}px;`"
> >
<li <div class="menu__group" v-for="(menuItem, index) in menu" :key="index">
v-for="item of list" <li
:key="item.key" v-for="item of menuItem"
class="menu_item" :key="item.key"
@mousedown="onMouseDown(item.key)" class="menu_item"
> @mousedown="onMouseDown(item.key)"
<span>{{ item.text }}</span> >
</li> <span>{{ item.text }}</span>
</li>
</div>
</ul> </ul>
</template> </template>
@ -35,8 +37,8 @@ export default {
}, },
data() { data() {
return { return {
list: [ menu: [
{ [{
text: "上传图片", text: "上传图片",
key: "insertPic", key: "insertPic",
}, },
@ -47,12 +49,12 @@ export default {
{ {
text: "页面重置", text: "页面重置",
key: "pageReset", key: "pageReset",
}, }],
{ [{
text: "下载MD文档", text: "下载MD文档",
key: "downLoad", key: "downLoad",
}, }]
], ]
}; };
}, },
methods: { methods: {
@ -70,32 +72,30 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.menu { .menu {
position: absolute; position: absolute;
padding: 6px 0;
border-radius: 4px; border-radius: 4px;
border: 1px solid #aaaaaa;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
z-index: 9999; z-index: 9999;
} }
.menu_item { .menu_item {
margin-top: 10px; margin-top: 10px;
min-width: 125px; min-width: 200px;
font-size: 14px; font-size: 12px;
line-height: 20px; line-height: 20px;
color: #303133; color: #333333;
cursor: pointer; cursor: pointer;
&:first-of-type { &:first-of-type {
margin-top: 0; margin-top: 0;
} }
&:hover { &:hover {
color: white; background: #f0f0f0;
background: rgb(139, 146, 148);
} }
span, span,
.btn-upload { .btn-upload {
text-align: center;
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
padding-left: 24px;
width: 100%; width: 100%;
} }
.btn-upload { .btn-upload {
@ -105,17 +105,24 @@ export default {
background: transparent; background: transparent;
} }
.btn-upload:hover { .btn-upload:hover {
color: white; background: #aaaaaa;
background: rgb(139, 146, 148);
} }
::v-deep .el-upload { ::v-deep .el-upload {
width: 100%; width: 100%;
} }
} }
.menu__group {
padding-top: 6px;
padding-bottom: 6px;
border-bottom: 1px solid #eeeeee;
&:last-of-type {
border-bottom: none;
}
}
li:hover { li:hover {
background-color: #1790ff; background-color: #1790ff;
color: white;
} }
li { li {

20
src/components/CodemirrorEditor/uploadImgDialog.vue
View File

@ -5,7 +5,7 @@
:visible="value" :visible="value"
@close="$emit('close')" @close="$emit('close')"
> >
<el-tabs type="card" :value="'upload'"> <el-tabs type="activeName" :value="'upload'">
<el-tab-pane class="upload-panel" label="选择上传" name="upload"> <el-tab-pane class="upload-panel" label="选择上传" name="upload">
<el-select <el-select
v-model="imgHost" v-model="imgHost"
@ -42,7 +42,6 @@
<el-tab-pane class="github-panel" label="Gitee 图床" name="gitee"> <el-tab-pane class="github-panel" label="Gitee 图床" name="gitee">
<el-form <el-form
class="setting-form" class="setting-form"
ref="form"
:model="formGitee" :model="formGitee"
label-position="right" label-position="right"
label-width="140px" label-width="140px"
@ -85,7 +84,6 @@
<el-tab-pane class="github-panel" label="GitHub 图床" name="github"> <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
<el-form <el-form
class="setting-form" class="setting-form"
ref="form"
:model="formGitHub" :model="formGitHub"
label-position="right" label-position="right"
label-width="140px" label-width="140px"
@ -127,7 +125,6 @@
<el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS"> <el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS">
<el-form <el-form
class="setting-form" class="setting-form"
ref="form"
:model="formAliOSS" :model="formAliOSS"
label-position="right" label-position="right"
label-width="140px" label-width="140px"
@ -187,7 +184,6 @@
<el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS"> <el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS">
<el-form <el-form
class="setting-form" class="setting-form"
ref="form"
:model="formTxCOS" :model="formTxCOS"
label-position="right" label-position="right"
label-width="140px" label-width="140px"
@ -247,7 +243,6 @@
<el-tab-pane class="github-panel" label="七牛云 Kodo" name="qiniu"> <el-tab-pane class="github-panel" label="七牛云 Kodo" name="qiniu">
<el-form <el-form
class="setting-form" class="setting-form"
ref="form"
:model="formQiniu" :model="formQiniu"
label-position="right" label-position="right"
label-width="140px" label-width="140px"
@ -593,10 +588,19 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
/deep/ .el-dialog { /deep/ .el-dialog {
width: 40%; width: 55%;
min-height: 615px;
min-width: 640px;
} }
/deep/ .el-upload-dragger { /deep/ .el-upload-dragger {
width: 335px; display: flex;
flex-flow: column;
justify-content: center;
width: 500px;
height: 360px;
.el-icon-upload {
margin-top: 0;
}
} }
/deep/ .el-dialog__body { /deep/ .el-dialog__body {
padding-bottom: 50px; padding-bottom: 50px;