cool/termi-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine frontend navigation, loading UI, and site copy
Some checks failed
docker-images / resolve-build-targets (push) Successful in 6s
Details
ui-regression / playwright-regression (push) Failing after 13m3s
Details
docker-images / build-and-push (admin) (push) Successful in 4s
Details
docker-images / submit-indexnow (push) Has been cancelled
Details
docker-images / build-and-push (frontend) (push) Has been cancelled
Details
docker-images / build-and-push (backend) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
limitcool
2026-04-03 23:43:30 +08:00
parent 99a57738e0
commit ad44dde886
14 changed files with 2121 additions and 825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/SubscriptionPopup.astro
View File

@@ -1021,7 +1021,8 @@ const webPushAvailable = Boolean(webPushPublicKey);
gap: 1rem;
margin-top: var(--subscription-popup-offset, calc(env(safe-area-inset-top, 0px) + 5.25rem));
padding: 1.1rem;
border-radius: 1.7rem;
padding-top: 3.5rem;
border-radius: 1.55rem;
opacity: 0;
transform: translateY(-1rem) scale(0.985);
transition:
@@ -1031,16 +1032,20 @@ const webPushAvailable = Boolean(webPushPublicKey);
overflow: hidden;
backdrop-filter: blur(16px) saturate(135%);
background:
radial-gradient(circle at top left, rgba(var(--primary-rgb), 0.15), transparent 26%),
radial-gradient(circle at bottom right, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.1), transparent 28%),
linear-gradient(
135deg,
rgba(var(--primary-rgb), 0.09),
rgba(var(--secondary-rgb, var(--primary-rgb)), 0.04) 42%,
transparent 72%
),
linear-gradient(
180deg,
color-mix(in oklab, var(--terminal-bg) 99%, white),
color-mix(in oklab, var(--header-bg) 93%, white)
color-mix(in oklab, var(--terminal-bg) 97%, transparent),
color-mix(in oklab, var(--header-bg) 92%, transparent)
);
box-shadow:
0 28px 70px rgba(var(--text-rgb), 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.34);
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.subscription-popup-panel::before {
@@ -1066,20 +1071,25 @@ const webPushAvailable = Boolean(webPushPublicKey);
position: absolute;
top: 0.8rem;
right: 0.8rem;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border-color));
background: color-mix(in oklab, var(--terminal-bg) 94%, transparent);
border: 1px solid color-mix(in oklab, var(--primary) 16%, var(--border-color));
background: color-mix(in oklab, var(--header-bg) 90%, var(--terminal-bg));
color: var(--text-tertiary);
cursor: pointer;
transition:
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
transform 0.2s ease,
box-shadow 0.2s ease;
box-shadow:
0 10px 22px rgba(var(--text-rgb), 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.subscription-popup-close:hover {
@@ -1097,23 +1107,25 @@ const webPushAvailable = Boolean(webPushPublicKey);
.subscription-popup-main {
display: grid;
gap: 1rem;
position: relative;
z-index: 1;
}
.subscription-popup-copy-surface,
.subscription-popup-channel-card {
position: relative;
overflow: hidden;
border-radius: 1.35rem;
border-radius: 1.2rem;
border: 1px solid color-mix(in oklab, var(--primary) 10%, var(--border-color));
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--terminal-bg) 99%, white),
color-mix(in oklab, var(--header-bg) 94%, white)
color-mix(in oklab, var(--terminal-bg) 97%, transparent),
color-mix(in oklab, var(--header-bg) 91%, transparent)
);
box-shadow:
0 12px 30px rgba(var(--text-rgb), 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.42);
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.subscription-popup-copy-surface {
@@ -1167,7 +1179,7 @@ const webPushAvailable = Boolean(webPushPublicKey);
min-height: 3.35rem;
border-radius: 1rem;
border: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border-color));
background: color-mix(in oklab, var(--terminal-bg) 98%, white);
background: color-mix(in oklab, var(--terminal-bg) 97%, transparent);
color: var(--text-secondary);
padding: 0.85rem 1rem;
text-align: left;
@@ -1191,7 +1203,7 @@ const webPushAvailable = Boolean(webPushPublicKey);
border: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border-color));
background: color-mix(in oklab, var(--primary) 10%, var(--terminal-bg));
color: var(--primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.subscription-popup-channel-toggle-copy {
@@ -1241,11 +1253,11 @@ const webPushAvailable = Boolean(webPushPublicKey);
}
.subscription-popup-channel-toggle--primary {
border-color: color-mix(in oklab, var(--primary) 52%, white);
border-color: color-mix(in oklab, var(--primary) 48%, var(--border-color));
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--primary) 88%, white),
color-mix(in oklab, var(--primary) 82%, white),
color-mix(in oklab, var(--primary) 72%, var(--header-bg))
);
color: white;
@@ -1285,7 +1297,7 @@ const webPushAvailable = Boolean(webPushPublicKey);
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--secondary, var(--primary)) 26%, white),
color-mix(in oklab, var(--secondary, var(--primary)) 22%, var(--terminal-bg)),
color-mix(in oklab, var(--secondary, var(--primary)) 14%, var(--header-bg))
);
box-shadow:
@@ -1490,11 +1502,11 @@ const webPushAvailable = Boolean(webPushPublicKey);
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--header-bg) 96%, white),
color-mix(in oklab, var(--terminal-bg) 98%, white)
color-mix(in oklab, var(--header-bg) 94%, transparent),
color-mix(in oklab, var(--terminal-bg) 97%, transparent)
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 14px 32px rgba(var(--text-rgb), 0.05);
}
@@ -1589,7 +1601,7 @@ const webPushAvailable = Boolean(webPushPublicKey);
border: 1px solid color-mix(in oklab, var(--primary) 14%, var(--border-color));
background: color-mix(in oklab, var(--primary) 10%, var(--terminal-bg));
color: var(--primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.subscription-popup-channel-icon--mail {
@@ -1615,7 +1627,7 @@ const webPushAvailable = Boolean(webPushPublicKey);
margin-top: 0.15rem;
border-radius: 1.05rem;
border: 1px solid color-mix(in oklab, var(--primary) 10%, var(--border-color));
background: color-mix(in oklab, var(--header-bg) 65%, white);
background: color-mix(in oklab, var(--header-bg) 88%, var(--terminal-bg));
padding: 0.9rem 0.95rem;
}
@@ -1736,7 +1748,7 @@ const webPushAvailable = Boolean(webPushPublicKey);
.subscription-popup-panel {
gap: 0.9rem;
padding: 0.95rem 0.9rem 0.95rem;
padding: 3.1rem 0.9rem 0.95rem;
}
.subscription-popup-copy-mark {
@@ -1756,7 +1768,7 @@ const webPushAvailable = Boolean(webPushPublicKey);
.subscription-popup-copy-surface,
.subscription-popup-channel-card {
border-radius: 1.2rem;
border-radius: 1.05rem;
}
.subscription-popup-copy-surface {