Skip to content

Commit 5ccb46c

Browse files
gkorlandgkorland
committed
break css to modules
1 parent b1c9845 commit 5ccb46c

File tree

12 files changed

+921
-1
lines changed

12 files changed

+921
-1
lines changed

api/static/css/chat.css renamed to api/static/css/main.css

File renamed without changes.

‎api/static/css/modules/base.css‎

Whitespace-only changes.

‎api/static/css/modules/confirmations.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/**
2+
* Confirmation Dialogs and Destructive Actions
3+
* Reset confirmation modal and destructive action styling
4+
*/
5+
6+
/* Destructive Confirmation Styles */
7+
.destructive-confirmation-container {
8+
transition: all 0.3s ease;
9+
}
10+
11+
.destructive-confirmation-message {
12+
border: 1px solid #D32F2F;
13+
border-radius: 6px;
14+
background: linear-gradient(135deg, var(--bg-tertiary), var(--falkor-quaternary));
15+
}
16+
17+
.destructive-confirmation {
18+
padding: 20px;
19+
transition: all 0.3s ease;
20+
}
21+
22+
.confirmation-text {
23+
margin-bottom: 20px;
24+
line-height: 1.6;
25+
color: var(--text-primary);
26+
font-size: 14px;
27+
}
28+
29+
.confirmation-text strong {
30+
color: var(--text-primary);
31+
font-weight: bold;
32+
}
33+
34+
.confirmation-buttons {
35+
display: flex;
36+
gap: 15px;
37+
justify-content: center;
38+
margin-top: 20px;
39+
}
40+
41+
.confirm-btn, .cancel-btn {
42+
padding: 12px 24px;
43+
border: none;
44+
border-radius: 6px;
45+
font-family: 'Fira Code', monospace;
46+
font-size: 14px;
47+
font-weight: bold;
48+
cursor: pointer;
49+
transition: all 0.3s ease;
50+
min-width: 140px;
51+
}
52+
53+
.confirm-btn {
54+
background: #D32F2F;
55+
color: white;
56+
border: 1px solid #D32F2F;
57+
}
58+
59+
.confirm-btn:hover {
60+
background: #B71C1C;
61+
border-color: #B71C1C;
62+
transform: translateY(-1px);
63+
box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
64+
}
65+
66+
.cancel-btn {
67+
background: transparent;
68+
color: var(--text-primary);
69+
border: 1px solid var(--border-color);
70+
}
71+
72+
.cancel-btn:hover {
73+
background: var(--bg-tertiary);
74+
border-color: var(--text-secondary);
75+
transform: translateY(-1px);
76+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
77+
}
78+
79+
.confirm-btn:active, .cancel-btn:active {
80+
transform: translateY(0);
81+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
82+
}
83+
84+
.confirm-btn:disabled, .cancel-btn:disabled {
85+
background: #cccccc;
86+
color: #888888;
87+
border-color: #cccccc;
88+
cursor: not-allowed;
89+
transform: none;
90+
box-shadow: none;
91+
}
92+
93+
.confirm-btn:disabled:hover, .cancel-btn:disabled:hover {
94+
background: #cccccc;
95+
color: #888888;
96+
border-color: #cccccc;
97+
transform: none;
98+
box-shadow: none;
99+
}
100+
101+
/* Reset Confirmation Modal */
102+
.reset-confirmation-modal {
103+
display: none;
104+
position: fixed;
105+
top: 0;
106+
left: 0;
107+
width: 100vw;
108+
height: 100vh;
109+
background: rgba(0,0,0,0.6);
110+
z-index: 2000;
111+
align-items: center;
112+
justify-content: center;
113+
}
114+
115+
.reset-confirmation-modal-content {
116+
background: var(--falkor-secondary);
117+
padding: 2em 3em;
118+
border-radius: 10px;
119+
box-shadow: 0 2px 16px rgba(0,0,0,0.2);
120+
text-align: center;
121+
color: var(--text-primary);
122+
min-width: 400px;
123+
}
124+
125+
/* Mobile responsive reset modal */
126+
@media (max-width: 768px) {
127+
.reset-confirmation-modal-content {
128+
padding: 1.5em 2em;
129+
min-width: 90vw;
130+
margin: 0 5vw;
131+
}
132+
}
133+
134+
.reset-confirmation-modal-content h3 {
135+
color: var(--text-primary);
136+
margin-bottom: 0.5em;
137+
font-size: 1.3em;
138+
}
139+
140+
.reset-confirmation-modal-content p {
141+
color: var(--text-secondary);
142+
margin-bottom: 1.5em;
143+
font-size: 1em;
144+
line-height: 1.5;
145+
}

