From a419a3c1d5ce9a3df2bf435452e6030433fadb93 Mon Sep 17 00:00:00 2001 From: fofolee Date: Wed, 19 Feb 2025 23:19:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E5=89=B2=E5=85=A8=E5=B1=80=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- quasar.config.js | 8 ++- src/css/app.css | 120 ------------------------------------------- src/css/markdown.css | 76 +++++++++++++++++++++++++++ src/css/monaco.css | 51 ++++++++++++++++++ src/css/qinput.css | 67 ++++++++++++++++++++++++ 5 files changed, 201 insertions(+), 121 deletions(-) create mode 100644 src/css/markdown.css create mode 100644 src/css/monaco.css create mode 100644 src/css/qinput.css diff --git a/quasar.config.js b/quasar.config.js index bd1efa6..5385d16 100644 --- a/quasar.config.js +++ b/quasar.config.js @@ -29,7 +29,13 @@ module.exports = configure(function (ctx) { boot: [], // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css - css: ["app.css", "composer.css"], + css: [ + "app.css", + "composer.css", + "markdown.css", + "monaco.css", + "qinput.css", + ], // https://github.com/quasarframework/quasar/tree/dev/extras extras: [ diff --git a/src/css/app.css b/src/css/app.css index 7bb4d1f..49256e2 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -22,58 +22,6 @@ body { color: var(--utools-font-color); } -/* Monaco Editor 调整行号栏样式 */ -.monaco-editor .margin { - width: 40px !important; -} - -.monaco-editor .line-numbers { - text-align: center !important; - width: 40px !important; - padding-right: 5px !important; - left: 0 !important; -} - -/* Monaco Editor 当前行高亮样式 */ -.monaco-editor .current-line { - border: none !important; - background-color: transparent !important; -} - -.monaco-editor .line-numbers { - color: rgba(0, 0, 0, 0.5) !important; -} - -.body--dark .monaco-editor .line-numbers { - color: rgba(255, 255, 255, 0.5) !important; -} - -.monaco-editor .current-line~.line-numbers { - color: var(--q-primary) !important; -} - -.monaco-editor .margin-view-overlays .current-line { - background-color: transparent !important; -} - -/* Monaco Editor 滚动条样式 */ -.monaco-editor .scrollbar { - width: 5px !important; - height: 5px !important; -} - -.monaco-editor .scrollbar.vertical .slider { - width: 5px !important; - border-radius: 2px !important; - background: rgba(0, 0, 0, 0.2) !important; -} - -.monaco-editor .scrollbar.horizontal .slider { - height: 5px !important; - border-radius: 2px !important; - background: rgba(0, 0, 0, 0.2) !important; -} - /* 标签样式 */ .q-chip { background: #e3e3e39a; @@ -368,71 +316,3 @@ body.body--dark.glass-effect-menu .q-menu { transform: rotate(10deg); } } - -/* q-field--filled 布局更加紧凑 */ -/* 输入框高度及字体 */ -.q-field--filled:not(.q-textarea) .q-field__control, -.q-field--filled:not(.q-textarea) .q-field__control>*, -.q-field--filled:not(.q-field--labeled):not(.q-textarea) .q-field__native { - max-height: 36px !important; - min-height: 36px !important; -} - -.q-field--filled .q-field__control, -.q-field--filled .q-field__control>*, -.q-field--filled .q-field__native { - border-radius: 5px; - font-size: 12px; -} - -.q-field--filled.q-select--with-chips .q-field__control .q-chip { - margin: 0 4px; -} - -/* 输入框图标大小 */ -.q-field--filled .q-field__control .q-icon { - font-size: 18px; -} - -/* 输入框标签字体大小，占位时的位置 */ -.q-field--filled .q-field__label { - font-size: 11px; - top: 11px; -} - -/* 输入框标签悬浮的位置 */ -.q-field--filled.q-field--dense.q-field--float .q-field__label { - transform: translateY(-50%) scale(0.75); -} - -/* 去除filled输入框边框 */ -.q-field--filled .q-field__control:before { - border: none; -} - -/* 去除filled输入框下划线 */ -.q-field--filled .q-field__control:after { - height: 0; - border-bottom: none; -} - -/* 输入框背景颜色及内边距 */ -.q-field--filled .q-field__control { - background: rgba(0, 0, 0, 0.03); - padding: 0 8px; -} - -/* 输入框聚焦时的背景颜色 */ -.q-field--filled.q-field--highlighted .q-field__control { - background: rgba(0, 0, 0, 0.03); -} - -/* 暗黑模式下的输入框背景颜色 */ -.body--dark .q-field--filled .q-field__control { - background: rgba(255, 255, 255, 0.04); -} - -/* 暗黑模式下输入框聚焦时的背景颜色 */ -.body--dark .q-field--filled.q-field--highlighted .q-field__control { - background: rgba(255, 255, 255, 0.08); -} diff --git a/src/css/markdown.css b/src/css/markdown.css new file mode 100644 index 0000000..34af6b9 --- /dev/null +++ b/src/css/markdown.css @@ -0,0 +1,76 @@ +/* Markdown 样式支持 */ +.markdown p { + margin: 0; +} + +.markdown pre { + background-color: #f6f8fa; + padding: 1em; + border-radius: 6px; + overflow-x: auto; + margin: 2px 0; +} + +.markdown code { + font-family: monospace; + padding: 0 4px; + background-color: #f6f8fa; + border-radius: 3px; +} + +.markdown pre code { + padding: 0; + background-color: transparent; +} + +.markdown ul, +.markdown ol { + margin: 2px 0; + padding-left: 1.5em; +} + +.markdown blockquote { + color: #8b8b8b; + display: block; + border-left: 4px solid #8b8b8b; + padding-left: 10px; +} + +.markdown h1, +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + margin: 2px 0; + font-weight: 600; +} + +.markdown h1 { + font-size: 18px; +} + +.markdown h2 { + font-size: 16px; +} + +.markdown h3 { + font-size: 15px; +} + +.markdown h4, +.markdown h5, +.markdown h6 { + font-size: 14px; +} + +/* 暗色模式适配 */ +.body--dark .markdown pre, +.body--dark .markdown code { + background-color: #1a1a1a; +} + +.body--dark .markdown blockquote { + border-left-color: #444; + color: #999; +} diff --git a/src/css/monaco.css b/src/css/monaco.css new file mode 100644 index 0000000..3363757 --- /dev/null +++ b/src/css/monaco.css @@ -0,0 +1,51 @@ +/* Monaco Editor 调整行号栏样式 */ +.monaco-editor .margin { + width: 40px !important; +} + +.monaco-editor .line-numbers { + text-align: center !important; + width: 40px !important; + padding-right: 5px !important; + left: 0 !important; +} + +/* Monaco Editor 当前行高亮样式 */ +.monaco-editor .current-line { + border: none !important; + background-color: transparent !important; +} + +.monaco-editor .line-numbers { + color: rgba(0, 0, 0, 0.5) !important; +} + +.body--dark .monaco-editor .line-numbers { + color: rgba(255, 255, 255, 0.5) !important; +} + +.monaco-editor .current-line~.line-numbers { + color: var(--q-primary) !important; +} + +.monaco-editor .margin-view-overlays .current-line { + background-color: transparent !important; +} + +/* Monaco Editor 滚动条样式 */ +.monaco-editor .scrollbar { + width: 5px !important; + height: 5px !important; +} + +.monaco-editor .scrollbar.vertical .slider { + width: 5px !important; + border-radius: 2px !important; + background: rgba(0, 0, 0, 0.2) !important; +} + +.monaco-editor .scrollbar.horizontal .slider { + height: 5px !important; + border-radius: 2px !important; + background: rgba(0, 0, 0, 0.2) !important; +} diff --git a/src/css/qinput.css b/src/css/qinput.css new file mode 100644 index 0000000..b461523 --- /dev/null +++ b/src/css/qinput.css @@ -0,0 +1,67 @@ +/* q-field--filled 布局更加紧凑 */ +/* 输入框高度及字体 */ +.q-field--filled:not(.q-textarea) .q-field__control, +.q-field--filled:not(.q-textarea) .q-field__control>*, +.q-field--filled:not(.q-field--labeled):not(.q-textarea) .q-field__native { + max-height: 36px !important; + min-height: 36px !important; +} + +.q-field--filled .q-field__control, +.q-field--filled .q-field__control>*, +.q-field--filled .q-field__native { + border-radius: 5px; + font-size: 12px; +} + +.q-field--filled.q-select--with-chips .q-field__control .q-chip { + margin: 0 4px; +} + +/* 输入框图标大小 */ +.q-field--filled .q-field__control .q-icon { + font-size: 18px; +} + +/* 输入框标签字体大小，占位时的位置 */ +.q-field--filled .q-field__label { + font-size: 11px; + top: 11px; +} + +/* 输入框标签悬浮的位置 */ +.q-field--filled.q-field--dense.q-field--float .q-field__label { + transform: translateY(-50%) scale(0.75); +} + +/* 去除filled输入框边框 */ +.q-field--filled .q-field__control:before { + border: none; +} + +/* 去除filled输入框下划线 */ +.q-field--filled .q-field__control:after { + height: 0; + border-bottom: none; +} + +/* 输入框背景颜色及内边距 */ +.q-field--filled .q-field__control { + background: rgba(0, 0, 0, 0.03); + padding: 0 8px; +} + +/* 输入框聚焦时的背景颜色 */ +.q-field--filled.q-field--highlighted .q-field__control { + background: rgba(0, 0, 0, 0.03); +} + +/* 暗黑模式下的输入框背景颜色 */ +.body--dark .q-field--filled .q-field__control { + background: rgba(255, 255, 255, 0.04); +} + +/* 暗黑模式下输入框聚焦时的背景颜色 */ +.body--dark .q-field--filled.q-field--highlighted .q-field__control { + background: rgba(255, 255, 255, 0.08); +}