Skip to content

Commit c9b3371

Browse files
imanchalsinghjasonsaayman
imanchalsingh
and
jasonsaayman
authored
chore: enhance styling and responsiveness in client.html (#7173)
Updated CSS variables for light and dark modes, improved styling for various elements, and added responsive design features. Co-authored-by: Jay <[email protected]>
1 parent 9ead04d commit c9b3371

1 file changed

Lines changed: 220 additions & 111 deletions

File tree

‎sandbox/client.html‎

Lines changed: 220 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,56 @@
33
<head>
44
<title>AXIOS | Sandbox</title>
55
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
6-
<style type="text/css">
7-
:root {
8-
--bg-color: #fff;
9-
--text-color: #212529;
10-
--border-color: #dee2e6;
11-
--well-bg: #f8f9fa;
12-
--input-bg: #fff;
13-
--footer-text-color: #6c757d;
14-
--footer-heading-color: #212529;
15-
--footer-link-color: #007bff;
16-
--footer-link-hover-color: #0056b3;
17-
--shadow-color: rgba(0, 0, 0, 0.1);
18-
--axios-purple: #6a1b9a;
19-
--sandbox-color: #212529;
20-
}
21-
22-
body.dark-mode {
23-
--bg-color: #121212;
24-
--text-color: #e9ecef;
25-
--border-color: #495057;
26-
--well-bg: #1c1c1c;
27-
--input-bg: #212121;
28-
--footer-text-color: #adb5bd;
29-
--footer-heading-color: #f8f9fa;
30-
--footer-link-color: #61dafb;
31-
--footer-link-hover-color: #fff;
32-
--shadow-color: rgba(0, 0, 0, 0.4);
33-
--axios-purple: #a78bfa;
34-
--sandbox-color: #e9ecef;
35-
}
36-
37-
* {
38-
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
39-
}
6+
<style type="text/css">
7+
/*
8+
:root & Dark Mode Variables
9+
*/
10+
:root {
11+
--bg-color: #f0f4ff; /* main page background */
12+
--text-color: #1a1a1a; /* main text color */
13+
--border-color: #cfd8ff; /* default borders */
14+
--well-bg: rgba(255, 255, 255, 0.9); /* card & well background */
15+
--input-bg: rgba(255, 255, 255, 0.95); /* input background */
16+
--footer-text-color: #555;
17+
--footer-heading-color: #1a1a1a;
18+
--footer-link-color: #5b4bff;
19+
--footer-link-hover-color: #3a2ecb;
20+
--shadow-color: rgba(0, 0, 0, 0.1);
21+
--primary-gradient: linear-gradient(135deg, #6a1bff, #00c3ff);
22+
--btn-hover-gradient: linear-gradient(135deg, #5b00d1, #00aaff);
23+
--glass-blur: blur(12px); /* for frosted glass effect */
24+
}
4025

41-
body {
42-
background-color: var(--bg-color);
43-
color: var(--text-color);
44-
}
26+
body.dark-mode {
27+
/* Dark mode overrides */
28+
--bg-color: #0e0f1a;
29+
--text-color: #e0e0ff;
30+
--border-color: #444;
31+
--well-bg: rgba(30, 30, 50, 0.7);
32+
--input-bg: rgba(40, 40, 60, 0.85);
33+
--footer-text-color: #aaa;
34+
--footer-heading-color: #fff;
35+
--footer-link-color: #7f8fff;
36+
--footer-link-hover-color: #aabfff;
37+
--shadow-color: rgba(0, 0, 0, 0.5);
38+
--primary-gradient: linear-gradient(135deg, #9b59ff, #00d1ff);
39+
--btn-hover-gradient: linear-gradient(135deg, #7d33ff, #00b7ff);
40+
}
4541

46-
.well, .form-control {
47-
background-color: var(--well-bg);
48-
color: var(--text-color);
49-
border: 1px solid var(--border-color);
50-
}
51-
52-
.form-control {
53-
background-color: var(--input-bg);
54-
}
55-
56-
.form-control::placeholder {
57-
color: #6c757d;
58-
}
59-
60-
/* --- UI Improvement: Added spacing to form groups --- */
61-
.form-group {
62-
margin-bottom: 1.25rem; /* Adds space between each form field */
63-
}
42+
/*
43+
Global Styles
44+
*/
45+
* {
46+
box-sizing: border-box;
47+
transition: all 0.4s ease; /* smooth transitions everywhere */
48+
}
6449

50+
body {
51+
margin: 0;
52+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
53+
background: var(--bg-color);
54+
color: var(--text-color);
55+
}
6556
pre {
6657
min-height: 39px;
6758
white-space: pre-wrap; /* wrap long lines instead of stretching the panel */
@@ -88,84 +79,202 @@
8879
margin-bottom: 2rem; /* Added space below the header */
8980
}
9081

91-
#theme-toggle {
92-
padding: 5px 10px;
93-
border-radius: 5px;
94-
cursor: pointer;
82+
/*
83+
Input & Well Styles
84+
*/
85+
.well,
86+
.form-control {
87+
background: var(--well-bg);
88+
margin-top: 5px;
9589
border: 1px solid var(--border-color);
96-
background-color: var(--well-bg);
90+
border-radius: 16px;
91+
padding: 14px 16px;
92+
box-shadow: 0 10px 25px -8px var(--shadow-color);
93+
backdrop-filter: var(--glass-blur); /* glass effect */
94+
}
95+
96+
.form-control {
97+
background: var(--input-bg);
9798
color: var(--text-color);
98-
}
99+
border-radius: 16px;
100+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
101+
outline: none; /* remove default bootstrap focus outline */
102+
}
99103

100-
.footer {
104+
.form-control::placeholder {
105+
color: #9e9eef; /* subtle placeholder */
106+
}
107+
108+
/* Modern neon focus effect */
109+
.form-control:focus {
110+
background: var(--input-bg); /* keep consistent */
111+
border: 1px solid #ff00ff; /* neon border */
112+
box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff; /* glowing focus */
113+
color: var(--text-color);
114+
}
115+
116+
/* subtle placeholder fade on focus */
117+
.form-control:focus::placeholder {
118+
color: #ddd;
119+
}
120+
121+
/* spacing between form groups */
122+
.form-group {
123+
margin-bottom: 1.75rem;
124+
}
125+
126+
/*
127+
Header & Box Layout
128+
*/
129+
.header {
130+
display: flex;
131+
flex-wrap: wrap;
132+
justify-content: space-between;
133+
align-items: center;
134+
margin-bottom: 2.5rem;
135+
gap: 15px;
136+
}
137+
138+
.box {
139+
display: grid;
140+
grid-template-columns: 1fr 1fr;
141+
gap: 40px;
142+
}
143+
144+
/*
145+
Theme Toggle Button
146+
*/
147+
#theme-toggle {
148+
padding: 8px 18px;
149+
border-radius: 12px;
150+
border: none;
151+
cursor: pointer;
152+
background: var(--primary-gradient);
153+
color: #fff;
154+
font-weight: 600;
155+
box-shadow: 0 8px 20px -5px var(--shadow-color);
156+
transition: transform 0.25s ease, box-shadow 0.25s ease;
157+
}
158+
159+
#theme-toggle:hover {
160+
transform: translateY(-3px);
161+
box-shadow: 0 12px 25px -8px var(--shadow-color);
162+
}
163+
164+
/*
165+
Footer Styles
166+
*/
167+
.footer {
101168
max-width: 900px;
102169
margin: 60px auto 40px auto;
103-
padding: 2rem 3rem;
104-
border: 1px solid var(--border-color);
105-
background-color: var(--well-bg);
106-
/* border-radius: 30px; */
107-
box-shadow: 0 10px 30px -10px var(--shadow-color);
170+
padding: 2.5rem 3rem;
171+
border-radius: 24px;
172+
background: var(--well-bg);
173+
box-shadow: 0 15px 35px -10px var(--shadow-color);
108174
display: flex;
109175
justify-content: space-between;
110176
align-items: center;
111177
flex-wrap: wrap;
112-
gap: 30px;
113-
}
178+
gap: 25px;
179+
}
114180

115-
.footer-left .footer-brand-axios {
116-
font-size: 1.1em;
117-
font-weight: bold;
118-
color: var(--axios-purple);
119-
margin: 0;
120-
display: inline;
121-
}
122-
.footer-left .footer-brand-sandbox {
123-
font-size: 1.1em;
124-
font-weight: bold;
125-
color: var(--sandbox-color);
126-
margin: 0;
127-
display: inline;
128-
}
129-
130-
.footer-left .footer-copyright {
181+
.footer-left {
182+
display: flex;
183+
flex-direction: column;
184+
gap: 6px;
185+
}
186+
187+
.footer-left .footer-brand-axios,
188+
.footer-left .footer-brand-sandbox {
189+
font-size: 1.2em;
190+
font-weight: 700;
191+
background: var(--primary-gradient);
192+
background-clip: text;
193+
-webkit-background-clip: text;
194+
-webkit-text-fill-color: transparent;
195+
}
196+
197+
.footer-left .footer-copyright {
131198
font-size: 0.9em;
132199
color: var(--footer-text-color);
133-
margin: 5px 0 0 0;
134-
}
200+
}
135201

136-
.footer-nav ul {
137-
margin: 0;
138-
padding: 0;
139-
list-style: none;
202+
.footer-nav ul {
140203
display: flex;
141204
gap: 25px;
142-
}
205+
list-style: none;
206+
padding: 0;
207+
margin: 0;
208+
flex-wrap: wrap;
209+
}
143210

144-
.footer-nav a {
211+
.footer-nav a {
145212
color: var(--footer-link-color);
146-
text-decoration: none;
147213
font-weight: 500;
148-
}
149-
.footer-nav a:hover {
214+
text-decoration: none;
215+
transition: color 0.3s ease, transform 0.2s ease;
216+
}
217+
218+
.footer-nav a:hover {
150219
color: var(--footer-link-hover-color);
220+
transform: translateY(-2px);
151221
text-decoration: underline;
152-
}
222+
}
153223

154-
@media screen and (max-width: 1000px) {
155-
.box {
156-
grid-template-columns: 1fr;
224+
/*
225+
Buttons
226+
*/
227+
.btn {
228+
padding: 10px 25px;
229+
border-radius: 50px;
230+
font-weight: 600;
231+
color: #fff;
232+
border: none;
233+
cursor: pointer;
234+
background: var(--primary-gradient);
235+
box-shadow: 0 10px 25px -8px var(--shadow-color);
236+
transition: all 0.3s ease;
157237
}
158-
}
159-
@media screen and (max-width: 768px) {
238+
239+
.btn:hover {
240+
background: var(--btn-hover-gradient);
241+
transform: translateY(-3px);
242+
box-shadow: 0 14px 30px -10px var(--shadow-color);
243+
}
244+
245+
/*
246+
Code/Pre blocks
247+
*/
248+
pre {
249+
border-radius: 16px;
250+
padding: 14px;
251+
background: var(--well-bg);
252+
box-shadow: inset 0 6px 12px -4px var(--shadow-color);
253+
overflow: auto;
254+
}
255+
256+
/*
257+
Responsive Layout
258+
*/
259+
@media screen and (max-width: 1000px) {
260+
.box {
261+
grid-template-columns: 1fr;
262+
}
263+
}
264+
265+
@media screen and (max-width: 768px) {
160266
.footer {
161-
flex-direction: column;
162-
text-align: center;
163-
border-radius: 25px;
164-
padding: 2rem;
165-
max-width: 90%;
267+
flex-direction: column;
268+
text-align: center;
269+
padding: 2rem;
270+
max-width: 90%;
166271
}
167-
}
168-
</style>
272+
273+
.footer-nav ul {
274+
justify-content: center;
275+
}
276+
}
277+
</style>
169278
</head>
170279
<body class="container">
171280
<div class="header">
@@ -387,4 +496,4 @@ <h3>Error</h3>
387496
})();
388497
</script>
389498
</body>
390-
</html>
499+
</html>

0 commit comments

Comments
 (0)