biss/Letters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式
Vercel Deploy / deploy (push) Successful in 1m12s
Details

Browse Source
This commit is contained in:
biss
2026-05-05 08:17:28 +08:00
Unverified
parent 82210681c0
commit 92e13ac836
11 changed files with 855 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
2000s/css/notice-page.css
+184
View File
@@ -534,3 +534,187 @@ h1 {
border-radius: 16px;
}
}
/* 2010s skeuomorphic notice page */
html {
color-scheme: light;
}
body.notice-skeuo {
--bg: #eee7d7;
--panel: #eef2f7;
--panel-strong: #e3e8ef;
--line: #9aa8b8;
--line-strong: #6687aa;
--text: #243247;
--muted: #647086;
--accent: #2d74bf;
--accent-strong: #4b9a67;
--warning: #d5942d;
color: var(--text);
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.23) 1px, transparent 1px),
linear-gradient(0deg, rgba(60, 47, 27, 0.07) 1px, transparent 1px),
radial-gradient(circle at 18% 6%, rgba(255, 255, 255, 0.75), transparent 30%),
linear-gradient(135deg, #d8cbae 0%, #eee7d7 38%, #c3cfda 100%);
background-size: 24px 24px, 24px 24px, auto, auto;
}
body.notice-skeuo .notice-page {
width: min(calc(100% - 28px), 1120px);
padding-top: 26px;
}
body.notice-skeuo .topbar {
margin-bottom: 18px;
padding: 12px;
border: 1px solid #8d9bae;
border-radius: 8px;
background: linear-gradient(#fdfefe, #dfe7f0);
box-shadow: 0 10px 22px rgba(68, 55, 34, 0.14), inset 0 1px 0 #ffffff;
}
body.notice-skeuo .brand-mark {
border-color: #174b83;
border-radius: 5px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 48%),
linear-gradient(#3e8ddd, #1d65a9 52%, #174f8b);
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 2px 4px rgba(47, 66, 90, 0.26);
}
body.notice-skeuo .back-link,
body.notice-skeuo .primary-action {
border: 1px solid #174b83;
border-radius: 5px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 48%),
linear-gradient(#3e8ddd, #1d65a9 52%, #174f8b);
color: #ffffff;
font-weight: 800;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 2px 4px rgba(47, 66, 90, 0.26);
}
body.notice-skeuo .notice-hero {
gap: 0;
border: 1px solid #8998aa;
border-radius: 8px;
background: linear-gradient(#eef4fb, #cfd9e6 48%, #b6c4d5 49%, #e7edf4 100%);
box-shadow: 0 18px 34px rgba(68, 55, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
overflow: hidden;
}
body.notice-skeuo .hero-copy,
body.notice-skeuo .status-panel,
body.notice-skeuo .notice-card,
body.notice-skeuo .side-card {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
body.notice-skeuo .hero-copy {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 52%),
linear-gradient(135deg, #f8fbff, #d7e2ef 58%, #c7d3e2);
border-right: 1px solid rgba(101, 116, 135, 0.45);
}
body.notice-skeuo h1,
body.notice-skeuo .notice-card h2,
body.notice-skeuo .side-card h2 {
color: #223049;
font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
text-shadow: 0 1px 0 #ffffff, 0 2px 3px rgba(60, 74, 92, 0.18);
}
body.notice-skeuo .eyebrow {
padding: 7px 13px;
border: 1px solid #8fa6be;
border-radius: 4px;
background: linear-gradient(#fefefe, #d5e1ef);
color: #315d8d;
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(58, 73, 92, 0.12);
}
body.notice-skeuo .hero-copy p,
body.notice-skeuo .status-panel p,
body.notice-skeuo .notice-card p,
body.notice-skeuo .side-card p,
body.notice-skeuo .notice-meta span,
body.notice-skeuo .info-label {
color: var(--muted);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}
body.notice-skeuo .status-panel {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 42%),
linear-gradient(#ccd8e5, #aebdd0);
}
body.notice-skeuo .status-badge,
body.notice-skeuo .notice-meta span {
border: 1px solid #bcc7d2;
border-radius: 5px;
background: linear-gradient(#fffdf8, #ece5d7);
color: #536174;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(76, 67, 47, 0.12);
}
body.notice-skeuo .status-code {
padding: 15px 10px;
border: 1px solid #7d8da0;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 45%),
linear-gradient(#495f7b, #22364f);
color: #f7fbff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.58), 0 1px 8px rgba(182, 220, 255, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -14px 22px rgba(0, 0, 0, 0.18), 0 2px 5px rgba(51, 62, 78, 0.22);
}
body.notice-skeuo .notice-layout {
gap: 16px;
}
body.notice-skeuo .notice-card,
body.notice-skeuo .side-card {
border: 1px solid #8d9bae;
border-radius: 8px;
background: linear-gradient(#fdfefe, #e3e8ef);
box-shadow: 0 14px 28px rgba(68, 55, 34, 0.18), inset 0 1px 0 #ffffff;
}
body.notice-skeuo .info-grid div {
border: 1px solid #b7c3d1;
border-radius: 6px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 42%),
linear-gradient(#fffdf8, #eee7d8);
box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(64, 78, 96, 0.1);
}
body.notice-skeuo code {
color: var(--accent);
}
@media (max-width: 760px) {
body.notice-skeuo .notice-hero,
body.notice-skeuo .notice-layout,
body.notice-skeuo .info-grid {
grid-template-columns: 1fr;
}
body.notice-skeuo .hero-copy {
border-right: 0;
border-bottom: 1px solid rgba(101, 116, 135, 0.45);
}
}