amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +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;
@nightLinkColor: #8e9eb9;
@nightLinkTextColor: #84868b;
@nightWhiteColor: #ffffff;
@nightWhiteColor: #f0f0f0;
@nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #84868b;
@nightLineColor: #84868b;
.container_night {
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);
.el-main {
background-color: @nightBgColor;
}
.preview-wrapper {
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
.CodeMirror {
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 {
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 {
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;
.cm-s-style-mirror .CodeMirror-matchingbracket {
color: @nightWhiteColor !important;
background: rgb(30, 30, 30) !important;
}
}
.insert__dialog,
.about__dialog,
.reset__dialog,
.upload__dialog {
.el-dialog {
background-color: @nightBgColor;
.cm-s-xq-light span.cm-variable-2,
.cm-s-style-mirror span.cm-tag {
color: @nightFontColor;
}
.el-dialog__body {
color: @nightWhiteColor;
.cm-s-xq-light .CodeMirror-activeline-background {
background-color: transparent;
}
.el-dialog__title,
.el-form-item__label {
color: @nightWhiteColor;
.cm-s-xq-light span.cm-string {
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-icon-download,
.el-icon-refresh,
.el-icon-s-grid {
color: @nightWhiteColor;
}
::-webkit-scrollbar {
background-color: @nightCodeMirrorColor;
}
}
.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;
}
}

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

@ -50,4 +50,8 @@ export default {
};
</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>
<style lang="less" scoped>
/deep/ .el-dialog {
width: 55%;
min-height: 375px;
min-width: 440px;
}
.tb-options {
margin-bottom: 20px;
}

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

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

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

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

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

@ -5,7 +5,7 @@
:visible="value"
@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-select
v-model="imgHost"
@ -42,7 +42,6 @@
<el-tab-pane class="github-panel" label="Gitee 图床" name="gitee">
<el-form
class="setting-form"
ref="form"
:model="formGitee"
label-position="right"
label-width="140px"
@ -85,7 +84,6 @@
<el-tab-pane class="github-panel" label="GitHub 图床" name="github">
<el-form
class="setting-form"
ref="form"
:model="formGitHub"
label-position="right"
label-width="140px"
@ -127,7 +125,6 @@
<el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS">
<el-form
class="setting-form"
ref="form"
:model="formAliOSS"
label-position="right"
label-width="140px"
@ -187,7 +184,6 @@
<el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS">
<el-form
class="setting-form"
ref="form"
:model="formTxCOS"
label-position="right"
label-width="140px"
@ -247,7 +243,6 @@
<el-tab-pane class="github-panel" label="七牛云 Kodo" name="qiniu">
<el-form
class="setting-form"
ref="form"
:model="formQiniu"
label-position="right"
label-width="140px"
@ -593,10 +588,19 @@ export default {
<style lang="less" scoped>
/deep/ .el-dialog {
width: 40%;
width: 55%;
min-height: 615px;
min-width: 640px;
}
/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 {
padding-bottom: 50px;