Hugging Face's logo

Spaces:
Shipmaster1
/
Agent_Browse
Build error

App Files Community
T-K-O-H commited on
Commit
688aa4d
·
1 Parent(s): 0548369

Update styles.css with dark theme

Browse files
Files changed (1) hide show
  1. static/styles.css +29 -25
static/styles.css CHANGED
@@ -7,8 +7,8 @@
7
  }
8
 
9
  body {
10
- background-color: #f5f5f5;
11
- color: #333;
12
  line-height: 1.6;
13
  }
14
 
@@ -22,20 +22,20 @@ header {
22
  text-align: center;
23
  margin-bottom: 30px;
24
  padding: 20px;
25
- background-color: #ffffff;
26
  border-radius: 10px;
27
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28
  }
29
 
30
  header h1 {
31
- color: #2c3e50;
32
  margin-bottom: 10px;
33
  }
34
 
35
  .chat-container {
36
- background-color: #ffffff;
37
  border-radius: 10px;
38
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
39
  overflow: hidden;
40
  margin-bottom: 20px;
41
  }
@@ -55,22 +55,22 @@ header h1 {
55
  }
56
 
57
  .user-message {
58
- background-color: #e9f3ff;
59
- color: #333;
60
  margin-left: auto;
61
  border-bottom-right-radius: 5px;
62
  }
63
 
64
  .ai-message {
65
- background-color: #f0f0f0;
66
- color: #333;
67
  margin-right: auto;
68
  border-bottom-left-radius: 5px;
69
  }
70
 
71
  .tool-message {
72
- background-color: #fcf8e3;
73
- color: #8a6d3b;
74
  margin-right: auto;
75
  border-bottom-left-radius: 5px;
76
  font-style: italic;
@@ -79,8 +79,8 @@ header h1 {
79
  .message-input {
80
  display: flex;
81
  padding: 15px;
82
- background-color: #f9f9f9;
83
- border-top: 1px solid #eaeaea;
84
  }
85
 
86
  #message-form {
@@ -91,16 +91,18 @@ header h1 {
91
  #user-input {
92
  flex-grow: 1;
93
  padding: 12px;
94
- border: 1px solid #ddd;
95
  border-radius: 20px;
96
  outline: none;
97
  font-size: 16px;
 
 
98
  }
99
 
100
  button {
101
  padding: 0 20px;
102
- background-color: #3498db;
103
- color: white;
104
  border: none;
105
  border-radius: 20px;
106
  margin-left: 10px;
@@ -110,19 +112,19 @@ button {
110
  }
111
 
112
  button:hover {
113
- background-color: #2980b9;
114
  }
115
 
116
  .tools-info {
117
- background-color: #ffffff;
118
  border-radius: 10px;
119
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
120
  padding: 20px;
121
  }
122
 
123
  .tools-info h3 {
124
  margin-bottom: 10px;
125
- color: #2c3e50;
126
  }
127
 
128
  .tools-info ul {
@@ -133,23 +135,25 @@ button:hover {
133
  margin-bottom: 8px;
134
  padding-left: 20px;
135
  position: relative;
 
136
  }
137
 
138
  .tools-info li::before {
139
  content: "•";
140
  position: absolute;
141
  left: 0;
142
- color: #3498db;
143
  }
144
 
145
  code {
146
- background-color: #f8f8f8;
147
  padding: 2px 4px;
148
  border-radius: 4px;
149
  font-family: 'Courier New', monospace;
 
150
  }
151
 
152
  .thinking {
153
  font-style: italic;
154
- color: #888;
155
  }
 
7
  }
8
 
9
  body {
10
+ background-color: #1a1a1a;
11
+ color: #e0e0e0;
12
  line-height: 1.6;
13
  }
14
 
 
22
  text-align: center;
23
  margin-bottom: 30px;
24
  padding: 20px;
25
+ background-color: #2d2d2d;
26
  border-radius: 10px;
27
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
28
  }
29
 
30
  header h1 {
31
+ color: #ffffff;
32
  margin-bottom: 10px;
33
  }
34
 
35
  .chat-container {
36
+ background-color: #2d2d2d;
37
  border-radius: 10px;
38
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
39
  overflow: hidden;
40
  margin-bottom: 20px;
41
  }
 
55
  }
56
 
57
  .user-message {
58
+ background-color: #3a3a3a;
59
+ color: #ffffff;
60
  margin-left: auto;
61
  border-bottom-right-radius: 5px;
62
  }
63
 
64
  .ai-message {
65
+ background-color: #363636;
66
+ color: #e0e0e0;
67
  margin-right: auto;
68
  border-bottom-left-radius: 5px;
69
  }
70
 
71
  .tool-message {
72
+ background-color: #2a2a2a;
73
+ color: #a0a0a0;
74
  margin-right: auto;
75
  border-bottom-left-radius: 5px;
76
  font-style: italic;
 
79
  .message-input {
80
  display: flex;
81
  padding: 15px;
82
+ background-color: #2d2d2d;
83
+ border-top: 1px solid #3a3a3a;
84
  }
85
 
86
  #message-form {
 
91
  #user-input {
92
  flex-grow: 1;
93
  padding: 12px;
94
+ border: 1px solid #3a3a3a;
95
  border-radius: 20px;
96
  outline: none;
97
  font-size: 16px;
98
+ background-color: #363636;
99
+ color: #e0e0e0;
100
  }
101
 
102
  button {
103
  padding: 0 20px;
104
+ background-color: #4a4a4a;
105
+ color: #ffffff;
106
  border: none;
107
  border-radius: 20px;
108
  margin-left: 10px;
 
112
  }
113
 
114
  button:hover {
115
+ background-color: #5a5a5a;
116
  }
117
 
118
  .tools-info {
119
+ background-color: #2d2d2d;
120
  border-radius: 10px;
121
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
122
  padding: 20px;
123
  }
124
 
125
  .tools-info h3 {
126
  margin-bottom: 10px;
127
+ color: #ffffff;
128
  }
129
 
130
  .tools-info ul {
 
135
  margin-bottom: 8px;
136
  padding-left: 20px;
137
  position: relative;
138
+ color: #e0e0e0;
139
  }
140
 
141
  .tools-info li::before {
142
  content: "•";
143
  position: absolute;
144
  left: 0;
145
+ color: #4a4a4a;
146
  }
147
 
148
  code {
149
+ background-color: #363636;
150
  padding: 2px 4px;
151
  border-radius: 4px;
152
  font-family: 'Courier New', monospace;
153
+ color: #e0e0e0;
154
  }
155
 
156
  .thinking {
157
  font-style: italic;
158
+ color: #a0a0a0;
159
  }