Skip to content

Commit 13bc7b7

Browse files
yashovardhanyashovardhan
committed
temp
1 parent 3748e8f commit 13bc7b7

File tree

120 files changed

+9988
-15880
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+9988
-15880
lines changed

‎web-no-modal-sdk/account-abstraction/aa-no-modal-example/src/App.css‎

Lines changed: 236 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,284 @@
1+
/* Modern, mobile-first CSS with improved form elements */
2+
:root {
3+
/* Web3Auth Docs Inspired Colors (Light Mode) */
4+
--primary-color: #0364ff; /* Web3Auth Blue */
5+
--primary-hover: #0050cc;
6+
--bg-color: #ffffff;
7+
--bg-light: #f7f7f7; /* Slightly off-white for cards/inputs */
8+
--bg-hover: #eeeeee;
9+
--border-color: #e0e0e0; /* Lighter border */
10+
--text-color: #1c1e21; /* Darker text */
11+
--text-muted: #5f6368;
12+
--radius: 6px; /* Slightly smaller radius */
13+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
14+
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
15+
/* Font stack remains similar, common sans-serif */
16+
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
17+
}
18+
19+
/* Dark Mode Variables */
20+
@media (prefers-color-scheme: dark) {
21+
:root {
22+
/* Web3Auth Docs Inspired Colors (Dark Mode - Bluish) */
23+
--primary-color: #529dff; /* Slightly adjusted blue */
24+
--primary-hover: #75b5ff;
25+
--bg-color: #171c2a; /* Dark blue-gray background */
26+
--bg-light: #23293d; /* Lighter blue-gray for elements */
27+
--bg-hover: #2f364f; /* Hover state for blue-gray */
28+
--border-color: #3b415c; /* Border matching blue-gray theme */
29+
--text-color: #e1e3e8; /* Light text */
30+
--text-muted: #9399a8;
31+
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
32+
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
33+
}
34+
35+
/* Keep input background consistent with --bg-light */
36+
input, select, textarea {
37+
background-color: var(--bg-light);
38+
border-color: var(--border-color);
39+
color: var(--text-color);
40+
}
41+
42+
input:focus, select:focus, textarea:focus {
43+
border-color: var(--primary-color);
44+
box-shadow: 0 0 0 3px rgba(64, 144, 255, 0.3);
45+
}
46+
47+
/* Keep button background consistent with --bg-light or slightly darker */
48+
button, .card {
49+
background-color: var(--bg-light);
50+
border-color: var(--border-color);
51+
color: var(--text-color);
52+
}
53+
54+
button:hover, .card:hover {
55+
background-color: var(--bg-hover);
56+
border-color: var(--text-muted);
57+
}
58+
}
59+
60+
* {
61+
box-sizing: border-box;
62+
margin: 0;
63+
padding: 0;
64+
}
65+
66+
body {
67+
font-family: var(--font-sans);
68+
color: var(--text-color);
69+
background-color: var(--bg-color);
70+
line-height: 1.6;
71+
}
72+
73+
/* Layout */
174
.container {
2-
width: 80%;
3-
margin: auto;
4-
padding: 0 2rem;
75+
width: 100%;
76+
padding: 0 16px;
77+
margin: 0 auto;
578
}
679

780
.main {
881
min-height: 100vh;
9-
padding: 4rem 0;
10-
flex: 1;
82+
padding: 32px 0;
1183
display: flex;
1284
flex-direction: column;
13-
justify-content: center;
1485
align-items: center;
1586
}
1687

88+
/* Typography */
1789
.title {
18-
line-height: 1.15;
19-
font-size: 3rem;
90+
font-size: 28px;
2091
text-align: center;
21-
margin: 50px;
92+
margin: 24px 0;
93+
line-height: 1.2;
94+
font-weight: 600;
2295
}
2396

2497
.title a {
25-
color: #0070f3;
98+
color: var(--primary-color);
2699
text-decoration: none;
27100
}
28101

