Hugging Face's logo

Spaces:
project-baize
/
chat-with-baize

App Files Community
10
project-baize commited on
Commit
d4541de
•
1 Parent(s): b56a209

Fix dark mode

Browse files
Files changed (1) hide show
  1. assets/custom.css +14 -14
assets/custom.css CHANGED
@@ -33,7 +33,7 @@ ol:not(.options), ul:not(.options) {
33
  padding-inline-start: 2em !important;
34
  }
35
 
36
- /* 亮色 */
37
  @media (prefers-color-scheme: light) {
38
  #chuanhu_chatbot {
39
  background-color: var(--chatbot-color-light) !important;
@@ -45,27 +45,27 @@ ol:not(.options), ul:not(.options) {
45
  background-color: #95EC69 !important;
46
  }
47
  }
48
- /* 暗色 */
49
  @media (prefers-color-scheme: dark) {
50
- #chuanhu_chatbot {
51
  background-color: var(--chatbot-color-dark) !important;
52
  }
53
- [data-testid = "bot"] {
54
  background-color: #2C2C2C !important;
55
  }
56
- [data-testid = "user"] {
57
  background-color: #26B561 !important;
58
  }
59
  body {
60
  background-color: var(--neutral-950) !important;
61
  }
62
  }
63
- /* 屏幕宽度大于等于500px的设备 */
64
  #chuanhu_chatbot {
65
- height: 100%;
66
- min-height: 400px;
67
- }
68
- /* 对话气泡 */
69
  [class *= "message"] {
70
  border-radius: var(--radius-xl) !important;
71
  border: none;
@@ -84,7 +84,7 @@ ol:not(.options), ul:not(.options) {
84
  width: auto !important;
85
  border-bottom-right-radius: 0 !important;
86
  }
87
- /* 表格 */
88
  table {
89
  margin: 1em 0;
90
  border-collapse: collapse;
@@ -100,7 +100,7 @@ thead {
100
  thead th {
101
  padding: .5em .2em;
102
  }
103
- /* 行内代码 */
104
  code {
105
  display: inline;
106
  white-space: break-spaces;
@@ -109,7 +109,7 @@ code {
109
  padding: .2em .4em .1em .4em;
110
  background-color: rgba(175,184,193,0.2);
111
  }
112
- /* 代码块 */
113
  pre code {
114
  display: block;
115
  overflow: auto;
@@ -121,7 +121,7 @@ pre code {
121
  color: #FFF;
122
  box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2);
123
  }
124
- /* 代码高亮样式 */
125
  .highlight .hll { background-color: #49483e }
126
  .highlight .c { color: #75715e } /* Comment */
127
  .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
 
33
  padding-inline-start: 2em !important;
34
  }
35
 
36
+ /* Light Mode */
37
  @media (prefers-color-scheme: light) {
38
  #chuanhu_chatbot {
39
  background-color: var(--chatbot-color-light) !important;
 
45
  background-color: #95EC69 !important;
46
  }
47
  }
48
+ /* Dark Mode */
49
  @media (prefers-color-scheme: dark) {
50
+ .dark #chuanhu_chatbot {
51
  background-color: var(--chatbot-color-dark) !important;
52
  }
53
+ .dark [data-testid = "bot"] {
54
  background-color: #2C2C2C !important;
55
  }
56
+ .dark [data-testid = "user"] {
57
  background-color: #26B561 !important;
58
  }
59
  body {
60
  background-color: var(--neutral-950) !important;
61
  }
62
  }
63
+
64
  #chuanhu_chatbot {
65
+ height: 100%;
66
+ min-height: 400px;
67
+ }
68
+
69
  [class *= "message"] {
70
  border-radius: var(--radius-xl) !important;
71
  border: none;
 
84
  width: auto !important;
85
  border-bottom-right-radius: 0 !important;
86
  }
87
+ /* Table */
88
  table {
89
  margin: 1em 0;
90
  border-collapse: collapse;
 
100
  thead th {
101
  padding: .5em .2em;
102
  }
103
+ /* Inline code */
104
  code {
105
  display: inline;
106
  white-space: break-spaces;
 
109
  padding: .2em .4em .1em .4em;
110
  background-color: rgba(175,184,193,0.2);
111
  }
112
+ /* Code block */
113
  pre code {
114
  display: block;
115
  overflow: auto;
 
121
  color: #FFF;
122
  box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2);
123
  }
124
+ /* Hightlight */
125
  .highlight .hll { background-color: #49483e }
126
  .highlight .c { color: #75715e } /* Comment */
127
  .highlight .err { color: #960050; background-color: #1e0010 } /* Error */