You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@answer.apache.org by sh...@apache.org on 2024/01/23 09:16:16 UTC
(incubator-answer) 01/03: fix: dark mode codemirrow selected style
This is an automated email from the ASF dual-hosted git repository.
shuai pushed a commit to branch feat/1.2.5/ui
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 409eb60b87eb0f106c90d1d8d2920cd917082ede
Author: shuai <li...@sifou.com>
AuthorDate: Tue Jan 23 15:49:34 2024 +0800
fix: dark mode codemirrow selected style
---
ui/src/common/color.scss | 14 ++++++++++++--
ui/src/components/Editor/index.scss | 6 +++---
2 files changed, 15 insertions(+), 5 deletions(-)
diff --git a/ui/src/common/color.scss b/ui/src/common/color.scss
index a93752d1..798772f8 100644
--- a/ui/src/common/color.scss
+++ b/ui/src/common/color.scss
@@ -15,6 +15,9 @@
--an-answer-item-border-top: rgba(0, 0, 0, .125);
--an-answer-inbox-nav-border-top: var(--bs-border-color);
--an-comment-item-border-bottom: var(--bs-colors-gray-200);
+ --an-editor-toolbar-hover: #f8f9fa;
+ --ans-editor-toolbar-focus: #dae0e5;
+ --an-editor-placeholder-color: #6c757d;
}
@@ -33,13 +36,16 @@
--an-answer-item-border-top: var(--bs-border-color);
--an-answer-inbox-nav-border-top: var(--bs-border-color);
--an-comment-item-border-bottom: var(--bs-border-color);
+ --an-editor-toolbar-hover: var(--bs-tertiary-bg);
+ --ans-editor-toolbar-focus: var(--bs-tertiary-bg);
+ --an-editor-placeholder-color: var(--bs-body-color);
}
[data-bs-theme="dark"] {
.link-dark {
color: rgba(var(--bs-emphasis-color-rgb),0.8)!important;
}
- /** editor **/
+ /** CodeMirror **/
.CodeMirror {
background: var(--bs-body-bg);
@@ -51,6 +57,9 @@
.cm-header, .cm-link, .cm-url {
color: var(--bs-body-color);
}
+ div.CodeMirror-selected { background: rgba(127, 190, 244, 0.4); }
+ .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(84,174,255,0.4); }
+ .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: rgba(84,174,255,0.4); }
.bg-light {
background-color: rgba(0, 0, 0, 0.5) !important;
@@ -59,6 +68,7 @@
color: #000 !important;
background-color: RGBA(255, 255, 255, var(--bs-bg-opacity, 1)) !important;
}
+ /** side nav **/
#sideNav {
.nav-link:hover, .nav-link.active {
color: var(--bs-body-color) !important;
@@ -66,6 +76,7 @@
}
}
+ /** tag **/
.badge-tag {
background: rgba($blue-900, 0.5);
color: $blue-300;
@@ -74,7 +85,6 @@
background: $blue-900;
}
}
-
.badge-tag-required {
background: $gray-800;
color:$gray-300;
diff --git a/ui/src/components/Editor/index.scss b/ui/src/components/Editor/index.scss
index 5b940e19..67b5f454 100644
--- a/ui/src/components/Editor/index.scss
+++ b/ui/src/components/Editor/index.scss
@@ -66,10 +66,10 @@
border-radius: 3px;
&:hover {
- background-color: #f8f9fa;
+ background-color: var(--an-editor-toolbar-hover);
}
&:focus {
- background-color: #dae0e5;
+ background-color: var(--ans-editor-toolbar-focus);
}
&.icon-heading {
background-position: 0px -144px;
@@ -204,7 +204,7 @@
padding: 16px 0;
}
.CodeMirror-placeholder {
- color: #6c757d;
+ color: var(--an-editor-placeholder-color);
}
}
}