/* ============ 设计令牌（Windows 11 云母 / 亚克力风格）============ */ :root { --brand: #005fb8; --brand-hover: #0078d4; --brand-active: #0067c0; --bg-page: #f3f3f3; --text-primary: #1a1a1a; --text-secondary: #5f5f5f; --text-placeholder: #9a9a9a; --border: rgba(0,0,0,.08); --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --mica: rgba(243,243,243,.72); --mica-border: rgba(255,255,255,.55); --shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); --shadow-hover: 0 4px 12px rgba(0,0,0,.12), 0 12px 32px rgba(0,0,0,.10); --font: "Segoe UI Variable", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; /* ---- 动效令牌（借鉴 TDesign Motion 规范）---- 统一缓动与时长，让全站动画节奏一致、观感协调。 TDesign 标准缓动：cubic-bezier(.38, 0, .24, 1)（快出慢入，符合 Material/TDesign 的「强调」曲线） */ --ease-standard: cubic-bezier(.38, 0, .24, 1); /* 标准：用于进出场、位移、缩放 */ --ease-out: cubic-bezier(0, 0, .15, 1); /* 减速：用于淡入、展开 */ --ease-in: cubic-bezier(.38, 0, 1, 1); /* 加速：用于退出 */ --dur-fast: .12s; /* 微交互：hover、按下 */ --dur-base: .2s; /* 常规：菜单、按钮、面板进出场 */ --dur-slow: .28s; /* 大型：模态框、页面级切换 */ /* 面板底色（云母卡片统一背景，原散落在各处重复声明） */ --panel: rgba(255, 255, 255, .86); --bg-card: rgba(255, 255, 255, .72); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--text-primary); background: var(--bg-page); min-height: 100vh; overflow-x: hidden; overflow-y: hidden; } /* 独立子应用页（files.html / posts.html，作为 iframe 内容）：允许纵向滚动 */ body.sub-app { overflow-y: auto; } /* 主框架 shell 页：固定视口，不滚动 */ body.shell-body { overflow: hidden; height: 100vh; } /* ============ 桌面背景（Win11 风格柔和渐变）=========== */ .aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .aurora::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #cfe4ff 0%, #e8f1fb 40%, #f5f0fb 70%, #fdeef2 100%); } .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; animation: drift 26s ease-in-out infinite; } .b1 { width: 520px; height: 520px; background: #9ec5ff; top: -160px; left: -100px; } .b2 { width: 560px; height: 560px; background: #c9e4ff; bottom: -200px; right: -120px; animation-delay: -8s; } .b3 { width: 420px; height: 420px; background: #e2d4ff; top: 38%; left: 58%; animation-delay: -16s; } @keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(46px,-36px) scale(1.1); } 66% { transform: translate(-34px,28px) scale(.94); } } /* ============ 云母玻璃容器 ============ */ .glass { background: var(--mica); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); border: 1px solid var(--mica-border); box-shadow: var(--shadow); } /* ============ 顶栏 ============ */ .topbar { position: sticky; top: 12px; z-index: 10; margin: 12px 16px 0; padding: 12px 18px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 10px; } .logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: linear-gradient(135deg, #0067c0, #4cc2ff); color: #fff; } .logo .ic { width: 20px; height: 20px; } .brand h1 { font-size: 17px; margin: 0; font-weight: 600; letter-spacing: .2px; } .brand .sub { font-size: 12px; color: var(--text-secondary); } /* ============ 按钮 ============ */ .btn { font-family: var(--font); font-size: 14px; font-weight: 400; border: none; border-radius: var(--radius-md); cursor: pointer; padding: 8px 16px; line-height: 1; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* 危险操作按钮（如退出登录）：红色醒目 */ .btn-danger { background: var(--danger, #e5484d); color: #fff; } .btn-danger:hover { background: var(--danger-hover, #d13438); } .btn-danger:active { background: var(--danger-active, #b52a2e); } /* ============ 上传窗口（TDesign 设计语言 v2 — 精致版） ============ */ .dialog-wide { max-width: 520px; width: 100%; } /* 对话框整体增强 */ .dialog-wide.dialog { backdrop-filter: blur(32px) saturate(160%); -webkit-backdrop-filter: blur(32px) saturate(160%); box-shadow: 0 25px 60px -12px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 80px -20px rgba(99,102,241,.15); } /* 标题栏 */ .upload-dialog .up-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; } .upload-dialog .up-head .ic { width: 23px; height: 23px; color: #6366f1; } .upload-dialog .up-head-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: #111827; } .upload-dialog .up-head-sub { margin-left: auto; font-size: 12px; color: #94a3b8; background: #f1f5f9; padding: 3px 10px; border-radius: 999px; } /* ====== 拖放区 ====== */ .upload-dialog .dropzone { border: 2px dashed #cbd5e1; border-radius: 14px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); cursor: pointer; transition: all .28s cubic-bezier(.4,0,.2,1); margin-bottom: 18px; position: relative; overflow: hidden; } .upload-dialog .dropzone::before { content: ""; position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(circle at 50% 0%, rgba(99,102,241,.06) 0%, transparent 70%); opacity: 0; transition: opacity .28s ease; } .upload-dialog .dropzone:hover { border-color: #6366f1; background: linear-gradient(135deg, #eef2ff 0%, #ede9fe 100%); } .upload-dialog .dropzone:hover::before { opacity: 1; } .upload-dialog .dropzone:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.15); } .upload-dialog .dropzone.drag { border-color: #6366f1; background: linear-gradient(135deg, #eef2ff 0%, #ddd6fe 100%); box-shadow: 0 0 0 3px rgba(99,102,241,.2), inset 0 0 20px rgba(99,102,241,.08); } .upload-dialog .dropzone-inner { padding: 38px 20px; text-align: center; pointer-events: none; position: relative; z-index: 1; } .upload-dialog .drop-ic-wrap { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #eef2ff, #c7d2fe); box-shadow: 0 4px 14px -3px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease; } .upload-dialog .dropzone:hover .drop-ic-wrap { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 22px -4px rgba(99,102,241,.45); } .upload-dialog .drop-ic { width: 30px; height: 30px; color: #4f46e5; } .upload-dialog .drop-title { font-size: 15px; color: #1e293b; font-weight: 600; letter-spacing: -.005em; } .upload-dialog .drop-title .link { color: #4f46e5; font-weight: 700; text-decoration: none; position: relative; z-index: 1; } .upload-dialog .drop-title .link::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; border-radius: 1px; background: #4f46e5; transform: scaleX(0); transition: transform .25s cubic-bezier(.4,0,.2,1); } .upload-dialog .dropzone:hover .drop-title .link::after { transform: scaleX(1); } .upload-dialog .drop-sub { font-size: 12px; color: #94a3b8; margin-top: 7px; letter-spacing: .02em; } /* ====== 文件列表 ====== */ .upload-dialog .up-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; /* 自定义滚动条 */ scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .upload-dialog .up-list::-webkit-scrollbar { width: 5px; } .upload-dialog .up-list::-webkit-scrollbar-track { background: transparent; } .upload-dialog .up-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } .upload-dialog .up-empty { color: #94a3b8; font-size: 13px; padding: 26px 16px; text-align: center; border: 1.5px dashed #e2e8f0; border-radius: 12px; background: #fafbfc; } /* 单个文件卡片 */ .upload-dialog .up-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; transition: all .22s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; } .upload-dialog .up-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; border-radius: 0 3px 3px 0; transition: background .22s ease; } .upload-dialog .up-item:hover { border-color: #c7d2fe; box-shadow: 0 4px 16px -4px rgba(99,102,241,.12); transform: translateX(2px); } .upload-dialog .up-item:hover::before { background: #6366f1; } /* 文件类型图标（彩色圆角方块） */ .upload-dialog .up-icon { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; position: relative; background: linear-gradient(145deg, #eef2ff, #e0e7ff); box-shadow: 0 2px 8px -2px rgba(99,102,241,.25), inset 0 1px 0 rgba(255,255,255,.7); } .upload-dialog .up-icon .ic { width: 22px; height: 22px; color: #4338ca; } /* 图片类型 → 蓝绿渐变 */ .upload-dialog .up-icon[data-type="image"] { background: linear-gradient(145deg, #ecfdf5, #d1fae5); box-shadow: 0 2px 8px -2px rgba(16,185,129,.25), inset 0 1px 0 rgba(255,255,255,.7); } .upload-dialog .up-icon[data-type="image"] .ic { color: #059669; } /* 视频类型 → 紫粉渐变 */ .upload-dialog .up-icon[data-type="video"] { background: linear-gradient(145deg, #fdf4ff, #fae8ff); box-shadow: 0 2px 8px -2px rgba(217,70,239,.25), inset 0 1px 0 rgba(255,255,255,.7); } .upload-dialog .up-icon[data-type="video"] .ic { color: #a21caf; } /* 音频类型 → 橙黄渐变 */ .upload-dialog .up-icon[data-type="audio"] { background: linear-gradient(145deg, #fffbeb, #fef3c7); box-shadow: 0 2px 8px -2px rgba(245,158,11,.25), inset 0 1px 0 rgba(255,255,255,.7); } .upload-dialog .up-icon[data-type="audio"] .ic { color: #d97706; } /* 文件信息区 */ .upload-dialog .up-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .upload-dialog .up-name { font-size: 14px; color: #1e293b; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; } .upload-dialog .up-sub { display: flex; align-items: center; gap: 8px; } .upload-dialog .up-size { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; font-weight: 500; } .upload-dialog .up-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; white-space: nowrap; letter-spacing: .01em; } .upload-dialog .up-status.enc { background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4338ca; } /* 删除按钮 */ .upload-dialog .up-remove { background: transparent; border: none; color: #cbd5e1; cursor: pointer; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; transition: all .2s ease; } .upload-dialog .up-remove:hover { background: #fef2f2; color: #dc2626; } .upload-dialog .up-remove .ic { width: 16px; height: 16px; } /* ====== 加密区 ====== */ .upload-dialog .up-enc { border: 1.5px solid #e2e8f0; border-radius: 14px; background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%); overflow: hidden; transition: all .28s ease; } .upload-dialog .up-enc.open { border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,.07); } .upload-dialog .up-enc-bar { display: flex; align-items: center; gap: 10px; padding: 13px 15px; cursor: pointer; user-select: none; transition: background .2s ease; } .upload-dialog .up-enc-bar:hover { background: rgba(99,102,241,.03); } .upload-dialog .up-enc-bar .ic { width: 18px; height: 18px; color: #64748b; } .upload-dialog .up-enc-bar .t { font-size: 14px; color: #334155; font-weight: 600; flex: 1; } /* Toggle 开关 */ .upload-dialog .up-enc-switch { width: 42px; height: 24px; border-radius: 999px; background: #cbd5e1; position: relative; flex-shrink: 0; transition: background .3s cubic-bezier(.4,0,.2,1); box-shadow: inset 0 1px 3px rgba(0,0,0,.1); } .upload-dialog .up-enc-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .upload-dialog .up-enc.open .up-enc-switch { background: linear-gradient(90deg, #6366f1, #818cf8); box-shadow: none; } .upload-dialog .up-enc.open .up-enc-switch::after { transform: translateX(18px); } /* 加密字段容器 */ .upload-dialog .up-enc-fields { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, padding .25s ease; padding: 0 15px; display: flex; flex-direction: column; gap: 10px; } .upload-dialog .up-enc.open .up-enc-fields { max-height: 300px; opacity: 1; padding: 0 15px 15px; } /* 表单字段 */ .upload-dialog .up-field label { display: block; font-size: 12px; color: #64748b; font-weight: 600; margin-bottom: 5px; letter-spacing: .01em; } .upload-dialog .up-input { width: 100%; box-sizing: border-box; padding: 10px 13px; font-size: 14px; color: #1e293b; border: 1.5px solid #e2e8f0; border-radius: 10px; background: #fff; transition: all .22s ease; } .upload-dialog .up-input::placeholder { color: #94a3b8; } .upload-dialog .up-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); background: #fff; } .upload-dialog .up-input.bad { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); } .upload-dialog .up-enc-hint { font-size: 12px; min-height: 18px; margin-top: 3px; font-weight: 500; transition: color .2s ease; } .upload-dialog .up-enc-hint.ok { color: #059669; } .upload-dialog .up-enc-hint.err { color: #dc2626; } .upload-dialog .up-enc-note { font-size: 12px; color: #64748b; line-height: 1.55; background: linear-gradient(135deg, #eef2ff, #f5f3ff); border-radius: 9px; padding: 10px 12px; border: 1px solid rgba(99,102,241,.08); } /* ====== 底部操作栏 ====== */ .upload-dialog .up-foot { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0; } .upload-dialog .up-foot-info { font-size: 12px; color: #94a3b8; display: flex; align-items: center; gap: 6px; font-weight: 500; } .upload-dialog .up-foot-info b { color: #475569; font-weight: 700; font-variant-numeric: tabular-nums; } .upload-dialog .up-foot-actions { margin-left: auto; display: flex; gap: 9px; } .upload-dialog .btn.active { background: #4f46e5; color: #fff; border-color: #4f46e5; } /* 按下时轻微回弹，与 hover 形成层次（TDesign 的「按压反馈」） */ .btn:active { transform: scale(.98); } .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .btn .ic { width: 16px; height: 16px; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-hover); } .btn-primary:active { background: var(--brand-active); } .btn-ghost { background: rgba(255,255,255,.55); color: var(--text-primary); border: 1px solid var(--border); } .btn-ghost:hover { background: rgba(255,255,255,.85); } .icon-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; } .icon-btn .ic { width: 18px; height: 18px; } .icon-btn:hover { background: rgba(0,0,0,.05); color: var(--text-primary); } .icon-btn.spin .ic { animation: icon-spin .6s linear infinite; } @keyframes icon-spin { to { transform: rotate(360deg); } } /* ============ 工具栏 ============ */ .toolbar { position: sticky; top: 76px; z-index: 9; margin: 12px 16px 0; padding: 10px 14px; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .usage { margin-left: auto; font-size: 12px; color: var(--text-secondary); display: flex; gap: 10px; align-items: center; } .usage .pill { background: rgba(0,95,184,.1); color: var(--brand); padding: 4px 12px; border-radius: 999px; } /* ============ 空状态 ============ */ .empty { text-align: center; color: var(--text-placeholder); padding: 60px 0; } /* 博客列表加载态：spinner 与文字垂直居中 */ .posts-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 80px 0; color: var(--text-secondary); font-size: 14px; } /* ============ 通用弹窗（博客详情 / 对话框） ============ */ /* 进出场统一使用标准缓动：遮罩淡入（--dur-base），面板「上浮 + 放大」（--dur-slow） */ .modal-mask, .dialog-mask { position: fixed; inset: 0; background: rgba(0,0,0,.32); backdrop-filter: blur(2px); z-index: 20; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); } .modal-mask.show, .dialog-mask.show { opacity: 1; pointer-events: auto; } .modal { position: fixed; z-index: 22; top: 50%; left: 50%; transform: translate(-50%,-46%) scale(.96); opacity: 0; pointer-events: none; width: min(760px, 94vw); max-height: 88vh; overflow: hidden; border-radius: var(--radius-lg); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); display: flex; flex-direction: column; } .modal.show { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); } .modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); } .modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .modal-head-actions { display: flex; gap: 4px; } .modal-body { padding: 16px 18px; overflow-y: auto; min-height: 120px; } /* 加载动画（弹窗与预览页共用） */ .modal-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 0; color: var(--text-secondary); font-size: 13px; } .spinner { display: inline-block; width: 34px; height: 34px; border: 3px solid rgba(0,95,184,.18); border-top-color: var(--brand); border-radius: 50%; /* 旋转用线性（linear）最自然：匀速无停顿，避免缓动造成的「卡顿」错觉 */ animation: spin .68s linear infinite; vertical-align: -0.5em; margin-right: 8px; } /* 模态加载卡片：预览页全屏遮罩中央的加载提示 */ .modal-loading-card { position: fixed; z-index: 24; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 40px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.18); color: var(--text-secondary); font-size: 14px; } .modal-loading-card .spinner { margin-right: 0; width: 40px; height: 40px; } /* ============ 自定义对话框 ============ */ .dialog { position: fixed; z-index: 22; top: 50%; left: 50%; transform: translate(-50%,-46%) scale(.96); opacity: 0; pointer-events: none; width: min(420px, 92vw); border-radius: var(--radius-lg); transition: opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard); overflow: hidden; } .dialog.show { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); } .dialog-head { padding: 16px 20px 8px; } .dialog-head h2 { margin: 0; font-size: 16px; font-weight: 600; } .dialog-body { padding: 8px 20px 16px; } .dialog-body .input { width: 100%; } .dialog-body .dlg-text { margin: 0; font-size: 14px; color: var(--text-primary); line-height: 1.6; word-break: break-all; } .dialog-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid var(--border); background: rgba(0,0,0,.02); } /* 输入框 */ .input { font-family: var(--font); font-size: 14px; color: var(--text-primary); background: rgba(255,255,255,.8); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 12px; outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,95,184,.15); } /* ============ 操作加载遮罩（重命名/删除，带后台加载按钮）============ */ .op-loading-mask { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.28); backdrop-filter: blur(2px); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); } .op-loading-mask.show { opacity: 1; pointer-events: auto; } .op-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 40px; border-radius: var(--radius-lg); } .op-loading-text { font-size: 14px; color: var(--text-primary); } .op-bg-btn { font-size: 13px; padding: 6px 14px; } /* ============ 传输列表（整页视图，TDesign + MUI + shadcn 风格）============ */ .transfer-page { position: relative; z-index: 1; max-width: 760px; margin: 18px auto 60px; padding: 0 16px; } .transfer-page[hidden] { display: none; } .transfer-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .transfer-page-head h2 { margin: 0; font-size: 18px; font-weight: 600; } .transfer-page-head .btn .ic { width: 15px; height: 15px; } .transfer-list { display: grid; gap: 12px; } /* 单行传输卡片 */ .transfer-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--mica); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); border: 1px solid var(--mica-border, var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06)); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .transfer-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-1px); } .transfer-item.done { border-color: rgba(16,124,16,.25); } .transfer-item.error { border-color: rgba(196,43,28,.28); } /* 类型图标（圆形彩色底） */ .transfer-icon { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: rgba(99,102,241,.1); transition: background var(--dur-fast) var(--ease-out); } .transfer-icon .ic { width: 22px; height: 22px; color: var(--brand); } .transfer-item.done .transfer-icon { background: rgba(16,124,16,.12); } .transfer-item.done .transfer-icon .ic { color: #107c10; } .transfer-item.error .transfer-icon { background: rgba(196,43,28,.12); } .transfer-item.error .transfer-icon .ic { color: #c42b1c; } /* 主体区 */ .transfer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .transfer-row { display: flex; align-items: center; gap: 10px; } .transfer-name { flex: 1; min-width: 0; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 方向徽标（上传/下载） */ .transfer-dir { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 11px; color: var(--text-secondary); background: rgba(0,0,0,.04); padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .transfer-dir .ic { width: 13px; height: 13px; } .transfer-item.done .transfer-dir { color: #107c10; background: rgba(16,124,16,.08); } .transfer-item.error .transfer-dir { color: #c42b1c; background: rgba(196,43,28,.08); } /* 状态标签 */ .transfer-status { font-size: 11px; padding: 2px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; font-weight: 500; } .transfer-status.up { background: rgba(99,102,241,.12); color: var(--brand); } .transfer-status.done { background: rgba(16,124,16,.12); color: #107c10; } .transfer-status.error { background: rgba(196,43,28,.12); color: #c42b1c; } /* 进度条（MUI 风格：加高 + 光晕 + 平滑） */ .transfer-progress { display: flex; align-items: center; gap: 10px; } .transfer-bar { flex: 1; height: 7px; background: rgba(0,0,0,.07); border-radius: 999px; overflow: hidden; position: relative; } .transfer-bar i { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #6366f1); box-shadow: 0 0 6px rgba(99,102,241,.5); transition: width .25s cubic-bezier(.4,0,.2,1); } .transfer-bar.is-done i { background: linear-gradient(90deg, #16a34a, #22c55e); box-shadow: 0 0 6px rgba(34,197,94,.5); } .transfer-bar.is-error i { background: linear-gradient(90deg, #dc2626, #ef4444); box-shadow: 0 0 6px rgba(239,68,68,.5); } .transfer-pct { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; } /* 副信息行 */ .transfer-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-placeholder); font-variant-numeric: tabular-nums; flex-wrap: wrap; } .transfer-meta-size { color: var(--text-secondary); } .transfer-meta-speed { color: var(--brand); } .transfer-meta-done { color: #107c10; } .transfer-meta-err { color: #c42b1c; } /* 加密任务图标：保持锁文件图标，使用警示色 */ .transfer-item.enc .transfer-icon { background: rgba(196,43,28,.12); } .transfer-item.enc .transfer-icon .ic { color: #c42b1c; } /* 标签栏（全部 / 上传 / 下载）+ 清空 */ .transfer-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; } .tt-tab { border: 1px solid var(--mica-border, var(--border)); background: var(--mica, rgba(255,255,255,.6)); color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1); font-family: inherit; } .tt-tab:hover { border-color: rgba(99,102,241,.4); color: var(--brand); } .tt-tab.active { background: linear-gradient(135deg, #6366f1, #818cf8); color: #fff; border-color: transparent; box-shadow: 0 3px 10px -2px rgba(99,102,241,.4); } .transfer-clear { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 1px solid var(--mica-border, var(--border)); background: var(--mica, rgba(255,255,255,.6)); color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; font-family: inherit; transition: all .2s ease; } .transfer-clear:hover { border-color: rgba(196,43,28,.4); color: #c42b1c; background: rgba(196,43,28,.06); } .transfer-clear .ic { width: 15px; height: 15px; } /* 删除单条按钮 */ .transfer-del { background: transparent; border: none; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-placeholder); transition: all .2s ease; margin-left: 4px; } .transfer-del:hover { background: rgba(196,43,28,.1); color: #c42b1c; } .transfer-del .ic { width: 15px; height: 15px; } /* 空态 */ .transfer-empty { text-align: center; padding: 64px 20px; color: var(--text-placeholder); } .transfer-empty-ic { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(99,102,241,.08); } .transfer-empty-ic .ic { width: 34px; height: 34px; color: var(--brand); opacity: .7; } .transfer-empty-title { margin: 0 0 6px; font-size: 15px; color: var(--text-secondary); font-weight: 500; } .transfer-empty-sub { margin: 0; font-size: 13px; } /* ============ 顶栏分类切换 ============ */ .brand { flex-shrink: 0; } .nav-tabs { display: flex; gap: 2px; background: rgba(0,0,0,.04); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; margin: 0 auto; } .nav-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font); font-size: 14px; color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .nav-tab .ic { width: 16px; height: 16px; } .nav-tab:hover { background: rgba(255,255,255,.7); color: var(--text-primary); } .nav-tab.active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 500; } .topbar-actions { flex-shrink: 0; } .topbar-actions[hidden] { display: none; } @media (max-width: 860px) { .topbar { flex-wrap: wrap; gap: 10px; } .nav-tabs { order: 3; width: 100%; margin: 0; } .nav-tab { flex: 1; justify-content: center; } } /* ============ 博客列表页 ============ */ .posts-page { position: relative; z-index: 1; max-width: 1000px; margin: 18px auto 60px; padding: 0 16px; overflow-y: auto; max-height: calc(100vh - 120px); } .posts-page[hidden] { display: none; } /* 筛选区 */ .posts-filter { padding: 14px 16px; border-radius: var(--radius-lg); margin-bottom: 14px; display: grid; gap: 12px; } .pf-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pf-search { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; } .pf-search .ic { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-placeholder); pointer-events: none; } .pf-search .input { width: 100%; padding-left: 36px; padding-right: 36px; } .pf-clear { position: absolute; right: 8px; background: transparent; border: none; cursor: pointer; color: var(--text-placeholder); display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-sm); } .pf-clear .ic { position: static; width: 14px; height: 14px; } .pf-clear:hover { background: rgba(0,0,0,.06); color: var(--text-primary); } .pf-select { flex-shrink: 0; width: auto; min-width: 150px; } .pf-cats { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; } .pf-tags { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; } .pf-no-tags { font-size: 12px; color: var(--text-placeholder); } .tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(255,255,255,.6); border: 1px solid var(--border); border-radius: 999px; font-family: var(--font); font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .tag-chip:active { transform: scale(.96); } .tag-chip:hover { background: rgba(255,255,255,.9); border-color: var(--brand); } .tag-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } .tag-count { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; } .pf-time { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .pf-time label { font-size: 12px; color: var(--text-secondary); } .pf-date { width: auto; padding: 6px 10px; font-size: 13px; } .pf-dash { color: var(--text-placeholder); } .pf-reset { padding: 6px 12px; font-size: 13px; } .posts-meta { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .posts-view-toggle { display: flex; gap: 2px; background: rgba(0,0,0,.04); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; } .pvt-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-family: var(--font); font-size: 13px; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .pvt-btn .ic { width: 15px; height: 15px; } .pvt-btn:hover { background: rgba(255,255,255,.7); color: var(--text-primary); } .pvt-btn.active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); } /* 两个独立页面容器 */ .app-page { position: relative; z-index: 1; } .app-page[hidden] { display: none; } /* 大图模式：卡片固定宽度档位，按屏幕自动调整列数（居中，避免大留白） */ .posts-grid.posts-list-mode { --post-col: 100%; display: grid; grid-template-columns: repeat(auto-fill, var(--post-col)); gap: 18px; justify-content: center; align-items: start; max-width: 100%; } /* 大图（封面）模式：智能分列——卡片加宽（固定展示 3 张预览图），按视口自动计算列数 */ .posts-grid.view-cover { display: grid; gap: 20px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } @media (max-width: 1200px) { .posts-grid.view-cover { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } @media (max-width: 820px) { .posts-grid.view-cover { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } } @media (max-width: 560px) { .posts-grid.view-cover { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 380px) { .posts-grid.view-cover { grid-template-columns: 1fr; } } /* 卡片（大图） */ .cover-card { background: var(--mica); backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%); border: 1px solid var(--mica-border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); display: flex; flex-direction: column; height: auto; } .cover-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } /* 媒体区：固定比例（卡片尺寸固定），图片/视频缩放填满，完整展示 */ .pc-cover { position: relative; width: 100%; aspect-ratio: 16 / 9; background: rgba(0,0,0,.04); display: block; overflow: hidden; } /* 封面固定展示 3 格（不足补灰），一行完整展示 */ .sm-grid { position: relative; display: grid; gap: 2px; grid-template-columns: repeat(3, 1fr); aspect-ratio: 16 / 9; } .sm-cell { position: relative; overflow: hidden; background: rgba(0,0,0,.06); display: grid; place-items: center; } /* 灰色占位格：无预览图时补足 3 格，保持封面宽度一致 */ .sm-cell-empty { background: rgba(0,0,0,.05); } /* 预览图：自适应完整显示（不裁剪），水平+竖直居中 */ .sm-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: transform .3s ease; } .sm-cell:hover .sm-img { transform: scale(1.04); } .sm-video-cell { cursor: pointer; } .sm-video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } .sm-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .sm-play .ic { width: 34px; height: 34px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); background: rgba(0,0,0,.35); border-radius: 50%; padding: 7px; box-sizing: content-box; transition: transform .15s, background .15s; } .sm-video-cell:hover .sm-play .ic { transform: scale(1.12); background: var(--brand); } .pc-cover-img { width: 100%; height: 100%; object-fit: contain; display: block; } .pc-cover-empty { display: grid; place-items: center; color: var(--text-placeholder); min-height: 160px; } .pc-cover-empty .ic { width: 40px; height: 40px; } .pc-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; } .pc-row { display: flex; align-items: baseline; gap: 12px; } .pc-title { font-size: clamp(15px, 2.2vw, 18px); font-weight: 600; line-height: 1.4; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-tags { display: flex; gap: 6px; flex-wrap: wrap; } .pc-tag { font-size: 11px; background: rgba(0,95,184,.12); color: var(--brand); padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .pc-tag.muted { background: rgba(0,0,0,.06); color: var(--text-placeholder); } .pc-time { font-size: 11px; color: var(--text-placeholder); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* 列表模式操作区与删除按钮 */ .pc-actions { display: flex; justify-content: flex-end; margin-top: 2px; } .pc-del { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(255,255,255,.6); color: var(--text-secondary); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); flex-shrink: 0; } .pc-del .ic { width: 16px; height: 16px; } .pc-del:hover { color: #e5484d; border-color: rgba(229,72,77,.4); background: rgba(229,72,77,.08); } .pc-del:disabled { opacity: .5; cursor: default; } /* 大图模式卡片也提供删除按钮（右上角悬浮） */ .cover-card:not(.list-card) .pc-actions { position: absolute; top: 8px; right: 8px; z-index: 2; } .cover-card:not(.list-card) .pc-del { background: rgba(0,0,0,.45); border-color: transparent; color: #fff; backdrop-filter: blur(4px); } .cover-card:not(.list-card) .pc-del:hover { background: rgba(229,72,77,.9); color: #fff; } /* 宽屏（桌面）：一行多帖，卡片固定宽度档位、按屏幕自动列数 */ @media (min-width: 900px) { .posts-grid.posts-list-mode { --post-col: 100%; gap: 20px; } } @media (min-width: 1280px) { .posts-grid.posts-list-mode { --post-col: 100%; gap: 22px; } } /* 竖屏 / 移动：单列更紧凑，标题两行 */ @media (max-width: 640px) { .posts-grid.posts-list-mode { gap: 12px; grid-template-columns: 1fr; } .pc-body { padding: 12px 14px 14px; gap: 7px; } .pc-title { font-size: 15px; white-space: normal; display: -webkit-box; display: box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* 列表模式卡片在移动端：缩略图 + 信息 + 删除，紧凑一行 */ .list-card { gap: 10px; padding: 8px 10px; } .pc-thumb { width: 72px; height: 48px; } .pc-actions { margin-top: 0; } .pc-del { width: 28px; height: 28px; } /* 大图模式卡片：删除按钮内移到封面内 */ .cover-card:not(.list-card) .pc-actions { top: 6px; right: 6px; } } /* 列表模式卡片：一行一个，只有标题（无预览图） */ .list-card { background: var(--mica); border: 1px solid var(--mica-border); border-radius: var(--radius-md); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard); display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 11px 14px; min-height: 100px; } .list-card:hover { background: rgba(0,0,0,.035); box-shadow: var(--shadow-hover); } /* 列表模式：正文区横向排布，标题占满，删除按钮在右 */ .list-card .pc-body { padding: 0; gap: 10px; flex-direction: row; align-items: center; flex: 1; min-width: 0; } .list-card .pc-row { flex: 1; min-width: 0; } .list-card .pc-tags { display: none; } /* 列表模式只显示标题，不显示标签 */ .list-card .pc-actions { margin-top: 0; flex-shrink: 0; } .list-card .pc-del { background: rgba(255,255,255,.6); } .list-card .pc-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 在列表模式下隐藏封面预览图 */ .list-card .pc-cover { display: none; } /* 封面/缩略播放标记 */ .sm-cover-play { position: absolute; inset: 0; display: grid; place-items: center; gap: 6px; color: #fff; background: rgba(0,0,0,.28); cursor: pointer; transition: background .15s; } .sm-cover-play:hover { background: rgba(0,0,0,.42); } .sm-cover-play .ic { width: 38px; height: 38px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); } .sm-cover-play.big .ic { width: 52px; height: 52px; } .sm-cover-play span { font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .pc-thumb .sm-cover-play .ic { width: 26px; height: 26px; } /* ============ 博客编辑器 ============ */ .editor-page { position: relative; z-index: 1; max-width: 1400px; margin: 12px auto 40px; padding: 0 16px; } .editor-page[hidden] { display: none; } .editor-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-lg); margin-bottom: 14px; } .editor-title { flex: 1; min-width: 0; font-family: var(--font); font-size: 17px; font-weight: 600; background: transparent; border: none; outline: none; color: var(--text-primary); padding: 6px 4px; } .editor-title::placeholder { color: var(--text-placeholder); font-weight: 400; } .editor-mode-label { flex-shrink: 0; font-size: 13px; color: var(--text-secondary); padding: 4px 10px; background: rgba(0,0,0,.04); border-radius: var(--radius-sm); } /* 布局：左列=元数据（跨两行），右列=编辑区；预览图栏已上移到 editor-head 下方靠上区域 */ .editor-main { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; } .editor-side { grid-column: 1; grid-row: 1; } .editor-area-wrap { grid-column: 2; grid-row: 1; } .editor-previewcfg { margin-top: 0; } /* 侧边元数据 */ .editor-side { padding: 16px; border-radius: var(--radius-lg); display: grid; gap: 16px; align-content: start; position: sticky; top: 92px; } .es-field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; } .es-field .input { width: 100%; resize: vertical; font-family: var(--font); } .es-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text-primary); user-select: none; } .es-check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; } .es-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .es-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,95,184,.1); color: var(--brand); padding: 3px 6px 3px 10px; border-radius: 999px; font-size: 12px; } .es-tag button { background: transparent; border: none; cursor: pointer; color: inherit; display: grid; place-items: center; padding: 0; width: 16px; height: 16px; border-radius: 50%; opacity: .7; } .es-tag button .ic { width: 11px; height: 11px; } .es-tag button:hover { background: rgba(0,0,0,.1); opacity: 1; } .es-files { display: flex; gap: 5px; flex-wrap: wrap; } .es-file { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); background: rgba(0,0,0,.04); padding: 3px 8px; border-radius: var(--radius-sm); max-width: 100%; } .es-file .ic { width: 12px; height: 12px; flex-shrink: 0; } .es-file .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .es-empty, .es-files:empty::after { content: "无引用文件"; font-size: 12px; color: var(--text-placeholder); } /* 编辑区（Vditor） */ .editor-area-wrap { padding: 0; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; height: calc(100vh - 260px); min-height: 460px; } .editor-vditor-host { flex: 1; min-height: 0; display: flex; flex-direction: column; } #vditor { flex: 1; min-height: 0; border: none !important; display: flex; flex-direction: column; } .vditor { border: none !important; border-radius: 0 !important; flex: 1; min-height: 0; display: flex; flex-direction: column; background: transparent; } /* 工具栏常驻：随编辑区滚动始终吸顶 */ .vditor-toolbar { position: sticky !important; top: 0; z-index: 5; border-bottom: 1px solid var(--border) !important; background: rgba(255,255,255,.86) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; padding: 6px 8px !important; flex-shrink: 0; } .vditor-toolbar__item { border-radius: var(--radius-sm); } .vditor-toolbar__item button { height: 30px; width: 32px; border-radius: var(--radius-sm); } .vditor-toolbar__item button:hover { background: rgba(0,95,184,.1); color: var(--brand); } .vditor-toolbar__item button svg { width: 17px; height: 17px; } /* 隐藏自定义「插入文件」按钮里图标的错位 */ .vditor-toolbar__item .ic { width: 17px; height: 17px; vertical-align: middle; } /* WYSIWYG 编辑区：整块可编辑，自己滚动 */ .vditor-wysiwyg { flex: 1; min-height: 0; overflow-y: auto !important; background: rgba(255,255,255,.42); } .vditor-reset { font-size: 14px; line-height: 1.75; } .vditor-reset img { max-width: 100%; border-radius: var(--radius-md); } .vditor-reset img.sm-img { display: block; margin: .6em 0; box-shadow: 0 1px 6px rgba(0,0,0,.12); } /* ---------- 编辑区媒体卡片：把 伪装成卡片，不改 DOM 结构 ---------- */ /* 通用（音频 / 其他文件） */ .vditor-reset a.sm-media-link { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px 9px 12px; margin: .3em 2px; background: rgba(0,95,184,.09); border: 1px solid rgba(0,95,184,.18); border-radius: var(--radius-md); color: var(--brand); text-decoration: none; font-size: 13px; vertical-align: middle; cursor: pointer; transition: background .15s, border-color .15s; } .vditor-reset a.sm-media-link:hover { background: rgba(0,95,184,.16); border-color: var(--brand); } .vditor-reset a.sm-media-link::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--sm-icon, none) center / contain no-repeat; mask: var(--sm-icon, none) center / contain no-repeat; } .vditor-reset a.sm-kind-audio { --sm-icon: url('data:image/svg+xml;utf8,'); } .vditor-reset a.sm-kind-other { --sm-icon: url('data:image/svg+xml;utf8,'); } /* ---------- 编辑区里的真实媒体 ---------- */ /* /