/* ========================================================================== 墨链 · MdLink — 样式表 移动优先；浅色为基底，深色通过 切换 ========================================================================== */ :root { --brand: #12b76a; --brand-strong: #0f9d58; --brand-soft: rgba(18, 183, 106, .12); --brand-line: rgba(18, 183, 106, .55); --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f2f4f6; --text: #14171c; --text-soft: #4a5058; --muted: #868e99; --line: #e6e8ec; --line-strong: #d5d9df; --code-bg: #f4f5f7; --quote-bar: #d8dde3; --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color-scheme: light; } [data-theme="dark"] { --brand: #2ed47a; --brand-strong: #45de8d; --brand-soft: rgba(46, 212, 122, .14); --brand-line: rgba(46, 212, 122, .5); --bg: #0d0f12; --surface: #16191e; --surface-2: #1d2127; --text: #eceef1; --text-soft: #b6bcc5; --muted: #7d858f; --line: #262a31; --line-strong: #343941; --code-bg: #1b1f25; --quote-bar: #333941; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-wrap: break-word; } .page { max-width: 720px; margin: 0 auto; padding: 0 16px calc(32px + env(safe-area-inset-bottom)); } .is-hidden { display: none !important; } /* 浏览器默认的 [hidden] 只是 UA 样式，任何带 display 的类都能盖掉它， 所以这里显式兜一道，避免「该藏的元素还在屏幕上」 */ [hidden] { display: none !important; } /* ── 顶栏 ───────────────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 10px; position: sticky; top: 0; z-index: 20; background: var(--bg); /* 老浏览器兜底 */ background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(150%) blur(12px); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; } .brand-mark { flex: none; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .brand-name { font-size: 17px; font-weight: 700; letter-spacing: .2px; } .brand-sub { font-size: 11.5px; color: var(--muted); letter-spacing: .3px; } .icon-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-soft); cursor: pointer; transition: border-color .16s, color .16s; -webkit-tap-highlight-color: transparent; } .icon-btn:hover { border-color: var(--brand-line); color: var(--brand); } /* ── 顶栏右侧：语言 + 主题 ──────────────────────────────────────────── */ .topbar-actions { flex: none; display: flex; align-items: center; gap: 8px; } /* * 语言按钮比主题按钮宽一点：里面放的是文字（EN / 中文），不是图标。 * 两种语言共用同一个 min-width，而不是让它们各自自然撑开 —— * 「中文」比「EN」宽，放任自适应会让顶栏在切换语言时横向跳一下。 */ .lang-btn { width: auto; min-width: 56px; padding: 0 11px; font-size: 13px; font-weight: 600; letter-spacing: .2px; font-family: inherit; white-space: nowrap; } .ico-moon { display: none; } [data-theme="dark"] .ico-sun { display: none; } [data-theme="dark"] .ico-moon { display: block; } /* ── 首页 hero ─────────────────────────────────────────────────────── */ .view { animation: fade .22s ease both; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .hero { padding: 18px 2px 22px; } .hero-title { margin: 0 0 10px; font-size: 30px; line-height: 1.28; font-weight: 800; letter-spacing: -.4px; } .hero-sub { margin: 0; color: var(--text-soft); font-size: 14.5px; max-width: 34em; } .hero-sub strong { color: var(--text); font-weight: 600; } /* ── 卡片 ──────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* 统计文字过长时折到第二行，别把两个元素挤在一起 */ gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); } /* ── 标签页 ────────────────────────────────────────────────────────── */ .tabs { position: relative; display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); } .tab { appearance: none; border: 0; background: none; padding: 9px 12px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 8px 8px 0 0; transition: color .15s; -webkit-tap-highlight-color: transparent; } .tab.is-active { color: var(--brand); } .tab:hover { color: var(--text); } .tabs-line { position: absolute; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; transition: left .2s ease, width .2s ease; } .md-input { display: block; width: 100%; min-height: 268px; padding: 16px; border: 0; outline: none; resize: vertical; background: transparent; color: var(--text); font-family: var(--mono); font-size: 13.5px; line-height: 1.75; tab-size: 2; } .md-input::placeholder { color: var(--muted); } .pane[data-pane="preview"] { max-height: 60vh; overflow: auto; } .file-pick { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text-soft); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .16s, color .16s; } .file-pick:hover { border-color: var(--brand-line); color: var(--brand); } .doc-stats { margin-left: auto; /* 折行时靠右，和文件按钮形成自然的「工具条 + 明细」关系 */ font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; } /* ── 按钮 ──────────────────────────────────────────────────────────── */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .16s, border-color .16s, color .16s, opacity .16s; -webkit-tap-highlight-color: transparent; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } [data-theme="dark"] .btn-primary { color: #06231a; } .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); } .btn-primary:disabled { opacity: .42; cursor: not-allowed; } .btn-primary:disabled:hover { background: var(--brand); border-color: var(--brand); } .btn-ghost { background: var(--surface); border-color: var(--brand-line); color: var(--text); } .btn-ghost:hover { background: var(--brand-soft); } /* ── 首页的两个出口：上传生成链接 / 导出离线网页 ─────────────────── */ .choice-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .choice { appearance: none; display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 15px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; color: inherit; font: inherit; transition: border-color .16s, background .16s, transform .16s; -webkit-tap-highlight-color: transparent; } .choice:hover:not(:disabled) { border-color: var(--brand-line); background: var(--brand-soft); } .choice:active:not(:disabled) { transform: scale(.994); } .choice:disabled { opacity: .45; cursor: not-allowed; } .choice-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); } .choice--primary { border-color: var(--brand-line); } .choice--primary .choice-icon { background: var(--brand); color: #fff; } [data-theme="dark"] .choice--primary .choice-icon { color: #06231a; } .choice-body { flex: 1 1 auto; min-width: 0; } .choice-title { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.1px; } .choice-desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .choice-chevron { flex: none; color: var(--muted); } .choice.is-busy { pointer-events: none; } .choice.is-busy .choice-desc { color: var(--brand); font-weight: 600; } /* 常驻说明：两条路的差别（一个上传、一个不上传）值得一直摆着 */ .choice-note { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); } /* ── 附件行：选了非文本文件时，正文区换成这一行 ───────────────────── */ .attach { display: flex; align-items: center; gap: 12px; padding: 18px 16px; } .attach-icon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); } .attach-body { flex: 1 1 auto; min-width: 0; } .attach-name { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); } .attach-del { appearance: none; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; } .attach-del:hover { background: var(--surface-2); color: var(--text); } .link-btn { appearance: none; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--brand); cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; /* 有些「文字按钮」是 ，别默认带下划线 */ } .link-btn:hover { text-decoration: underline; } .link-btn--muted { color: var(--muted); } /* ── 分享页 ────────────────────────────────────────────────────────── */ .share-card { padding: 22px 18px 18px; text-align: center; } .share-title { margin: 0 0 4px; font-size: 21px; font-weight: 800; } .share-sub { margin: 0 0 18px; font-size: 13.5px; color: var(--text-soft); } .qr-box { display: block; width: min(320px, 80vw); margin: 0 auto; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; cursor: zoom-in; line-height: 0; -webkit-tap-highlight-color: transparent; } .qr-box canvas { display: block; width: 100%; height: auto; } /* 内容超出二维码容量时，别留一个空白方块 */ .qr-box.is-disabled { cursor: default; } .qr-box.is-disabled canvas { display: none; } .qr-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: min(240px, 62vw); color: var(--muted); } .qr-fallback-text { font-size: 13.5px; line-height: 1.6; } .qr-fallback-tip { display: block; margin-top: 6px; font-size: 12.5px; } .qr-hint { margin: 12px auto 0; max-width: 30em; font-size: 12.5px; line-height: 1.6; color: var(--muted); } .qr-hint.is-warn { color: #d9822b; } [data-theme="dark"] .qr-hint.is-warn { color: #f0ab4e; } .link-row { display: flex; gap: 8px; margin-top: 18px; } .link-input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-2); color: var(--text-soft); font-family: var(--mono); font-size: 12.5px; text-overflow: ellipsis; } .link-input:focus { outline: 2px solid var(--brand-line); outline-offset: 1px; } .btn-copy { flex: none; padding: 0 16px; } .share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .share-actions .btn { flex: 1 1 150px; } .share-meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; align-items: center; } .share-doc { font-size: 13px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-meta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .notice { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.6; color: var(--text-soft); text-align: left; } /* ── 最近生成 ──────────────────────────────────────────────────────── */ .section { margin-top: 30px; } .section-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); } .recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .recent-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); } .recent-open { flex: 1 1 auto; min-width: 0; text-align: left; appearance: none; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .recent-open:hover .recent-title { color: var(--brand); } .recent-title { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-time { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; } .recent-del { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; } .recent-del:hover { background: var(--surface-2); color: var(--text); } /* ── 阅读页 ────────────────────────────────────────────────────────── */ .read-card { padding: 22px 18px 18px; } .read-head { margin-bottom: 20px; } .read-title { margin: 0 0 8px; font-size: 24px; line-height: 1.35; font-weight: 800; letter-spacing: -.3px; } .read-meta { margin: 0; font-size: 12.5px; color: var(--muted); } .read-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); } .read-foot-text { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } .read-foot-actions { display: flex; flex-wrap: wrap; gap: 10px; } .read-foot-actions .btn { flex: 1 1 140px; } /* ── 阅读页的非文本文件：一张下载卡 ───────────────────────────────── */ .file-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px 6px; text-align: center; } .file-card-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); } .file-card-name { margin: 0; font-size: 15.5px; font-weight: 600; word-break: break-all; } .file-card-meta { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); } /* ── Markdown 正文排版 ─────────────────────────────────────────────── */ .md-body { padding: 18px 16px 22px; font-size: 15.5px; line-height: 1.78; color: var(--text); } /* 阅读页的卡片自己已有内边距，正文不该再加一层，否则比标题多缩进一截 */ .read-card .md-body { padding: 0; } .md-body > *:first-child { margin-top: 0; } .md-body > *:last-child { margin-bottom: 0; } .md-body h1, .md-body h2, .md-body h3, .md-body h4, .md-body h5, .md-body h6 { margin: 1.7em 0 .6em; line-height: 1.35; font-weight: 700; letter-spacing: -.2px; } .md-body h1 { font-size: 1.6em; } .md-body h2 { font-size: 1.32em; padding-bottom: .3em; border-bottom: 1px solid var(--line); } .md-body h3 { font-size: 1.15em; } .md-body h4 { font-size: 1.02em; } .md-body h5, .md-body h6 { font-size: .95em; color: var(--text-soft); } .md-body p { margin: 0 0 1em; } .md-body a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--brand-line); } .md-body a:hover { border-bottom-color: var(--brand); } .md-body strong { font-weight: 700; } .md-body em { font-style: italic; } .md-body del { color: var(--muted); } .md-body ul, .md-body ol { margin: 0 0 1em; padding-left: 1.5em; } .md-body li { margin: .35em 0; } .md-body li > ul, .md-body li > ol { margin: .35em 0; } .md-body blockquote { margin: 0 0 1em; padding: .1em 0 .1em 1em; border-left: 3px solid var(--quote-bar); color: var(--text-soft); } .md-body blockquote p:last-child { margin-bottom: 0; } .md-body code { font-family: var(--mono); font-size: .88em; padding: .15em .42em; border-radius: 6px; background: var(--code-bg); border: 1px solid var(--line); } .md-body pre { margin: 0 0 1em; padding: 14px 15px; border-radius: var(--radius-sm); background: var(--code-bg); border: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; } .md-body pre code { padding: 0; border: 0; background: none; font-size: 13px; line-height: 1.7; } .md-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); } .md-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; margin: 1em 0; } .md-body .table-scroll { margin: 0 0 1em; overflow-x: auto; -webkit-overflow-scrolling: touch; } .md-body table { width: 100%; border-collapse: collapse; font-size: 14px; } .md-body th, .md-body td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; } .md-body th { background: var(--surface-2); font-weight: 700; } .md-body input[type="checkbox"] { margin-right: .5em; } /* ── 二维码全屏 ────────────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; z-index: 60; background: rgba(10, 12, 15, .9); display: grid; place-items: center; padding: 20px; animation: fade .18s ease both; } .overlay-inner { background: #fff; border-radius: 18px; padding: 12px; width: min(96vw, 520px); text-align: center; line-height: 0; } .overlay-inner canvas { display: block; width: 100%; height: auto; border-radius: 8px; } .overlay-tip { margin: 14px 0 14px; font-size: 13px; color: #5b6270; line-height: 1.5; } /* ── Toast ─────────────────────────────────────────────────────────── */ .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; max-width: 88vw; padding: 11px 18px; border-radius: 999px; background: rgba(20, 23, 28, .94); color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); animation: fade .16s ease both; } [data-theme="dark"] .toast { background: rgba(236, 238, 241, .95); color: #14171c; } /* ── 页脚 ──────────────────────────────────────────────────────────── */ .site-foot { margin-top: 36px; text-align: center; font-size: 12px; color: var(--muted); } /* ── 拖拽态 ────────────────────────────────────────────────────────── */ .card.is-dragover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* ── 更宽的屏幕 ────────────────────────────────────────────────────── */ @media (min-width: 640px) { .page { padding-left: 24px; padding-right: 24px; } .hero { padding: 28px 2px 26px; } .hero-title { font-size: 36px; } .hero-sub { font-size: 15.5px; } .md-body { padding: 22px 22px 26px; } .read-card { padding: 28px 26px 24px; } .read-title { font-size: 28px; } .share-card { padding: 28px 24px 22px; } .md-input { min-height: 320px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }