178 lines
6.3 KiB
CSS
178 lines
6.3 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@theme inline {
|
|
--color-bg: var(--bg);
|
|
--color-surface: var(--surface);
|
|
--color-surface-2: var(--surface-2);
|
|
--color-surface-3: var(--surface-3);
|
|
--color-line: var(--border);
|
|
--color-line-strong: var(--border-strong);
|
|
--color-ink-1: var(--text-1);
|
|
--color-ink-2: var(--text-2);
|
|
--color-ink-3: var(--text-3);
|
|
--color-brand: var(--brand);
|
|
--color-brand-hover: var(--brand-hover);
|
|
--color-brand-subtle: var(--brand-subtle);
|
|
--color-brand-text: var(--brand-text);
|
|
--color-success: var(--success);
|
|
--color-success-subtle: var(--success-subtle);
|
|
--color-warning: var(--warning);
|
|
--color-warning-subtle: var(--warning-subtle);
|
|
--color-danger: var(--danger);
|
|
--color-danger-subtle: var(--danger-subtle);
|
|
|
|
--radius-sm: 5px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
--shadow-card: 0 1px 2px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.04);
|
|
--shadow-pop: 0 4px 12px rgba(0,0,0,.08), 0 16px 48px rgba(0,0,0,.12);
|
|
--shadow-brand: 0 2px 8px rgba(48,86,211,.28);
|
|
}
|
|
|
|
/* ── 亮色 ── */
|
|
:root {
|
|
--bg: #f3f4f6;
|
|
--surface: #ffffff;
|
|
--surface-2: #f8f9fa;
|
|
--surface-3: #eceef1;
|
|
--border: #e3e6ea;
|
|
--border-strong: #c8cdd6;
|
|
--text-1: #111318;
|
|
--text-2: #3d434f;
|
|
--text-3: #747c8a;
|
|
--brand: #3346d3;
|
|
--brand-hover: #2a3ab8;
|
|
--brand-subtle: #eef1ff;
|
|
--brand-text: #2a3ab8;
|
|
--success: #177245;
|
|
--success-subtle: #ebfaf1;
|
|
--warning: #a86509;
|
|
--warning-subtle: #fef8eb;
|
|
--danger: #d5304f;
|
|
--danger-subtle: #fef0f2;
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* ── 暗色 ── */
|
|
.dark {
|
|
--bg: #0c0d10;
|
|
--surface: #141519;
|
|
--surface-2: #1a1c22;
|
|
--surface-3: #23262e;
|
|
--border: #262932;
|
|
--border-strong: #363b47;
|
|
--text-1: #e9ebf0;
|
|
--text-2: #a0a8b8;
|
|
--text-3: #68707e;
|
|
--brand: #6d8bfa;
|
|
--brand-hover: #8aa2fb;
|
|
--brand-subtle: #1a2144;
|
|
--brand-text: #96adfa;
|
|
--success: #34d399;
|
|
--success-subtle: #0d2921;
|
|
--warning: #fbbf24;
|
|
--warning-subtle: #2b2109;
|
|
--danger: #f87171;
|
|
--danger-subtle: #2d1317;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html, body, #root { height: 100%; }
|
|
|
|
/* 移动端适配：禁止横向溢出 / 去点按高亮 / 双击不缩放 / 刘海安全区 */
|
|
html, body { overflow-x: clip; }
|
|
body {
|
|
-webkit-tap-highlight-color: transparent;
|
|
touch-action: manipulation;
|
|
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
}
|
|
@media (pointer: coarse) {
|
|
button, [role='button'], a { min-height: 36px; }
|
|
/* iOS Safari：输入框字号 <16px 时聚焦会强制放大视口 —— 触屏设备统一 16px 预防 */
|
|
input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']),
|
|
select,
|
|
textarea {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text-1);
|
|
font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
letter-spacing: 0.003em;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
}
|
|
|
|
h1, h2, h3 { letter-spacing: -0.022em; text-wrap: balance; }
|
|
|
|
/* 小屏：分区标题与卡片间距收紧 */
|
|
@media (max-width: 640px) {
|
|
.hover-lift:hover { transform: none; }
|
|
}
|
|
|
|
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }
|
|
|
|
::selection { background: color-mix(in srgb, var(--brand) 18%, transparent); }
|
|
|
|
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-3) 30%, transparent) transparent; }
|
|
*::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3) 25%, transparent); border-radius: 3px; }
|
|
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-3) 45%, transparent); }
|
|
*::-webkit-scrollbar-track { background: transparent; }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent);
|
|
outline-offset: 2px;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* 微动效 */
|
|
.animate-in { animation: fp-in .22s cubic-bezier(.16,1,.3,1); }
|
|
@keyframes fp-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
|
|
|
|
.animate-fade { animation: fp-fade .3s ease-out; }
|
|
@keyframes fp-fade { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
/* 数字输入去噪 */
|
|
input[type='number']::-webkit-outer-spin-button,
|
|
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
|
|
|
|
/* 卡片悬停微抬 */
|
|
.hover-lift { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
|
|
.hover-lift:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04); }
|
|
|
|
/* 侧边栏激活指示条 */
|
|
.nav-active::before {
|
|
content: '';
|
|
position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
|
|
border-radius: 0 3px 3px 0; background: var(--brand);
|
|
}
|
|
|
|
/* ---------- 简历打印 / 导出 ---------- */
|
|
@page { size: A4; margin: 10mm; }
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
html, body, #root { height: auto !important; background: #fff !important; }
|
|
body { padding: 0 !important; }
|
|
.app-scroll, .print-scroll { overflow: visible !important; height: auto !important; max-height: none !important; }
|
|
.print-sheet { border: none !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; width: 100% !important; padding: 0 !important; border-radius: 0 !important; }
|
|
* { scrollbar-width: none !important; }
|
|
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
|
|
}
|
|
|
|
/* ---------- 简历模板 ---------- */
|
|
.resume-tpl-tech .r-sec-title { color: var(--accent); border-left: 3px solid var(--accent); padding-left: 8px; }
|
|
.resume-tpl-tech .r-item-title { color: var(--accent); }
|
|
.resume-tpl-tech .num { color: var(--accent); }
|
|
.resume-tpl-minimal .r-sec-title { color: #666; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; border-bottom: 1px solid #e2e2e2; padding-bottom: 4px; }
|
|
.resume-tpl-classic .r-sec-title { border-bottom: 2px solid #222; padding-bottom: 4px; }
|
|
.resume-tpl-minimal .r-item-title { font-weight: 600; }
|