Serendipity/cDNA-image-processing
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 深蓝+白色学术风格重设计

Browse Source 
替代荧光绿实验室主题，更干净专业
This commit is contained in:
刘航宇
2026-05-08 15:49:39 +08:00
parent 8657937214
commit 06159eba19
1 changed files with 101 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/style.css
+101 -113
View File
@@ -1,24 +1,28 @@
/* ============================================================ /* ============================================================
cDNA Lab Console — Bio-laboratory Instrument Display Theme cDNA Lab Console — Clean Academic Theme
Dark background + fluorescent green accents + monospace data Deep navy + white panels + subtle blue accents
============================================================ */ ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=DM+Sans:wght@400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');
:root { :root {
--bg: #080e08; --bg: #0c1524;
--bg-panel: #0d160d; --bg-panel: #14233a;
--border: #1a2e1a; --bg-card: #1a2d4a;
--green: #00e676; --border: #1e3354;
--green-dim: #1b5e20; --border-light: #2a4570;
--green-glow: rgba(0, 230, 118, 0.25); --accent: #4d8ef7;
--text: #b8c7b8; --accent-dim: #2b5db8;
--text-dim: #5a6e5a; --accent-soft: rgba(77, 142, 247, 0.12);
--text-bright: #e0f0e0; --text: #8899b4;
--red: #ff3d3d; --text-dim: #4e6280;
--yellow: #ffc107; --text-bright: #d0ddf0;
--font-mono: 'Share Tech Mono', 'Courier New', monospace; --white: #f0f4fc;
--font-ui: 'DM Sans', 'Segoe UI', sans-serif; --red: #f55050;
--red-soft: rgba(245, 80, 80, 0.12);
--green: #52c97d;
--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
--font-ui: 'Inter', 'Segoe UI', sans-serif;
} }
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -28,187 +32,171 @@ body {
color: var(--text); color: var(--text);
font-family: var(--font-ui); font-family: var(--font-ui);
min-height: 100vh; min-height: 100vh;
position: relative; -webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ---- Grain overlay ---- */
.noise-overlay {
position: fixed; inset: 0; pointer-events: none; z-index: 999;
opacity: 0.04;
background: repeating-conic-gradient(#000 0%, transparent .0002%, #000 .0004%, transparent .0008%);
} }
/* ---- Header ---- */ /* ---- Header ---- */
.header { .header {
display: flex; justify-content: space-between; align-items: center; display: flex; justify-content: space-between; align-items: center;
padding: 16px 32px; border-bottom: 1px solid var(--border); padding: 20px 36px; border-bottom: 1px solid var(--border);
background: var(--bg-panel); background: var(--bg-panel);
} }
.header-left { display: flex; align-items: center; gap: 10px; } .header-left { display: flex; align-items: center; gap: 10px; }
.logo-bracket { color: var(--green); font-size: 1.5rem; font-family: var(--font-mono); opacity: 0.6; } .logo-bracket { color: var(--text-dim); font-size: 1.3rem; font-family: var(--font-mono); }
.logo-text { .logo-text {
font-family: var(--font-mono); font-size: 1.4rem; font-weight: 400; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500;
color: var(--text-bright); letter-spacing: 0.15em; color: var(--white); letter-spacing: 0.12em;
} }
.logo-accent { color: var(--green); font-weight: 700; } .logo-accent { color: var(--accent); font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 8px; } .header-right { display: flex; align-items: center; gap: 10px; }
.status-dot { .status-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--green); width: 7px; height: 7px; border-radius: 50%; background: var(--green);
box-shadow: 0 0 8px var(--green-glow); animation: pulse 2s infinite; box-shadow: 0 0 0 3px rgba(82, 201, 125, 0.2);
} }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .status-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.15em; }
.status-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.2em; }
/* ---- Container ---- */ /* ---- Container ---- */
.container { max-width: 1100px; margin: 0 auto; padding: 32px 24px; } .container { max-width: 1120px; margin: 0 auto; padding: 36px 28px; }
/* ---- Upload Zone ---- */ /* ---- Upload Zone ---- */
.upload-section { margin-bottom: 28px; } .upload-section { margin-bottom: 32px; }
.upload-zone-wrapper { display: flex; flex-direction: column; gap: 16px; } .upload-zone-wrapper { display: flex; flex-direction: column; gap: 16px; }
.upload-zone { .upload-zone {
border: 2px dashed var(--border); border-radius: 8px; border: 2px dashed var(--border); border-radius: 10px;
padding: 48px 24px; text-align: center; cursor: pointer; padding: 52px 24px; text-align: center; cursor: pointer;
transition: all 0.3s ease; background: var(--bg-panel); transition: all 0.25s ease; background: var(--bg-panel);
position: relative;
} }
.upload-zone:hover, .upload-zone.dragover { .upload-zone:hover {
border-color: var(--green); background: rgba(0,230,118,0.04); border-color: var(--accent); background: var(--accent-soft);
box-shadow: inset 0 0 40px rgba(0,230,118,0.03);
} }
.upload-zone.dragover { border-style: solid; } .upload-zone.dragover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.upload-svg { color: var(--green-dim); margin-bottom: 12px; transition: color 0.3s; } .upload-svg { color: var(--text-dim); margin-bottom: 14px; transition: color 0.25s; }
.upload-zone:hover .upload-svg { color: var(--green); } .upload-zone:hover .upload-svg { color: var(--accent); }
.upload-text { .upload-text {
font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-bright); font-family: var(--font-mono); font-size: 1.05rem; color: var(--white);
letter-spacing: 0.1em; margin-bottom: 6px; letter-spacing: 0.08em; margin-bottom: 6px;
}
.upload-cursor {
display: inline-block; color: var(--green); animation: blink 1s step-end infinite;
} }
.upload-cursor { display: inline-block; color: var(--accent); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } } @keyframes blink { 50% { opacity: 0; } }
.upload-sub { font-size: 0.85rem; color: var(--text-dim); } .upload-sub { font-size: 0.85rem; color: var(--text-dim); }
/* ---- Preview + Button ---- */
.upload-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; } .upload-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.upload-preview img { .upload-preview img {
max-width: 100%; max-height: 300px; border-radius: 6px; max-width: 100%; max-height: 320px; border-radius: 8px;
border: 1px solid var(--border); object-fit: contain; background: #000; border: 1px solid var(--border); object-fit: contain; background: #000;
} }
.btn-process { .btn-process {
display: flex; align-items: center; gap: 8px; display: flex; align-items: center; gap: 8px;
padding: 12px 32px; border: none; border-radius: 4px; padding: 12px 36px; border: none; border-radius: 6px;
background: var(--green-dim); color: var(--green); background: var(--accent); color: #fff;
font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.15em; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.1em;
cursor: pointer; transition: all 0.25s; cursor: pointer; transition: all 0.2s;
} }
.btn-process:hover { background: var(--green); color: #000; } .btn-process:hover { background: var(--accent-dim); transform: translateY(-1px); }
/* ---- Status Bar ---- */ /* ---- Status Bar ---- */
.status-bar { .status-bar {
display: flex; align-items: center; gap: 14px; display: flex; align-items: center; gap: 14px;
padding: 10px 16px; background: var(--bg-panel); border: 1px solid var(--border); padding: 10px 18px; background: var(--bg-panel); border: 1px solid var(--border);
border-radius: 4px; margin-bottom: 24px; border-radius: 6px; margin-bottom: 28px;
} }
.status-track { .status-track { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; .status-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s; }
} .status-text { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.12em; }
.status-fill {
height: 100%; width: 0%; background: var(--green);
transition: width 0.1s linear;
box-shadow: 0 0 6px var(--green-glow);
}
.status-text { font-family: var(--font-mono); font-size: 0.8rem; color: var(--green); letter-spacing: 0.15em; }
/* ---- Error ---- */ /* ---- Error ---- */
.error-msg { .error-msg {
background: rgba(255,61,61,0.1); border: 1px solid var(--red); color: var(--red); background: var(--red-soft); border: 1px solid var(--red); color: var(--red);
padding: 12px 18px; border-radius: 4px; margin-bottom: 20px; padding: 14px 20px; border-radius: 6px; margin-bottom: 24px;
font-family: var(--font-mono); font-size: 0.85rem; font-family: var(--font-mono); font-size: 0.85rem;
} }
/* ---- Stats Panel ---- */ /* ---- Stats Panel ---- */
.stats-panel { .stats-panel { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px;
}
.stat-card { .stat-card {
flex: 1; min-width: 140px; padding: 16px 20px; flex: 1; min-width: 150px; padding: 20px 24px;
background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
text-align: center; transition: border-color 0.3s; text-align: center; transition: border-color 0.25s;
} }
.stat-card:hover { border-color: var(--green-dim); } .stat-card:hover { border-color: var(--border-light); }
.stat-card.spot { border-color: var(--green-dim); background: rgba(0,230,118,0.04); } .stat-card.spot { border-color: var(--accent-dim); background: var(--accent-soft); }
.stat-label { .stat-label {
display: block; font-family: var(--font-mono); font-size: 0.7rem; display: block; font-family: var(--font-mono); font-size: 0.68rem;
color: var(--text-dim); letter-spacing: 0.2em; margin-bottom: 6px; color: var(--text-dim); letter-spacing: 0.18em; margin-bottom: 8px; font-weight: 500;
} }
.stat-value { .stat-value {
display: block; font-family: var(--font-mono); font-size: 1.5rem; display: block; font-family: var(--font-mono); font-size: 1.5rem;
color: var(--green); font-weight: 400; color: var(--white); font-weight: 500;
} }
.stat-card.spot .stat-value { font-size: 2rem; } .stat-card.spot .stat-value { color: var(--accent); font-size: 2rem; font-weight: 600; }
/* ---- Gallery ---- */ /* ---- Gallery ---- */
.gallery { margin-bottom: 40px; } .gallery { margin-bottom: 48px; }
.gallery-header { .gallery-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px;
} }
.gallery-title { .gallery-title {
font-family: var(--font-mono); font-size: 1.1rem; font-weight: 400; font-family: var(--font-mono); font-size: 1rem; font-weight: 500;
color: var(--text-bright); letter-spacing: 0.2em; color: var(--white); letter-spacing: 0.16em;
} }
.btn-dl-all { .btn-dl-all {
display: flex; align-items: center; gap: 6px; display: flex; align-items: center; gap: 6px;
padding: 8px 20px; border: 1px solid var(--green-dim); border-radius: 4px; padding: 9px 22px; border: 1px solid var(--border-light); border-radius: 6px;
background: transparent; color: var(--green); background: transparent; color: var(--text);
font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em;
cursor: pointer; transition: all 0.25s; cursor: pointer; transition: all 0.2s;
} }
.btn-dl-all:hover { background: var(--green-dim); } .btn-dl-all:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-dl-all span { font-size: 1rem; } .btn-dl-all span { font-size: 1rem; }
.gallery-grid { .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 800px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 800px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } } @media (max-width: 500px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-card { border-radius: 4px; overflow: hidden; background: var(--bg-panel); border: 1px solid var(--border); } .gallery-card {
border-radius: 8px; overflow: hidden; background: var(--bg-card);
border: 1px solid var(--border);
transition: border-color 0.25s, transform 0.2s;
}
.gallery-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.gallery-card-inner { .gallery-card-inner {
aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
background: #000; cursor: pointer; background: #060c18; cursor: pointer;
} }
.gallery-card-inner img { .gallery-card-inner img {
width: 100%; height: 100%; object-fit: contain; width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s;
transition: transform 0.3s ease;
} }
.gallery-card-inner:hover img { transform: scale(1.05); } .gallery-card-inner:hover img { transform: scale(1.04); }
.gallery-card-label { .gallery-card-label {
padding: 8px 12px; font-family: var(--font-mono); font-size: 0.65rem; padding: 10px 14px; font-family: var(--font-mono); font-size: 0.65rem;
color: var(--text-dim); letter-spacing: 0.1em; text-align: center; color: var(--text-dim); letter-spacing: 0.1em; text-align: center;
border-top: 1px solid var(--border); border-top: 1px solid var(--border); font-weight: 500;
} }
/* ---- Lightbox ---- */ /* ---- Lightbox ---- */
.lightbox { .lightbox {
display: none; position: fixed; inset: 0; z-index: 1000; display: none; position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.92); flex-direction: column; align-items: center; justify-content: center; background: rgba(4, 10, 20, 0.95); flex-direction: column; align-items: center; justify-content: center;
}
.lightbox img {
max-width: 92vw; max-height: 88vh; object-fit: contain;
border-radius: 4px; border: 1px solid var(--border-light); background: #000;
} }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border: 1px solid var(--border); background: #000; }
.lightbox-close { .lightbox-close {
position: absolute; top: 20px; right: 30px; position: absolute; top: 24px; right: 36px;
font-size: 2rem; color: var(--text-dim); cursor: pointer; transition: color 0.2s; font-size: 2rem; color: var(--text-dim); cursor: pointer; transition: color 0.2s;
line-height: 1;
} }
.lightbox-close:hover { color: var(--text-bright); } .lightbox-close:hover { color: var(--white); }
.lightbox-dl { .lightbox-dl {
margin-top: 16px; padding: 10px 24px; border: 1px solid var(--green); border-radius: 4px; margin-top: 18px; padding: 10px 28px; border: 1px solid var(--accent); border-radius: 6px;
color: var(--green); text-decoration: none; font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent); text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem;
transition: all 0.25s; transition: all 0.2s;
} }
.lightbox-dl:hover { background: var(--green); color: #000; } .lightbox-dl:hover { background: var(--accent); color: #fff; }
/* ---- Scrollbar ---- */ /* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); } ::-webkit-scrollbar-thumb:hover { background: var(--border-light); }