Skip to content

fix ups #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jbampton merged 1 commit into from
Jan 26, 2026
Merged

fix ups #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
274 changes: 155 additions & 119 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ html, body {
}

/**
* 2. USER CARDS & BLUE LEGIBILITY
* 2. USER CARDS & LEGIBILITY
*/
.user-card h2 {
color: #1e40af !important;
Expand All @@ -53,7 +53,7 @@ html, body {
}

/**
* 3. PILL-SHAPED INTERACTIVES (SKILLS & SURPRISE)
* 3. PILL-SHAPED INTERACTIVES
*/
.skill-item {
position: relative;
Expand All @@ -80,44 +80,64 @@ html, body {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

.surprise-btn {
background-color: var(--accent) !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 9999px;
font-weight: 900;
box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
transition: 0.3s;
}

.surprise-btn:hover {
filter: brightness(1.1);
box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.6);
transform: translateY(-2px);
/**
* FIXED SURPRISE BUTTON & SKILL SHIMMER
*/
.surprise-btn, .skill-item {
position: relative; /* REQUIRED to contain the ::after element */
overflow: hidden; /* REQUIRED to hide the diagonal ribbon outside the button */
isolation: isolate; /* Prevents z-index bleeding */
}

.surprise-btn::after, .skill-item:hover::after {
/* Ensure the ribbon starts off-screen and is actually a gradient, not a solid block */
.surprise-btn::after, .skill-item::after {
content: '';
position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
transform: rotate(45deg);
transition: 0.5s;
top: 0;
left: -150%; /* Start much further left */
width: 100%; /* Match width of parent */
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transform: skewX(-20deg); /* Use skew instead of rotate for better clipping */
transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.surprise-btn:hover::after, .skill-item:hover::after {
left: 150%; /* Slide all the way across */
}
.surprise-btn:hover::after, .skill-item:hover::after { left: 120%; }

/**
* 4. DEVELOPER TOOLS & SELF DESTRUCT
* 4. DEVELOPER TOOLS & CONSOLE LOCK
*/
#dev-tools {
backdrop-filter: blur(20px);
background-color: rgba(15, 23, 42, 0.95);
border: 2px solid var(--accent);
padding: 1.5rem;
border-radius: 1rem;
z-index: 99999 !important;
position: fixed !important;
}

/* NUCLEAR LOCK: Keeps console visible during Self Destruct & Shake */
html body #dev-tools[data-lock="true"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
top: 20px !important;
right: 20px !important;
z-index: 2147483647 !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
border-color: var(--danger);
box-shadow: 0 0 50px rgba(239, 68, 68, 0.4);
}

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

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

#dev-tools button[onclick*="selfDestruct"].is-destructing {
/**
* 5. SELF DESTRUCT & PROGRESS BARS
*/
#self-destruct-btn.is-destructing {
background: linear-gradient(270deg, #2563eb, #f97316, #ef4444) !important;
background-size: 400% 400% !important;
animation: heat-up 2s ease infinite !important;
animation: heat-up 2s linear infinite !important;
color: white !important;
border-color: white !important;
border: 2px solid white !important;
pointer-events: none;
overflow: hidden;
}

#dev-tools button::after { opacity: 0; transition: 0.3s; }
#dev-tools button[onclick*="resetPlayer"]::after { content: '🔄'; }
#dev-tools button[onclick*="selfDestruct"]::after { content: '💣'; }
#dev-tools button:hover::after { opacity: 1; margin-left: 10px; }
#destruct-bar-container {
width: 100%;
height: 14px;
background: #000;
border: 2px solid #333;
margin-top: 15px;
border-radius: 4px;
}

#dev-tools button:hover {
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px currentColor;
transform: translateX(4px);
#destruct-bar-progress {
height: 100%;
width: 0%;
background: #22c55e;
transition: width 1s linear, background-color 0.3s;
}

/* Fix for the Ribbon Artifact */
#destruct-bar {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
width: 0%;
background-color: transparent;
transition: width 1s linear, background-color 0.5s ease;
z-index: 10;
pointer-events: none;
}

