/* ================================================================ Miku Theme v3.0 — 初音未来主题全局样式 纯原生 CSS · 零框架依赖 · 完整初音视觉系统 120BPM 音乐节奏动效 · 亮/暗双模式 · 全响应式 ================================================================ */ /* ===== 字体引入（通过 HTML 异步加载，见各页面 ） ===== */ /* ================================================================ 1. CSS 变量 — 设计 Token 全集 ================================================================ */ :root { /* --- 核心品牌色 --- */ --miku-primary: #39C5BB; --miku-primary-rgb: 57, 197, 187; --miku-hover: #26A69A; --miku-ice: #8EE5EE; --miku-ice-rgb: 142, 229, 238; --miku-sakura: #FFB6C1; --miku-sakura-rgb: 255, 182, 193; --miku-purple: #9370DB; /* --- 亮模式背景 --- */ --bg-primary: #F8FCFF; --bg-card: #FFFFFF; --bg-card-hover: #FAFDFE; --bg-nav: rgba(255, 255, 255, 0.82); --bg-nav-scrolled: rgba(255, 255, 255, 0.94); --bg-overlay: rgba(248, 252, 255, 0.72); --bg-input: #F1F5F9; /* --- 亮模式文字 --- */ --text-heading: #0F172A; --text-body: #334155; --text-sub: #64748B; --text-muted: #94A3B8; /* --- 玻璃拟态 --- */ --glass-blur: blur(14px); --glass-bg: rgba(255, 255, 255, 0.68); --glass-bg-strong: rgba(255, 255, 255, 0.86); --glass-border: 0.5px solid rgba(57, 197, 187, 0.28); --glass-border-strong: 1px solid rgba(57, 197, 187, 0.42); /* --- 阴影 --- */ --shadow-glow: 0 0 20px rgba(57, 197, 187, 0.12); --shadow-glow-strong: 0 0 32px rgba(57, 197, 187, 0.28); --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.05); --shadow-card: var(--shadow-glow), var(--shadow-soft); --shadow-btn: 0 0 22px rgba(57, 197, 187, 0.22), 0 6px 16px rgba(0, 0, 0, 0.06); --shadow-btn-hover: 0 0 36px rgba(57, 197, 187, 0.36), 0 10px 24px rgba(57, 197, 187, 0.18); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08); /* --- 圆角 --- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 30px; --radius-btn: 50px; --radius-full: 9999px; /* --- 120BPM 动画节奏 (1拍 = 500ms, 1小节 = 2000ms) --- */ --bpm-beat: 500ms; --bpm-half: 250ms; --bpm-bar: 2000ms; --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 600ms; /* --- 排版 --- */ --font-sans: 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif; --font-serif: 'Noto Serif SC', 'Source Han Serif SC', serif; --font-display: 'ZCOOL KuaiLe', 'Ma Shan Zheng', cursive; --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', 'Noto Sans SC', monospace; --line-height-body: 1.7; --letter-spacing-body: 0.4px; --letter-spacing-heading: -0.02em; /* --- 导航 --- */ --nav-height: 64px; /* --- 代码块 --- */ --code-bg: #282C34; --code-bg-dark: #1E1E1E; --code-text: #ABB2BF; --code-keyword: #C678DD; --code-string: #98C379; --code-comment: #5C6370; --code-number: #D19A66; /* --- 间距 --- */ --content-px: 80px; --content-max: 1200px; --content-wide: 1400px; } /* ================================================================ 2. 暗色模式变量覆盖 ================================================================ */ body.miku-dark { --bg-primary: #0F172A; --bg-card: #1E293B; --bg-card-hover: #243044; --bg-nav: rgba(15, 23, 42, 0.84); --bg-nav-scrolled: rgba(15, 23, 42, 0.94); --bg-overlay: rgba(15, 23, 42, 0.74); --bg-input: #1E293B; --text-heading: #F8FCFF; --text-body: #CBD5E1; --text-sub: #94A3B8; --text-muted: #64748B; --glass-bg: rgba(30, 41, 59, 0.68); --glass-bg-strong: rgba(30, 41, 59, 0.86); --glass-border: 0.5px solid rgba(57, 197, 187, 0.22); --glass-border-strong: 1px solid rgba(57, 197, 187, 0.34); --shadow-glow: 0 0 20px rgba(57, 197, 187, 0.06); --shadow-glow-strong: 0 0 32px rgba(57, 197, 187, 0.14); --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.2); --shadow-card: var(--shadow-glow), var(--shadow-soft); --shadow-btn: 0 0 22px rgba(57, 197, 187, 0.15), 0 6px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.3); --code-bg: #1a1a2e; } /* ================================================================ 3. 基础重置 ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); font-size: 1rem; line-height: var(--line-height-body); letter-spacing: var(--letter-spacing-body); color: var(--text-body); background-color: var(--bg-primary); overflow-x: hidden; min-height: 100vh; transition: background-color var(--dur-slow) var(--ease-smooth), color var(--dur-slow) var(--ease-smooth); } /* --- 背景光晕纹理 --- */ body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: radial-gradient(ellipse 80% 80% at 15% 15%, rgba(var(--miku-primary-rgb), 0.05) 0%, transparent 50%), radial-gradient(ellipse 80% 80% at 85% 85%, rgba(var(--miku-ice-rgb), 0.04) 0%, transparent 50%), radial-gradient(ellipse 80% 80% at 50% 60%, rgba(var(--miku-sakura-rgb), 0.02) 0%, transparent 50%); pointer-events: none; } /* --- 选中 --- */ ::selection { background: rgba(var(--miku-primary-rgb), 0.22); color: var(--text-heading); } /* --- 滚动条 --- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--miku-primary-rgb), 0.28); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--miku-primary); } /* --- 聚焦 --- */ :focus-visible { outline: 2px solid var(--miku-primary); outline-offset: 2px; border-radius: var(--radius-xs); } /* ================================================================ 4. 排版系统 ================================================================ */ h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: 700; letter-spacing: var(--letter-spacing-heading); line-height: 1.3; scroll-margin-top: calc(var(--nav-height) + 16px); } h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; } h2 { font-size: clamp(1.35rem, 2.8vw, 1.75rem); margin: 2rem 0 0.75rem; padding-left: 14px; border-left: 4px solid var(--miku-primary); } h3 { font-size: clamp(1.15rem, 2.2vw, 1.375rem); margin: 1.5rem 0 0.5rem; } h4 { font-size: 1.15rem; margin: 1.25rem 0 0.5rem; } h5 { font-size: 1.05rem; } h6 { font-size: 1rem; } p { margin-bottom: 0.875rem; color: var(--text-body); } a { color: var(--miku-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-smooth); } a:hover { color: var(--miku-hover); } ul, ol { margin: 0.5rem 0 1rem 1.5rem; color: var(--text-body); line-height: 1.8; } li { margin-bottom: 0.3rem; } li::marker { color: var(--miku-primary); } blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; background: rgba(var(--miku-primary-rgb), 0.04); border-left: 4px solid var(--miku-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-sub); } blockquote p:last-child { margin-bottom: 0; } hr { border: none; height: 2px; margin: 2rem 0; background: linear-gradient(90deg, transparent, var(--miku-primary), transparent); opacity: 0.35; } img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } strong { color: var(--text-heading); font-weight: 700; } em { color: var(--miku-hover); } /* --- 内联代码 --- */ :not(pre) > code { padding: 2px 7px; border-radius: var(--radius-xs); background: rgba(var(--miku-primary-rgb), 0.08); color: var(--miku-hover); font-family: var(--font-mono); font-size: 0.875em; font-weight: 500; } /* ================================================================ 5. 通用背景层 ================================================================ */ .site-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; background-size: cover; background-position: center; background-repeat: no-repeat; } .site-overlay { position: fixed; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(248, 252, 255, 0.55) 0%, rgba(224, 247, 246, 0.65) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } body.miku-dark .site-overlay { background: linear-gradient(135deg, rgba(15, 23, 42, 0.65) 0%, rgba(30, 41, 59, 0.7) 100%); } /* ================================================================ 6. 玻璃拟态组件 ================================================================ */ .miku-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .miku-glass-strong { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } /* --- 兼容旧版 class 名 --- */ .glass-panel { background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } /* ================================================================ 7. 导航栏 ================================================================ */ .miku-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--content-px); background: var(--bg-nav); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid rgba(var(--miku-primary-rgb), 0.18); box-shadow: 0 1px 12px rgba(var(--miku-primary-rgb), 0.05); transition: background var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); } .miku-header.scrolled { background: var(--bg-nav-scrolled); box-shadow: 0 2px 20px rgba(var(--miku-primary-rgb), 0.1); border-bottom-color: rgba(var(--miku-primary-rgb), 0.25); } /* --- Logo --- */ .miku-logo { display: flex; align-items: center; } .miku-logo a { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-heading); text-decoration: none; transition: all var(--dur-fast) var(--ease-bounce); } .miku-logo a:hover { color: var(--miku-primary); transform: scale(1.04); } .miku-logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: linear-gradient(135deg, var(--miku-primary), var(--miku-ice)); color: #fff; border-radius: var(--radius-md); font-size: 1rem; animation: logoPulse 2s ease-in-out infinite; } @keyframes logoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--miku-primary-rgb), 0.4); } 50% { box-shadow: 0 0 0 8px rgba(var(--miku-primary-rgb), 0); } } /* --- 导航列表 --- */ .miku-nav-list { display: flex; list-style: none; gap: 4px; margin: 0; height: 100%; align-items: center; } .miku-nav-list > li { margin: 0; height: 100%; display: flex; align-items: center; position: relative; } .miku-nav-list > li > a { display: flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600; color: var(--text-body); text-decoration: none; transition: all var(--dur-fast) var(--ease-bounce); white-space: nowrap; } .miku-nav-list > li > a:hover { color: var(--miku-primary); background: rgba(var(--miku-primary-rgb), 0.08); transform: translateY(-1px); } .miku-nav-list > li > a.active { color: var(--miku-primary); background: rgba(var(--miku-primary-rgb), 0.11); font-weight: 700; } .miku-nav-list > li > a.active::after { content: ''; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--miku-primary); animation: noteDot var(--bpm-beat) var(--ease-bounce) infinite; } @keyframes noteDot { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(1.6); opacity: 0.45; } } /* --- 下拉菜单 --- */ .miku-dropdown { position: relative; } .miku-dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 160px; background: var(--bg-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border-strong); border-radius: var(--radius-md); padding: 8px 0; box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transition: all var(--dur-fast) var(--ease-bounce); list-style: none; margin: 0; z-index: 1001; } .miku-dropdown:hover .miku-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .miku-dropdown-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--bg-card); border-top: var(--glass-border-strong); border-left: var(--glass-border-strong); } .miku-dropdown-menu li { margin: 0; } .miku-dropdown-menu li a { display: block; padding: 9px 18px; color: var(--text-body); text-decoration: none; font-size: 0.825rem; font-weight: 500; transition: all var(--dur-fast) var(--ease-smooth); } .miku-dropdown-menu li a:hover { color: var(--miku-primary); background: rgba(var(--miku-primary-rgb), 0.06); padding-left: 22px; } /* --- 汉堡菜单按钮 --- */ .miku-menu-btn { display: none; width: 40px; height: 40px; border: none; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; z-index: 1002; } .miku-menu-btn span { display: block; width: 100%; height: 2px; background: var(--text-heading); border-radius: 2px; transition: all var(--dur-fast) var(--ease-bounce); transform-origin: center; } .miku-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .miku-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .miku-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- 移动端全屏导航 --- */ .miku-mobile-nav { display: none; position: fixed; inset: 0; z-index: 999; background: rgba(255, 255, 255, 0.96); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); flex-direction: column; justify-content: center; align-items: center; gap: 16px; } body.miku-dark .miku-mobile-nav { background: rgba(15, 23, 42, 0.96); } .miku-mobile-nav.open { display: flex; } .miku-mobile-nav a { font-size: 1.4rem; font-weight: 600; color: var(--text-heading); text-decoration: none; transition: all var(--dur-fast) var(--ease-bounce); padding: 12px 28px; border-radius: var(--radius-full); } .miku-mobile-nav a:hover, .miku-mobile-nav a.active { color: var(--miku-primary); background: rgba(var(--miku-primary-rgb), 0.08); } /* ================================================================ 8. 面包屑 ================================================================ */ .miku-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 12px 0; font-size: 0.825rem; color: var(--text-sub); flex-wrap: wrap; list-style: none; margin: 0; } .miku-breadcrumb li { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-sub); } .miku-breadcrumb li::marker { content: none; } .miku-breadcrumb a { color: var(--text-sub); text-decoration: none; transition: color var(--dur-fast) var(--ease-smooth); } .miku-breadcrumb a:hover { color: var(--miku-primary); } .miku-breadcrumb .sep { color: var(--miku-ice); font-size: 0.7rem; } .miku-breadcrumb .current { color: var(--miku-primary); font-weight: 600; } /* ================================================================ 9. 按钮系统 ================================================================ */ .miku-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border: none; border-radius: var(--radius-btn); font-size: 0.925rem; font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: all var(--dur-base) var(--ease-bounce); text-decoration: none; user-select: none; white-space: nowrap; } .miku-btn-primary { background: linear-gradient(135deg, var(--miku-primary), var(--miku-hover)); color: #fff; box-shadow: var(--shadow-btn); } .miku-btn-primary:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-btn-hover); color: #fff; } .miku-btn-primary:active { transform: scale(0.97); } .miku-btn-outline { background: transparent; color: var(--miku-primary); border: 1.5px solid var(--miku-primary); } .miku-btn-outline:hover { background: rgba(var(--miku-primary-rgb), 0.08); transform: translateY(-2px); box-shadow: 0 0 18px rgba(var(--miku-primary-rgb), 0.15); } .miku-btn-ghost { background: transparent; color: var(--text-body); } .miku-btn-ghost:hover { background: rgba(var(--miku-primary-rgb), 0.07); color: var(--miku-primary); } .miku-btn-sm { padding: 8px 18px; font-size: 0.8rem; } .miku-btn-lg { padding: 16px 36px; font-size: 1.05rem; } /* ================================================================ 10. 页面布局 ================================================================ */ .miku-page { padding-top: calc(var(--nav-height) + 24px); min-height: 100vh; } .miku-container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; } .miku-container-wide { max-width: var(--content-wide); margin: 0 auto; padding: 0 24px; } /* --- 双栏布局 --- */ .miku-layout-split { display: flex; gap: 28px; align-items: flex-start; } .miku-layout-main { flex: 1; min-width: 0; } .miku-layout-side { width: 270px; flex-shrink: 0; position: sticky; top: calc(var(--nav-height) + 24px); max-height: calc(100vh - var(--nav-height) - 48px); overflow-y: auto; } /* ================================================================ 11. 文章正文 ================================================================ */ .miku-article { padding: 40px 48px; line-height: var(--line-height-body); } .miku-article h1 { font-size: 2rem; font-weight: 800; color: var(--text-heading); margin-bottom: 0.5rem; border: none; padding: 0; } .miku-article h1.miku-gradient-text { background: linear-gradient(135deg, var(--miku-primary) 0%, var(--miku-ice) 40%, var(--miku-hover) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .miku-article h2 { font-size: 1.45rem; margin: 2.2rem 0 0.75rem; } .miku-article h3 { font-size: 1.2rem; margin: 1.5rem 0 0.6rem; } .miku-article p { font-size: 0.95rem; line-height: 1.82; margin-bottom: 0.875rem; } .miku-article img { display: block; max-width: 100%; margin: 1.25rem auto; border-radius: var(--radius-sm); border: 1px solid rgba(var(--miku-primary-rgb), 0.18); box-shadow: var(--shadow-soft); transition: transform var(--dur-fast) var(--ease-bounce); } .miku-article img:hover { transform: scale(1.015); } /* --- 文章标签 --- */ .miku-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; } .miku-tag { display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; background: rgba(var(--miku-primary-rgb), 0.1); color: var(--miku-hover); } .miku-tag.original { background: linear-gradient(135deg, var(--miku-primary), var(--miku-hover)); color: #fff; } /* --- 文章元信息 --- */ .miku-article-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(var(--miku-primary-rgb), 0.1); font-size: 0.825rem; color: var(--text-sub); } /* --- 提示框 --- */ .callout { background: rgba(var(--miku-primary-rgb), 0.05); border: 1px solid rgba(var(--miku-primary-rgb), 0.18); border-left: 4px solid var(--miku-primary); border-radius: var(--radius-md); padding: 18px 22px; margin: 18px 0; line-height: 1.8; } .callout p:last-child { margin-bottom: 0; } /* --- 旧版文章 body 兼容 --- */ .article-body h2 { font-size: 1.4rem; color: var(--text-heading); margin: 36px 0 18px; padding-left: 14px; border-left: 4px solid var(--miku-primary); font-weight: 700; } .article-body h3 { font-size: 1.15rem; color: var(--text-heading); margin: 26px 0 12px; font-weight: 700; } .article-body p { font-size: 0.95rem; color: var(--text-body); line-height: 1.82; margin-bottom: 14px; } .article-body ul, .article-body ol { margin: 0 0 14px 22px; color: var(--text-body); line-height: 1.82; } .article-body li { margin-bottom: 5px; } .article-body strong { color: var(--miku-primary); font-weight: 700; } /* ================================================================ 12. TOC 目录侧边栏 ================================================================ */ .miku-toc { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-card); font-size: 0.825rem; } .miku-toc-title { font-size: 0.95rem; font-weight: 700; color: var(--miku-primary); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px dashed rgba(var(--miku-primary-rgb), 0.18); display: flex; align-items: center; gap: 8px; } .miku-toc-list { list-style: none; margin: 0; } .miku-toc-list li { margin-bottom: 1px; } .miku-toc-list a { display: block; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text-sub); text-decoration: none; font-weight: 500; transition: all var(--dur-fast) var(--ease-smooth); border-left: 2px solid transparent; line-height: 1.4; } .miku-toc-list a:hover, .miku-toc-list a.active { color: var(--miku-primary); background: rgba(var(--miku-primary-rgb), 0.06); border-left-color: var(--miku-primary); } .miku-toc-list a.toc-h2 { padding-left: 8px; } .miku-toc-list a.toc-h3 { padding-left: 22px; font-size: 0.78rem; } .miku-toc-list a.toc-h4 { padding-left: 36px; font-size: 0.75rem; } /* 浮动 TOC（无侧边栏页面使用） */ .miku-toc-float-container { position: fixed; right: 16px; top: 96px; width: 240px; max-height: calc(100vh - 120px); overflow-y: auto; z-index: 40; scrollbar-width: thin; scrollbar-color: rgba(var(--miku-primary-rgb), 0.2) transparent; } .miku-toc-float-container::-webkit-scrollbar { width: 4px; } .miku-toc-float-container::-webkit-scrollbar-thumb { background: rgba(var(--miku-primary-rgb), 0.2); border-radius: 2px; } .miku-toc-floating { font-size: 0.78rem; padding: 14px; } .miku-toc-floating .miku-toc-title { font-size: 0.85rem; margin-bottom: 8px; padding-bottom: 8px; } .miku-toc-floating .miku-toc-list a { padding: 4px 10px; font-size: 0.76rem; line-height: 1.3; } .miku-toc-floating .miku-toc-list a.toc-h3 { padding-left: 18px; font-size: 0.72rem; } .miku-toc-floating .miku-toc-list a.toc-h4 { padding-left: 28px; font-size: 0.70rem; } @media (max-width: 1200px) { .miku-toc-float-container { display: none; } } /* ================================================================ 13. 侧边栏列表 (sidebar-list 兼容) ================================================================ */ .sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin: 0; } .sidebar-list li { margin: 0; } .sidebar-list a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-body); text-decoration: none; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-md); transition: all var(--dur-fast) var(--ease-smooth); } .sidebar-list a i { color: var(--text-sub); font-size: 0.8rem; transition: color var(--dur-fast); } .sidebar-list a:hover, .sidebar-list a.active { background: rgba(var(--miku-primary-rgb), 0.08); color: var(--miku-hover); transform: translateX(4px); } .sidebar-list a:hover i, .sidebar-list a.active i { color: var(--miku-primary); } /* ================================================================ 14. 代码块 ================================================================ */ .miku-code-block { position: relative; margin: 1.25rem 0; border-radius: var(--radius-md); overflow: hidden; background: var(--code-bg); border: 1px solid rgba(var(--miku-primary-rgb), 0.14); box-shadow: var(--shadow-soft); transition: border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth); } .miku-code-block:hover { border-color: rgba(var(--miku-primary-rgb), 0.35); box-shadow: 0 0 22px rgba(var(--miku-primary-rgb), 0.1); } .miku-code-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px; background: rgba(0, 0, 0, 0.22); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .miku-code-lang { font-size: 0.68rem; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .miku-code-copy { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; cursor: pointer; transition: all var(--dur-fast) var(--ease-smooth); font-family: var(--font-sans); } .miku-code-copy:hover { border-color: var(--miku-primary); color: var(--miku-primary); background: rgba(var(--miku-primary-rgb), 0.1); } .miku-code-copy.copied { border-color: var(--miku-primary); color: var(--miku-primary); } .miku-code-block pre { margin: 0; padding: 14px 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .miku-code-block pre::-webkit-scrollbar { height: 6px; } .miku-code-block pre::-webkit-scrollbar-track { background: transparent; } .miku-code-block pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } .miku-code-block pre::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } .miku-code-block code { font-family: var(--font-mono); font-size: 0.80rem; line-height: 1.35; color: var(--code-text); white-space: pre; tab-size: 4; } .miku-code-block .CodeMirror { border-radius: 0 0 var(--radius-md) var(--radius-md); } .miku-code-block .CodeMirror-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .miku-code-block .CodeMirror-scroll::-webkit-scrollbar { height: 6px; } .miku-code-block .CodeMirror-scroll::-webkit-scrollbar-track { background: transparent; } .miku-code-block .CodeMirror-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } .miku-code-block .CodeMirror-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* --- 行号模式 --- */ .miku-code-block.line-numbers pre { counter-reset: line; } .miku-code-block.line-numbers code .line { display: block; counter-increment: line; } .miku-code-block.line-numbers code .line::before { content: counter(line); display: inline-block; width: 2em; margin-right: 1em; text-align: right; color: rgba(255, 255, 255, 0.18); user-select: none; } /* ================================================================ 15. 表格 ================================================================ */ .miku-table-wrapper { overflow-x: auto; margin: 1.25rem 0; border-radius: var(--radius-md); border: 1px solid rgba(var(--miku-primary-rgb), 0.18); } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } thead { background: linear-gradient(135deg, var(--miku-primary), var(--miku-hover)); } thead th { color: #fff; font-weight: 600; padding: 11px 15px; text-align: left; white-space: nowrap; } tbody tr { border-bottom: 1px solid rgba(var(--miku-primary-rgb), 0.07); transition: background var(--dur-fast) var(--ease-smooth); } tbody tr:nth-child(even) { background: rgba(var(--miku-primary-rgb), 0.025); } tbody tr:hover { background: rgba(var(--miku-primary-rgb), 0.06); } tbody td { padding: 9px 15px; color: var(--text-body); } /* ================================================================ 16. 资源卡片网格 ================================================================ */ .miku-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; margin: 18px 0; } .miku-resource-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--bg-card); border: var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-decoration: none; color: var(--text-body); transition: all var(--dur-base) var(--ease-bounce); } .miku-resource-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow-strong), var(--shadow-soft); border-color: var(--miku-primary); color: var(--text-body); } .miku-resource-card .card-icon { font-size: 1.8rem; color: var(--miku-primary); margin-bottom: 2px; } .miku-resource-card h3 { font-size: 1.1rem; color: var(--text-heading); margin: 0; } .miku-resource-card p { font-size: 0.825rem; color: var(--text-sub); margin: 0; line-height: 1.5; } /* ================================================================ 17. Hero 区 ================================================================ */ .miku-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--nav-height)); text-align: center; position: relative; overflow: hidden; padding: 40px 24px; } .miku-hero-bg { position: absolute; inset: 0; z-index: -2; } .miku-hero-bg video { width: 100%; height: 100%; object-fit: cover; } .miku-hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(248, 252, 255, 0.72) 0%, rgba(224, 247, 246, 0.65) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } body.miku-dark .miku-hero-overlay { background: linear-gradient(135deg, rgba(15, 23, 42, 0.72) 0%, rgba(30, 41, 59, 0.65) 100%); } .miku-hero-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 56px 68px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--radius-3xl); box-shadow: var(--shadow-card); animation: fadeUp var(--dur-slow) var(--ease-bounce) forwards; position: relative; overflow: hidden; } .miku-hero-card::after { content: '♪'; position: absolute; top: 18px; right: 26px; font-size: 26px; color: var(--miku-primary); opacity: 0.22; animation: noteFloat var(--bpm-bar) var(--ease-bounce) infinite; pointer-events: none; } @keyframes fadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } } .miku-hero-title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); background: linear-gradient(135deg, var(--miku-primary) 0%, var(--miku-ice) 45%, var(--miku-hover) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .miku-hero-poem { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 2.4; color: var(--text-body); font-weight: 500; letter-spacing: 2px; } /* --- portal 布局 (旧 index 兼容) --- */ .portal-layout { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 1; } .portal-card { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 56px 72px; border-radius: var(--radius-3xl); border: var(--glass-border); box-shadow: var(--shadow-card); animation: fadeUp 0.8s var(--ease-bounce) forwards; position: relative; overflow: hidden; } .portal-card::after { content: '♪'; position: absolute; top: 18px; right: 26px; font-size: 26px; color: var(--miku-primary); opacity: 0.22; animation: noteFloat var(--bpm-bar) var(--ease-bounce) infinite; pointer-events: none; } /* ================================================================ 18. 简历页面 ================================================================ */ .miku-resume-header { display: flex; align-items: center; gap: 36px; padding: 44px; position: relative; overflow: hidden; } .miku-resume-header::after { content: ''; position: absolute; right: 0; top: 0; width: 280px; height: 100%; background: linear-gradient(90deg, transparent, rgba(var(--miku-primary-rgb), 0.05)); z-index: -1; } .miku-resume-avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 0 22px rgba(var(--miku-primary-rgb), 0.22); transition: transform 0.6s var(--ease-bounce); } .miku-resume-avatar:hover { transform: rotate(360deg); } body.miku-dark .miku-resume-avatar { border-color: var(--bg-card); } .miku-resume-section { padding: 38px 44px; margin-bottom: 22px; } .miku-resume-section h2 { font-size: 1.4rem; margin: 0 0 22px; padding: 0 0 10px; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; gap: 10px; } body.miku-dark .miku-resume-section h2 { border-bottom-color: rgba(255, 255, 255, 0.06); } /* --- 时间线 --- */ .miku-timeline-item { position: relative; padding-left: 28px; border-left: 2px solid rgba(var(--miku-primary-rgb), 0.2); margin-bottom: 30px; } .miku-timeline-item:last-child { margin-bottom: 0; } .miku-timeline-item::before { content: ''; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--miku-primary); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(var(--miku-primary-rgb), 0.18); } body.miku-dark .miku-timeline-item::before { border-color: var(--bg-card); } /* --- 技能标签 --- */ .miku-skill-tag { display: inline-block; padding: 6px 14px; margin: 4px; border-radius: var(--radius-full); background: #fff; color: var(--text-body); font-size: 0.825rem; font-weight: 600; border: 1px solid rgba(var(--miku-primary-rgb), 0.2); transition: all var(--dur-fast) var(--ease-bounce); } .miku-skill-tag:hover { background: var(--miku-primary); color: #fff; border-color: var(--miku-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--miku-primary-rgb), 0.28); } body.miku-dark .miku-skill-tag { background: var(--bg-card); border-color: rgba(var(--miku-primary-rgb), 0.2); } /* --- 数据高亮框 --- */ .data-highlight { background: linear-gradient(135deg, rgba(var(--miku-primary-rgb), 0.05), rgba(var(--miku-sakura-rgb), 0.03)); border-radius: var(--radius-md); padding: 18px 20px; margin-top: 14px; border: 1px dashed var(--miku-primary); } .data-highlight p { font-size: 0.85rem; margin-bottom: 6px; } .data-highlight p:last-child { margin-bottom: 0; } .data-highlight code { background: #fff; padding: 2px 6px; border-radius: var(--radius-xs); color: var(--miku-hover); font-weight: 700; } body.miku-dark .data-highlight code { background: var(--bg-primary); } /* ================================================================ 19. 页脚 ================================================================ */ .miku-footer { margin-top: 60px; padding: 32px 0; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid rgba(var(--miku-primary-rgb), 0.14); text-align: center; font-size: 0.825rem; color: var(--text-sub); } .miku-footer::before { content: ''; display: block; width: 70px; height: 2px; margin: 0 auto 14px; background: linear-gradient(90deg, transparent, var(--miku-primary), transparent); border-radius: 1px; } .miku-footer a { color: var(--miku-primary); text-decoration: none; font-weight: 600; } .miku-footer .miku-footer-note { margin-top: 6px; color: var(--miku-sakura); font-weight: 600; font-size: 0.78rem; } /* ================================================================ 20. Toast 通知 ================================================================ */ .miku-toast { position: fixed; top: -80px; left: 50%; transform: translateX(-50%); padding: 13px 30px; background: linear-gradient(135deg, var(--miku-primary), var(--miku-hover)); color: #fff; font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-full); box-shadow: var(--shadow-btn); z-index: 9999; transition: top var(--dur-base) var(--ease-bounce); white-space: nowrap; pointer-events: none; } .miku-toast.show { top: calc(var(--nav-height) + 16px); } /* ================================================================ 21. 回到顶部 ================================================================ */ .miku-back-top { position: fixed; bottom: 36px; right: 36px; width: 44px; height: 44px; border-radius: 50%; background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: var(--glass-border-strong); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--miku-primary); font-size: 1.1rem; opacity: 0; visibility: hidden; transform: translateY(16px); transition: all var(--dur-base) var(--ease-bounce); z-index: 900; } .miku-back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .miku-back-top:hover { background: var(--miku-primary); color: #fff; box-shadow: var(--shadow-btn); transform: translateY(-3px); } /* ================================================================ 22. 主题切换按钮 ================================================================ */ .miku-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: var(--glass-border); background: var(--glass-bg); cursor: pointer; color: var(--text-sub); font-size: 1rem; transition: all var(--dur-fast) var(--ease-bounce); } .miku-theme-toggle:hover { color: var(--miku-primary); border-color: var(--miku-primary); box-shadow: 0 0 14px rgba(var(--miku-primary-rgb), 0.18); } /* ================================================================ 23. 阅读进度条 ================================================================ */ .miku-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--miku-primary), var(--miku-ice)); z-index: 1001; transition: width 0.1s linear; border-radius: 0 2px 2px 0; pointer-events: none; } /* ================================================================ 24. 加载动画 ================================================================ */ .miku-loader { position: fixed; inset: 0; z-index: 9999; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity var(--dur-slow) var(--ease-smooth), visibility var(--dur-slow) var(--ease-smooth); } .miku-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .miku-loader-notes { display: flex; gap: 8px; } .miku-loader-note { width: 12px; height: 12px; border-radius: 50%; background: var(--miku-primary); animation: noteBounce 1.2s var(--ease-bounce) infinite; } .miku-loader-note:nth-child(2) { animation-delay: 0.15s; background: var(--miku-ice); } .miku-loader-note:nth-child(3) { animation-delay: 0.3s; background: var(--miku-sakura); } .miku-loader-note:nth-child(4) { animation-delay: 0.45s; } .miku-loader-note:nth-child(5) { animation-delay: 0.6s; background: var(--miku-ice); } @keyframes noteBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .miku-loader-bar { width: 180px; height: 3px; border-radius: 3px; background: rgba(var(--miku-primary-rgb), 0.1); overflow: hidden; } .miku-loader-bar-inner { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--miku-primary), var(--miku-ice), var(--miku-primary)); animation: loadBar 1.5s var(--ease-smooth) infinite; } @keyframes loadBar { 0% { width: 0; transform: translateX(0); } 50% { width: 70%; transform: translateX(15%); } 100% { width: 100%; transform: translateX(0); } } /* ================================================================ 25. 120BPM 动效系统 ================================================================ */ /* --- 音符浮动 --- */ @keyframes noteFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.55; } 25% { transform: translateY(-4px) rotate(5deg); opacity: 0.8; } 50% { transform: translateY(-8px) rotate(10deg); opacity: 1; } 75% { transform: translateY(-4px) rotate(5deg); opacity: 0.8; } } .miku-note-decor { display: inline-block; color: var(--miku-primary); animation: noteFloat var(--bpm-bar) var(--ease-bounce) infinite; user-select: none; pointer-events: none; } /* --- 声波纹 --- */ @keyframes soundwave { 0% { transform: scaleY(0.3); } 25% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } 75% { transform: scaleY(0.9); } 100% { transform: scaleY(0.3); } } .miku-soundwave { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; } .miku-soundwave-bar { width: 3px; background: var(--miku-primary); border-radius: 2px; animation: soundwave var(--bpm-bar) var(--ease-smooth) infinite; } .miku-soundwave-bar:nth-child(1) { height: 40%; animation-delay: 0s; } .miku-soundwave-bar:nth-child(2) { height: 80%; animation-delay: var(--bpm-half); } .miku-soundwave-bar:nth-child(3) { height: 100%; animation-delay: var(--bpm-beat); } .miku-soundwave-bar:nth-child(4) { height: 60%; animation-delay: calc(var(--bpm-beat) + var(--bpm-half)); } .miku-soundwave-bar:nth-child(5) { height: 90%; animation-delay: calc(var(--bpm-beat) * 1.5); } /* --- 旋转光晕 --- */ @keyframes glowPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .miku-glow-pulse { animation: glowPulse var(--bpm-bar) var(--ease-smooth) infinite; } /* --- 入场交错动画 --- */ .miku-stagger { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-base) var(--ease-bounce), transform var(--dur-base) var(--ease-bounce); } .miku-stagger.visible { opacity: 1; transform: translateY(0); } /* ================================================================ 26. Typora 导出页面覆盖 ================================================================ */ body.typora-export { padding: 0 !important; background: var(--bg-primary) !important; font-family: var(--font-sans) !important; color: var(--text-body) !important; line-height: var(--line-height-body) !important; overflow-x: hidden !important; } body.typora-export #write { max-width: none !important; padding: 0 !important; margin: 0 !important; } body.typora-export #write h1 { font-size: 2rem !important; border-left: 5px solid var(--miku-primary) !important; padding-left: 16px !important; background: linear-gradient(135deg, var(--miku-primary), var(--miku-ice)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 1.5rem 0 0.75rem !important; white-space: normal !important; } body.typora-export #write h2 { font-size: 1.5rem !important; padding-left: 12px !important; border-left: 4px solid var(--miku-primary) !important; margin: 1.5rem 0 0.75rem !important; white-space: normal !important; } body.typora-export #write h3 { font-size: 1.25rem !important; margin: 1.25rem 0 0.5rem !important; white-space: normal !important; } body.typora-export #write h4 { font-size: 1.1rem !important; white-space: normal !important; } body.typora-export #write h5, body.typora-export #write h6 { white-space: normal !important; } body.typora-export #write h1, body.typora-export #write h2, body.typora-export #write h3, body.typora-export #write h4, body.typora-export #write h5, body.typora-export #write h6 { color: var(--text-heading) !important; font-family: var(--font-sans) !important; font-weight: 700 !important; } body.typora-export #write p { color: var(--text-body) !important; font-family: var(--font-sans) !important; line-height: 1.8 !important; margin-bottom: 0.875rem !important; white-space: normal !important; } /* --- Typora CodeMirror 代码块全面覆盖 --- */ body.typora-export #write .md-fences, body.typora-export #write .md-fences-advanced:not(.md-focus) { background: var(--code-bg) !important; border-radius: var(--radius-md) !important; border: 1px solid rgba(var(--miku-primary-rgb), 0.15) !important; font-family: var(--font-mono) !important; color: var(--code-text) !important; padding: 0 !important; margin: 1.25rem 0 !important; overflow: hidden !important; } body.typora-export #write pre { background: var(--code-bg) !important; border-radius: var(--radius-md) !important; border: 1px solid rgba(var(--miku-primary-rgb), 0.15) !important; font-family: var(--font-mono) !important; color: var(--code-text) !important; padding: 18px 20px !important; margin: 1.25rem 0 !important; overflow-x: auto !important; tab-size: 4; } /* CodeMirror 容器 */ body.typora-export #write .CodeMirror { background: var(--code-bg) !important; border-radius: var(--radius-md) !important; font-family: var(--font-mono) !important; font-size: 0.82rem !important; line-height: 1.35 !important; color: var(--code-text) !important; padding: 0 !important; overflow: hidden !important; } /* 隐藏 CodeMirror 内部测量元素（会撑高代码块） */ body.typora-export #write .CodeMirror-measure { position: absolute !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } body.typora-export #write .CodeMirror-measure > * { height: 0 !important; overflow: hidden !important; } /* 强制所有 CodeMirror 内部元素继承紧凑行高 */ body.typora-export #write .CodeMirror-code > div, body.typora-export #write .CodeMirror-code > div[style] { line-height: 1.35 !important; min-height: 0 !important; } /* CodeMirror 滚动区域 */ body.typora-export #write .CodeMirror-scroll { background: var(--code-bg) !important; overflow-x: auto !important; overflow-y: hidden !important; } body.typora-export #write .CodeMirror-sizer { background: var(--code-bg) !important; margin-bottom: 0 !important; } /* CodeMirror 代码行区域 */ body.typora-export #write .CodeMirror-lines { background: var(--code-bg) !important; padding: 8px 0 !important; } body.typora-export #write .CodeMirror-code { background: var(--code-bg) !important; } /* CodeMirror 行号区域（左侧） */ body.typora-export #write .CodeMirror-gutters { background: rgba(0, 0, 0, 0.18) !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; padding-right: 4px !important; } body.typora-export #write .CodeMirror-gutter { background: rgba(0, 0, 0, 0.18) !important; } body.typora-export #write .CodeMirror-linenumber { color: rgba(255, 255, 255, 0.22) !important; font-family: var(--font-mono) !important; font-size: 0.68rem !important; line-height: 1.35 !important; padding: 0 4px 0 2px !important; min-width: 20px !important; text-align: right !important; } /* CodeMirror 每一行 */ body.typora-export #write .CodeMirror-line { font-family: var(--font-mono) !important; font-size: 0.80rem !important; line-height: 1.35 !important; color: var(--code-text) !important; background: transparent !important; padding-right: 16px !important; } /* 活动行高亮 */ body.typora-export #write .CodeMirror-activeline-background { background: rgba(var(--miku-primary-rgb), 0.06) !important; } body.typora-export #write .CodeMirror-activeline-gutter { background: rgba(var(--miku-primary-rgb), 0.1) !important; } /* ================================================================ CodeMirror 语法高亮颜色（统一使用变量） ================================================================ */ body.typora-export #write .cm-keyword { color: #C678DD !important; font-weight: 600 !important; } body.typora-export #write .cm-def { color: #E5C07B !important; } body.typora-export #write .cm-variable { color: #E06C75 !important; } body.typora-export #write .cm-variable-2{ color: #E06C75 !important; } body.typora-export #write .cm-variable-3{ color: #D19A66 !important; } body.typora-export #write .cm-type { color: #E5C07B !important; } body.typora-export #write .cm-string { color: #98C379 !important; } body.typora-export #write .cm-meta { color: #C678DD !important; } body.typora-export #write .cm-comment { color: #5C6370 !important; font-style: italic !important; } body.typora-export #write .cm-number { color: #D19A66 !important; } body.typora-export #write .cm-operator { color: #56B6C2 !important; } body.typora-export #write .cm-atom { color: #D19A66 !important; } body.typora-export #write .cm-builtin { color: #E5C07B !important; } body.typora-export #write .cm-property { color: #E06C75 !important; } body.typora-export #write .cm-qualifier { color: #E5C07B !important; } body.typora-export #write .cm-tag { color: #E06C75 !important; } body.typora-export #write .cm-attribute { color: #D19A66 !important; } body.typora-export #write .cm-link { color: #56B6C2 !important; text-decoration: underline !important; } body.typora-export #write .cm-error { color: #E06C75 !important; background: rgba(224, 108, 117, 0.1) !important; } /* 内联 code */ body.typora-export #write code { font-family: var(--font-mono) !important; font-size: 0.85rem !important; background: rgba(var(--miku-primary-rgb), 0.08) !important; color: var(--miku-hover) !important; padding: 2px 6px !important; border-radius: 4px !important; } body.typora-export #write pre code { background: transparent !important; color: var(--code-text) !important; padding: 0 !important; border-radius: 0 !important; font-size: inherit !important; } body.typora-export #write table { border-collapse: collapse !important; width: 100% !important; } body.typora-export #write table thead { background: var(--miku-primary) !important; } body.typora-export #write table thead th { color: #fff !important; font-weight: 600 !important; padding: 10px 14px !important; } body.typora-export #write table tbody td { padding: 8px 14px !important; border-bottom: 1px solid rgba(var(--miku-primary-rgb), 0.08) !important; } body.typora-export #write table tbody tr:nth-child(even) { background: rgba(var(--miku-primary-rgb), 0.03) !important; } body.typora-export #write img { border-radius: var(--radius-sm) !important; border: 1px solid rgba(var(--miku-primary-rgb), 0.18) !important; box-shadow: var(--shadow-soft) !important; } body.typora-export #write blockquote { border-left: 4px solid var(--miku-primary) !important; background: rgba(var(--miku-primary-rgb), 0.04) !important; padding: 0.875rem 1.25rem !important; border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; margin: 1.25rem 0 !important; } body.typora-export #write ul, body.typora-export #write ol { margin: 0.5rem 0 1rem 1.5rem !important; line-height: 1.8 !important; } body.typora-export #write li { margin-bottom: 0.3rem !important; } body.typora-export #write figure { margin: 1.25rem 0 !important; max-width: 100% !important; overflow-x: auto !important; } body.typora-export #write hr { border: none !important; height: 2px !important; margin: 1.5rem 0 !important; background: linear-gradient(90deg, transparent, var(--miku-primary), transparent) !important; opacity: 0.35 !important; } body.typora-export #write a { color: var(--miku-primary) !important; transition: color var(--dur-fast) var(--ease-smooth) !important; } body.typora-export #write a:hover { color: var(--miku-hover) !important; } body.typora-export #write .footnotes { opacity: 0.85 !important; font-size: 0.875rem !important; margin-top: 2rem !important; padding-top: 1rem !important; border-top: 1px solid rgba(var(--miku-primary-rgb), 0.15) !important; } body.typora-export #write .task-list-item { list-style: none !important; } body.typora-export #write .task-list-item input[type="checkbox"] { margin-right: 8px !important; accent-color: var(--miku-primary) !important; } body.typora-export #write sup.md-footnote { background: rgba(var(--miku-primary-rgb), 0.12) !important; color: var(--miku-primary) !important; padding: 2px 6px !important; border-radius: var(--radius-xs) !important; font-size: 0.8em !important; } body.typora-export #write strong { color: var(--text-heading) !important; } body.typora-export #write .md-fences-adv-panel { background: transparent !important; } body.typora-export #write .md-diagram-panel { background: var(--bg-card) !important; border: 1px solid rgba(var(--miku-primary-rgb), 0.15) !important; border-radius: var(--radius-md) !important; padding: 14px !important; margin: 1.25rem 0 !important; } body.typora-export #write .mathjax-block { margin: 1.25rem 0 !important; color: var(--text-body) !important; } body.typora-export #write .md-fences.md-fences-math { background: transparent !important; border: none !important; } /* --- Typora 内容包装器 --- */ .miku-typora-wrap { max-width: 900px; margin: 0 auto; padding: 40px 48px; } /* ================================================================ 27. 暗模式 Typora 补充 ================================================================ */ body.miku-dark.typora-export #write pre, body.miku-dark.typora-export #write .md-fences, body.miku-dark.typora-export #write .md-fences-advanced:not(.md-focus) { background: #1a1a2e !important; border-color: rgba(var(--miku-primary-rgb), 0.2) !important; } body.miku-dark.typora-export #write .CodeMirror, body.miku-dark.typora-export #write .CodeMirror-scroll, body.miku-dark.typora-export #write .CodeMirror-sizer, body.miku-dark.typora-export #write .CodeMirror-lines, body.miku-dark.typora-export #write .CodeMirror-code { background: #1a1a2e !important; } body.miku-dark.typora-export #write .CodeMirror-gutters, body.miku-dark.typora-export #write .CodeMirror-gutter { background: rgba(0, 0, 0, 0.25) !important; } body.miku-dark.typora-export #write .CodeMirror-linenumber { color: rgba(255, 255, 255, 0.18) !important; } body.miku-dark.typora-export #write .CodeMirror-activeline-background { background: rgba(var(--miku-primary-rgb), 0.08) !important; } body.miku-dark.typora-export #write table thead { background: var(--miku-hover) !important; } body.miku-dark.typora-export #write table tbody tr:nth-child(even) { background: rgba(var(--miku-primary-rgb), 0.04) !important; } body.miku-dark.typora-export #write img { border-color: rgba(var(--miku-primary-rgb), 0.15) !important; } body.miku-dark.typora-export #write .md-diagram-panel { background: var(--bg-card) !important; border-color: rgba(var(--miku-primary-rgb), 0.2) !important; } body.miku-dark.typora-export #write .md-diagram-panel svg { filter: brightness(0.9) !important; } /* ================================================================ 28. 暗模式导航与组件覆盖 ================================================================ */ body.miku-dark .miku-header { background: rgba(15, 23, 42, 0.86); border-bottom-color: rgba(var(--miku-primary-rgb), 0.14); } body.miku-dark .miku-header.scrolled { background: rgba(15, 23, 42, 0.94); } body.miku-dark .miku-card { background: var(--bg-card); border-color: rgba(var(--miku-primary-rgb), 0.18); box-shadow: 0 0 0 1px rgba(var(--miku-primary-rgb), 0.05) inset, var(--shadow-card); } body.miku-dark .miku-card:hover { border-color: rgba(var(--miku-primary-rgb), 0.35); } body.miku-dark .miku-dropdown-menu { background: var(--bg-card); } body.miku-dark .miku-dropdown-menu::before { background: var(--bg-card); border-color: rgba(var(--miku-primary-rgb), 0.34); } body.miku-dark .sidebar-list a { color: var(--text-body); } body.miku-dark .sidebar-list a:hover, body.miku-dark .sidebar-list a.active { background: rgba(var(--miku-primary-rgb), 0.1); color: var(--miku-ice); } body.miku-dark .callout { background: rgba(var(--miku-primary-rgb), 0.06); border-color: rgba(var(--miku-primary-rgb), 0.14); } body.miku-dark .article-body h2, body.miku-dark .article-body h3 { color: var(--text-heading); } body.miku-dark .miku-loader { background: var(--bg-primary); } body.miku-dark ::-webkit-scrollbar-thumb { background: rgba(var(--miku-primary-rgb), 0.2); } /* ================================================================ 29. 响应式 ================================================================ */ @media (max-width: 1200px) { :root { --content-px: 40px; } } @media (max-width: 1024px) { :root { --content-px: 28px; } .miku-layout-split { flex-direction: column; } .miku-layout-side { width: 100%; position: relative; top: 0; max-height: none; order: -1; } .miku-toc { max-height: 40vh; overflow-y: auto; } .miku-hero-card, .portal-card { padding: 40px 32px; } .miku-resume-header { flex-direction: column; text-align: center; padding: 32px 24px; } .miku-resume-header::after { display: none; } .miku-article { padding: 32px 28px; } } @media (max-width: 768px) { :root { --content-px: 20px; --nav-height: 56px; } .miku-nav-list { display: none; } .miku-menu-btn { display: flex; } .miku-hero-card, .portal-card { padding: 32px 22px; } .miku-hero-poem { font-size: 0.9rem; line-height: 2.1; } .miku-article { padding: 24px 20px; } .miku-hub-grid { grid-template-columns: 1fr; } .miku-resume-section { padding: 24px 20px; } .miku-typora-wrap { padding: 24px 20px; } .miku-toc { max-height: 45vh; } .miku-back-top { bottom: 22px; right: 18px; } .miku-page { padding-top: calc(var(--nav-height) + 16px); } } @media (max-width: 480px) { .miku-hero-title { font-size: 1.8rem; } .miku-hero-poem { font-size: 0.8rem; line-height: 1.9; } .miku-btn { padding: 10px 20px; font-size: 0.825rem; } .miku-header { padding: 0 16px; } .miku-layout-side { width: 100%; } } /* ================================================================ 30. 打印样式 ================================================================ */ @media print { .miku-header, .miku-mobile-nav, .miku-back-top, .miku-progress-bar, .miku-toast, .miku-menu-btn, .miku-theme-toggle, .miku-layout-side, .miku-footer, .site-bg, .site-overlay, .miku-hero-bg, .miku-hero-overlay { display: none !important; } body { background: #fff !important; color: #000 !important; } .miku-page { padding-top: 0 !important; } .miku-article { padding: 0 !important; } a { color: #000 !important; } }