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