/**
* 5. ANIMATIONS & GAME SYSTEMS
* 6. ANIMATIONS
*/
@keyframes heat-up {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes violent-shake {
0%, 100% { transform: translate(0, 0); }
@keyframes shake-anim {
0% { transform: translate(0, 0); }
25% { transform: translate(3px, -3px); }
50% { transform: translate(-3px, 3px); }
100% { transform: translate(0, 0); }
}

#level-progress { box-shadow: 0 0 10px var(--accent); transition: width 1s ease; }
.glitch-shake { animation: violent-shake 0.1s infinite; overflow: hidden; }
.glitch-shake {
animation: shake-anim 0.1s infinite;
overflow: hidden;
}

.bar-jitter { animation: jitter 0.1s infinite; }

@keyframes jitter {
0% { transform: translateX(0); }
50% { transform: translateX(2px); filter: brightness(1.5); }
100% { transform: translateX(-1px); }
}

#repair-btn {
background-color: var(--danger) !important;
Expand All @@ -195,88 +248,71 @@ html, body {
font-weight: 900;
box-shadow: 0 0 60px rgba(239, 68, 68, 0.6);
z-index: 10001;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Animation for the button background */
#dev-tools button.is-destructing {
background: linear-gradient(270deg, #2563eb, #f97316, #ef4444) !important;
background-size: 400% 400% !important;
animation: heat-up 2s linear infinite !important;
color: white !important;
pointer-events: none;
}

/* High-Priority Console Stacking */
#dev-tools {
z-index: 99999 !important; /* Above everything else */
position: fixed !important;
}

/* Loading Bar Styling */
/* Jitter effect for the last 2 seconds */
#level-progress { box-shadow: 0 0 10px var(--accent); transition: width 1s ease; }

.bar-jitter {
animation: jitter 0.1s infinite;
/* Ensure Hash Button remains top-level */
button[onclick*="gravity"] {
position: relative;
z-index: 10;
}

@keyframes jitter {
0% { transform: translateX(0); }
50% { transform: translateX(2px); filter: brightness(1.5); }
100% { transform: translateX(-1px); }
}

/* Lock the dev tools during the countdown */
#dev-tools[data-lock="true"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 999999 !important;
position: fixed !important;
/* This stops the glitch-shake from moving the panel */
transform: none !important;
pointer-events: auto !important;
/**
* RE-ASSERTING SURPRISE BUTTON BLUE
*/
.surprise-btn {
/* Explicitly use the blue hex if the variable is failing */
background-color: #2563eb !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 0.6rem 1.5rem;
border-radius: 9999px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

/* Ensure the progress bar is high-contrast */
#destruct-bar-container {
width: 100%;
height: 14px;
background: #000;
border: 2px solid #333;
margin-top: 15px;
border-radius: 4px;
/* Ensure Dark Mode uses its specific blue/accent */
.dark .surprise-btn {
background-color: var(--accent) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#destruct-bar-progress {
height: 100%;
width: 0%;
background: #22c55e;
transition: width 1s linear, background-color 0.3s;
.surprise-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
filter: brightness(1.1);
}

/* Specific button styling during destruction */
.is-destructing {
background: #ef4444 !important;
animation: pulse 0.5s infinite !important;
border: 2px solid white !important;
}
/* This selector is extremely specific to override any other styles */
html body #dev-tools[data-lock="true"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
top: 20px !important;
right: 20px !important;
z-index: 2147483647 !important; /* Maximum possible z-index */
transform: none !important; /* Prevents gravity/shake from moving it */
transition: none !important; /* Prevents fading out */
pointer-events: auto !important;
/* The "Shimmer" fix from before to prevent the gray ribbon */
.surprise-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: 0.5s;
}

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