29-
.grid {
30-
display: flex;
102+
h2 {
103+
font-size: 24px;
104+
margin: 24px 0 16px;
105+
font-weight: 600;
106+
}
107+
108+
h3 {
109+
font-size: 20px;
110+
margin: 16px 0 12px;
111+
font-weight: 500;
112+
color: var(--text-muted);
113+
}
114+
115+
/* Buttons */
116+
button, .card {
117+
display: inline-flex;
31118
align-items: center;
32-
flex-direction: column;
119+
justify-content: center;
120+
padding: 12px 16px;
121+
background-color: var(--bg-light);
122+
border: 1px solid var(--border-color);
123+
border-radius: var(--radius);
124+
color: var(--text-color);
125+
font-weight: 500;
126+
font-size: 14px;
127+
cursor: pointer;
128+
transition: all 0.2s ease;
129+
box-shadow: var(--shadow-sm);
130+
}
131+
132+
button:hover, .card:hover {
133+
background-color: var(--bg-hover);
134+
box-shadow: var(--shadow-md);
135+
transform: translateY(-1px);
33136
}
34137

35138
.card {
36-
margin: 0.5rem;
37-
padding: 0.7rem;
38-
text-align: center;
39-
color: #0070f3;
40-
background-color: #fafafa;
41-
text-decoration: none;
42-
border: 1px solid #0070f3;
43-
border-radius: 10px;
44-
transition: color 0.15s ease, border-color 0.15s ease;
45139
width: 100%;
140+
margin: 8px 0;
141+
text-align: center;
46142
}
47143

48-
.card:hover,
49-
.card:focus,
50-
.card:active {
51-
cursor: pointer;
52-
background-color: #f1f1f1;
144+
button[disabled] {
145+
opacity: 0.6;
146+
cursor: not-allowed;
53147
}
54148

55-
.footer {
149+
/* Form elements */
150+
form {
151+
width: 100%;
56152
display: flex;
57-
flex: 1;
58-
padding: 2rem 0;
59-
border-top: 1px solid #eaeaea;
60-
justify-content: center;
153+
flex-direction: row;
61154
align-items: center;
62-
margin-top: 10rem;
155+
gap: 12px;
156+
margin: 16px 0;
63157
}
64158

65-
.footer a {
66-
display: flex;
67-
justify-content: center;
68-
align-items: center;
69-
flex-grow: 1;
159+
input, select, textarea {
160+
width: 100%;
161+
padding: 12px 16px;
162+
border: 1px solid var(--border-color);
163+
border-radius: var(--radius);
164+
background-color: var(--bg-color);
165+
color: var(--text-color);
166+
font-family: var(--font-sans);
167+
font-size: 14px;
168+
transition: border-color 0.2s ease;
70169
}
71170

72-
.logo {
73-
height: 1.5rem;
74-
margin-left: 0.5rem;
171+
input:focus, select:focus, textarea:focus {
172+
outline: none;
173+
border-color: var(--primary-color);
174+
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
75175
}
76176

77-
@media (max-width: 1200px) {
78-
.container {
79-
width: 90%;
80-
}
177+
input::placeholder {
178+
color: var(--text-muted);
81179
}
82180

83-
.flex-container {
181+
/* Utils */
182+
.flex-row {
84183
display: flex;
85-
flex-flow: row wrap;
184+
flex-wrap: wrap;
185+
gap: 12px;
186+
width: 100%;
86187
}
87188

88-
.flex-container > div {
89-
width: 100px;
90-
margin: 10px;
91-
text-align: center;
92-
line-height: 75px;
93-
font-size: 30px;
189+
.flex-col {
190+
display: flex;
191+
flex-direction: column;
192+
gap: 12px;
193+
width: 100%;
94194
}
95195

196+
.grid {
197+
display: grid;
198+
gap: 16px;
199+
width: 100%;
200+
}
201+
202+
/* Console output */
96203
#console {
97204
width: 100%;
98-
height: 100%;
205+
max-height: 250px;
99206
overflow: auto;
100207
word-wrap: break-word;
101-
font-size: 16px;
102208
font-family: monospace;
209+
font-size: 14px; /* Use whole px */
210+
padding: 16px;
211+
margin: 24px 0;
212+
background-color: #0a0a0a; /* Near-black background */
213+
color: #e0e0e0; /* Light grey text */
214+
border-radius: 0; /* Sharp corners */
215+
border: none; /* No border */
216+
}
217+
218+
/* Footer */
219+
.footer {
220+
width: 100%;
221+
padding: 32px 0;
222+
border-top: 1px solid var(--border-color);
223+
display: flex;
224+
justify-content: center;
225+
align-items: center;
226+
gap: 24px;
227+
margin-top: 48px;
228+
flex-wrap: wrap;
229+
}
230+
231+
.footer a {
232+
color: var(--text-muted);
233+
text-decoration: none;
234+
font-size: 14px;
235+
transition: color 0.2s ease;
236+
}
237+
238+
.footer a:hover {
239+
color: var(--primary-color);
240+
}
241+
242+
.error {
243+
color: red;
244+
}
245+
246+
.loading {
247+
color: var(--primary-color);
248+
}
249+
250+
/* Responsive */
251+
@media (min-width: 640px) {
252+
.container {
253+
max-width: 640px;
254+
}
255+
256+
.title {
257+
font-size: 32px;
258+
}
259+
260+
form {
261+
flex-direction: row;
262+
align-items: flex-start;
263+
}
264+
265+
form button {
266+
margin-top: 0;
267+
}
268+
}
269+
270+
@media (min-width: 768px) {
271+
.container {
272+
max-width: 768px;
273+
}
274+
275+
.title {
276+
font-size: 36px;
277+
}
278+
}
279+
280+
@media (min-width: 1024px) {
281+
.container {
282+
max-width: 1024px;
283+
}
103284
}

0 commit comments

Comments
 (0)