This commit is contained in:
2026-05-18 05:01:36 -06:00
parent 783359af98
commit cf09b8dd08
11 changed files with 1313 additions and 54 deletions

129
style.css
View File

@@ -51,32 +51,24 @@ body {
html[data-design-theme="terminal"] {
color-scheme: dark;
--accent: #33ff00;
--accent-rgb: 51, 255, 0;
--accent-2: #33ff00;
--accent-3: #33ff00;
--accent-secondary-rgb: 255, 176, 0;
--accent: #bd93f9;
--accent-rgb: 189, 147, 249;
--accent-2: #ff79c6;
--accent-3: #8be9fd;
--accent-secondary-rgb: 255, 121, 198;
--page-gradient: #0a0a0a;
--page-texture:
repeating-linear-gradient(
to bottom,
rgba(var(--accent-rgb), 0.035) 0px,
rgba(var(--accent-rgb), 0.035) 1px,
transparent 2px,
transparent 4px
),
radial-gradient(
circle at 50% 50%,
rgba(var(--accent-rgb), 0.05) 0%,
transparent 60%
);
--title-gradient: none;
--page-gradient: #282a36;
--page-texture: radial-gradient(
circle,
rgba(98, 114, 164, 0.55) 1px,
transparent 1px
);
--title-gradient: linear-gradient(90deg, #bd93f9 0%, #ff79c6 100%);
--control-bg: rgba(10, 10, 10, 0.85);
--control-border: rgba(var(--accent-rgb), 0.35);
--control-bg: rgba(40, 42, 54, 0.92);
--control-border: #44475a;
--control-inset: transparent;
--control-fg: var(--accent);
--control-fg: #f8f8f2;
}
html[data-design-theme="cyberpunk"] {
@@ -704,7 +696,11 @@ html[data-design-theme="terminal"] body {
ui-monospace, "JetBrains Mono", "Fira Code", "VT323", Menlo, Consolas,
"Liberation Mono", monospace;
letter-spacing: 0.01em;
color: var(--accent);
color: #f8f8f2;
}
html[data-design-theme="terminal"] body::before {
background-size: 20px 20px;
}
html[data-design-theme="terminal"] .theme-controls {
@@ -713,11 +709,11 @@ html[data-design-theme="terminal"] .theme-controls {
html[data-design-theme="terminal"] .design-theme-button,
html[data-design-theme="terminal"] .theme-toggle {
border-radius: 0;
border-radius: 8px;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid rgba(var(--accent-rgb), 0.55);
border: 1px solid #44475a;
}
html[data-design-theme="terminal"] .theme-toggle {
@@ -726,9 +722,9 @@ html[data-design-theme="terminal"] .theme-toggle {
html[data-design-theme="terminal"] .design-theme-button:hover,
html[data-design-theme="terminal"] .theme-toggle:hover {
background: var(--accent);
color: #0a0a0a;
border-color: var(--accent);
background: rgba(189, 147, 249, 0.08);
color: #bd93f9;
border-color: #bd93f9;
transform: none;
}
@@ -737,12 +733,12 @@ html[data-design-theme="terminal"] .design-theme-button::after {
}
html[data-design-theme="terminal"] .design-theme-list {
border-radius: 0;
border-radius: 10px;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(10, 10, 10, 0.92);
border: 1px solid rgba(var(--accent-rgb), 0.55);
background: rgba(40, 42, 54, 0.96);
border: 1px solid #44475a;
}
html[data-design-theme="terminal"] .design-theme-list [role="option"] {
@@ -754,15 +750,17 @@ html[data-design-theme="terminal"] .design-theme-list [role="option"]:hover,
html[data-design-theme="terminal"]
.design-theme-list
[role="option"][aria-selected="true"] {
background: var(--accent);
color: #0a0a0a;
background: rgba(189, 147, 249, 0.15);
color: #bd93f9;
}
html[data-design-theme="terminal"] .title {
background: none;
-webkit-text-fill-color: currentColor;
color: var(--accent);
text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.5);
background: var(--title-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: none;
text-transform: uppercase;
letter-spacing: 0.04em;
position: relative;
@@ -772,44 +770,67 @@ html[data-design-theme="terminal"] .title::after {
content: "\2588";
margin-left: 8px;
animation: terminal-cursor-blink 1s step-end infinite;
-webkit-text-fill-color: #bd93f9;
}
html[data-design-theme="terminal"] .card {
border-radius: 0;
background: transparent;
border: 1px solid rgba(var(--accent-rgb), 0.35);
box-shadow: none;
border-radius: 10px;
background: #313244;
border: 1px solid #44475a;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: none;
transform: translateY(0);
transition: all 0.2s ease;
}
html[data-design-theme="terminal"] .card.pin {
background: #383a4a;
}
html[data-design-theme="terminal"] .card::before {
display: none;
}
html[data-design-theme="terminal"] .card h2,
html[data-design-theme="terminal"] .card p,
html[data-design-theme="terminal"] .beian a {
color: var(--accent);
text-shadow: 0 0 5px rgba(var(--accent-rgb), 0.25);
html[data-design-theme="terminal"] .card h2 {
color: #f8f8f2;
text-shadow: none;
}
html[data-design-theme="terminal"] .card p {
color: #6272a4;
text-shadow: none;
}
html[data-design-theme="terminal"] .card:hover,
html[data-design-theme="terminal"] .card:focus {
background: rgba(var(--accent-rgb), 0.06);
border-color: var(--accent);
box-shadow: none;
background: #313244;
border-color: #bd93f9;
box-shadow:
0 0 0 1px rgba(189, 147, 249, 0.25),
0 8px 28px rgba(189, 147, 249, 0.15),
0 4px 12px rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
html[data-design-theme="terminal"] .card:hover h2,
html[data-design-theme="terminal"] .card:focus h2 {
color: var(--accent);
color: #bd93f9;
}
html[data-design-theme="terminal"] .card:hover p,
html[data-design-theme="terminal"] .card:focus p {
color: #cdd6f4;
}
html[data-design-theme="terminal"] .beian a {
color: #6272a4;
text-shadow: none;
}
html[data-design-theme="terminal"] .beian a:hover {
background: var(--accent);
color: #0a0a0a;
color: #bd93f9;
background: none;
text-shadow: none;
}