Skip to content

Commit af46919

Browse files
jbamptonjbampton
authored
fix ups (#238)
1 parent b16e34a commit af46919

File tree

2 files changed

+248
-173
lines changed

2 files changed

+248
-173
lines changed

‎src/assets/css/style.css‎

Lines changed: 155 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ html, body {
3535
}
3636

3737
/**
38-
* 2. USER CARDS & BLUE LEGIBILITY
38+
* 2. USER CARDS & LEGIBILITY
3939
*/
4040
.user-card h2 {
4141
color: #1e40af !important;
@@ -53,7 +53,7 @@ html, body {
5353
}
5454

5555
/**
56-
* 3. PILL-SHAPED INTERACTIVES (SKILLS & SURPRISE)
56+
* 3. PILL-SHAPED INTERACTIVES
5757
*/
5858
.skill-item {
5959
position: relative;
@@ -80,44 +80,64 @@ html, body {
8080
transform: translateY(-3px) scale(1.05);
8181
box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
8282
}
83-
84-
.surprise-btn {
85-
background-color: var(--accent) !important;
86-
color: #ffffff !important;
87-
display: inline-flex !important;
88-
align-items: center;
89-
justify-content: center;
90-
border-radius: 9999px;
91-
font-weight: 900;
92-
box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
93-
transition: 0.3s;
94-
}
95-
96-
.surprise-btn:hover {
97-
filter: brightness(1.1);
98-
box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.6);
99-
transform: translateY(-2px);
83+
/**
84+
* FIXED SURPRISE BUTTON & SKILL SHIMMER
85+
*/
86+
.surprise-btn, .skill-item {
87+
position: relative; /* REQUIRED to contain the ::after element */
88+
overflow: hidden; /* REQUIRED to hide the diagonal ribbon outside the button */
89+
isolation: isolate; /* Prevents z-index bleeding */
10090
}
10191

102-
.surprise-btn::after, .skill-item:hover::after {
92+
/* Ensure the ribbon starts off-screen and is actually a gradient, not a solid block */
93+
.surprise-btn::after, .skill-item::after {
10394
content: '';
10495
position: absolute;
105-
top: -50%; left: -50%; width: 200%; height: 200%;
106-
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
107-
transform: rotate(45deg);
108-
transition: 0.5s;
96+
top: 0;
97+
left: -150%; /* Start much further left */
98+
width: 100%; /* Match width of parent */
99+
height: 100%;
100+
background: linear-gradient(
101+
90deg,
102+
transparent,
103+
rgba(255, 255, 255, 0.4),
104+
transparent
105+
);
106+
transform: skewX(-20deg); /* Use skew instead of rotate for better clipping */
107+
transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
108+
}
109+
110+
.surprise-btn:hover::after, .skill-item:hover::after {
111+
left: 150%; /* Slide all the way across */
109112
}
110-
.surprise-btn:hover::after, .skill-item:hover::after { left: 120%; }
111113

112114
/**
113-
* 4. DEVELOPER TOOLS & SELF DESTRUCT
115+
* 4. DEVELOPER TOOLS & CONSOLE LOCK
114116
*/
115117
#dev-tools {
116118
backdrop-filter: blur(20px);
117119
background-color: rgba(15, 23, 42, 0.95);
118120
border: 2px solid var(--accent);
119121
padding: 1.5rem;
120122
border-radius: 1rem;
123+
z-index: 99999 !important;
124+
position: fixed !important;
125+
}
126+
127+
/* NUCLEAR LOCK: Keeps console visible during Self Destruct & Shake */
128+
html body #dev-tools[data-lock="true"] {
129+
display: block !important;
130+
visibility: visible !important;
131+
opacity: 1 !important;
132+
position: fixed !important;
133+
top: 20px !important;
134+
right: 20px !important;
135+
z-index: 2147483647 !important;
136+
transform: none !important;
137+
transition: none !important;
138+
pointer-events: auto !important;
139+
border-color: var(--danger);
140+
box-shadow: 0 0 50px rgba(239, 68, 68, 0.4);
121141
}
122142

123143
#dev-tools button {
@@ -142,49 +162,82 @@ html, body {
142162
#dev-tools button[onclick*="badge_click"] { color: #bc13fe !important; border-color: rgba(188, 19, 254, 0.4) !important; }
143163
#dev-tools button[onclick*="resetPlayer"] { color: #f97316 !important; border-color: rgba(249, 115, 22, 0.4) !important; }
144164

145-
/* Animated Self Destruct Styling */
146-
#dev-tools button[onclick*="selfDestruct"] {
147-
color: #ef4444 !important;
148-
border-color: rgba(239, 68, 68, 0.4) !important;
149-
font-weight: 900;
165+
#dev-tools button:hover {
166+
background: rgba(255, 255, 255, 0.1);
167+
box-shadow: 0 0 15px currentColor;
168+
transform: translateX(4px);
150169
}
151170

152-
#dev-tools button[onclick*="selfDestruct"].is-destructing {
171+
/**
172+
* 5. SELF DESTRUCT & PROGRESS BARS
173+
*/
174+
#self-destruct-btn.is-destructing {
153175
background: linear-gradient(270deg, #2563eb, #f97316, #ef4444) !important;
154176
background-size: 400% 400% !important;
155-
animation: heat-up 2s ease infinite !important;
177+
animation: heat-up 2s linear infinite !important;
156178
color: white !important;
157-
border-color: white !important;
179+
border: 2px solid white !important;
180+
pointer-events: none;
181+
overflow: hidden;
158182
}
159183

160-
#dev-tools button::after { opacity: 0; transition: 0.3s; }
161-
#dev-tools button[onclick*="resetPlayer"]::after { content: '🔄'; }
162-
#dev-tools button[onclick*="selfDestruct"]::after { content: '💣'; }
163-
#dev-tools button:hover::after { opacity: 1; margin-left: 10px; }
184+
#destruct-bar-container {
185+
width: 100%;
186+
height: 14px;
187+
background: #000;
188+
border: 2px solid #333;
189+
margin-top: 15px;
190+
border-radius: 4px;
191+
}
164192

165-
#dev-tools button:hover {
166-
background: rgba(255, 255, 255, 0.1);
167-
box-shadow: 0 0 15px currentColor;
168-
transform: translateX(4px);
193+
#destruct-bar-progress {
194+
height: 100%;
195+
width: 0%;
196+
background: #22c55e;
197+
transition: width 1s linear, background-color 0.3s;
198+
}
199+
200+
/* Fix for the Ribbon Artifact */
201+
#destruct-bar {
202+
position: absolute;
203+
bottom: 0;
204+
left: 0;
205+
height: 4px;
206+
width: 0%;
207+
background-color: transparent;
208+
transition: width 1s linear, background-color 0.5s ease;
209+
z-index: 10;
210+
pointer-events: none;
169211
}
170212

171213
/**
172-
* 5. ANIMATIONS & GAME SYSTEMS
214+
* 6. ANIMATIONS
173215
*/
174216
@keyframes heat-up {
175217
0% { background-position: 0% 50%; }
176218
50% { background-position: 100% 50%; }
177219
100% { background-position: 0% 50%; }
178220
}
179221

180-
@keyframes violent-shake {
181-
0%, 100% { transform: translate(0, 0); }
222+
@keyframes shake-anim {
223+
0% { transform: translate(0, 0); }
182224
25% { transform: translate(3px, -3px); }
183225
50% { transform: translate(-3px, 3px); }
226+
100% { transform: translate(0, 0); }
184227
}
185228

186-
#level-progress { box-shadow: 0 0 10px var(--accent); transition: width 1s ease; }
187-
.glitch-shake { animation: violent-shake 0.1s infinite; overflow: hidden; }
229+
.glitch-shake {
230+
animation: shake-anim 0.1s infinite;
231+
overflow: hidden;
232+
}
233+
234+
.bar-jitter { animation: jitter 0.1s infinite; }
235+
236+
@keyframes jitter {
237+
0% { transform: translateX(0); }
238+
50% { transform: translateX(2px); filter: brightness(1.5); }
239+
100% { transform: translateX(-1px); }
240+
}
188241

189242
#repair-btn {
190243
background-color: var(--danger) !important;
@@ -195,88 +248,71 @@ html, body {
195248
font-weight: 900;
196249
box-shadow: 0 0 60px rgba(239, 68, 68, 0.6);
197250
z-index: 10001;
251+
position: fixed;
252+
top: 50%;
253+
left: 50%;
254+
transform: translate(-50%, -50%);
198255
}
199256

200-
/* Animation for the button background */
201-
#dev-tools button.is-destructing {
202-
background: linear-gradient(270deg, #2563eb, #f97316, #ef4444) !important;
203-
background-size: 400% 400% !important;
204-
animation: heat-up 2s linear infinite !important;
205-
color: white !important;
206-
pointer-events: none;
207-
}
208-
209-
/* High-Priority Console Stacking */
210-
#dev-tools {
211-
z-index: 99999 !important; /* Above everything else */
212-
position: fixed !important;
213-
}
214-
215-
/* Loading Bar Styling */
216-
/* Jitter effect for the last 2 seconds */
257+
#level-progress { box-shadow: 0 0 10px var(--accent); transition: width 1s ease; }
217258

