/* ========================================================================== 会理电信工作通知管理系统 —— 静谧临床主题（浅色单主题） 设计令牌与规范一致，唯一的全局主题入口是 字号已按使用人群年龄偏大上调一档：正文/表格/控件 14px，辅助小字 ≥12px ========================================================================== */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/PlusJakartaSans-var.woff2") format("woff2"); } :root { color-scheme: light; /* ---- 基础面 ---- */ --ca-bg: #f5f7fa; --ca-surface: #ffffff; --ca-surface-subtle: #f8fafc; --ca-line: #e4eaf1; --ca-ink: #0b1220; --ca-ink-2: #344054; --ca-ink-3: #667085; /* ---- 主色（品牌签名为 105deg 三色标渐变）---- */ --ca-primary: #3e5abd; --ca-primary-hover: #334ca9; --ca-primary-soft: #eef1ff; --ca-primary-start: #4c6cda; --ca-primary-mid: #3e5abd; --ca-primary-end: #3145a7; --ca-primary-gradient: linear-gradient(105deg, var(--ca-primary-start) 0%, var(--ca-primary-mid) 52%, var(--ca-primary-end) 100%); --ca-primary-gradient-hover: linear-gradient(105deg, #4563ca 0%, #334ca9 52%, #2b3c96 100%); --ca-primary-gradient-active: linear-gradient(105deg, #3e59b8 0%, #2d449f 52%, #263487 100%); --ca-primary-border: #2b3c96; /* ---- 语义色 ---- */ --ca-ai: #6857f5; --ca-ai-soft: #f0eeff; --ca-ai-ink: #5545db; --ca-success: #13b981; --ca-success-soft: #e8f8f2; --ca-success-ink: #087f5b; --ca-info: #0ea5c6; --ca-info-soft: #e7f8fc; --ca-info-ink: #087f9a; --ca-warning: #f59e0b; --ca-warning-soft: #fff7e5; --ca-warning-ink: #a15c00; --ca-critical: #f0445a; --ca-critical-soft: #fff0f2; --ca-critical-ink: #c62842; /* ---- 字体 ---- */ --ca-font-sans: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --ca-font-mono: "SFMono-Regular", Consolas, "Courier New", monospace; /* ---- 圆角 / 阴影 ---- */ --ca-radius-control: 8px; --ca-radius-card: 12px; --ca-radius-pill: 999px; --ca-shadow-card: 0 1px 2px rgb(16 24 40 / 4%); --ca-shadow-float: 0 8px 24px rgb(16 24 40 / 8%); --ca-shadow-primary: 0 4px 12px rgb(49 69 167 / 18%); --ca-focus: 0 0 0 3px rgb(62 90 189 / 26%); /* ---- 尺寸 ---- */ --ca-sidebar-width: 224px; --ca-sidebar-compact: 72px; --ca-topbar-height: 60px; --ca-row-height: 48px; --ca-duration-fast: 140ms; --ca-duration-base: 200ms; --ca-ease: cubic-bezier(0.2, 0, 0, 1); /* ========================================================================== 旧变量名别名 —— 页面里大量内联 style 直接引用这些名字，必须保留 ========================================================================== */ --primary: var(--ca-primary); --primary-dark: var(--ca-primary-hover); --primary-light: var(--ca-primary-soft); --bg: var(--ca-bg); --card: var(--ca-surface); --border: var(--ca-line); --text: var(--ca-ink); --text-2: var(--ca-ink-3); --success: var(--ca-success-ink); --success-bg: var(--ca-success-soft); --danger: var(--ca-critical-ink); --danger-bg: var(--ca-critical-soft); --warn: var(--ca-warning-ink); --warn-bg: var(--ca-warning-soft); --info-bg: var(--ca-primary-soft); --radius: var(--ca-radius-card); --shadow: var(--ca-shadow-card); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--ca-font-sans); font-size: 14px; line-height: 1.55; background: var(--ca-bg); color: var(--ca-ink); font-synthesis: none; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: inherit; font-size: 14px; color: inherit; } button { cursor: pointer; } a { color: var(--ca-primary); text-decoration: none; } a:hover { color: var(--ca-primary-hover); text-decoration: underline; } :focus-visible { outline: none; box-shadow: var(--ca-focus); border-radius: 6px; } .tnum { font-variant-numeric: tabular-nums; } /* ===== 图标（Lucide，stroke-width 1.8，currentColor）===== */ .ic { width: 18px; height: 18px; flex: 0 0 auto; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ic--xs { width: 14px; height: 14px; } .ic--sm { width: 16px; height: 16px; } .ic--lg { width: 20px; height: 20px; } .ic--xl { width: 26px; height: 26px; } /* ===== 登录页 ===== */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--ca-bg); } .login-card { width: 400px; max-width: 100%; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: var(--ca-radius-card); padding: 36px 32px; box-shadow: var(--ca-shadow-card); } .login-logo { text-align: center; margin-bottom: 24px; } .login-logo .badge { display: inline-flex; width: 52px; height: 52px; border-radius: 13px; align-items: center; justify-content: center; margin-bottom: 12px; background-image: var(--ca-primary-gradient); color: #fff; font-size: 23px; font-weight: 700; } .login-logo h1 { font-size: 19px; font-weight: 700; line-height: 26px; letter-spacing: -.01em; } .login-logo p { color: var(--ca-ink-3); font-size: 12.5px; margin-top: 5px; } .login-card .form-row { margin-bottom: 16px; } .login-card label { display: block; font-size: 13px; color: var(--ca-ink-2); margin-bottom: 6px; font-weight: 600; } .login-card input { width: 100%; padding: 10px 12px; } .login-err { display: none; background: var(--ca-critical-soft); color: var(--ca-critical-ink); border: 1px solid var(--ca-critical); border-radius: var(--ca-radius-control); padding: 9px 12px; font-size: 13px; line-height: 20px; margin-bottom: 14px; } .login-err.show { display: block; } /* ===== 按钮 ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: var(--ca-radius-control); border: 1px solid transparent; background: transparent; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color var(--ca-duration-fast) var(--ca-ease), border-color var(--ca-duration-fast) var(--ca-ease), color var(--ca-duration-fast) var(--ca-ease), box-shadow var(--ca-duration-fast) var(--ca-ease); } .btn-primary { color: #fff; background-color: var(--ca-primary); background-image: var(--ca-primary-gradient); border-color: var(--ca-primary-border); box-shadow: var(--ca-shadow-primary); } .btn-primary:hover { background-color: var(--ca-primary-hover); background-image: var(--ca-primary-gradient-hover); color: #fff; } .btn-primary:active { background-image: var(--ca-primary-gradient-active); box-shadow: none; } .btn-outline { background: var(--ca-surface); color: var(--ca-ink-2); border-color: var(--ca-line); } .btn-outline:hover { background: var(--ca-surface-subtle); color: var(--ca-ink); border-color: var(--ca-line); text-decoration: none; } .btn-outline:active { background: var(--ca-bg); } .btn-danger { background: var(--ca-critical-soft); color: var(--ca-critical-ink); border-color: var(--ca-critical); } .btn-danger:hover { background: var(--ca-critical); color: #fff; border-color: var(--ca-critical); } .btn-success { background: var(--ca-success-soft); color: var(--ca-success-ink); border-color: var(--ca-success); } .btn-success:hover { background: var(--ca-success); color: #fff; } .btn-sm { padding: 5px 11px; font-size: 13px; border-radius: 7px; } .btn-lg { padding: 11px 20px; font-size: 15px; } .btn-block { width: 100%; } .btn:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; } .btn-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--ca-primary); padding: 2px 4px; font-size: 13px; font-weight: 600; } .btn-link:hover { color: var(--ca-primary-hover); text-decoration: underline; background: none; } .btn-link.danger { color: var(--ca-critical-ink); } .btn-link.danger:hover { color: var(--ca-critical-ink); } /* ===== 主布局 ===== */ .app { display: none; min-height: 100vh; } .app.active { display: block; } .sidebar { width: var(--ca-sidebar-width); background: var(--ca-surface); border-right: 1px solid var(--ca-line); display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; } .sidebar-logo { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 18px 16px 14px; border-bottom: 1px solid var(--ca-line); } .sidebar-logo .badge { display: flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; background-image: var(--ca-primary-gradient); color: #fff; font-weight: 700; font-size: 16px; } .sidebar-logo .t { font-size: 14px; font-weight: 700; line-height: 18px; min-width: 0; } .sidebar-logo .t small { display: block; font-size: 12px; line-height: 16px; color: var(--ca-ink-3); font-weight: 500; } .nav { flex: 1; padding: 12px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: none; background: none; border-radius: var(--ca-radius-control); color: var(--ca-ink-2); font-size: 14px; font-weight: 500; text-align: left; } .nav-item .ic { color: var(--ca-ink-3); } .nav-item:hover { background: var(--ca-surface-subtle); color: var(--ca-ink); } .nav-item:hover .ic { color: var(--ca-primary); } .nav-item::before { content: ""; position: absolute; left: -10px; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--ca-primary); transform: translateY(-50%); transition: height var(--ca-duration-base) var(--ca-ease); } .nav-item.active { background: var(--ca-primary-soft); color: var(--ca-primary-hover); font-weight: 600; } .nav-item.active .ic { color: var(--ca-primary); } .nav-item.active::before { height: 20px; } .sidebar-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--ca-line); } .sidebar-foot .user-line { display: flex; align-items: center; gap: 9px; margin-bottom: 0; min-width: 0; } .avatar { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--ca-primary-soft); color: var(--ca-primary-hover); font-size: 13px; font-weight: 700; } .user-meta { min-width: 0; } .sidebar-foot .uname { display: block; color: var(--ca-ink); font-weight: 600; font-size: 14px; line-height: 18px; } .role-tag { display: inline-block; padding: 1px 8px; border-radius: var(--ca-radius-pill); font-size: 12px; font-weight: 600; line-height: 17px; background: var(--ca-primary-soft); color: var(--ca-primary-hover); } .role-tag.admin { background: var(--ca-warning-soft); color: var(--ca-warning-ink); } .role-tag.operator { background: var(--ca-info-soft); color: var(--ca-info-ink); } .role-tag.viewer { background: var(--ca-surface-subtle); color: var(--ca-ink-3); } .main { margin-left: var(--ca-sidebar-width); min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--ca-topbar-height); padding: 0 24px; background: var(--ca-surface); border-bottom: 1px solid var(--ca-line); position: sticky; top: 0; z-index: 5; } .topbar h2 { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; } .topbar .sub { font-size: 13px; color: var(--ca-ink-3); } .topbar-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; } #topbar-extra { display: flex; align-items: center; gap: 8px; } .content { padding: 20px 24px 32px; } /* ===== 卡片 / 统计 ===== */ .card { background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: var(--ca-radius-card); padding: 18px; box-shadow: var(--ca-shadow-card); margin-bottom: 16px; } .card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 22px; font-weight: 700; margin-bottom: 14px; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat-card { display: flex; align-items: flex-start; gap: 12px; background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: var(--ca-radius-card); padding: 16px; box-shadow: var(--ca-shadow-card); } .stat-card .icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 9px; background: var(--ca-primary-soft); color: var(--ca-primary); } .stat-card .icon .ic { width: 18px; height: 18px; } .stat-card .icon.blue { background: var(--ca-primary-soft); color: var(--ca-primary); } .stat-card .icon.green { background: var(--ca-success-soft); color: var(--ca-success-ink); } .stat-card .icon.red { background: var(--ca-critical-soft); color: var(--ca-critical-ink); } .stat-card .icon.orange { background: var(--ca-warning-soft); color: var(--ca-warning-ink); } .stat-card .num { font-size: 28px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-card .label { font-size: 13px; line-height: 18px; color: var(--ca-ink-2); margin-top: 2px; } /* ===== 表格 ===== */ .table-wrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { padding: 0 12px; height: var(--ca-row-height); text-align: left; border-bottom: 1px solid var(--ca-line); font-size: 14px; } .tbl th { height: 42px; background: var(--ca-surface-subtle); color: var(--ca-ink-3); font-weight: 600; font-size: 13px; white-space: nowrap; } .tbl tbody tr { transition: background-color var(--ca-duration-fast) var(--ca-ease); } .tbl tr:hover td { background: var(--ca-surface-subtle); } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl .actions { white-space: nowrap; } .tbl a { font-weight: 600; } /* ===== 状态徽章 ===== */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; min-height: 24px; border-radius: var(--ca-radius-pill); font-size: 13px; font-weight: 600; white-space: nowrap; } .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; } .tag.success { background: var(--ca-success-soft); color: var(--ca-success-ink); } .tag.failed, .tag.danger { background: var(--ca-critical-soft); color: var(--ca-critical-ink); } .tag.pending, .tag.info, .tag.sending { background: var(--ca-info-soft); color: var(--ca-info-ink); } .tag.scheduled, .tag.warn, .tag.partial { background: var(--ca-warning-soft); color: var(--ca-warning-ink); } .tag.gray, .tag.canceled, .tag.draft { background: var(--ca-surface-subtle); color: var(--ca-ink-3); } .tag.done { background: var(--ca-success-soft); color: var(--ca-success-ink); } /* 通道色块 */ .ch-badge { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; min-height: 22px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid transparent; } .ch-badge.sms { background: var(--ca-success-soft); color: var(--ca-success-ink); } .ch-badge.email { background: var(--ca-primary-soft); color: var(--ca-primary-hover); } .ch-badge.qbot { background: var(--ca-ai-soft); color: var(--ca-ai-ink); } /* ===== 表单 ===== */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid .full { grid-column: 1 / -1; } .form-row { margin-bottom: 14px; } .form-row label, .fg label { display: block; font-size: 13px; color: var(--ca-ink-2); margin-bottom: 6px; font-weight: 600; } .form-row label .req, .fg label .req { color: var(--ca-critical-ink); } input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=datetime-local], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-control); outline: none; background: var(--ca-surface); color: var(--ca-ink); transition: border-color var(--ca-duration-fast) var(--ca-ease), box-shadow var(--ca-duration-fast) var(--ca-ease); } input::placeholder, textarea::placeholder { color: var(--ca-ink-3); opacity: .75; } input:hover, select:hover, textarea:hover { border-color: #cfd8e3; } input:focus, select:focus, textarea:focus { border-color: var(--ca-primary); box-shadow: var(--ca-focus); } input:disabled, select:disabled, textarea:disabled { background: var(--ca-surface-subtle); color: var(--ca-ink-3); cursor: not-allowed; } textarea { resize: vertical; min-height: 90px; } .hint { font-size: 12.5px; line-height: 18px; color: var(--ca-ink-3); margin-top: 5px; } code { background: var(--ca-surface-subtle); border: 1px solid var(--ca-line); border-radius: 5px; padding: 1px 5px; font-family: var(--ca-font-mono); font-size: 12.5px; } /* checkbox / radio 组 */ .check-group { display: flex; gap: 12px; flex-wrap: wrap; } .check-item { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 14px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-control); background: var(--ca-surface); font-size: 14px; user-select: none; transition: border-color var(--ca-duration-fast) var(--ca-ease), background-color var(--ca-duration-fast) var(--ca-ease); } .check-item:hover { border-color: #cfd8e3; background: var(--ca-surface-subtle); } .check-item input { accent-color: var(--ca-primary); width: 16px; height: 16px; flex: 0 0 16px; } .check-item.checked { border-color: var(--ca-primary); background: var(--ca-primary-soft); color: var(--ca-primary-hover); font-weight: 600; } .check-item .ic { color: currentColor; } /* ===== 工具条 ===== */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .toolbar input, .toolbar select { width: auto; min-width: 160px; } .toolbar .spacer { flex: 1; } /* ===== 弹窗 ===== */ .modal-mask { position: fixed; inset: 0; background: rgb(11 18 32 / 32%); display: none; align-items: flex-start; justify-content: center; z-index: 100; overflow-y: auto; padding: 40px 16px; backdrop-filter: blur(1px); } .modal-mask.show { display: flex; } .modal { background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: var(--ca-radius-card); width: 580px; max-width: 100%; box-shadow: var(--ca-shadow-float); animation: modal-in var(--ca-duration-base) var(--ca-ease); } .modal.lg { width: 820px; } @keyframes modal-in { from { transform: translateY(-8px); opacity: .6; } to { transform: none; opacity: 1; } } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ca-line); } .modal-head h3 { font-size: 16px; line-height: 24px; font-weight: 700; } .modal-close { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-control); background: var(--ca-surface); color: var(--ca-ink-3); } .modal-close:hover { background: var(--ca-surface-subtle); color: var(--ca-ink); } .modal-body { padding: 20px; max-height: 65vh; overflow-y: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ca-line); background: var(--ca-surface-subtle); } /* ===== 提示 toast ===== */ #toast-box { position: fixed; top: 18px; right: 18px; z-index: 999; display: flex; flex-direction: column; gap: 8px; } .toast { display: flex; align-items: center; gap: 10px; background: var(--ca-surface); border: 1px solid var(--ca-line); border-left: 3px solid var(--ca-info); border-radius: var(--ca-radius-control); box-shadow: var(--ca-shadow-float); padding: 11px 16px; font-size: 14px; font-weight: 500; color: var(--ca-ink-2); min-width: 260px; max-width: 400px; animation: toast-in var(--ca-duration-base) var(--ca-ease); } .toast .ic { color: var(--ca-info-ink); } .toast.success { border-left-color: var(--ca-success); } .toast.success .ic { color: var(--ca-success-ink); } .toast.error { border-left-color: var(--ca-critical); } .toast.error .ic { color: var(--ca-critical-ink); } .toast.warn { border-left-color: var(--ca-warning); } .toast.warn .ic { color: var(--ca-warning-ink); } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } /* ===== 分页 ===== */ .pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 14px; font-size: 13px; color: var(--ca-ink-3); } .pager button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid var(--ca-line); background: var(--ca-surface); border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ca-ink-2); } .pager button:hover:not(:disabled) { background: var(--ca-surface-subtle); color: var(--ca-ink); } .pager button:disabled { opacity: .42; cursor: not-allowed; } /* ===== 空状态 ===== */ .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 16px; color: var(--ca-ink-3); font-size: 14px; } .empty .ico { color: var(--ca-line); } .empty .ico .ic { width: 34px; height: 34px; stroke-width: 1.5; } /* ===== 详情定义列表 ===== */ .detail-grid { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px 14px; font-size: 14px; } .detail-grid dt { color: var(--ca-ink-3); font-weight: 500; } .detail-grid dd { word-break: break-all; color: var(--ca-ink); font-weight: 500; } /* ===== 设置页分节 ===== */ .setting-section { border: 1px solid var(--ca-line); border-radius: var(--ca-radius-card); margin-bottom: 16px; overflow: hidden; background: var(--ca-surface); box-shadow: var(--ca-shadow-card); } .setting-section .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--ca-surface-subtle); border-bottom: 1px solid var(--ca-line); font-size: 14px; font-weight: 700; } .setting-section .sec-head .ic { color: var(--ca-ink-3); } .setting-section .sec-body { padding: 16px; } .mock-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ca-ink-2); } .mock-switch input { width: 16px; height: 16px; accent-color: var(--ca-primary); } /* ===== Markdown 编辑器 ===== */ .md-wrap { border: 1px solid var(--ca-line); border-radius: var(--ca-radius-card); overflow: hidden; background: var(--ca-surface); } .md-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 8px; background: var(--ca-surface-subtle); border-bottom: 1px solid var(--ca-line); } .md-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 7px; border: none; border-radius: 6px; background: transparent; color: var(--ca-ink-2); font-size: 13px; font-weight: 700; } .md-btn:hover { background: var(--ca-primary-soft); color: var(--ca-primary-hover); } .md-btn .ic { width: 16px; height: 16px; } .md-sep { width: 1px; height: 18px; background: var(--ca-line); margin: 0 5px; } .md-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .md-editor textarea { border: none; border-radius: 0; border-right: 1px solid var(--ca-line); resize: vertical; min-height: 340px; padding: 14px; width: 100%; font-family: var(--ca-font-mono); font-size: 13.5px; line-height: 1.75; } .md-editor textarea:focus { box-shadow: none; border-color: var(--ca-line); } .md-preview { min-height: 340px; max-height: 580px; padding: 14px; background: var(--ca-surface-subtle); overflow-y: auto; font-size: 14px; line-height: 1.75; } .md-preview .pv-empty { color: var(--ca-ink-3); font-size: 14px; padding: 40px 20px; text-align: center; } .md-preview h1, .md-preview h2, .md-preview h3 { margin: 12px 0 8px; line-height: 1.4; } .md-preview h1 { font-size: 19px; } .md-preview h2 { font-size: 17px; } .md-preview h3 { font-size: 15px; } .md-preview p { margin: 8px 0; } .md-preview ul, .md-preview ol { margin: 8px 0 8px 22px; } .md-preview blockquote { border-left: 3px solid var(--ca-line); padding-left: 12px; color: var(--ca-ink-2); margin: 8px 0; } .md-preview table { border-collapse: collapse; margin: 10px 0; font-size: 13.5px; } .md-preview th, .md-preview td { border: 1px solid var(--ca-line); padding: 6px 10px; } .md-preview th { background: var(--ca-surface); font-weight: 600; } .md-preview code { background: var(--ca-surface); } .md-preview hr { border: none; border-top: 1px solid var(--ca-line); margin: 14px 0; } .pv-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .pv-tab { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-pill); background: var(--ca-surface); font-size: 13px; font-weight: 600; color: var(--ca-ink-2); } .pv-tab:hover { border-color: var(--ca-primary); color: var(--ca-primary-hover); } .pv-tab.on { background: var(--ca-primary-soft); color: var(--ca-primary-hover); border-color: var(--ca-primary); } /* 预览框 */ .pv-frame { border: 1px solid var(--ca-line); border-radius: var(--ca-radius-control); overflow: hidden; background: var(--ca-surface); } .pv-frame-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ca-surface-subtle); border-bottom: 1px solid var(--ca-line); font-size: 12.5px; color: var(--ca-ink-3); font-weight: 500; } .pv-frame-bar .ic { color: var(--ca-ink-3); } .pv-frame-bar b { color: var(--ca-ink); font-weight: 600; } .pv-iframe { width: 100%; height: 480px; border: none; display: block; background: var(--ca-surface); } .pv-sms { padding: 14px; } .pv-sms-bubble { background: var(--ca-surface-subtle); border: 1px solid var(--ca-line); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.75; white-space: pre-wrap; word-break: break-all; } .pv-sms-meta { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--ca-ink-3); flex-wrap: wrap; } .pv-sms-meta b { color: var(--ca-ink); font-variant-numeric: tabular-nums; } .pv-sms-meta .warn { color: var(--ca-warning-ink); font-weight: 600; } .pv-qbot { padding: 14px; } .pv-qbot pre { margin: 0; padding: 12px 14px; background: var(--ca-ai-soft); border: 1px solid var(--ca-line); border-radius: 10px; font-family: var(--ca-font-sans); font-size: 14px; line-height: 1.75; white-space: pre-wrap; word-break: break-all; } /* 邮件外观模板选择器 */ .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .tpl-card { border: 1px solid var(--ca-line); border-radius: var(--ca-radius-control); padding: 10px; cursor: pointer; background: var(--ca-surface); transition: border-color var(--ca-duration-fast) var(--ca-ease), background-color var(--ca-duration-fast) var(--ca-ease); } .tpl-card:hover { border-color: #b9c6e4; background: var(--ca-surface-subtle); } .tpl-card.on { border-color: var(--ca-primary); background: var(--ca-primary-soft); } .tpl-card .tpl-swatch { display: flex; height: 40px; border-radius: 6px; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--ca-line); } .tpl-card .tpl-swatch span { flex: 1; } .tpl-card .tpl-name { font-size: 14px; font-weight: 600; color: var(--ca-ink); } .tpl-card .tpl-desc { font-size: 12px; color: var(--ca-ink-3); margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 正文内容模板选择器 */ .ctpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .ctpl-card { border: 1px solid var(--ca-line); border-radius: var(--ca-radius-control); padding: 12px; cursor: pointer; background: var(--ca-surface); transition: border-color var(--ca-duration-fast) var(--ca-ease), background-color var(--ca-duration-fast) var(--ca-ease); } .ctpl-card:hover { border-color: #b9c6e4; background: var(--ca-surface-subtle); } .ctpl-card .ctpl-ico { color: var(--ca-primary); } .ctpl-card .ctpl-ico .ic { width: 20px; height: 20px; } .ctpl-card .ctpl-name { font-size: 14px; font-weight: 600; margin-top: 6px; } .ctpl-card .ctpl-desc { font-size: 12px; color: var(--ca-ink-3); margin-top: 3px; line-height: 1.45; } /* 重复发送面板 */ .r-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .r-label { display: block; font-size: 13px; color: var(--ca-ink-2); margin-bottom: 8px; font-weight: 600; } .r-days { display: flex; gap: 6px; flex-wrap: wrap; } .r-day { padding: 6px 13px; border: 1px solid var(--ca-line); border-radius: var(--ca-radius-control); background: var(--ca-surface); font-size: 13px; font-weight: 500; color: var(--ca-ink-2); } .r-day:hover { border-color: #b9c6e4; background: var(--ca-surface-subtle); } .r-day.on { background: var(--ca-primary); color: #fff; border-color: var(--ca-primary-border); font-weight: 600; } .r-mdays { display: flex; gap: 5px; flex-wrap: wrap; } .r-mday { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 1px solid var(--ca-line); border-radius: 7px; background: var(--ca-surface); font-size: 13px; font-weight: 500; color: var(--ca-ink-2); } .r-mday:hover { border-color: #b9c6e4; background: var(--ca-surface-subtle); } .r-mday.on { background: var(--ca-primary); color: #fff; border-color: var(--ca-primary-border); font-weight: 600; } .r-summary { margin-top: 14px; padding: 11px 14px; border-radius: var(--ca-radius-control); font-size: 14px; line-height: 21px; background: var(--ca-surface-subtle); border: 1px solid var(--ca-line); color: var(--ca-ink-2); } .r-summary.ok { background: var(--ca-primary-soft); border-color: var(--ca-primary); color: var(--ca-primary-hover); font-weight: 600; } .r-summary.err { background: var(--ca-critical-soft); border-color: var(--ca-critical); color: var(--ca-critical-ink); } .r-preview { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; } .r-pv-label { color: var(--ca-ink-3); } .r-pv-item { background: var(--ca-surface); border: 1px solid var(--ca-line); border-radius: 6px; padding: 3px 9px; color: var(--ca-ink-2); font-variant-numeric: tabular-nums; } /* ===== 响应式 ===== */ @media (max-width: 1023px) { .sidebar { width: var(--ca-sidebar-compact); } .sidebar-logo { justify-content: center; padding: 18px 10px 14px; } .sidebar-logo .t, .nav-item .txt, .sidebar-foot .user-line { display: none; } .nav { padding: 12px 10px; align-items: stretch; } .nav-item { justify-content: center; padding: 0; height: 40px; } .nav-item::before { left: -10px; } .sidebar-foot { padding: 12px 10px 14px; } .sidebar-foot .btn .txt { display: none; } .main { margin-left: var(--ca-sidebar-compact); } } @media (max-width: 900px) { .md-editor { grid-template-columns: 1fr; } .md-editor textarea { border-right: none; border-bottom: 1px solid var(--ca-line); } .content { padding: 16px; } .topbar { padding: 0 16px; } } @media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } .topbar .sub { display: none; } .topbar h2 { font-size: 16px; } .card { padding: 14px; } .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-card { padding: 12px; } .stat-card .num { font-size: 24px; line-height: 30px; } .modal-mask { padding: 16px 12px; } #toast-box { right: 12px; left: 12px; } .toast { min-width: 0; max-width: none; } } /* 尊重系统「减少动态效果」 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }