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

This commit is contained in:
2026-05-05 08:17:28 +08:00
Unverified
parent 82210681c0
commit 92e13ac836
11 changed files with 855 additions and 7 deletions
+564
View File
@@ -1708,3 +1708,567 @@ body::after {
margin: 10mm;
}
}
/* 2010s skeuomorphic query theme */
body.query-skeuo {
--skeuo-ink: #243247;
--skeuo-muted: #647086;
--skeuo-line: #b8c5d5;
--skeuo-blue: #2d74bf;
--skeuo-blue-dark: #18538f;
--skeuo-green: #4b9a67;
--skeuo-amber: #d5942d;
--skeuo-red: #c85c52;
--skeuo-paper: #f7f4ec;
--skeuo-panel: #eef2f7;
--skeuo-panel-dark: #d5dde8;
color: var(--skeuo-ink);
font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
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.query-skeuo::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 38%),
repeating-linear-gradient(90deg, rgba(86, 70, 42, 0.035) 0 1px, transparent 1px 5px);
mask-image: none;
}
body.query-skeuo::after {
background:
radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.36), transparent 24%),
linear-gradient(180deg, transparent 0%, rgba(88, 72, 48, 0.12) 100%);
}
body.query-skeuo .page-shell {
width: min(calc(100% - 28px), 1120px);
padding: 26px 0 42px;
}
body.query-skeuo .page-header {
grid-template-columns: minmax(0, 1fr) 210px;
gap: 0;
align-items: stretch;
margin-bottom: 18px;
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),
inset 0 -1px 0 rgba(70, 82, 100, 0.2);
overflow: hidden;
}
body.query-skeuo .hero-card,
body.query-skeuo .stat-card,
body.query-skeuo .panel-card {
border-radius: 0;
border: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
body.query-skeuo .hero-card::before,
body.query-skeuo .stat-card::before,
body.query-skeuo .panel-card::before,
body.query-skeuo .stat-card::after,
body.query-skeuo .panel-card::after {
display: none;
}
body.query-skeuo .hero-card {
min-height: 214px;
padding: 26px 30px;
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.query-skeuo .hero-card h1 {
margin: 14px 0 10px;
color: #223049;
font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: 0;
text-shadow: 0 1px 0 #ffffff, 0 2px 3px rgba(60, 74, 92, 0.24);
}
body.query-skeuo .hero-card p {
max-width: 720px;
color: #516075;
line-height: 1.75;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
body.query-skeuo .eyebrow {
padding: 7px 13px;
border: 1px solid #8fa6be;
border-radius: 4px;
background: linear-gradient(#fefefe, #d5e1ef);
color: #315d8d;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(58, 73, 92, 0.12);
text-transform: uppercase;
}
body.query-skeuo .hero-meta {
gap: 8px;
margin-top: 18px;
}
body.query-skeuo .meta-chip {
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.query-skeuo .stat-card {
padding: 24px 20px;
justify-content: center;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent 42%),
linear-gradient(#ccd8e5, #aebdd0);
text-align: center;
}
body.query-skeuo .stat-label {
color: #58677b;
font-size: 12px;
letter-spacing: 0.12em;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}
body.query-skeuo .stat-value {
margin-top: 12px;
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;
font-family: "Segoe UI", Arial, sans-serif;
font-size: clamp(22px, 3vw, 32px);
font-weight: 800;
letter-spacing: 0.04em;
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.query-skeuo .panel-card {
padding: 0;
margin-top: 16px;
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;
overflow: hidden;
}
body.query-skeuo .panel-title-row {
margin: 0;
padding: 14px 18px;
border-bottom: 1px solid #97a7ba;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 48%),
linear-gradient(#dce6f1, #bdcada);
box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(67, 79, 96, 0.13);
}
body.query-skeuo .panel-title {
color: #27364d;
font-size: 18px;
letter-spacing: 0;
text-shadow: 0 1px 0 #ffffff;
}
body.query-skeuo .panel-subtitle,
body.query-skeuo .form-label,
body.query-skeuo .empty-state,
body.query-skeuo .loading-state,
body.query-skeuo .page-footer {
color: var(--skeuo-muted);
}
body.query-skeuo .search-grid,
body.query-skeuo .search-grid.compact {
padding: 18px;
gap: 14px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 58%),
var(--skeuo-panel);
}
body.query-skeuo .search-grid {
grid-template-columns: minmax(250px, 1.5fr) repeat(2, minmax(142px, 0.68fr)) minmax(124px, 0.46fr);
}
body.query-skeuo .search-grid.compact {
grid-template-columns: minmax(138px, 0.84fr) minmax(190px, 1.1fr) repeat(2, minmax(132px, 0.68fr)) minmax(124px, 0.46fr);
}
body.query-skeuo .form-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-shadow: 0 1px 0 #ffffff;
}
body.query-skeuo .tech-input,
body.query-skeuo .tech-button,
body.query-skeuo .tech-link-button {
min-height: 42px;
border-radius: 5px;
font-size: 14px;
}
body.query-skeuo .tech-input {
border: 1px solid #9daabc;
background: linear-gradient(#dfe6ee, #ffffff 18%, #ffffff 82%, #edf2f6);
color: #1f2f45;
box-shadow:
inset 0 2px 5px rgba(50, 65, 86, 0.18),
0 1px 0 #ffffff;
}
body.query-skeuo .tech-input::placeholder {
color: #8792a2;
}
body.query-skeuo .tech-input:focus {
border-color: #4f85bd;
box-shadow:
inset 0 2px 5px rgba(50, 65, 86, 0.14),
0 0 0 3px rgba(73, 137, 205, 0.18),
0 1px 0 #ffffff;
}
body.query-skeuo .icon-action {
right: 5px;
width: 34px;
height: 34px;
border: 1px solid #91a3b7;
border-radius: 4px;
background: linear-gradient(#ffffff, #d5dfeb);
color: #315f93;
box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(44, 58, 78, 0.18);
}
body.query-skeuo .icon-action:hover {
background: linear-gradient(#ffffff, #c7d9ec);
border-color: #6687aa;
}
body.query-skeuo .tech-button,
body.query-skeuo .tech-link-button {
border: 1px solid #174b83;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 48%),
linear-gradient(#3e8ddd, #1d65a9 52%, #174f8b);
color: #ffffff;
font-weight: 800;
letter-spacing: 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.58),
inset 0 -10px 18px rgba(0, 0, 0, 0.12),
0 2px 4px rgba(47, 66, 90, 0.26);
}
body.query-skeuo .tech-button:hover,
body.query-skeuo .tech-link-button:hover {
transform: translateY(-1px);
border-color: #0f3f72;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
inset 0 -10px 18px rgba(0, 0, 0, 0.1),
0 4px 9px rgba(47, 66, 90, 0.3);
}
body.query-skeuo .tech-button.secondary,
body.query-skeuo .tech-link-button.secondary {
border-color: #9aa8b8;
background: linear-gradient(#ffffff, #d8e1eb);
color: #2d405a;
text-shadow: 0 1px 0 #ffffff;
}
body.query-skeuo .results-card {
min-height: 250px;
}
body.query-skeuo .results-shell,
body.query-skeuo .info-table-shell {
border: 0;
border-top: 1px solid #c6d0dc;
border-radius: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 36%),
#f5f1e8;
}
body.query-skeuo .empty-state,
body.query-skeuo .loading-state,
body.query-skeuo .feedback-card {
min-height: 170px;
background:
linear-gradient(90deg, rgba(128, 105, 68, 0.045) 1px, transparent 1px),
linear-gradient(0deg, rgba(128, 105, 68, 0.045) 1px, transparent 1px),
linear-gradient(#fbf8ef, #eee7d8);
background-size: 22px 22px, 22px 22px, auto;
text-shadow: 0 1px 0 #ffffff;
}
body.query-skeuo .results-summary {
border-bottom: 1px solid #c7d1de;
background: linear-gradient(#f8fbff, #e4ebf3);
}
body.query-skeuo .summary-stat-tile,
body.query-skeuo .stats-panel,
body.query-skeuo .award-count-chip {
border: 1px solid #b7c3d1;
border-radius: 6px;
background: linear-gradient(#ffffff, #eaf0f6);
box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(64, 78, 96, 0.1);
}
body.query-skeuo .summary-stat-tile strong,
body.query-skeuo .table-highlight,
body.query-skeuo .chart-row-value {
color: var(--skeuo-blue);
}
body.query-skeuo .result-table th,
body.query-skeuo .info-table th {
border-color: #aebac9;
background: linear-gradient(#e9f0f8, #c7d3e0);
color: #45566d;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}
body.query-skeuo .result-table td,
body.query-skeuo .info-table td {
border-color: #d7d0c2;
background: linear-gradient(#fffdf8, #f3ecdf);
color: #2c3544;
}
body.query-skeuo .result-table tbody tr:nth-child(even) td {
background: linear-gradient(#f5f8fc, #e9eef5);
}
body.query-skeuo .result-table tbody tr:hover td {
background: linear-gradient(#fff9dc, #f2e4b6);
}
body.query-skeuo .status-pill {
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(61, 70, 84, 0.14);
}
body.query-skeuo .status-pill.done {
border-color: #5f9d73;
background: linear-gradient(#dff6e5, #9bd0aa);
color: #1d5b35;
}
body.query-skeuo .status-pill.pending {
border-color: #d0a052;
background: linear-gradient(#fff4cf, #e4be73);
color: #714816;
}
body.query-skeuo .error-state {
color: #9f2f28;
}
body.query-skeuo .scanner-overlay {
background: rgba(35, 42, 52, 0.84);
}
body.query-skeuo .scanner-frame {
border-radius: 8px;
border-color: #7e91a9;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.query-skeuo .scanner-text {
color: #f4f7fb;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}
body.query-skeuo .page-footer {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}
@media (max-width: 1040px) {
body.query-skeuo .page-header,
body.query-skeuo .search-grid,
body.query-skeuo .search-grid.compact {
grid-template-columns: 1fr;
}
body.query-skeuo .hero-card {
border-right: 0;
border-bottom: 1px solid rgba(101, 116, 135, 0.45);
}
}
@media (max-width: 720px) {
body.query-skeuo .page-shell {
width: min(calc(100% - 18px), 1120px);
padding-top: 12px;
}
body.query-skeuo .hero-card {
min-height: 0;
padding: 20px;
}
body.query-skeuo .stat-card {
min-height: 100px;
padding: 16px;
}
body.query-skeuo .panel-title-row,
body.query-skeuo .search-grid,
body.query-skeuo .search-grid.compact {
padding: 14px;
}
body.query-skeuo .result-table {
min-width: 640px;
}
}
/* Extend the skeuomorphic treatment to detail pages in 2000s. */
body.query-skeuo .detail-shell {
width: min(calc(100% - 28px), 1120px);
padding: 26px 0 42px;
}
body.query-skeuo .top-actions {
margin-bottom: 16px;
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.query-skeuo .preview-panel,
body.query-skeuo .summary-panel,
body.query-skeuo .detail-panel {
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;
backdrop-filter: none;
}
body.query-skeuo .preview-panel::before,
body.query-skeuo .summary-panel::before,
body.query-skeuo .detail-panel::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.62), transparent 36%),
linear-gradient(135deg, rgba(82, 122, 166, 0.08), transparent 50%);
}
body.query-skeuo .section-kicker {
display: inline-block;
padding: 6px 11px;
border: 1px solid #8fa6be;
border-radius: 4px;
background: linear-gradient(#fefefe, #d5e1ef);
color: #315d8d;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-shadow: 0 1px 0 #ffffff;
}
body.query-skeuo .section-heading,
body.query-skeuo .ticket-title {
color: #223049;
font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
letter-spacing: 0;
text-shadow: 0 1px 0 #ffffff, 0 2px 3px rgba(60, 74, 92, 0.18);
}
body.query-skeuo .section-copy,
body.query-skeuo .ticket-subtitle,
body.query-skeuo .summary-label,
body.query-skeuo .detail-label {
color: var(--skeuo-muted);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}
body.query-skeuo .summary-tile,
body.query-skeuo .detail-item {
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.query-skeuo .summary-value,
body.query-skeuo .detail-value {
color: #2c3544;
}
body.query-skeuo .summary-value.emphasis,
body.query-skeuo .detail-value.money {
color: var(--skeuo-blue);
text-shadow: 0 1px 0 #ffffff;
}
body.query-skeuo .certificate-stage {
border: 1px solid #9aa8b8;
border-radius: 7px;
background:
linear-gradient(90deg, rgba(128, 105, 68, 0.045) 1px, transparent 1px),
linear-gradient(0deg, rgba(128, 105, 68, 0.045) 1px, transparent 1px),
linear-gradient(#fffdf8, #f3ecdf);
background-size: 22px 22px, 22px 22px, auto;
box-shadow: inset 0 2px 7px rgba(50, 65, 86, 0.18), 0 1px 0 #ffffff;
}
body.query-skeuo .hint-orb {
border: 1px solid #174b83;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 48%),
linear-gradient(#3e8ddd, #1d65a9 52%, #174f8b);
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 2px 5px rgba(47, 66, 90, 0.26);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
}
@media (max-width: 720px) {
body.query-skeuo .detail-shell {
width: min(calc(100% - 18px), 1120px);
padding-top: 12px;
}
body.query-skeuo .top-actions {
align-items: stretch;
}
}