218-
.bar-jitter {
219-
animation: jitter 0.1s infinite;
259+
/* Ensure Hash Button remains top-level */
260+
button[onclick*="gravity"] {
261+
position: relative;
262+
z-index: 10;
220263
}
221-
222-
@keyframes jitter {
223-
0% { transform: translateX(0); }
224-
50% { transform: translateX(2px); filter: brightness(1.5); }
225-
100% { transform: translateX(-1px); }
226-
}
227-
228-
/* Lock the dev tools during the countdown */
229-
#dev-tools[data-lock="true"] {
230-
display: block !important;
231-
visibility: visible !important;
232-
opacity: 1 !important;
233-
z-index: 999999 !important;
234-
position: fixed !important;
235-
/* This stops the glitch-shake from moving the panel */
236-
transform: none !important;
237-
pointer-events: auto !important;
264+
/**
265+
* RE-ASSERTING SURPRISE BUTTON BLUE
266+
*/
267+
.surprise-btn {
268+
/* Explicitly use the blue hex if the variable is failing */
269+
background-color: #2563eb !important;
270+
color: #ffffff !important;
271+
display: inline-flex !important;
272+
align-items: center;
273+
justify-content: center;
274+
padding: 0.6rem 1.5rem;
275+
border-radius: 9999px;
276+
font-weight: 900;
277+
text-transform: uppercase;
278+
letter-spacing: 0.05em;
279+
border: none;
280+
cursor: pointer;
281+
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
282+
transition: all 0.3s ease;
283+
position: relative;
284+
overflow: hidden;
238285
}
239286

240-
/* Ensure the progress bar is high-contrast */
241-
#destruct-bar-container {
242-
width: 100%;
243-
height: 14px;
244-
background: #000;
245-
border: 2px solid #333;
246-
margin-top: 15px;
247-
border-radius: 4px;
287+
/* Ensure Dark Mode uses its specific blue/accent */
288+
.dark .surprise-btn {
289+
background-color: var(--accent) !important;
290+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
248291
}
249292

250-
#destruct-bar-progress {
251-
height: 100%;
252-
width: 0%;
253-
background: #22c55e;
254-
transition: width 1s linear, background-color 0.3s;
293+
.surprise-btn:hover {
294+
transform: translateY(-2px);
295+
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
296+
filter: brightness(1.1);
255297
}
256298

257-
/* Specific button styling during destruction */
258-
.is-destructing {
259-
background: #ef4444 !important;
260-
animation: pulse 0.5s infinite !important;
261-
border: 2px solid white !important;
262-
}
263-
/* This selector is extremely specific to override any other styles */
264-
html body #dev-tools[data-lock="true"] {
265-
display: block !important;
266-
visibility: visible !important;
267-
opacity: 1 !important;
268-
position: fixed !important;
269-
top: 20px !important;
270-
right: 20px !important;
271-
z-index: 2147483647 !important; /* Maximum possible z-index */
272-
transform: none !important; /* Prevents gravity/shake from moving it */
273-
transition: none !important; /* Prevents fading out */
274-
pointer-events: auto !important;
299+
/* The "Shimmer" fix from before to prevent the gray ribbon */
300+
.surprise-btn::after {
301+
content: '';
302+
position: absolute;
303+
top: 0;
304+
left: -100%;
305+
width: 100%;
306+
height: 100%;
307+
background: linear-gradient(
308+
90deg,
309+
transparent,
310+
rgba(255, 255, 255, 0.3),
311+
transparent
312+
);
313+
transition: 0.5s;
275314
}
276315

277-
/* Ensure the progress bar is always visible inside the locked console */
278-
#dev-tools[data-lock="true"] #destruct-bar-container,
279-
#dev-tools[data-lock="true"] #destruct-bar-progress {
280-
visibility: visible !important;
281-
opacity: 1 !important;
316+
.surprise-btn:hover::after {
317+
left: 100%;
282318
}

0 commit comments

Comments
 (0)