@rpg-engine/long-bow 0.7.7 → 0.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rpg-engine/long-bow",
3
- "version": "0.7.7",
3
+ "version": "0.7.8",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
@@ -127,13 +127,13 @@ interface IMessageProps {
127
127
  const ChatContainer = styled.div<IContainerProps>`
128
128
  width: ${props => props.width};
129
129
  height: ${props => props.height};
130
- background-color: #1e1e1e;
130
+ background-color: rgba(30, 30, 30, 0.3);
131
131
  display: flex;
132
132
  flex-direction: column;
133
133
  position: relative;
134
134
  border-radius: 8px;
135
- border: 1px solid rgba(0, 0, 0, 0.1); /* Slightly transparent border */
136
- overflow: hidden; /* Remove border-radius */
135
+ border: 1px solid rgba(0, 0, 0, 0.1);
136
+ overflow: hidden;
137
137
  `;
138
138
 
139
139
  const CloseButton = styled.button`
@@ -155,18 +155,18 @@ const MessagesContainer = styled.div`
155
155
  margin-bottom: 8px;
156
156
 
157
157
  scrollbar-width: thin;
158
- scrollbar-color: #333 #1e1e1e;
158
+ scrollbar-color: rgba(51, 51, 51, 0.4) rgba(30, 30, 30, 0.4);
159
159
 
160
160
  &::-webkit-scrollbar {
161
161
  width: 6px;
162
162
  }
163
163
 
164
164
  &::-webkit-scrollbar-track {
165
- background: #1e1e1e;
165
+ background: rgba(30, 30, 30, 0.4);
166
166
  }
167
167
 
168
168
  &::-webkit-scrollbar-thumb {
169
- background-color: #333;
169
+ background-color: rgba(51, 51, 51, 0.4);
170
170
  border-radius: 3px;
171
171
  }
172
172
  `;
@@ -183,14 +183,14 @@ const Message = styled.div<IMessageProps>`
183
183
  const Form = styled.form`
184
184
  display: flex;
185
185
  padding: 8px;
186
- background-color: #2a2a2a;
186
+ background-color: rgba(42, 42, 42, 0.4);
187
187
  `;
188
188
 
189
189
  const TextField = styled.input`
190
190
  flex-grow: 1;
191
- background-color: #1a1a1a;
191
+ background-color: rgba(26, 26, 26, 0.6);
192
192
  color: #ff6600;
193
- border: 1px solid #333;
193
+ border: 1px solid rgba(51, 51, 51, 0.6);
194
194
  border-radius: 4px;
195
195
  padding: 8px;
196
196
  margin-right: 8px;
@@ -200,13 +200,14 @@ const TextField = styled.input`
200
200
  transition: border-color 0.3s, background-color 0.3s;
201
201
 
202
202
  &::placeholder {
203
- color: #666;
203
+ color: rgba(255, 255, 255, 0.5);
204
+ font-size: 0.6rem;
204
205
  }
205
206
 
206
207
  &:focus {
207
208
  outline: none;
208
209
  border-color: #ff6600;
209
- background-color: #2a2a2a;
210
+ background-color: rgba(42, 42, 42, 0.9);
210
211
  }
211
212
  `;
212
213
 
@@ -207,10 +207,11 @@ const Tab = styled.button<{ active: boolean }>`
207
207
  border-radius: 5px 5px 0 0;
208
208
  border-width: 0.25rem 0.25rem 0 0.25rem;
209
209
  border-style: solid;
210
- border-color: ${props => (props.active ? '#c65102' : uiColors.gray)};
210
+ border-color: ${props =>
211
+ props.active ? 'rgba(198, 81, 2, 0.5)' : 'rgba(128, 128, 128, 0.5)'};
211
212
 
212
213
  background-color: ${props =>
213
- props.active ? uiColors.orange : 'transparent'};
214
+ props.active ? uiColors.orange : 'rgba(0, 0, 0, 0.2)'};
214
215
  color: ${props => (props.active ? 'white' : uiColors.gray)};
215
216
  `;
216
217