Skip to content

Commit 29b9017

Browse files
AdityaSingh-7AdityaSingh-7
committed
fixed help popup
1 parent 576bd5d commit 29b9017

File tree

4 files changed

+315
-102
lines changed

4 files changed

+315
-102
lines changed

‎src/assets/styles/dialog.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@
2727
0 8px 12px -6px var(--shadow-sm);
2828
max-width: 500px;
2929
width: 92%;
30-
margin: 0;
30+
margin: auto;
3131
overflow: visible;
3232

3333
/* Centering */
3434
position: fixed;
35-
top: 50%;
36-
left: 50%;
35+
/*top: 50%;
36+
left: 50%;*/
3737
transform: translate(-50%, -50%);
3838
}
3939

‎src/assets/styles/draw.css‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
:root {
2+
--primary-bg: linear-gradient(135deg, #e0e7ff 0%, #a5b4fc 100%);
3+
--header-bg: #f9fafb;
4+
--accent-color: #4338ca;
5+
--control-bg: rgba(255, 255, 255, 0.95);
6+
--text-color: #ffffff;
7+
--solid-bg: #a5b4fc;
8+
--shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.1), 0 3px 6px -3px rgba(0, 0, 0, 0.08);
9+
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
10+
--light-border: #e2e8f0;
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
margin: auto;
16+
padding: 0;
17+
}
18+
19+
.container {
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
align-items: center;
24+
min-height: 100vh;
25+
font-family: "Inter", system-ui, sans-serif;
26+
text-align: center;
27+
padding: 1rem;
28+
/*background: var(--primary-bg);*/
29+
}
30+
31+
.header {
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
width: 50%;
36+
padding: 1.5rem 2rem;
37+
gap: 1rem;
38+
position: sticky; /* Make the header sticky */
39+
top: 0; /* Stick to the top of the viewport */
40+
z-index: 100; /* Ensure it stays above other content */
41+
background: rgb(224, 222, 222);
42+
border: 1px solid var(--light-border);
43+
border-radius: 12px;
44+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
45+
margin-bottom: 0.5rem;
46+
border-color: #4338ca;
47+
border-width: 4px;
48+
}
49+
50+
.action {
51+
width: 100%;
52+
}
53+
54+
/* The caption div is removed so the heading appears directly in the header */
55+
.info {
56+
margin-top: -25px;
57+
color: rgb(29, 25, 25); /* Text is now black */
58+
font-weight: 500;
59+
text-align: center;
60+
text-transform: uppercase;
61+
font-size: 2rem;
62+
}
63+
64+
.controls {
65+
position: absolute;
66+
top: 1rem;
67+
right: 1rem;
68+
display: flex;
69+
gap: 1rem;
70+
align-items: center;
71+
}
72+
73+
.control-item {
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
}
78+
79+
.control-button {
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
83+
width: 4.5rem;
84+
height: 4.5rem;
85+
background: var(--control-bg);
86+
border-radius: 0.75rem;
87+
cursor: pointer;
88+
position: relative;
89+
overflow: hidden;
90+
border: 2px solid rgba(67, 56, 202, 0.2);
91+
transition: var(--transition);
92+
box-shadow: var(--shadow);
93+
font-size: 2rem;
94+
color: black;
95+
}
96+
97+
.control-button::before {
98+
content: "";
99+
position: absolute;
100+
z-index: 1;
101+
top: 0;
102+
left: 0;
103+
right: 0;
104+
bottom: 0;
105+
background: var(--accent-color);
106+
transform: scaleX(0);
107+
transform-origin: 0 50%;
108+
transition: transform 0.3s ease-out;
109+
opacity: 0.1;
110+
}
111+
112+
.control-button:hover::before {
113+
transform: scaleX(1);
114+
}
115+
116+
.control-button:hover {
117+
transform: translateY(-3px);
118+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
119+
}
120+
121+
.main {
122+
display: flex;
123+
justify-content: center;
124+
align-items: center;
125+
width: 100%;
126+
height: calc(100vh - 120px);
127+
overflow: hidden;
128+
transition: var(--transition);
129+
margin-top: 1rem;
130+
}
131+
132+
.board {
133+
position: relative;
134+
display: flex;
135+
justify-content: center;
136+
align-items: center;
137+
width: 100%;
138+
height: 100%;
139+
overflow: hidden;
140+
padding: 2rem;
141+
background-size: cover;
142+
background-position: center;
143+
background-repeat: no-repeat;
144+
transition: var(--transition);
145+
border: 2px solid var(--accent-color);
146+
border-radius: 1rem;
147+
}
148+
149+
.char {
150+
position: relative;
151+
z-index: 2;
152+
text-align: center;
153+
display: flex;
154+
justify-content: center;
155+
align-items: center;
156+
font-size: clamp(10rem, 30vw, 20rem);
157+
font-weight: 900;
158+
color: white;
159+
text-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
160+
transition: var(--transition);
161+
animation: charReveal 0.4s ease-out;
162+
will-change: transform, opacity;
163+
}
164+
165+
@keyframes charReveal {
166+
from {
167+
opacity: 0;
168+
transform: scale(0.8);
169+
}
170+
to {
171+
opacity: 1;
172+
transform: scale(1);
173+
}
174+
}
175+
176+
.visually-hidden {
177+
position: absolute;
178+
width: 1px;
179+
height: 1px;
180+
padding: 0;
181+
margin: -1px;
182+
overflow: hidden;
183+
clip: rect(0, 0, 0, 0);
184+
white-space: nowrap;
185+
border: 0;
186+
}
187+
188+
@media (max-width: 640px) {
189+
.header {
190+
padding: 1rem;
191+
}
192+
193+
.info {
194+
font-size: 1.25rem;
195+
}
196+
197+
.char {
198+
font-size: clamp(4rem, 25vw, 15rem);
199+
}
200+
201+
.control-button {
202+
width: 3rem;
203+
height: 3rem;
204+
font-size: 1.5rem;
205+
}
206+
207+
.controls {
208+
position: static;
209+
justify-content: center;
210+
width: 100%;
211+
}
212+
}

0 commit comments

Comments
 (0)