web theme: drop terminal leftovers (prompt hero, filename eyebrows, git command lines), make light buttons readable, remove unused assets
This commit is contained in:
parent
c39cf0efe4
commit
7beb197f72
10 changed files with 129 additions and 105 deletions
126
src/app/web.css
126
src/app/web.css
|
|
@ -1,29 +1,3 @@
|
|||
/* ============================================================
|
||||
FONT FACES
|
||||
------------------------------------------------------------
|
||||
Monocraft is no longer the web theme's font, but it is still
|
||||
used by the desktop theme's Minecraft-style SMP menu and the
|
||||
in-desktop terminal, so the faces stay registered here.
|
||||
============================================================ */
|
||||
@font-face {
|
||||
font-family: "Monocraft";
|
||||
src: url("/Monocraft.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Monocraft";
|
||||
src: url("/Monocraft-Bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Monocraft";
|
||||
src: url("/Monocraft-Italic.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
WEB THEME — light frosted-glass website shell.
|
||||
------------------------------------------------------------
|
||||
|
|
@ -95,6 +69,11 @@ html[data-theme="web"][data-scheme="dark"] {
|
|||
--blob-c: rgba(236, 72, 153, 0.18);
|
||||
--blob-d: rgba(45, 212, 191, 0.16);
|
||||
|
||||
--btn-bg: rgba(255, 255, 255, 0.06);
|
||||
--btn-bg-hi: rgba(255, 255, 255, 0.12);
|
||||
--btn-border: rgba(255, 255, 255, 0.16);
|
||||
--btn-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.9);
|
||||
|
||||
--bg-hard: rgba(255, 255, 255, 0.08);
|
||||
--green: #34d399;
|
||||
--aqua: #2dd4bf;
|
||||
|
|
@ -106,6 +85,15 @@ html[data-theme="web"][data-scheme="dark"] {
|
|||
|
||||
html[data-theme="web"] {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/* Interactive surfaces (buttons, cards, chips). Kept a step more opaque and
|
||||
more clearly outlined than the glass panels, so they don't melt into the
|
||||
light background. The base rules read these with the old glass tokens as
|
||||
fallbacks, which keeps the desktop theme untouched. */
|
||||
--btn-bg: rgba(255, 255, 255, 0.62);
|
||||
--btn-bg-hi: rgba(255, 255, 255, 0.92);
|
||||
--btn-border: rgba(20, 28, 52, 0.14);
|
||||
--btn-shadow: 0 8px 20px -12px rgba(23, 32, 60, 0.45);
|
||||
}
|
||||
|
||||
html[data-theme="web"] body {
|
||||
|
|
@ -261,8 +249,9 @@ html[data-theme="web"] body {
|
|||
gap: 10px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--glass-lo);
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
font-size: 0.82rem;
|
||||
|
|
@ -272,7 +261,7 @@ html[data-theme="web"] body {
|
|||
}
|
||||
.web-ctl:hover {
|
||||
border-color: var(--accent-line);
|
||||
background: var(--glass-hi);
|
||||
background: var(--btn-bg-hi, var(--glass-hi));
|
||||
box-shadow: 0 0 0 1px var(--accent-soft);
|
||||
}
|
||||
.web-ctl-icon {
|
||||
|
|
@ -290,7 +279,7 @@ html[data-theme="web"] body {
|
|||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: var(--bg-hard);
|
||||
border: 1px solid var(--glass-border);
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -385,13 +374,13 @@ html[data-theme="web"] body {
|
|||
box-shadow: 0 16px 30px -12px var(--accent);
|
||||
}
|
||||
.web-pill.ghost {
|
||||
background: var(--glass-lo);
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
}
|
||||
.web-pill.ghost:hover {
|
||||
background: var(--glass-hi);
|
||||
background: var(--btn-bg-hi, var(--glass-hi));
|
||||
border-color: var(--accent-line);
|
||||
}
|
||||
|
||||
|
|
@ -514,8 +503,9 @@ html[data-theme="web"] body {
|
|||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--glass-lo);
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
min-width: 0;
|
||||
|
|
@ -525,7 +515,7 @@ html[data-theme="web"] body {
|
|||
.service-button:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--accent-line);
|
||||
background: var(--glass-hi);
|
||||
background: var(--btn-bg-hi, var(--glass-hi));
|
||||
box-shadow: 0 18px 34px -18px rgba(23, 32, 60, 0.5), 0 0 0 1px var(--accent-soft);
|
||||
}
|
||||
.service-button.disabled {
|
||||
|
|
@ -533,9 +523,9 @@ html[data-theme="web"] body {
|
|||
}
|
||||
.service-button.disabled:hover {
|
||||
transform: none;
|
||||
border-color: var(--glass-border);
|
||||
background: var(--glass-lo);
|
||||
box-shadow: none;
|
||||
border-color: var(--btn-border, var(--glass-border));
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
}
|
||||
.service-button.disabled:hover .service-icon {
|
||||
transform: none;
|
||||
|
|
@ -651,8 +641,9 @@ html[data-theme="web"][data-scheme="dark"] .friend-icon {
|
|||
margin-bottom: 14px;
|
||||
padding: 12px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--glass-lo);
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease,
|
||||
|
|
@ -661,7 +652,7 @@ html[data-theme="web"][data-scheme="dark"] .friend-icon {
|
|||
.project-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--accent-line);
|
||||
background: var(--glass-hi);
|
||||
background: var(--btn-bg-hi, var(--glass-hi));
|
||||
box-shadow: 0 20px 38px -20px rgba(23, 32, 60, 0.55);
|
||||
}
|
||||
.project-image {
|
||||
|
|
@ -701,8 +692,9 @@ html[data-theme="web"][data-scheme="dark"] .friend-icon {
|
|||
gap: 9px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid transparent;
|
||||
background: var(--glass-lo);
|
||||
border: 1px solid var(--btn-border, transparent);
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
color: var(--fg);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 550;
|
||||
|
|
@ -711,8 +703,8 @@ html[data-theme="web"][data-scheme="dark"] .friend-icon {
|
|||
}
|
||||
.social-button:hover {
|
||||
transform: translateY(-2px);
|
||||
background: var(--glass-hi);
|
||||
border-color: var(--glass-border);
|
||||
background: var(--btn-bg-hi, var(--glass-hi));
|
||||
border-color: var(--btn-border, var(--glass-border));
|
||||
color: var(--accent);
|
||||
}
|
||||
.social-icon {
|
||||
|
|
@ -750,8 +742,9 @@ html[data-theme="web"][data-scheme="dark"] .social-icon {
|
|||
gap: 6px;
|
||||
padding: 12px 8px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--glass-lo);
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
text-align: center;
|
||||
transition: border-color 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
|
@ -806,9 +799,9 @@ html[data-theme="web"][data-scheme="dark"] .social-icon {
|
|||
display: flex;
|
||||
gap: 3px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--glass-border);
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
border-radius: 14px;
|
||||
background: var(--glass-lo);
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
|
@ -912,6 +905,13 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
|
|||
min-width: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.contribution-log-title {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--web-muted);
|
||||
}
|
||||
.contribution-entry {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -919,8 +919,9 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
|
|||
min-width: 0;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--glass-lo);
|
||||
border: 1px solid var(--btn-border, var(--glass-border));
|
||||
background: var(--btn-bg, var(--glass-lo));
|
||||
box-shadow: var(--btn-shadow, none);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.contribution-entry-header {
|
||||
|
|
@ -982,25 +983,6 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
|
|||
/* ============================================================
|
||||
SHARED BITS
|
||||
============================================================ */
|
||||
.cursor-blink {
|
||||
display: inline-block;
|
||||
width: 7px;
|
||||
height: 1.05em;
|
||||
margin-left: 4px;
|
||||
vertical-align: text-bottom;
|
||||
background: var(--accent);
|
||||
animation: cursorBlink 1s step-end infinite;
|
||||
}
|
||||
@keyframes cursorBlink {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.joker-flash-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue