/* ========================================================================== * 520G 全站样式 · 理性卡通像素风（Pixel Art） * 移动优先；断点 480 / 768 / 1024；竖屏单列 + 底部 Tab，≥768px 横屏底部 Tab * 迁移为左侧窄边栏；触控目标 ≥44px；输入框字号 ≥16px（防 iOS 自动放大）； * 深色模式 prefers-color-scheme（变量化配色，街机感深色，只改变量值）。 * 像素语言红线：全站零圆角 / 2px 实线边框（卡片 3px）/ 4px 4px 0 硬阴影 / * 按钮 :active 位移 2px（街机按压手感）/ 禁一切模糊阴影与粉色系色值。 * ========================================================================== */ /* ---------- 像素字体（本地化 woff2，仅用于标题/金额数字/月份/品牌文字） ---------- */ @font-face { font-family: 'VT323'; src: url('../fonts/vt323.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- 设计变量（深色模式只改这里） ---------- */ :root { --bg: #edf0f5; --card-bg: #ffffff; --text: #1b263b; --text-secondary: #5d6b85; --primary: #3a86ff; --primary-dark: #2b6fe0; --primary-soft: rgba(58, 134, 255, .12); --primary-soft-strong: rgba(58, 134, 255, .35); --income: #2a9d8f; --expense: #d62828; --border: #1b263b; --border-soft: #b9c2d4; --tabbar-bg: #ffffff; --btn-text: #ffffff; --dot: rgba(27, 38, 59, .10); --alert-error-bg: #fbeaea; --alert-error-text: #a11d1d; --alert-error-border: #d62828; --alert-success-bg: #e6f4f2; --alert-success-text: #1d7a6f; --alert-success-border: #2a9d8f; --radius: 0; --font-pixel: 'VT323', 'Courier New', monospace; --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; --header-h: 52px; --tabbar-h: 56px; --sidebar-w: 76px; } /* ---------- 深色模式（街机感） ---------- * 应用规则（主题切换，见 app.js）： * 1) 未设置 data-theme（跟随系统）：系统深色时自动套用下面变量； * 2) ：强制深色（无视系统）； * 3) ：强制浅色（即便系统深色也保持浅色）。 * 浅色为 :root 默认值（上方已定义），无需重复。 */ :root[data-theme="dark"] { --bg: #0d1b2a; --card-bg: #1b263b; --text: #e0e1dd; --text-secondary: #8d99ae; --primary: #4cc9f0; --primary-dark: #35a8cf; --primary-soft: rgba(76, 201, 240, .14); --primary-soft-strong: rgba(76, 201, 240, .35); --income: #2a9d8f; --expense: #e05d5d; --border: #4cc9f0; --border-soft: #415a77; --tabbar-bg: #1b263b; --btn-text: #0d1b2a; --dot: rgba(76, 201, 240, .12); --alert-error-bg: #3a1c22; --alert-error-text: #f1a7a7; --alert-error-border: #d62828; --alert-success-bg: #13322d; --alert-success-text: #7fd8cc; --alert-success-border: #2a9d8f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0d1b2a; --card-bg: #1b263b; --text: #e0e1dd; --text-secondary: #8d99ae; --primary: #4cc9f0; --primary-dark: #35a8cf; --primary-soft: rgba(76, 201, 240, .14); --primary-soft-strong: rgba(76, 201, 240, .35); --income: #2a9d8f; --expense: #e05d5d; --border: #4cc9f0; --border-soft: #415a77; --tabbar-bg: #1b263b; --btn-text: #0d1b2a; --dot: rgba(76, 201, 240, .12); --alert-error-bg: #3a1c22; --alert-error-text: #f1a7a7; --alert-error-border: #d62828; --alert-success-bg: #13322d; --alert-success-text: #7fd8cc; --alert-success-border: #2a9d8f; } } /* ---------- 基础（像素风红线：全站零圆角） ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.6; overflow-x: hidden; /* 禁止横向滚动 */ } a { color: var(--primary); text-decoration: none; } img { max-width: 100%; } .muted { color: var(--text-secondary); font-size: 13px; font-weight: normal; font-family: var(--font-body); } ::selection { background: var(--primary); color: var(--btn-text); } /* 键盘焦点：像素虚线框 */ a:focus-visible, button:focus-visible, label:focus-visible { outline: 2px dashed var(--primary); outline-offset: 2px; } /* 像素硬滚动条（WebKit） */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-soft); border: 2px solid var(--bg); } /* 像素字体应用范围：h1/h2、金额数字、月份标题、品牌 Logo 文字（中文自动回退系统黑体） */ h1, h2, .app-title, .stat-value, .month-label, .month-nav, .amount, .amount-currency, .fab { font-family: var(--font-pixel); font-weight: 400; /* VT323 仅 400 字重，禁用合成加粗 */ } /* ---------- 顶栏 ---------- */ .app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--card-bg); border-bottom: 3px solid var(--border); z-index: 100; } .app-header-inner { max-width: 1024px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .app-title { font-size: 26px; letter-spacing: 1px; color: var(--text); } .app-header-actions { display: flex; align-items: center; gap: 8px; } .app-theme-toggle { font-size: 19px; line-height: 1; width: 44px; min-width: 44px; height: 44px; min-height: 44px; background: var(--card-bg); color: var(--text); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; } .app-theme-toggle:active { transform: translateY(2px); } .app-user { font-size: 20px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* ---------- 主内容（竖屏单列，上下留白给顶栏与底部 Tab） ---------- */ .app-main { max-width: 1024px; margin: 0 auto; padding: calc(var(--header-h) + 12px) 12px calc(var(--tabbar-h) + 20px); } /* ---------- 底部 Tab（拇指热区固定） ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tabbar-h); background: var(--tabbar-bg); border-top: 3px solid var(--border); display: flex; z-index: 100; padding-bottom: env(safe-area-inset-bottom); } .tab { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); } .tab-icon { font-size: 20px; line-height: 1.2; } .tab-label { font-size: 11px; } .tab.active { color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 3px 0 var(--primary); /* 像素高亮条 */ } /* ---------- ≥768px（横屏/平板/桌面）：底部 Tab → 左侧窄边栏 ---------- */ @media (min-width: 768px) { body { padding-left: var(--sidebar-w); } .tabbar { top: 0; bottom: 0; left: 0; right: auto; width: var(--sidebar-w); height: auto; flex-direction: column; justify-content: flex-start; border-top: none; border-right: 3px solid var(--border); padding: calc(var(--header-h) + 12px) 0 12px; } .tab { flex: none; width: 100%; padding: 14px 0; } .tab.active { box-shadow: inset 3px 0 0 var(--primary); } .app-header { left: var(--sidebar-w); } } /* ---------- ≥1024px：更宽松的内容间距 ---------- */ @media (min-width: 1024px) { .app-main { padding-top: calc(var(--header-h) + 20px); padding-left: 20px; padding-right: 20px; } .app-header-inner { padding: 0 20px; } } /* ---------- 卡片（3px 实线边框 + 硬阴影） ---------- */ .card { background: var(--card-bg); border: 3px solid var(--border); box-shadow: 4px 4px 0 var(--border); padding: 16px; margin-bottom: 12px; } .card-title { font-size: 22px; margin-bottom: 12px; letter-spacing: 1px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .card-title .muted { font-family: var(--font-pixel); font-size: 18px; letter-spacing: 1px; } .card-more { margin-top: 10px; text-align: right; font-size: 14px; } .empty-tip { padding: 8px 0; } /* ---------- 统计（本月概览，金额走像素字体） ---------- */ .stat-row { display: flex; gap: 12px; } .stat { flex: 1; text-align: center; } .stat-label { display: block; font-size: 13px; color: var(--text-secondary); } .stat-value { display: block; font-size: 26px; } .income { color: var(--income); } .expense { color: var(--expense); } /* ---------- 按钮（街机按压手感：:active 位移 2px + 阴影收敛） ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 2px solid var(--border); background: var(--primary); color: var(--btn-text); font-size: 16px; line-height: 1.2; cursor: pointer; box-shadow: 4px 4px 0 var(--border); -webkit-tap-highlight-color: transparent; } .btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--border); background: var(--primary-dark); } .btn-block { display: flex; width: 100%; } .btn-secondary { background: var(--card-bg); color: var(--text); } .btn-secondary:active { background: var(--bg); } .btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; } .quick-actions { display: flex; gap: 12px; margin-top: 4px; } .quick-actions .btn { flex: 1; } /* ---------- 表单（输入框字号 ≥16px 防 iOS 自动放大） ---------- */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 14px; margin-bottom: 6px; color: var(--text-secondary); } input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="email"], input[type="url"], textarea, select { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 16px; font-family: inherit; border: 2px solid var(--border); background: var(--card-bg); color: var(--text); } textarea { min-height: 120px; resize: vertical; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 3px 3px 0 var(--primary-soft-strong); } /* ---------- 提示条 ---------- */ .alert { padding: 12px 14px; margin-bottom: 14px; font-size: 14px; border: 2px solid var(--border); box-shadow: 3px 3px 0 var(--border); } .alert-error { background: var(--alert-error-bg); color: var(--alert-error-text); border-color: var(--alert-error-border); } .alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); border-color: var(--alert-success-border); } /* ---------- 列表（分隔线 2px 虚线，像素点缀） ---------- */ .list { list-style: none; } .list-item { display: flex; align-items: center; min-height: 44px; padding: 10px 0; border-bottom: 2px dashed var(--border-soft); } .list-item:last-child { border-bottom: none; } .list-link { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text); min-height: 44px; } .list-date { color: var(--text-secondary); font-size: 13px; flex: none; min-width: 3em; } .list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- 登录页 / 错误页（终端点阵背景 + 像素 Logo 块） ---------- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background-image: radial-gradient(var(--dot) 1.5px, transparent 1.5px); background-size: 18px 18px; } .login-card { width: 100%; max-width: 380px; background: var(--card-bg); border: 3px solid var(--border); box-shadow: 6px 6px 0 var(--border); padding: 28px 22px; } .login-logo { display: flex; justify-content: center; margin-bottom: 12px; } /* 像素棋盘 Logo 块（替代原 💗，纯 CSS 无图片） */ .pixel-chip { width: 44px; height: 44px; border: 3px solid var(--border); box-shadow: 4px 4px 0 var(--primary-soft-strong); background: conic-gradient(var(--primary) 25%, var(--card-bg) 0 50%, var(--primary) 0 75%, var(--card-bg) 0) 0 0 / 22px 22px; } .login-title { text-align: center; font-size: 34px; letter-spacing: 2px; margin-bottom: 20px; } .error-card { text-align: center; } .error-msg { color: var(--text-secondary); margin-bottom: 20px; font-size: 15px; } /* ---------- ≤480px 微调 ---------- */ @media (max-width: 480px) { .stat-value { font-size: 22px; } .card { padding: 14px; } } /* ========================================================================== * money 记账模块（T03 追加） * ========================================================================== */ /* 月份切换（月份标题走像素字体） */ .month-switcher { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; } .month-nav { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; color: var(--primary); background: var(--card-bg); border: 2px solid var(--border); box-shadow: 3px 3px 0 var(--border); } .month-nav:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); } .month-nav.disabled { color: var(--text-secondary); opacity: .4; border-color: var(--border-soft); box-shadow: none; } .month-label { font-size: 26px; letter-spacing: 1px; min-width: 7em; text-align: center; } /* 图表容器（竖屏上下排列，≥768px 左右分栏） */ .chart-row { display: flex; flex-direction: column; gap: 16px; } .chart-box { position: relative; } .chart-empty { margin-top: 10px; text-align: center; } @media (min-width: 768px) { .chart-row { flex-direction: row; } .chart-box { flex: 1; min-width: 0; } } /* 明细列表 */ .record-item { gap: 8px; } .record-date { flex: none; width: 3.2em; color: var(--text-secondary); font-size: 13px; } .record-cat { flex: none; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record-remark { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .record-item .amount { flex: none; font-size: 20px; } .amount.expense { color: var(--expense); } .amount.income { color: var(--income); } .record-actions { flex: none; display: flex; align-items: center; gap: 2px; margin-left: 4px; } .record-account { flex: none; max-width: 5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 6px; border: 2px solid var(--border-soft); background: var(--bg); } .expr-mini { font-size: 12px; font-weight: 400; opacity: .75; } .record-actions a, .record-actions .link-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-secondary); } .inline-form { display: inline; margin: 0; } .link-btn { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; } /* 记账图片附件（表单内） */ .img-attach { display: flex; flex-direction: column; gap: 8px; } .img-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .thumb-list { display: flex; flex-wrap: wrap; gap: 8px; } .thumb { position: relative; width: 72px; height: 72px; border: 2px solid var(--border-soft); background: var(--bg); overflow: hidden; } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb-del { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; line-height: 20px; text-align: center; background: var(--expense); color: #fff; border: 2px solid var(--border); font-size: 14px; cursor: pointer; padding: 0; } #addImgBtn { flex: none; } /* 列表页记录缩略图（整行跨宽） */ .record-thumbs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .thumb-link { width: 56px; height: 56px; border: 2px solid var(--border-soft); overflow: hidden; flex: none; } .thumb-link img { width: 100%; height: 100%; object-fit: cover; display: block; } /* [＋] 浮动钮（方形像素钮，避开底部 Tab 与 iOS 安全区） */ .fab { position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; background: var(--primary); color: var(--btn-text); border: 3px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; box-shadow: 4px 4px 0 var(--border); z-index: 90; -webkit-tap-highlight-color: transparent; } .fab:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--border); background: var(--primary-dark); } @media (min-width: 768px) { .fab { right: 24px; bottom: 24px; } } /* 记一笔：支出|收入切换（像素分段控件） */ .type-switch { display: flex; gap: 4px; background: var(--bg); border: 2px solid var(--border); padding: 4px; margin-bottom: 14px; } .type-switch input { position: absolute; opacity: 0; pointer-events: none; } .type-switch label { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-secondary); cursor: pointer; border: 2px solid transparent; } .type-switch input:checked + label { background: var(--primary); color: var(--btn-text); border-color: var(--border); font-weight: 700; } /* 记一笔：金额大输入框（像素字体大数字） */ .amount-wrap { display: flex; align-items: center; border: 2px solid var(--border); background: var(--card-bg); padding: 0 12px; } .amount-wrap:focus-within { border-color: var(--primary); box-shadow: 3px 3px 0 var(--primary-soft-strong); } .amount-currency { font-size: 26px; color: var(--text-secondary); margin-right: 6px; } .amount-wrap .amount-input { border: none; box-shadow: none; padding: 10px 0; font-family: var(--font-pixel); font-weight: 400; font-size: 34px; } .amount-wrap .amount-input:focus { box-shadow: none; } /* 记一笔：分类图标网格（3 列，≥480px 4 列；radio 隐藏，:checked + label 高亮） */ .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; } @media (min-width: 480px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } } .cat-grid input { position: absolute; opacity: 0; pointer-events: none; } .cat-grid label { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 8px 4px; border: 2px solid var(--border); background: var(--card-bg); cursor: pointer; } .cat-grid input:checked + label { border-color: var(--primary); background: var(--primary-soft); box-shadow: 3px 3px 0 var(--primary-soft-strong); } .cat-icon { font-size: 22px; line-height: 1.3; } .cat-name { font-size: 12px; margin-top: 2px; } /* 分类管理 */ .cat-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; border-bottom: 2px dashed var(--border-soft); } .cat-row:last-child { border-bottom: none; } .cat-row .grow { flex: 1; min-width: 0; } .badge { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: 11px; background: var(--bg); color: var(--text-secondary); border: 2px solid var(--border); } .center { text-align: center; } /* 记一笔：账户选择（紧跟支出/收入切换，快速设置记录所属账户） */ .account-line { display: flex; align-items: center; gap: 8px; } .account-line .grow { flex: 1; min-width: 0; } .account-manage { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 10px; font-size: 13px; color: var(--primary); border: 2px solid var(--border); background: var(--card-bg); } .account-manage:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); } /* 金额：算式实时结果提示 */ .expr-hint { margin-top: 6px; font-size: 13px; color: var(--text-secondary); min-height: 18px; line-height: 1.4; } .expr-hint .expr-ok { color: var(--income); font-weight: 600; } .expr-hint .expr-err { color: var(--expense); } /* ========================================================================== * notes & demos（T04：日记模块 + Demos 索引） * ========================================================================== */ /* ---------- 日记列表 ---------- */ /* search 输入框补齐基础样式（与全站表单一致：≥44px、16px 防 iOS 放大） */ input[type="search"] { width: 100%; min-height: 44px; padding: 10px 12px; font-size: 16px; font-family: inherit; border: 2px solid var(--border); background: var(--card-bg); color: var(--text); -webkit-appearance: none; } .note-search { display: flex; gap: 8px; } .note-search input[type="search"] { flex: 1; } .note-search .btn { flex: none; } .note-search-tip { margin-top: 10px; } .note-list .note-card { display: block; color: var(--text); } .note-card:active { background: var(--bg); } .note-card-title { font-size: 23px; letter-spacing: 1px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note-card-excerpt { font-size: 14px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; } .note-card-meta { font-size: 12px; } /* ---------- 日记编辑器（竖屏上下分屏 / 横屏左右分屏） ---------- */ .note-editor { display: flex; flex-direction: column; gap: 8px; } .note-editor-top { display: flex; align-items: center; gap: 8px; } .note-back { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--text-secondary); } #note-title { flex: 1; font-weight: 600; } .note-toolbar { display: flex; align-items: center; gap: 6px; background: var(--card-bg); border: 2px solid var(--border); padding: 4px; } .note-toolbar button { flex: none; min-width: 44px; min-height: 40px; border: 2px solid transparent; background: transparent; color: var(--text); font-size: 15px; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .note-toolbar button:active { background: var(--bg); } .note-toolbar button[disabled] { opacity: .55; pointer-events: none; cursor: progress; } .note-toolbar .note-save { margin-left: auto; padding: 0 18px; background: var(--primary); color: var(--btn-text); font-weight: 600; border-color: var(--border); box-shadow: 2px 2px 0 var(--border); } .note-toolbar .note-save:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--border); background: var(--primary-dark); } .note-toolbar .note-save[disabled], .note-toolbar .note-save.is-loading { opacity: .6; pointer-events: none; } /* 分屏容器：竖屏上下各 50%，高度撑满视口余量 */ .note-panes { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - var(--header-h) - var(--tabbar-h) - 220px); min-height: 340px; } .note-pane { flex: 1 1 0; min-height: 0; overflow: auto; } #note-content { margin: 0; resize: none; height: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; font-size: 16px; /* 防 iOS 聚焦自动放大 */ line-height: 1.55; } #note-preview { background: var(--card-bg); border: 2px solid var(--border); padding: 10px 12px; } /* 横屏且 ≥768px：左右分屏 */ @media (orientation: landscape) and (min-width: 768px) { .note-panes { flex-direction: row; height: calc(100vh - var(--header-h) - 200px); } } /* ---------- Markdown 渲染排版（编辑预览 + 详情共用） ---------- */ .md-body { font-size: 15px; line-height: 1.7; word-wrap: break-word; overflow-wrap: break-word; } .md-body h1, .md-body h2, .md-body h3, .md-body h4 { margin: 14px 0 8px; line-height: 1.35; } .md-body h1 { font-size: 26px; } .md-body h2 { font-size: 23px; } .md-body h3 { font-size: 17px; } .md-body h1:first-child, .md-body h2:first-child, .md-body h3:first-child, .md-body p:first-child { margin-top: 0; } .md-body p { margin: 8px 0; } .md-body ul, .md-body ol { margin: 8px 0; padding-left: 22px; } .md-body blockquote { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--primary); background: var(--bg); color: var(--text-secondary); } .md-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; background: var(--bg); border: 1px solid var(--border-soft); padding: 2px 5px; } .md-body pre { background: var(--bg); border: 2px solid var(--border-soft); padding: 10px 12px; overflow-x: auto; margin: 8px 0; } .md-body pre code { background: none; border: none; padding: 0; } .md-body img { max-width: 100%; border: 2px solid var(--border-soft); } .md-body hr { border: none; border-top: 2px dashed var(--border-soft); margin: 14px 0; } .md-body table { border-collapse: collapse; margin: 8px 0; width: 100%; } .md-body th, .md-body td { border: 2px solid var(--border-soft); padding: 6px 8px; font-size: 14px; } .md-body a { word-break: break-all; } /* ---------- 日记详情 ---------- */ .note-view-title { font-size: 28px; letter-spacing: 1px; margin-bottom: 6px; } .note-view-meta { margin-bottom: 12px; } .note-view-actions { display: flex; gap: 12px; margin-bottom: 12px; } .note-view-actions > .btn { flex: 1; } .note-view-actions form { flex: 1; display: flex; margin: 0; } .note-view-actions form .btn { width: 100%; } /* ---------- Demos 索引（竖屏 1 列 / ≥480px 2 列 / ≥1024px 3 列） ---------- */ .demo-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 480px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .demo-grid { grid-template-columns: repeat(3, 1fr); } } .demo-card { display: flex; flex-direction: column; margin-bottom: 0; } .demo-card-title { font-size: 16px; margin-bottom: 6px; } .demo-card-desc { flex: 1; font-size: 13px; margin-bottom: 12px; } .demo-card-open { align-self: flex-start; } /* ========================================================================== * notes-lock：日记浏览器端加密 UI（种子弹层 / 锁定面板 / 加密复选框） * 像素风语言：零圆角、2-3px 实线、4-6px 硬阴影、VT323 标题；深色随变量自适应。 * ========================================================================== */ /* 种子输入弹层（保存加密流程；遮罩 + 像素卡片） */ .seed-modal-overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(13, 27, 42, .55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; } .seed-modal { width: 100%; max-width: 340px; background: var(--card-bg); border: 3px solid var(--border); box-shadow: 6px 6px 0 var(--border); padding: 20px 18px; } .seed-modal-title { font-size: 24px; letter-spacing: 1px; margin-bottom: 8px; } .seed-modal-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; } .seed-modal-input { margin-bottom: 8px; } .seed-modal-error { font-size: 13px; color: var(--alert-error-text); margin-bottom: 8px; } .seed-modal-actions { display: flex; gap: 12px; margin-top: 6px; } .seed-modal-actions .btn { flex: 1; } /* 加密日记锁定面板（view 页 / edit 页共用，JS 动态插入） */ .note-lock { text-align: center; padding: 26px 16px; } .note-lock-icon { font-size: 34px; line-height: 1.2; } .note-lock-title { font-size: 26px; letter-spacing: 1px; margin: 10px 0 6px; } .note-lock-desc { margin-bottom: 14px; } .note-lock-error { max-width: 320px; margin: 0 auto 12px; } .note-lock-form { display: flex; gap: 8px; max-width: 320px; margin: 0 auto; } .note-lock-form .note-lock-input { flex: 1; } .note-lock-form .btn { flex: none; } .note-lock-btn { font-size: 13px; } /* 编辑页工具栏内"🔒 加密此篇"复选框 */ .note-toolbar { flex-wrap: wrap; } .note-encrypt { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px; font-size: 14px; color: var(--text); cursor: pointer; -webkit-user-select: none; user-select: none; border: 2px solid transparent; } .note-encrypt input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; padding: 0; border: 2px solid var(--border); accent-color: var(--primary); cursor: pointer; } .note-encrypt input[type="checkbox"][disabled] { opacity: .6; cursor: not-allowed; } /* ========================================================================== * home-actions：首页快捷操作按钮组（T06 后 3 按钮，窄屏可换行不挤压） * ========================================================================== */ .quick-actions { flex-wrap: wrap; } .quick-actions .btn { flex: 1 1 30%; min-width: 96px; } /* ========================================================================== * 多用户：邀请码注册 + 账本共享（v2） * 像素语言：实线边框 / 无圆角 / 硬阴影，沿用 --border / --primary / --income / --expense * ========================================================================== */ /* 信息横幅（如"正在查看他人账本"） */ .alert-info { background: var(--primary-soft); color: var(--primary-dark); border: 2px solid var(--primary); border-left-width: 4px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; } .alert-info a { color: var(--primary-dark); font-weight: 600; } /* 账本切换器 */ .scope-pills { display: flex; flex-wrap: wrap; gap: 8px; } .scope-pill { display: inline-block; padding: 6px 12px; border: 2px solid var(--border); background: var(--card-bg); color: var(--text); text-decoration: none; font-size: 14px; box-shadow: 2px 2px 0 var(--border); } .scope-pill.active { background: var(--primary); color: var(--btn-text); border-color: var(--border); } /* 邀请码 */ .invite-created { border-left: 4px solid var(--income); } .invite-code-box { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .invite-code, code.invite-code { font-family: var(--font-pixel), 'Courier New', monospace; font-size: 18px; letter-spacing: 1px; background: var(--bg); border: 2px solid var(--border); padding: 4px 10px; color: var(--text); word-break: break-all; } .invite-item, .share-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .invite-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .invite-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* 状态标签 */ .tag { display: inline-block; padding: 1px 8px; border: 2px solid var(--border); font-size: 12px; line-height: 18px; } .tag-ok { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); } .tag-expired { background: var(--alert-error-bg); color: var(--alert-error-text); border-color: var(--alert-error-border); } .tag-view { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); } .tag-edit { background: var(--alert-success-bg); color: var(--alert-success-text); border-color: var(--alert-success-border); } /* 共享清单 */ .share-main { display: flex; align-items: center; gap: 10px; } .share-name { font-weight: 600; color: var(--text); } /* 我的页：成员与共享入口 */ .entry-links { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } /* 注册页等居中链接 */ .center-link { text-align: center; margin-top: 14px; font-size: 14px; } .center-link a { color: var(--primary-dark); font-weight: 600; } /* 小按钮 */ .btn-sm { padding: 4px 12px; font-size: 13px; min-height: 34px; } /* 危险操作按钮（注销/删除） */ .btn-danger { background: var(--alert-error-bg); color: var(--alert-error-text); border-color: var(--alert-error-border); } .btn-danger:active { background: var(--alert-error-border); } /* 顶栏后台入口 */ .app-admin-link { color: var(--text); font-size: 18px; line-height: 36px; padding: 0 6px; text-decoration: none; opacity: .85; } .app-admin-link:hover { opacity: 1; } /* 我的页：数据管理区 */ .sub-form { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); } .sub-form .form-label { font-size: 13px; } .danger-zone-inner { border-top: 1px dashed var(--alert-error-border); } .danger-zone-inner .form-label code { background: var(--card-bg); padding: 0 4px; border-radius: 3px; } /* 后台表格 */ .table-wrap { overflow-x: auto; margin-top: 8px; } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table th { color: var(--text-secondary); font-weight: 600; } .admin-table tbody tr:hover { background: var(--card-bg); } .tag-me { display: inline-block; padding: 0 6px; font-size: 11px; border: 1px solid var(--primary); border-radius: 4px; color: var(--primary-dark); background: var(--primary-soft); }