@@ -11,7 +11,7 @@
|
||||
<link rel="stylesheet" href="../css/notice-banner.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="query-skeuo">
|
||||
<main class="detail-shell">
|
||||
<div class="top-actions">
|
||||
<a href="javascript:history.back()" class="tech-link-button secondary">返回查询</a>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
<script src="https://unpkg.com/html5-qrcode"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="query-skeuo">
|
||||
<main class="page-shell">
|
||||
<section class="page-header">
|
||||
<div class="hero-card">
|
||||
|
||||
@@ -101,6 +101,47 @@
|
||||
background: rgba(16, 32, 51, 0.14);
|
||||
}
|
||||
|
||||
body.query-skeuo .notice-banner,
|
||||
body.notice-skeuo .notice-banner,
|
||||
body.print-skeuo .notice-banner {
|
||||
color: #243247;
|
||||
background: linear-gradient(#fffdf8, #ece5d7);
|
||||
border-bottom: 1px solid #9aa8b8;
|
||||
box-shadow: 0 10px 22px rgba(68, 55, 34, 0.18), inset 0 1px 0 #ffffff;
|
||||
}
|
||||
|
||||
body.query-skeuo .notice-banner__badge,
|
||||
body.notice-skeuo .notice-banner__badge,
|
||||
body.print-skeuo .notice-banner__badge,
|
||||
body.query-skeuo .notice-banner__link,
|
||||
body.notice-skeuo .notice-banner__link,
|
||||
body.print-skeuo .notice-banner__link {
|
||||
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;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 1px 2px rgba(47, 66, 90, 0.2);
|
||||
}
|
||||
|
||||
body.query-skeuo .notice-banner__message,
|
||||
body.notice-skeuo .notice-banner__message,
|
||||
body.print-skeuo .notice-banner__message {
|
||||
color: #647086;
|
||||
}
|
||||
|
||||
body.query-skeuo .notice-banner__close,
|
||||
body.notice-skeuo .notice-banner__close,
|
||||
body.print-skeuo .notice-banner__close {
|
||||
border: 1px solid #9aa8b8;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(#ffffff, #d8e1eb);
|
||||
color: #2d405a;
|
||||
box-shadow: inset 0 1px 0 #ffffff;
|
||||
}
|
||||
|
||||
body.has-notice-banner {
|
||||
padding-top: calc(var(--notice-body-pad-top, 0px) + var(--notice-banner-height, 0px) + 12px) !important;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,16 @@ body {
|
||||
linear-gradient(128deg, rgba(255, 255, 255, 0.96) 0 34%, rgba(232, 249, 255, 0.9) 34% 58%, rgba(255, 246, 249, 0.92) 58% 100%);
|
||||
}
|
||||
|
||||
body.print-skeuo {
|
||||
color: #243247;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ===== A4 容器 ===== */
|
||||
.page {
|
||||
width: 210mm;
|
||||
@@ -18,6 +28,17 @@ body {
|
||||
border-top: 5px solid #2563eb;
|
||||
}
|
||||
|
||||
body.print-skeuo .page {
|
||||
border: 1px solid #8d9bae;
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(128, 105, 68, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(128, 105, 68, 0.035) 1px, transparent 1px),
|
||||
linear-gradient(#fffdf8, #f4eee3);
|
||||
background-size: 22px 22px, 22px 22px, auto;
|
||||
box-shadow: 0 18px 34px rgba(68, 55, 34, 0.22), inset 0 1px 0 #ffffff;
|
||||
}
|
||||
|
||||
/* ===== 水印 ===== */
|
||||
.watermark {
|
||||
position: absolute;
|
||||
@@ -42,6 +63,18 @@ body {
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
body.print-skeuo .title {
|
||||
margin: -8mm -8mm 18px;
|
||||
padding: 14px;
|
||||
border: 1px solid #8998aa;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(#eef4fb, #cfd9e6 48%, #b6c4d5 49%, #e7edf4 100%);
|
||||
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);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
/* ===== 信息表格 ===== */
|
||||
.table {
|
||||
width: 100%;
|
||||
@@ -57,6 +90,12 @@ body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body.print-skeuo .table td {
|
||||
border-color: #d7d0c2;
|
||||
background: linear-gradient(#fffdf8, #f3ecdf);
|
||||
color: #2c3544;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 25%;
|
||||
color: #66758a;
|
||||
@@ -64,6 +103,12 @@ body {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
body.print-skeuo .label {
|
||||
color: #45566d;
|
||||
background: linear-gradient(#e9f0f8, #c7d3e0);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
.footer {
|
||||
position: absolute;
|
||||
@@ -92,4 +137,18 @@ body {
|
||||
box-shadow: none;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
body.print-skeuo .page {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #ffffff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.print-skeuo .title {
|
||||
margin: 0 0 20px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/notice-page.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="notice-skeuo">
|
||||
<main class="notice-page">
|
||||
<nav class="topbar" aria-label="页面导航">
|
||||
<a class="brand" href="../index.html">
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link rel="stylesheet" href="../css/notice-banner.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="query-skeuo">
|
||||
<main class="detail-shell">
|
||||
<div class="top-actions">
|
||||
<a href="./index.html" class="tech-link-button secondary">返回查询页</a>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
<script src="https://unpkg.com/html5-qrcode"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="query-skeuo">
|
||||
<main class="page-shell">
|
||||
<section class="page-header">
|
||||
<div class="hero-card">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<link rel="stylesheet" href="../css/ticket-print.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="print-skeuo">
|
||||
|
||||
<div class="page" id="content">
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<link rel="stylesheet" href="../css/notice-banner.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="query-skeuo">
|
||||
<main class="page-shell">
|
||||
<section class="page-header">
|
||||
<div class="hero-card">
|
||||
|
||||
Reference in New Issue
Block a user