mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
JimQing
GitHub
commit
3eb06bf852
@ -6,67 +6,84 @@
|
||||
@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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.insert__dialog,
|
||||
.about__dialog,
|
||||
.reset__dialog,
|
||||
@ -74,29 +91,40 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -50,4 +50,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
/deep/ .el-dialog {
|
||||
min-width: 420px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -40,6 +40,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .el-dialog {
|
||||
min-width: 440px;
|
||||
}
|
||||
.reset__dialog {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -5,14 +5,16 @@
|
||||
class="menu"
|
||||
:style="`left: ${left}px;top: ${top}px;`"
|
||||
>
|
||||
<div class="menu__group" v-for="(menuItem, index) in menu" :key="index">
|
||||
<li
|
||||
v-for="item of list"
|
||||
v-for="item of menuItem"
|
||||
:key="item.key"
|
||||
class="menu_item"
|
||||
@mousedown="onMouseDown(item.key)"
|
||||
>
|
||||
<span>{{ item.text }}</span>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
@ -35,7 +37,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
menu: [
|
||||
[
|
||||
{
|
||||
text: "上传图片",
|
||||
key: "insertPic",
|
||||
@ -48,11 +51,14 @@ export default {
|
||||
text: "页面重置",
|
||||
key: "pageReset",
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
text: "下载MD文档",
|
||||
key: "downLoad",
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -70,32 +76,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, 0.12), 0 2px 4px 0 rgba(0, 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 +109,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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user