xuyue/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: cyberpunk theme — CP2077 palette + glitch title + HUD corner brackets

Browse Source 
Switch from Matrix green to Cyberpunk 2077 yellow/pink/cyan palette.
Add combined RGB-split + glitch-tear title animation, HUD corner bracket
markers on cards via ::before, yellow bottom-border accent on buttons,
and yellow-tinted scanline sweep.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
yuetsh
2026-05-18 04:35:23 -06:00
parent 8c750b880a
commit 27e3722668
1 changed files with 154 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
style.css
View File

@@ -82,64 +82,72 @@ html[data-design-theme="terminal"] {
html[data-design-theme="cyberpunk"] {
color-scheme: dark;
--cyber-bg: #0a0a0f;
--cyber-fg: #e0e0e0;
--cyber-card: #12121a;
--cyber-muted: #1c1c2e;
--cyber-muted-fg: #6b7280;
--cyber-border: #2a2a3a;
--cyber-accent: #00ff88;
--cyber-accent-2: #ff00ff;
--cyber-accent-3: #00d4ff;
/* CP2077 palette: yellow / hot-pink / electric-cyan */
--cyber-bg: #060608;
--cyber-fg: #e8e6d0;
--cyber-card: #0c0c14;
--cyber-muted: #14141e;
--cyber-muted-fg: #6b7088;
--cyber-border: #1e1e2c;
--cyber-accent: #f5e642;
--cyber-accent-2: #ff2a6d;
--cyber-accent-3: #05d9e8;
--accent: var(--cyber-accent);
--accent-rgb: 0, 255, 136;
--accent-rgb: 245, 230, 66;
--accent-2: var(--cyber-accent-2);
--accent-3: var(--cyber-accent-3);
--accent-secondary-rgb: 255, 0, 255;
--accent-secondary-rgb: 255, 42, 109;
--page-gradient: var(--cyber-bg);
--page-texture:
radial-gradient(
circle at 18% 22%,
rgba(var(--accent-rgb), 0.12) 0%,
transparent 55%
ellipse at 15% 35%,
rgba(255, 42, 109, 0.07) 0%,
transparent 45%
),
radial-gradient(
circle at 82% 78%,
rgba(0, 212, 255, 0.1) 0%,
transparent 55%
ellipse at 85% 65%,
rgba(5, 217, 232, 0.07) 0%,
transparent 45%
),
linear-gradient(rgba(0, 255, 136, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 136, 0.045) 1px, transparent 1px);
radial-gradient(
ellipse at 50% 88%,
rgba(245, 230, 66, 0.05) 0%,
transparent 40%
),
linear-gradient(rgba(245, 230, 66, 0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(245, 230, 66, 0.028) 1px, transparent 1px);
--title-gradient: linear-gradient(
90deg,
var(--cyber-accent-2) 0%,
var(--cyber-accent-3) 45%,
var(--cyber-accent) 100%
var(--cyber-accent) 50%,
var(--cyber-accent-3) 100%
);
--control-bg: rgba(10, 10, 15, 0.78);
--control-border: rgba(0, 255, 136, 0.28);
--control-inset: rgba(255, 255, 255, 0.04);
--control-bg: rgba(6, 6, 8, 0.92);
--control-border: rgba(245, 230, 66, 0.5);
--control-inset: rgba(255, 255, 255, 0.03);
--control-fg: var(--cyber-fg);
--box-shadow-neon: 0 0 5px #00ff88, 0 0 10px #00ff8840;
--box-shadow-neon-sm: 0 0 3px #00ff88, 0 0 6px #00ff8830;
--box-shadow-neon: 0 0 6px #f5e642, 0 0 14px rgba(245, 230, 66, 0.4);
--box-shadow-neon-sm: 0 0 3px #f5e642, 0 0 8px rgba(245, 230, 66, 0.3);
--box-shadow-neon-lg:
0 0 10px #00ff88, 0 0 20px #00ff8860, 0 0 40px #00ff8830;
--box-shadow-neon-secondary: 0 0 5px #ff00ff, 0 0 20px #ff00ff60;
--box-shadow-neon-tertiary: 0 0 5px #00d4ff, 0 0 20px #00d4ff60;
0 0 10px #f5e642, 0 0 25px rgba(245, 230, 66, 0.55),
0 0 55px rgba(245, 230, 66, 0.2);
--box-shadow-neon-secondary:
0 0 5px #ff2a6d, 0 0 18px rgba(255, 42, 109, 0.55);
--box-shadow-neon-tertiary: 0 0 5px #05d9e8, 0 0 18px rgba(5, 217, 232, 0.55);
--cyber-chamfer: polygon(
0 12px,
12px 0,
calc(100% - 12px) 0,
100% 12px,
100% calc(100% - 12px),
calc(100% - 12px) 100%,
12px 100%,
0 calc(100% - 12px)
0 14px,
14px 0,
calc(100% - 14px) 0,
100% 14px,
100% calc(100% - 14px),
calc(100% - 14px) 100%,
14px 100%,
0 calc(100% - 14px)
);
--cyber-chamfer-sm: polygon(
0 8px,
@@ -620,42 +628,51 @@ html[data-theme="dark"]:not([data-design-theme="terminal"])
}
}
@keyframes cyberpunk-rgbShift {
0%,
100% {
text-shadow:
-2px 0 rgba(255, 0, 255, 0.65),
2px 0 rgba(0, 212, 255, 0.65),
0 0 18px rgba(0, 255, 136, 0.25);
}
50% {
text-shadow:
2px 0 rgba(255, 0, 255, 0.65),
-2px 0 rgba(0, 212, 255, 0.65),
0 0 22px rgba(0, 255, 136, 0.3);
}
}
@keyframes cyberpunk-glitch {
0%,
92%,
100% {
@keyframes cyberpunk-title-anim {
0% {
filter: drop-shadow(-2px 0 rgba(255, 42, 109, 0.75))
drop-shadow(2px 0 rgba(5, 217, 232, 0.75))
drop-shadow(0 0 18px rgba(245, 230, 66, 0.3));
clip-path: inset(0 0 0 0);
transform: translate3d(0, 0, 0);
opacity: 0.65;
}
93% {
clip-path: inset(12% 0 72% 0);
transform: translate3d(-2px, 0, 0);
opacity: 0.95;
30% {
filter: drop-shadow(3px 0 rgba(255, 42, 109, 0.75))
drop-shadow(-3px 0 rgba(5, 217, 232, 0.75))
drop-shadow(0 0 24px rgba(245, 230, 66, 0.4));
clip-path: inset(0 0 0 0);
transform: translate3d(0, 0, 0);
}
94% {
clip-path: inset(58% 0 18% 0);
transform: translate3d(2px, 1px, 0);
60%,
84% {
filter: drop-shadow(-2px 0 rgba(255, 42, 109, 0.75))
drop-shadow(2px 0 rgba(5, 217, 232, 0.75))
drop-shadow(0 0 18px rgba(245, 230, 66, 0.3));
clip-path: inset(0 0 0 0);
transform: translate3d(0, 0, 0);
}
95% {
clip-path: inset(34% 0 52% 0);
transform: translate3d(-1px, -1px, 0);
85% {
clip-path: inset(10% 0 76% 0);
transform: translate3d(-6px, 0, 0);
filter: drop-shadow(5px 0 #ff2a6d) drop-shadow(-2px 0 #05d9e8);
}
86% {
clip-path: inset(62% 0 12% 0);
transform: translate3d(6px, 2px, 0);
filter: drop-shadow(-5px 0 #ff2a6d) drop-shadow(2px 0 #05d9e8);
}
87% {
clip-path: inset(38% 0 44% 0);
transform: translate3d(-3px, -2px, 0);
filter: drop-shadow(0 0 10px #f5e642) drop-shadow(3px 0 #ff2a6d);
}
88%,
100% {
filter: drop-shadow(-2px 0 rgba(255, 42, 109, 0.75))
drop-shadow(2px 0 rgba(5, 217, 232, 0.75))
drop-shadow(0 0 18px rgba(245, 230, 66, 0.3));
clip-path: inset(0 0 0 0);
transform: translate3d(0, 0, 0);
}
}
@@ -672,9 +689,13 @@ html[data-theme="dark"]:not([data-design-theme="terminal"])
}
}
@keyframes cyberpunk-blink {
@keyframes cyberpunk-corner-pulse {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 0;
opacity: 1;
}
}
@@ -804,8 +825,9 @@ html[data-design-theme="cyberpunk"] body::before {
background-size:
auto,
auto,
50px 50px,
50px 50px;
auto,
60px 60px,
60px 60px;
}
html[data-design-theme="cyberpunk"] body::after {
@@ -814,19 +836,19 @@ html[data-design-theme="cyberpunk"] body::after {
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.55;
opacity: 0.6;
background:
repeating-linear-gradient(
0deg,
transparent 0px,
transparent 2px,
rgba(0, 0, 0, 0.35) 2px,
rgba(0, 0, 0, 0.35) 4px
rgba(0, 0, 0, 0.4) 2px,
rgba(0, 0, 0, 0.4) 4px
),
linear-gradient(
180deg,
transparent 0%,
rgba(0, 255, 136, 0.12) 50%,
rgba(245, 230, 66, 0.08) 50%,
transparent 100%
);
background-size:
@@ -848,16 +870,21 @@ html[data-design-theme="cyberpunk"] .theme-toggle {
clip-path: var(--cyber-chamfer-sm);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid rgba(var(--accent-rgb), 0.5);
background: rgba(10, 10, 15, 0.88);
border: 1px solid rgba(var(--accent-rgb), 0.55);
border-bottom: 2px solid rgba(var(--accent-rgb), 0.8);
background: rgba(6, 6, 8, 0.92);
box-shadow: var(--box-shadow-neon-sm);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cyber-fg);
}
html[data-design-theme="cyberpunk"] .design-theme-button:hover,
html[data-design-theme="cyberpunk"] .theme-toggle:hover {
border-color: rgba(var(--accent-rgb), 0.9);
border-color: rgba(var(--accent-rgb), 0.95);
border-bottom-color: var(--cyber-accent);
background: rgba(245, 230, 66, 0.07);
color: var(--cyber-accent);
box-shadow: var(--box-shadow-neon);
transform: translateY(-1px);
}
@@ -871,7 +898,7 @@ html[data-design-theme="cyberpunk"] .theme-toggle:focus-visible {
html[data-design-theme="cyberpunk"] .theme-toggle {
cursor: not-allowed;
opacity: 0.72;
opacity: 0.65;
}
html[data-design-theme="cyberpunk"] .theme-icon-sun {
@@ -885,8 +912,9 @@ html[data-design-theme="cyberpunk"] .theme-icon-moon {
html[data-design-theme="cyberpunk"] .design-theme-list {
border-radius: 0;
clip-path: var(--cyber-chamfer);
background: rgba(10, 10, 15, 0.92);
border: 1px solid rgba(var(--accent-rgb), 0.45);
background: rgba(6, 6, 8, 0.96);
border: 1px solid rgba(var(--accent-rgb), 0.5);
border-bottom: 2px solid rgba(var(--accent-rgb), 0.85);
box-shadow: var(--box-shadow-neon-sm);
backdrop-filter: none;
-webkit-backdrop-filter: none;
@@ -903,9 +931,9 @@ html[data-design-theme="cyberpunk"] .design-theme-list [role="option"]:hover,
html[data-design-theme="cyberpunk"]
.design-theme-list
[role="option"][aria-selected="true"] {
background: rgba(var(--accent-rgb), 0.14);
color: var(--cyber-fg);
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.55);
background: rgba(var(--accent-rgb), 0.12);
color: var(--cyber-accent);
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.6);
}
html[data-design-theme="cyberpunk"] .title {
@@ -917,8 +945,7 @@ html[data-design-theme="cyberpunk"] .title {
text-transform: uppercase;
letter-spacing: 0.08em;
position: relative;
filter: drop-shadow(0 0 14px rgba(0, 255, 136, 0.24));
animation: cyberpunk-rgbShift 4.5s ease-in-out infinite;
animation: cyberpunk-title-anim 10s ease-in-out infinite;
}
html[data-design-theme="cyberpunk"] .title-cursor {
@@ -928,20 +955,39 @@ html[data-design-theme="cyberpunk"] .title-cursor {
html[data-design-theme="cyberpunk"] .card {
border-radius: 0;
clip-path: var(--cyber-chamfer);
background: rgba(18, 18, 26, 0.92);
border: 1px solid rgba(42, 42, 58, 0.92);
background: rgba(12, 12, 20, 0.94);
border: 1px solid rgba(30, 30, 44, 0.94);
border-top: 2px solid rgba(var(--accent-rgb), 0.55);
box-shadow:
0 0 0 1px rgba(var(--accent-rgb), 0.12),
0 10px 28px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(var(--accent-rgb), 0.1),
0 12px 32px rgba(0, 0, 0, 0.6),
var(--box-shadow-neon-sm);
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: translateY(0);
transition: all 120ms steps(4, end);
position: relative;
overflow: hidden;
}
/* HUD corner brackets */
html[data-design-theme="cyberpunk"] .card::before {
display: none;
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(var(--cyber-accent), var(--cyber-accent)) top left / 16px
2px no-repeat,
linear-gradient(var(--cyber-accent), var(--cyber-accent)) top left / 2px
16px no-repeat,
linear-gradient(var(--cyber-accent), var(--cyber-accent)) bottom right /
16px 2px no-repeat,
linear-gradient(var(--cyber-accent), var(--cyber-accent)) bottom right / 2px
16px no-repeat;
opacity: 0;
pointer-events: none;
z-index: 1;
animation: cyberpunk-corner-pulse 3s ease-in-out infinite;
}
html[data-design-theme="cyberpunk"] .card h2 {
@@ -956,32 +1002,38 @@ html[data-design-theme="cyberpunk"] .card p {
html[data-design-theme="cyberpunk"] .card:hover,
html[data-design-theme="cyberpunk"] .card:focus {
color: var(--cyber-fg);
border-color: rgba(var(--accent-rgb), 0.9);
transform: translateY(-1px);
border-top-color: var(--cyber-accent);
border-color: rgba(var(--accent-rgb), 0.85);
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(var(--accent-rgb), 0.22),
0 12px 34px rgba(0, 0, 0, 0.6),
0 14px 38px rgba(0, 0, 0, 0.65),
var(--box-shadow-neon-lg);
}
html[data-design-theme="cyberpunk"] .card:hover::before,
html[data-design-theme="cyberpunk"] .card:focus::before {
opacity: 0.9;
animation: none;
}
html[data-design-theme="cyberpunk"] .card:hover h2,
html[data-design-theme="cyberpunk"] .card:focus h2 {
color: var(--cyber-fg);
color: var(--cyber-accent);
}
html[data-design-theme="cyberpunk"] .card:hover p,
html[data-design-theme="cyberpunk"] .card:focus p {
color: rgba(224, 224, 224, 0.92);
color: rgba(232, 230, 208, 0.9);
}
html[data-design-theme="cyberpunk"] .beian a {
color: rgba(224, 224, 224, 0.72);
color: rgba(232, 230, 208, 0.6);
}
html[data-design-theme="cyberpunk"] .beian a:hover {
color: var(--cyber-accent);
text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.28);
text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}
@media (max-width: 600px) {
@@ -1004,9 +1056,8 @@ html[data-design-theme="cyberpunk"] .beian a:hover {
@media (prefers-reduced-motion: reduce) {
html[data-design-theme="cyberpunk"] body::after,
html[data-design-theme="cyberpunk"] .title,
html[data-design-theme="cyberpunk"] .title::before,
html[data-design-theme="cyberpunk"] .title::after,
html[data-design-theme="cyberpunk"] .card {
html[data-design-theme="cyberpunk"] .card,
html[data-design-theme="cyberpunk"] .card::before {
animation: none !important;
transition-duration: 0.01ms !important;
transform: none !important;