Skip to content

Commit deb8e23

Browse files
phrockerphrocker
committed
2x2
1 parent 8f85bac commit deb8e23

File tree

3 files changed

+775
-1
lines changed

3 files changed

+775
-1
lines changed

‎api/src/main/resources/static/css/ai-helper.css‎

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
1+
/**
2+
* AI Helper Styles
3+
*/
4+
5+
/* Context Menu */
6+
.ai-helper-context-menu {
7+
position: absolute;
8+
z-index: 10000;
9+
background: #2b2b2b;
10+
border: 1px solid #3f3f3f;
11+
border-radius: 8px;
12+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
13+
padding: 4px 0;
14+
min-width: 200px;
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
16+
}
17+
18+
.ai-helper-menu-item {
19+
padding: 10px 16px;
20+
cursor: pointer;
21+
display: flex;
22+
align-items: center;
23+
gap: 8px;
24+
font-size: 14px;
25+
color: #e0e0e0;
26+
transition: background-color 0.2s;
27+
}
28+
29+
.ai-helper-menu-item:hover {
30+
background-color: #3a3a3a;
31+
}
32+
33+
.ai-helper-icon {
34+
font-size: 16px;
35+
}
36+
37+
/* Chat Modal */
38+
.ai-helper-chat-modal {
39+
position: fixed;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
44+
z-index: 9999;
45+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
46+
}
47+
48+
.ai-helper-modal-overlay {
49+
position: absolute;
50+
top: 0;
51+
left: 0;
52+
width: 100%;
53+
height: 100%;
54+
background: rgba(0, 0, 0, 0.7);
55+
backdrop-filter: blur(2px);
56+
}
57+
58+
.ai-helper-modal-content {
59+
position: absolute;
60+
top: 50%;
61+
left: 50%;
62+
transform: translate(-50%, -50%);
63+
width: 90%;
64+
max-width: 600px;
65+
height: 70vh;
66+
max-height: 600px;
67+
background: #1e1e1e;
68+
border: 1px solid #3f3f3f;
69+
border-radius: 12px;
70+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
71+
display: flex;
72+
flex-direction: column;
73+
overflow: hidden;
74+
}
75+
76+
.ai-helper-modal-header {
77+
display: flex;
78+
justify-content: space-between;
79+
align-items: center;
80+
padding: 16px 20px;
81+
border-bottom: 1px solid #3f3f3f;
82+
background: #252525;
83+
}
84+
85+
.ai-helper-modal-header h3 {
86+
margin: 0;
87+
font-size: 18px;
88+
font-weight: 600;
89+
color: #e0e0e0;
90+
}
91+
92+
.ai-helper-close-btn {
93+
background: none;
94+
border: none;
95+
font-size: 28px;
96+
color: #b0b0b0;
97+
cursor: pointer;
98+
padding: 0;
99+
width: 32px;
100+
height: 32px;
101+
display: flex;
102+
align-items: center;
103+
justify-content: center;
104+
border-radius: 4px;
105+
transition: background-color 0.2s;
106+
}
107+
108+
.ai-helper-close-btn:hover {
109+
background-color: #3a3a3a;
110+
}
111+
112+
.ai-helper-chat-messages {
113+
flex: 1;
114+
overflow-y: auto;
115+
padding: 20px;
116+
display: flex;
117+
flex-direction: column;
118+
gap: 12px;
119+
background: #1e1e1e;
120+
}
121+
122+
.ai-helper-chat-message {
123+
display: flex;
124+
max-width: 85%;
125+
animation: slideIn 0.3s ease-out;
126+
}
127+
128+
@keyframes slideIn {
129+
from {
130+
opacity: 0;
131+
transform: translateY(10px);
132+
}
133+
to {
134+
opacity: 1;
135+
transform: translateY(0);
136+
}
137+
}
138+
139+
.ai-helper-message-content {
140+
padding: 10px 14px;
141+
border-radius: 12px;
142+
font-size: 14px;
143+
line-height: 1.5;
144+
word-wrap: break-word;
145+
}
146+
147+
.ai-helper-chat-message-user {
148+
align-self: flex-end;
149+
}
150+
151+
.ai-helper-chat-message-user .ai-helper-message-content {
152+
background: #007bff;
153+
color: white;
154+
border-bottom-right-radius: 4px;
155+
}
156+
157+
.ai-helper-chat-message-assistant,
158+
.ai-helper-chat-message-system {
159+
align-self: flex-start;
160+
}
161+
162+
.ai-helper-chat-message-assistant .ai-helper-message-content {
163+
background: #2b2b2b;
164+
color: #e0e0e0;
165+
border-bottom-left-radius: 4px;
166+
}
167+
168+
.ai-helper-chat-message-system .ai-helper-message-content {
169+
background: #1a3a52;
170+
color: #64b5f6;
171+
border-bottom-left-radius: 4px;
172+
font-size: 13px;
173+
}
174+
175+
.ai-helper-chat-message-error .ai-helper-message-content {
176+
background: #4a2828;
177+
color: #ef5350;
178+
border-bottom-left-radius: 4px;
179+
}
180+
181+
.ai-helper-chat-input-container {
182+
padding: 16px 20px;
183+
border-top: 1px solid #3f3f3f;
184+
display: flex;
185+
gap: 12px;
186+
background: #252525;
187+
}
188+
189+
.ai-helper-chat-input {
190+
flex: 1;
191+
padding: 10px 12px;
192+
border: 1px solid #3f3f3f;
193+
border-radius: 8px;
194+
font-size: 14px;
195+
font-family: inherit;
196+
resize: none;
197+
outline: none;
198+
transition: border-color 0.2s;
199+
background: #2b2b2b;
200+
color: #e0e0e0;
201+
}
202+
203+
.ai-helper-chat-input:focus {
204+
border-color: #007bff;
205+
}
206+
207+
.ai-helper-send-btn {
208+
padding: 10px 20px;
209+
background: #007bff;
210+
color: white;
211+
border: none;
212+
border-radius: 8px;
213+
font-size: 14px;
214+
font-weight: 500;
215+
cursor: pointer;
216+
transition: background-color 0.2s;
217+
align-self: flex-end;
218+
}
219+
220+
.ai-helper-send-btn:hover {
221+
background: #0056b3;
222+
}
223+
224+
.ai-helper-send-btn:active {
225+
transform: scale(0.98);
226+
}
227+
228+
/* Notification */
229+
.ai-helper-notification {
230+
position: fixed;
231+
top: 20px;
232+
right: 20px;
233+
z-index: 10001;
234+
max-width: 400px;
235+
animation: slideInRight 0.3s ease-out;
236+
}
237+
238+
@keyframes slideInRight {
239+
from {
240+
opacity: 0;
241+
transform: translateX(100%);
242+
}
243+
to {
244+
opacity: 1;
245+
transform: translateX(0);
246+
}
247+
}
248+
249+
.ai-helper-notification-content {
250+
background: #2b2b2b;
251+
border: 1px solid #3f3f3f;
252+
border-radius: 8px;
253+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
254+
padding: 16px;
255+
}
256+
257+
.ai-helper-notification-content strong {
258+
display: block;
259+
margin-bottom: 8px;
260+
color: #e0e0e0;
261+
font-size: 14px;
262+
}
263+
264+
.ai-helper-notification-content p {
265+
margin: 0 0 12px 0;
266+
color: #b0b0b0;
267+
font-size: 13px;
268+
line-height: 1.5;
269+
}
270+
271+
.ai-helper-notification-close {
272+
padding: 6px 12px;
273+
background: #007bff;
274+
color: white;
275+
border: none;
276+
border-radius: 4px;
277+
font-size: 12px;
278+
cursor: pointer;
279+
transition: background-color 0.2s;
280+
}
281+
282+
.ai-helper-notification-close:hover {
283+
background: #0056b3;
284+
}
285+
286+
/* Responsive Design */
287+
@media (max-width: 768px) {
288+
.ai-helper-modal-content {
289+
width: 95%;
290+
height: 80vh;
291+
max-height: none;
292+
}
293+
294+
.ai-helper-chat-message {
295+
max-width: 90%;
296+
}
297+
298+
.ai-helper-notification {
299+
top: 10px;
300+
right: 10px;
301+
left: 10px;
302+
max-width: none;
303+
}
304+
}
305+
306+
/* Scrollbar Styling */
307+
.ai-helper-chat-messages::-webkit-scrollbar {
308+
width: 8px;
309+
}
310+
311+
.ai-helper-chat-messages::-webkit-scrollbar-track {
312+
background: #252525;
313+
}
314+
315+
.ai-helper-chat-messages::-webkit-scrollbar-thumb {
316+
background: #555;
317+
border-radius: 4px;
318+
}
319+
320+
.ai-helper-chat-messages::-webkit-scrollbar-thumb:hover {
321+
background: #777;
322+
}

0 commit comments

Comments
 (0)