Skip to content

Commit f0961c4

Browse files
Adi-gitXAdi-gitX
committed
update postman and canvas styles
1 parent a5743fa commit f0961c4

2 files changed

Lines changed: 814 additions & 546 deletions

File tree

‎styles/Canvas.module.css‎

Lines changed: 307 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
/* Canvas Panel - Slides in from right for Postman editing */
2+
3+
.canvasContainer {
4+
display: flex;
5+
width: 100%;
6+
height: 100vh;
7+
position: relative;
8+
overflow: hidden;
9+
}
10+
11+
/* Chat side - left side */
12+
.canvasChatSide {
13+
flex: 1;
14+
min-width: 400px;
15+
display: flex;
16+
flex-direction: column;
17+
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
18+
position: relative;
19+
z-index: 1;
20+
}
21+
22+
.canvasChatSide.withCanvas {
23+
flex: 0 0 45%;
24+
max-width: 45%;
25+
border-right: 1px solid rgba(255, 255, 255, 0.06);
26+
}
27+
28+
/* Canvas side - right side, Postman editor */
29+
.canvasPanel {
30+
flex: 0 0 55%;
31+
background: #0a0a0a;
32+
display: flex;
33+
flex-direction: column;
34+
transform: translateX(100%);
35+
opacity: 0;
36+
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
37+
position: relative;
38+
overflow: hidden;
39+
}
40+
41+
.canvasPanel.open {
42+
transform: translateX(0);
43+
opacity: 1;
44+
}
45+
46+
/* Canvas header */
47+
.canvasHeader {
48+
display: flex;
49+
align-items: center;
50+
justify-content: space-between;
51+
padding: 16px 24px;
52+
background: rgba(255, 255, 255, 0.02);
53+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
54+
}
55+
56+
.canvasTitle {
57+
display: flex;
58+
align-items: center;
59+
gap: 10px;
60+
font-size: 0.95rem;
61+
font-weight: 600;
62+
color: #fff;
63+
}
64+
65+
.canvasTitle svg {
66+
color: #FF6C37;
67+
}
68+
69+
.canvasActions {
70+
display: flex;
71+
align-items: center;
72+
gap: 8px;
73+
}
74+
75+
.canvasActionBtn {
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
width: 32px;
80+
height: 32px;
81+
background: transparent;
82+
border: 1px solid rgba(255, 255, 255, 0.08);
83+
border-radius: 8px;
84+
color: rgba(255, 255, 255, 0.5);
85+
cursor: pointer;
86+
transition: all 0.15s;
87+
}
88+
89+
.canvasActionBtn:hover {
90+
background: rgba(255, 255, 255, 0.05);
91+
color: rgba(255, 255, 255, 0.9);
92+
border-color: rgba(255, 255, 255, 0.15);
93+
}
94+
95+
.canvasCloseBtn {
96+
color: rgba(255, 255, 255, 0.4);
97+
}
98+
99+
.canvasCloseBtn:hover {
100+
background: rgba(229, 57, 53, 0.1);
101+
color: #E53935;
102+
border-color: rgba(229, 57, 53, 0.3);
103+
}
104+
105+
/* Canvas content */
106+
.canvasContent {
107+
flex: 1;
108+
overflow-y: auto;
109+
padding: 20px;
110+
}
111+
112+
/* Resize handle */
113+
.canvasResizer {
114+
position: absolute;
115+
left: 0;
116+
top: 0;
117+
width: 4px;
118+
height: 100%;
119+
background: transparent;
120+
cursor: col-resize;
121+
z-index: 10;
122+
transition: background 0.15s;
123+
}
124+
125+
.canvasResizer:hover,
126+
.canvasResizer:active {
127+
background: #FF6C37;
128+
}
129+
130+
/* Canvas placeholder when closed */
131+
.canvasOpenButton {
132+
position: fixed;
133+
right: 20px;
134+
top: 50%;
135+
transform: translateY(-50%);
136+
display: flex;
137+
flex-direction: column;
138+
align-items: center;
139+
gap: 8px;
140+
padding: 16px 12px;
141+
background: rgba(18, 18, 18, 0.95);
142+
backdrop-filter: blur(10px);
143+
border: 1px solid rgba(255, 108, 55, 0.2);
144+
border-radius: 12px;
145+
color: #FF6C37;
146+
cursor: pointer;
147+
transition: all 0.2s;
148+
z-index: 50;
149+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
150+
}
151+
152+
.canvasOpenButton:hover {
153+
background: rgba(255, 108, 55, 0.1);
154+
border-color: rgba(255, 108, 55, 0.4);
155+
transform: translateY(-50%) translateX(-4px);
156+
}
157+
158+
.canvasOpenButton span {
159+
writing-mode: vertical-rl;
160+
text-orientation: mixed;
161+
font-size: 0.8rem;
162+
font-weight: 600;
163+
letter-spacing: 1px;
164+
}
165+
166+
/* Chat input in canvas mode */
167+
.canvasChatInput {
168+
padding: 16px 20px;
169+
background: linear-gradient(to top, rgba(10, 10, 10, 1) 50%, transparent);
170+
border-top: 1px solid rgba(255, 255, 255, 0.04);
171+
}
172+
173+
/* Mobile responsive */
174+
@media (max-width: 1024px) {
175+
.canvasContainer {
176+
flex-direction: column;
177+
}
178+
179+
.canvasChatSide.withCanvas {
180+
flex: 0 0 40%;
181+
max-width: none;
182+
border-right: none;
183+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
184+
}
185+
186+
.canvasPanel {
187+
flex: 0 0 60%;
188+
transform: translateY(100%);
189+
}
190+
191+
.canvasPanel.open {
192+
transform: translateY(0);
193+
}
194+
195+
.canvasResizer {
196+
width: 100%;
197+
height: 4px;
198+
top: 0;
199+
left: 0;
200+
cursor: row-resize;
201+
}
202+
}
203+
204+
/* Canvas empty state */
205+
.canvasEmptyState {
206+
display: flex;
207+
flex-direction: column;
208+
align-items: center;
209+
justify-content: center;
210+
height: 100%;
211+
padding: 40px;
212+
text-align: center;
213+
}
214+
215+
.canvasEmptyIcon {
216+
width: 80px;
217+
height: 80px;
218+
display: flex;
219+
align-items: center;
220+
justify-content: center;
221+
background: rgba(255, 108, 55, 0.1);
222+
border-radius: 20px;
223+
margin-bottom: 24px;
224+
}
225+
226+
.canvasEmptyIcon svg {
227+
width: 40px;
228+
height: 40px;
229+
color: #FF6C37;
230+
}
231+
232+
.canvasEmptyState h3 {
233+
margin: 0 0 8px 0;
234+
font-size: 1.2rem;
235+
color: #fff;
236+
}
237+
238+
.canvasEmptyState p {
239+
margin: 0;
240+
font-size: 0.9rem;
241+
color: rgba(255, 255, 255, 0.5);
242+
max-width: 300px;
243+
}
244+
245+
/* Quick actions in canvas */
246+
.canvasQuickActions {
247+
display: flex;
248+
gap: 8px;
249+
margin-top: 24px;
250+
flex-wrap: wrap;
251+
justify-content: center;
252+
}
253+
254+
.canvasQuickAction {
255+
padding: 10px 16px;
256+
background: rgba(255, 255, 255, 0.03);
257+
border: 1px solid rgba(255, 255, 255, 0.08);
258+
border-radius: 8px;
259+
color: rgba(255, 255, 255, 0.7);
260+
font-size: 0.85rem;
261+
cursor: pointer;
262+
transition: all 0.15s;
263+
}
264+
265+
.canvasQuickAction:hover {
266+
background: rgba(255, 108, 55, 0.1);
267+
border-color: rgba(255, 108, 55, 0.3);
268+
color: #FF6C37;
269+
}
270+
271+
/* Tabs inside canvas */
272+
.canvasTabs {
273+
display: flex;
274+
gap: 2px;
275+
padding: 0 20px;
276+
background: rgba(255, 255, 255, 0.01);
277+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
278+
}
279+
280+
.canvasTab {
281+
padding: 14px 18px;
282+
background: transparent;
283+
border: none;
284+
color: rgba(255, 255, 255, 0.5);
285+
font-size: 0.9rem;
286+
cursor: pointer;
287+
position: relative;
288+
transition: all 0.15s;
289+
}
290+
291+
.canvasTab:hover {
292+
color: rgba(255, 255, 255, 0.8);
293+
}
294+
295+
.canvasTab.active {
296+
color: #FF6C37;
297+
}
298+
299+
.canvasTab.active::after {
300+
content: '';
301+
position: absolute;
302+
bottom: 0;
303+
left: 0;
304+
right: 0;
305+
height: 2px;
306+
background: #FF6C37;
307+
}

0 commit comments

Comments
 (0)