‎api/static/css/modules/forms.css‎

Whitespace-only changes.

‎api/static/css/modules/layout.css‎

Whitespace-only changes.

‎api/static/css/modules/messages.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/**
2+
* Chat Messages and Message Containers
3+
* All message styling including user, bot, and special message types
4+
*/
5+
6+
.message-container {
7+
display: flex;
8+
flex-direction: row;
9+
align-items: center;
10+
}
11+
12+
.user-message-container {
13+
justify-content: flex-end;
14+
position: relative;
15+
}
16+
17+
/* Hide the default "User" text when avatar is present */
18+
.user-message-container.has-avatar::after {
19+
display: none;
20+
}
21+
22+
/* User message avatar styling */
23+
.user-message-avatar {
24+
height: 40px;
25+
width: 40px;
26+
border-radius: 50%;
27+
object-fit: cover;
28+
margin-left: 10px;
29+
border: 2px solid var(--falkor-quaternary);
30+
font-weight: 500;
31+
font-size: 16px;
32+
justify-content: center;
33+
align-items: center;
34+
display: flex;
35+
}
36+
37+
.bot-message-container,
38+
.followup-message-container,
39+
.final-result-message-container {
40+
justify-content: flex-start;
41+
}
42+
43+
.user-message-container::after,
44+
.bot-message-container::before,
45+
.followup-message-container::before,
46+
.final-result-message-container::before {
47+
height: 32px;
48+
width: 32px;
49+
content: 'Bot';
50+
color: var(--text-secondary);
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
font-weight: 500;
55+
font-size: 16px;
56+
margin-right: 10px;
57+
border-radius: 100%;
58+
padding: 4px;
59+
}
60+
61+
.user-message-container::after {
62+
margin-left: 10px;
63+
background: var(--falkor-quaternary);
64+
content: 'User';
65+
}
66+
67+
.bot-message-container::before {
68+
background: color-mix(in srgb, var(--falkor-tertiary) 33%, transparent);
69+
}
70+
71+
.followup-message-container::before {
72+
background: color-mix(in srgb, var(--falkor-tertiary) 40%, transparent);
73+
border: 1px solid var(--falkor-tertiary);
74+
}
75+
76+
.final-result-message-container::before {
77+
background: color-mix(in srgb, var(--accent-green) 40%, transparent);
78+
border: 1px solid var(--accent-green);
79+
}
80+
81+
.loading-message-container::before {
82+
content: "...";
83+
font-size: 32px;
84+
line-height: 1.2;
85+
text-align: center;
86+
animation: typing 1.5s steps(3) infinite;
87+
padding-bottom: 16px;
88+
border-radius: 6px;
89+
color: var(--text-primary);
90+
background: color-mix(in srgb, var(--falkor-tertiary) 33%, transparent);
91+
}
92+
93+
.message {
94+
max-width: 70%;
95+
padding: 12px 16px;
96+
border-radius: 6px;
97+
margin: 5px 0;
98+
line-height: 1.4;
99+
color: var(--text-primary);
100+
word-wrap: break-word;
101+
overflow-wrap: break-word;
102+
overflow-x: auto;
103+
}
104+
105+
/* Mobile responsive messages */
106+
@media (max-width: 768px) {
107+
.message {
108+
max-width: 85%;
109+
padding: 10px 12px;
110+
font-size: 14px;
111+
}
112+
113+
.chat-header h1 {
114+
font-size: 18px;
115+
}
116+
117+
#message-input {
118+
font-size: 16px !important;
119+
}
120+
121+
#message-input::placeholder {
122+
font-size: 16px !important;
123+
}
124+
}
125+
126+
/* Styles for formatted text blocks */
127+
.sql-line, .array-line, .plain-line {
128+
word-wrap: break-word;
129+
overflow-wrap: break-word;
130+
white-space: pre-wrap;
131+
margin: 2px 0;
132+
}
133+
134+
.bot-message {
135+
background: color-mix(in srgb, var(--falkor-tertiary) 33%, transparent);
136+
}
137+
138+
.user-message {
139+
background: var(--falkor-quaternary);
140+
font-weight: 500;
141+
}
142+
143+
.followup-message {
144+
background: color-mix(in srgb, var(--falkor-tertiary) 20%, transparent);
145+
border-left: 3px solid var(--falkor-tertiary);
146+
}
147+
148+
.final-result-message {
149+
background: color-mix(in srgb, var(--accent-green) 15%, transparent);
150+
border-left: 3px solid var(--accent-green);
151+
}

0 commit comments

Comments
 (0)