style: 调整代码编辑器滚动条样式,适配深色主题

main
wu.jian2 1 year ago
parent 9a14da2ca4
commit d16b3be21c

@ -339,7 +339,7 @@ export default {
} }
}) })
}, },
async save (pageJump = false) { async save (pageJump = false) {
this.loading = true this.loading = true
let dataUrl = '' let dataUrl = ''
const node = document.querySelector('.remote-preview-inner-wrap') const node = document.querySelector('.remote-preview-inner-wrap')
@ -435,7 +435,7 @@ export default {
background: var(--bs-background-2); background: var(--bs-background-2);
overflow: hidden; overflow: hidden;
> * { >* {
box-sizing: border-box; box-sizing: border-box;
} }
@ -512,11 +512,13 @@ export default {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.code-tab-btn{
.code-tab-btn {
// width: 90px; // width: 90px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
} }
.code-tab { .code-tab {
font-size: 14px; font-size: 14px;
align-items: center; align-items: center;
@ -558,12 +560,14 @@ export default {
height: 100%; height: 100%;
background: var(--bs-background-1); background: var(--bs-background-1);
position: relative; position: relative;
.code-tab-header{
.code-tab-header {
height: 40px; height: 40px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: var(--bs-background-2); background-color: var(--bs-background-2);
.code-tab { .code-tab {
font-size: 14px; font-size: 14px;
align-items: center; align-items: center;
@ -582,16 +586,60 @@ export default {
} }
</style> </style>
<style> <style>
.cm-s-material-darker.CodeMirror, .cm-s-material-darker.CodeMirror,
.cm-s-material-darker .CodeMirror-gutters .cm-s-material-darker .CodeMirror-gutters {
{ background: var(--bs-background-1) !important;
background: var(--bs-background-1) !important; }
}
.CodeMirror-scroll { .CodeMirror-scroll {
background-color: var(--bs-background-1) !important; background-color: var(--bs-background-1) !important;
} }
.CodeMirror-gutters {
border-right: 1px solid var(--bs-background-1) !important; .CodeMirror-gutters {
background-color: var(--bs-background-1) !important; border-right: 1px solid var(--bs-background-1) !important;
} background-color: var(--bs-background-1) !important;
}
.CodeMirror-vscrollbar {
right: 0;
top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
/* Webkit浏览器滚动条样式 */
.CodeMirror-vscrollbar::-webkit-scrollbar {
width: 6px;
/* 滚动条宽度 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
background-color: #444851;
/* 滚动条滑块颜色 */
border-radius: 4px;
/* 滚动条滑块圆角 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
background-color: #444851;
/* 滚动条滑块悬停时颜色 */
}
/* Firefox和新版Chrome浏览器滚动条样式 */
.CodeMirror-vscrollbar {
scrollbar-width: thin;
/* 滚动条宽度 */
scrollbar-color: #444851 #444851;
/* 滚动条颜色 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
background-color: #444851;
/* 滚动条滑块颜色 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
background-color: #444851;
/* 滚动条滑块悬停时颜色 */
}
</style> </style>

@ -1432,3 +1432,5 @@ export default {
width: 100% !important; width: 100% !important;
} }
</style> </style>
<style></style>

@ -1166,3 +1166,48 @@ return ElasticsearchDsService.query(host, port, username, password, path, dsl);
width: 100% !important; width: 100% !important;
} }
</style> </style>
<style>
.CodeMirror-vscrollbar {
right: 0;
top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
/* Webkit浏览器滚动条样式 */
.CodeMirror-vscrollbar::-webkit-scrollbar {
width: 6px;
/* 滚动条宽度 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
background-color: #444851;
/* 滚动条滑块颜色 */
border-radius: 4px;
/* 滚动条滑块圆角 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
background-color: #444851;
/* 滚动条滑块悬停时颜色 */
}
/* Firefox和新版Chrome浏览器滚动条样式 */
.CodeMirror-vscrollbar {
scrollbar-width: thin;
/* 滚动条宽度 */
scrollbar-color: #444851 #444851;
/* 滚动条颜色 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
background-color: #444851;
/* 滚动条滑块颜色 */
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover {
background-color: #444851;
/* 滚动条滑块悬停时颜色 */
}
</style>

Loading…
Cancel
Save