dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: desert dusk theme with animated mule and pixel-art scenery

Browse Source 
Replaces the cool-grey neutral theme with a warm desert dusk palette
pulled from a new pixel-art TopBar: a tiled, right-to-left scrolling
desert under a sky gradient, a 6-frame walking mule sprite where the
logo used to sit, and an ASCII block-character title on a black plate.
The active heap card now uses a cactus/dune scene as its stack
backdrop, and the "Built with hubris" mark moves into the TopBar's
bottom-right corner (AppFooter component removed).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-04-09 18:49:13 +02:00
parent 938c5dce68
commit 2e7158a5bb
9 changed files with 133 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/index.css
View File

@@ -4,18 +4,18 @@
@layer base {
:root {
--color-bg: #111110;
--color-surface: #161615;
--color-surface-2: #1c1c1a;
--color-surface-offset: #222220;
--color-border: rgba(255, 255, 255, 0.08);
--color-text: #e8e6e0;
--color-text-muted: #878580;
--color-text-faint: #4a4845;
--color-primary: #3b82f6;
--color-pick: #4f9e5c;
--color-reject: #c25a5a;
--color-star: #d4a340;
--color-bg: #1a1424;
--color-surface: #221c2f;
--color-surface-2: #2a2339;
--color-surface-offset: #352c46;
--color-border: rgba(240, 193, 136, 0.10);
--color-text: #f0e6d2;
--color-text-muted: #a8997d;
--color-text-faint: #5e5448;
--color-primary: #e8965a;
--color-pick: #8aaa5a;
--color-reject: #d06464;
--color-star: #f0c188;
}
body {
@@ -40,4 +40,25 @@
::-webkit-scrollbar-thumb:hover {
@apply bg-text-faint;
}
/* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds
for one step thanks to `steps(1)` so the background snaps frame-to-frame
instead of interpolating. */
@keyframes mule-walk {
0% { background-position: 0% 0%; }
16.66% { background-position: 50% 0%; }
33.33% { background-position: 100% 0%; }
50% { background-position: 0% 100%; }
66.66% { background-position: 50% 100%; }
83.33% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
/* Parallax desert scroll — moves the desert layer right→left by exactly
one tile width so the loop is seamless. The tile width is fixed in
CSS (see TopBar.tsx) so the keyframe end value matches. */
@keyframes desert-scroll {
from { background-position-x: 0px, 0px; }
to { background-position-x: -200px, 0px; }
}