/* 黑巴选品系统 — 全局适配样式（基于 AdminLTE 4 + Bootstrap 5.3） */ /* 中文字体栈 + 基准字号（与系统原有一致） */ html { font-size: 14px; } body { font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif; } /* 表单必填项红色星号（原 Tabler .required，AdminLTE 未内置） */ .form-label.required::after { content: " *"; color: #d9534f; } /* 富文本（wangEditor）在深色主题下的兼容：强制浅色底，避免文字不可见 */ .w-e-text-container, .w-e-text-container [data-slate-editor] { color: #212529; } /* ===== UI 优化（2026-08-18 大王）：文字与边框间距微调 ===== html 14px 基准下，Bootstrap 的 rem 间距整体缩小 12.5%（0.5rem=7px）， 表格内边距偏挤、表头与数据行无层次；此处把关键间距补回舒适水平，字号保持 14px 不变。 */ /* 表格：加大单元格内边距（7px → 10.5px，0.75rem），内容不拥挤 */ .table > :not(caption) > * > * { padding: 0.75rem 0.75rem; } /* 表格表头：浅底 + 加粗 + 底线加重 + 不折行，与数据行区分层次 */ .table thead th { background-color: var(--bs-tertiary-bg); font-weight: 600; white-space: nowrap; border-bottom-width: 2px; text-align: center; } /* ===== AppLovin / TikTok / NewsBreak 三个投放页明细表的「广告名」列（2026-09-19 大王）===== 广告名最长到 40+ 字符，又因为明细表挂了 Bootstrap 的 .text-nowrap，整张表被这一列撑出横向滚动条 （实测 1600 视口：AppLovin 溢出 360px、NewsBreak 溢出 397px，广告名列宽 350~435px）。 这里限宽并允许折行。 */ /* ⚠️ 必须打在单元格里的那层 div 上：表格是 table-layout:auto，max-width 直接写在 td 上浏览器会忽略。 ⚠️ .text-nowrap 的 white-space:nowrap 带 !important，但它设在 上，是**继承**给子元素的； 子元素自己声明 white-space 就能盖住继承值，不需要跟一个 !important。 */ .ad-name { max-width: 240px; white-space: normal; word-break: break-word; } /* 光限广告名不够：明细表列多（AppLovin 17 列 / NewsBreak 16 列），按全站 0.75rem 的单元格内边距， 整张表的**最小**宽度就超过内容区，仍然撑出横向滚动条（实测限完广告名后还溢出 73 / 25px， 且广告名被压成 63px 的一根窄柱）。这里只给这三页的明细表收紧内边距（0.75rem → 0.5rem， AppLovin 17 列共省出约 119px），够把表压回内容区，全站其它表格不受影响。 */ .ad-detail > :not(caption) > * > * { padding: 0.5rem 0.5rem; } /* ===== 「今天/昨天」快捷键的选中态（2026-09-19 大王）===== 这条规则给三个投放平台页（AppLovin / TikTok / NewsBreak）共用，放全局是为了三页一处维护。 ⚠️ 2026-09-19 起这三页**已经有了** Styles 段（用来引 platform-report.css），所以原先 「三页没有 Styles 段、只能落在这里」的说法不再成立 —— 平台页专属样式一律放 wwwroot/css/platform-report.css，别再往本文件堆。 选中态视觉照大王拍板：浅色底 + 主色字 + 边框。 ⚠️ 用 .btn.btn-current（0,2,0）压过 .btn-outline-secondary（0,1,0）—— 两者特指度若相同， 胜负就由加载顺序决定，而本文件在 里，靠不住。 */ .btn.btn-current { background-color: #eef4ff; border-color: #0d6efd; color: #0b5ed7; font-weight: 600; } .btn.btn-current:hover, .btn.btn-current:focus { background-color: #e3efff; border-color: #0d6efd; color: #0b5ed7; } /* ===== HEIBA SaaS Design System 2026 ===== */ :root { --hb-primary: #3668f5; --hb-primary-hover: #2856d9; --hb-sidebar: #10182b; --hb-sidebar-muted: #91a0ba; --hb-canvas: #f4f6fa; --hb-surface: #ffffff; --hb-border: #e3e8f1; --hb-text: #172033; --hb-muted: #6f7b91; --hb-shadow: 0 8px 30px rgba(24, 39, 75, .055); --hb-radius: 14px; } [data-bs-theme="dark"] { --hb-canvas: #0c1220; --hb-surface: #141c2d; --hb-border: #263249; --hb-text: #eef3fb; --hb-muted: #98a6bb; --hb-shadow: 0 10px 34px rgba(0, 0, 0, .22); --bs-body-bg: var(--hb-canvas); --bs-body-color: var(--hb-text); --bs-secondary-bg: #1a2437; --bs-tertiary-bg: #111a2b; --bs-border-color: var(--hb-border); } /* 专属报表页面的夜间适配：这些页面有各自的历史样式变量。 */ [data-bs-theme="dark"] .adspend-report, [data-bs-theme="dark"] .report-anomaly, [data-bs-theme="dark"] .scrape-task { --ink: var(--hb-text); --muted: var(--hb-muted); --faint: #7f8da3; --border: var(--hb-border); --bg: var(--hb-canvas); --surface: var(--hb-surface); --primary-soft: rgba(54,104,245,.14); --primary-mid: #547cf1; } [data-bs-theme="dark"] .adspend-report :is(select,.combo-input,.combo-panel,.date-range input[type=date],.kpi,.button,.step), [data-bs-theme="dark"] .report-anomaly :is(select,.combo-input,.combo-panel,.date-range input[type=date],.button), [data-bs-theme="dark"] .scrape-task :is(.control,.combo-input,.combo-panel,.btn,.table) { background-color: var(--hb-surface); border-color: var(--hb-border); color: var(--hb-text); } [data-bs-theme="dark"] .adspend-report :is(.dimension,thead th,tbody td,tbody th,.root-row td,.root-row th), [data-bs-theme="dark"] .report-anomaly :is(thead th,tbody td), [data-bs-theme="dark"] .scrape-task :is(.rule,.deadline,thead th,.summary-table th) { background-color: color-mix(in srgb,var(--hb-surface) 88%,#0b1322); color: var(--hb-text); border-color: var(--hb-border); } [data-bs-theme="dark"] .adspend-report tbody tr:hover :is(td,th), [data-bs-theme="dark"] .report-anomaly tbody tr:hover td, [data-bs-theme="dark"] .scrape-task .table tbody tr:hover { background: rgba(54,104,245,.08); } [data-bs-theme="dark"] .platform-filter .combo-panel { background: var(--hb-surface); border-color: var(--hb-border); } [data-bs-theme="dark"] .platform-filter .combo-item:hover { background: rgba(54,104,245,.09); } [data-bs-theme="dark"] pre { background: #0d1525 !important; color: #dce6f6; border-color: var(--hb-border) !important; } html { color-scheme: light; } [data-bs-theme="dark"] { color-scheme: dark; } body.heiba-app { background: var(--hb-canvas); color: var(--hb-text); letter-spacing: .005em; } .app-header { min-height: 68px; border-bottom: 1px solid var(--hb-border); background: color-mix(in srgb, var(--hb-surface) 92%, transparent) !important; box-shadow: 0 1px 0 rgba(23, 32, 51, .02); backdrop-filter: blur(16px); } .app-header .container-fluid { padding-inline: 22px; align-items: center; } .app-header .navbar-nav { align-items: center; } .app-header .nav-link { display: inline-flex; align-items: center; justify-content: center; color: var(--hb-muted); border-radius: 10px; } .app-header .nav-link:hover { color: var(--hb-primary); background: color-mix(in srgb, var(--hb-primary) 8%, transparent); } .sidebar-toggle { display: grid !important; place-items: center; width: 40px; height: 40px; font-size: 1.3rem; } .page-context { display: flex; flex-direction: column; margin-left: 12px; line-height: 1.2; } .page-context span { color: var(--hb-muted); font-size: .68rem; } .page-context strong { margin-top: 3px; font-size: .9rem; } .theme-toggle { width: 42px; height: 42px; display: grid !important; place-items: center; border: 0; background: transparent; font-size: 1.25rem; line-height: 1; } .ticket-notification-toggle { position: relative; width: 42px; height: 42px; display: grid !important; place-items: center; border: 0; background: transparent; font-size: 1.25rem; line-height: 1; } .ticket-notification-badge { position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--hb-surface); border-radius: 10px; background: #ef4444; color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; } .ticket-notification-menu { width: min(390px, calc(100vw - 24px)); margin-top: 8px !important; padding: 0; overflow: hidden; border: 1px solid var(--hb-border); border-radius: 14px; background: var(--hb-surface); box-shadow: 0 18px 48px rgba(24,39,75,.16); } .ticket-notification-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--hb-border); } .ticket-notification-list { max-height: min(500px, 65vh); overflow-y: auto; } .ticket-notification-empty { min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--hb-muted); font-size: .82rem; } .ticket-notification-empty i { font-size: 1.45rem; color: #22a06b; } .ticket-notification-item { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--hb-border); color: var(--hb-text); text-decoration: none; transition: background .15s ease; } .ticket-notification-item:hover { background: color-mix(in srgb,var(--hb-primary) 6%,var(--hb-surface)); color: var(--hb-text); } .ticket-notification-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb,var(--hb-primary) 11%,var(--hb-surface)); color: var(--hb-primary); } .ticket-notification-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } .ticket-notification-title { display: flex; align-items: center; justify-content: space-between; font-weight: 720; font-size: .84rem; } .ticket-notification-title b { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: #ef4444; color: #fff; font-size: .64rem; text-align: center; } .ticket-notification-product,.ticket-notification-content { overflow: hidden; color: var(--hb-muted); font-size: .75rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .ticket-notification-content strong { color: var(--hb-text); font-weight: 650; } .ticket-notification-time { color: color-mix(in srgb,var(--hb-muted) 75%,transparent); font-size: .68rem; } .ticket-notification-footer { display: block; padding: 11px 16px; color: var(--hb-primary); font-size: .78rem; font-weight: 650; text-align: center; text-decoration: none; } .ticket-notification-footer:hover { background: color-mix(in srgb,var(--hb-primary) 5%,var(--hb-surface)); } .theme-icon-light { display: none; color: #f0a31b; } [data-bs-theme="dark"] .theme-icon-light { display: inline-block; } [data-bs-theme="dark"] .theme-icon-dark { display: none; } .user-menu > .nav-link { display: inline-flex !important; align-items: center; gap: 9px; min-height: 42px; } .user-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; overflow:hidden; border-radius: 10px; background: linear-gradient(135deg,#4d7cff,#25bfc3); color: #fff; font-weight: 750; }.user-avatar img { width:100%;height:100%;object-fit:cover; } .app-sidebar { background: var(--hb-sidebar) !important; border-right: 1px solid rgba(255,255,255,.04); box-shadow: 8px 0 32px rgba(7, 13, 27, .08); } .sidebar-brand { height: 68px; border-bottom: 1px solid rgba(255,255,255,.07) !important; } .brand-link { height: 100%; display: flex !important; align-items: center; gap: 11px; padding: 0 18px !important; color: #fff !important; text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg,#4777ff,#22bfc2); box-shadow: 0 8px 18px rgba(54,104,245,.28); font-size: 1rem; font-weight: 850; } .brand-copy { display: flex; flex-direction: column; line-height: 1.15; } .brand-copy strong { letter-spacing: .15em; font-size: .92rem; } .brand-copy small { margin-top: 4px; color: #73809a; font-size: .65rem; font-weight: 500; } .sidebar-wrapper { padding: 12px 10px 20px; } .sidebar-menu .nav-link { min-height: 42px; margin: 3px 0; padding: 10px 12px; border-radius: 11px; color: var(--hb-sidebar-muted); transition: .18s ease; } .sidebar-menu .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(2px); } .sidebar-menu .nav-link.active { color: #fff !important; background: linear-gradient(90deg,rgba(62,111,255,.32),rgba(62,111,255,.09)) !important; box-shadow: inset 3px 0 #5d87ff; } .sidebar-menu .nav-icon { font-size: 1rem !important; margin-right: 9px !important; } .sidebar-menu .nav-treeview { margin-left: 7px; padding-left: 9px; border-left: 1px solid rgba(255,255,255,.07); } .sidebar-menu .nav-treeview .nav-link { font-size: .86rem; min-height: 38px; } .app-main { background: var(--hb-canvas); } .app-content { padding: 25px 0 36px; } .app-content > .container-fluid { max-width: 1920px; padding-inline: clamp(14px, 2vw, 30px); } .app-footer { display: flex; justify-content: space-between; color: var(--hb-muted); background: var(--hb-surface); border-color: var(--hb-border); font-size: .78rem; } h1.fs-3 { font-size: 1.55rem !important; font-weight: 750; letter-spacing: -.03em; } .text-muted { color: var(--hb-muted) !important; } a { text-underline-offset: 3px; } .card { border: 1px solid var(--hb-border); border-radius: var(--hb-radius); background: var(--hb-surface); box-shadow: var(--hb-shadow); overflow: hidden; } .card-header { min-height: 56px; padding: 15px 18px; border-bottom-color: var(--hb-border); background: transparent; } .card-title { font-size: .98rem; font-weight: 700; } .card-body { padding: 18px; } .card-footer { padding: 13px 18px; border-top-color: var(--hb-border); background: transparent; } .btn { min-height: 38px; padding: .48rem .88rem; border-radius: 10px; font-weight: 620; font-size: .86rem; box-shadow: none !important; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .btn:hover:not(:disabled) { transform: translateY(-1px); } .btn:active:not(:disabled) { transform: translateY(0); } .btn-sm { min-height: 32px; padding: .32rem .65rem; border-radius: 8px; font-size: .78rem; } .btn-primary { --bs-btn-bg: var(--hb-primary); --bs-btn-border-color: var(--hb-primary); --bs-btn-hover-bg: var(--hb-primary-hover); --bs-btn-hover-border-color: var(--hb-primary-hover); } .btn-outline-secondary { --bs-btn-color: var(--hb-muted); --bs-btn-border-color: var(--hb-border); --bs-btn-hover-color: var(--hb-text); --bs-btn-hover-bg: color-mix(in srgb,var(--hb-primary) 7%,var(--hb-surface)); --bs-btn-hover-border-color: color-mix(in srgb,var(--hb-primary) 35%,var(--hb-border)); } .btn-link { text-decoration: none; } .btn:disabled { opacity: .5; } .form-label { margin-bottom: 7px; color: var(--hb-text); font-size: .78rem; font-weight: 650; } .form-control, .form-select, .input-group-text { min-height: 40px; border-color: var(--hb-border); border-radius: 10px; background-color: var(--hb-surface); color: var(--hb-text); font-size: .86rem; } .form-control::placeholder { color: color-mix(in srgb,var(--hb-muted) 70%,transparent); } .form-control:focus, .form-select:focus { border-color: color-mix(in srgb,var(--hb-primary) 60%,white); box-shadow: 0 0 0 3px color-mix(in srgb,var(--hb-primary) 12%,transparent); background: var(--hb-surface); } .input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; } .input-group-text { padding-inline: 12px; color: var(--hb-muted); background: color-mix(in srgb,var(--hb-canvas) 70%,var(--hb-surface)); } .form-check-input { width: 1.12rem; height: 1.12rem; border-color: color-mix(in srgb,var(--hb-muted) 45%,transparent); } .table-responsive { scrollbar-color: color-mix(in srgb,var(--hb-muted) 30%,transparent) transparent; } .table { --bs-table-bg: transparent; --bs-table-color: var(--hb-text); --bs-table-hover-bg: color-mix(in srgb,var(--hb-primary) 3.5%,var(--hb-surface)); margin: 0; } .table > :not(caption) > * > * { padding: .82rem .78rem; border-bottom-color: var(--hb-border); vertical-align: middle; } .table thead th { position: relative; padding-block: .72rem; border-bottom-width: 1px; background: color-mix(in srgb,var(--hb-canvas) 64%,var(--hb-surface)); color: var(--hb-muted); font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: none; text-align: center; } .table tbody td { font-size: .82rem; vertical-align: middle; } .table :is(th,td).text-start, .table :is(th,td).cell-main { text-align: left !important; } .table :is(th,td).text-center, .table :is(th,td).cell-center { text-align: center !important; } .table .cell-muted { color: var(--hb-muted); } .table tbody tr:last-child td { border-bottom: 0; } .table img.rounded { border-radius: 10px !important; border: 1px solid var(--hb-border); background: #fff; } .badge { padding: .4em .65em; border-radius: 999px; font-weight: 650; letter-spacing: .01em; } .alert { border: 1px solid color-mix(in srgb,currentColor 16%,transparent); border-radius: 12px; box-shadow: none; } .pagination { gap: 4px; } .page-link { min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 9px; border-radius: 8px !important; border-color: var(--hb-border); color: var(--hb-muted); background: var(--hb-surface); } .active > .page-link { border-color: var(--hb-primary); background: var(--hb-primary); color: #fff; } .modal-content { border: 1px solid var(--hb-border); border-radius: 18px; background: var(--hb-surface); box-shadow: 0 28px 80px rgba(0,0,0,.2); overflow: hidden; } .modal-header { padding: 19px 22px; border-bottom-color: var(--hb-border); } .modal-title { font-size: 1rem; font-weight: 750; } .modal-body { padding: 21px 22px; } .modal-footer { padding: 14px 22px; border-top-color: var(--hb-border); background: color-mix(in srgb,var(--hb-canvas) 48%,var(--hb-surface)); } .dropdown-menu { padding: 7px; border: 1px solid var(--hb-border); border-radius: 12px; background: var(--hb-surface); box-shadow: 0 18px 50px rgba(20,31,52,.14); } .dropdown-item { padding: 9px 11px; border-radius: 8px; font-size: .84rem; } .theme-menu { min-width: 155px; } .theme-menu .dropdown-item.active { background: color-mix(in srgb,var(--hb-primary) 12%,transparent); color: var(--hb-primary); } /* 页面级信息架构 */ .page-hero { min-height: 58px; margin-bottom: 16px !important; padding: 0 2px; } .page-hero h1 { display: flex; align-items: center; gap: 9px; line-height: 1.2; } .page-hero .text-muted { max-width: 980px; font-size: .78rem; line-height: 1.55; } .page-hero > :last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; } .filter-card { margin-bottom: 14px; box-shadow: none; } .filter-card > .card-body { padding: 12px 14px !important; background: color-mix(in srgb,var(--hb-surface) 95%,var(--hb-primary)); } .filter-card form { row-gap: 8px !important; } .filter-card .btn[type="submit"] { color: #fff; border-color: var(--hb-primary); background: var(--hb-primary); } .filter-card .btn-link { color: var(--hb-muted); } .hb-advanced-fields { display: none; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--hb-border); } .hb-advanced-fields.show { display: flex; } .data-card { box-shadow: 0 4px 20px rgba(24,39,75,.04); } .pagination-bar { min-height: 54px; background: color-mix(in srgb,var(--hb-canvas) 42%,var(--hb-surface)); } /* 高密度表格：100 条/页仍能保持清晰扫描节奏 */ .data-card .table > :not(caption) > * > *, .card .table > :not(caption) > * > * { padding: .62rem .68rem; } .data-card .table tbody tr { height: 44px; } .data-card .table thead { position: sticky; top: 0; z-index: 5; } .data-card .table thead th:last-child { position: sticky; right: 0; z-index: 7; box-shadow: -7px 0 12px rgba(17,28,48,.035); } .data-card .table tbody td:last-child { position: sticky; right: 0; z-index: 3; background: var(--hb-surface); box-shadow: -7px 0 12px rgba(17,28,48,.035); } .data-card .table tbody tr:hover td:last-child { background: color-mix(in srgb,var(--hb-primary) 3.5%,var(--hb-surface)); } .data-card .table td .btn { margin-block: -3px; } /* 复杂详情页：卡片标题形成清晰章节，主操作保持可见 */ body:is(.page-productlibrary,.page-selection,.page-ticket,.page-material) .card-header { border-left: 3px solid color-mix(in srgb,var(--hb-primary) 70%,transparent); } body:is(.page-productlibrary,.page-selection,.page-ticket,.page-material) .card-header .card-title::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--hb-primary); vertical-align: 2px; } body:is(.page-productlibrary,.page-selection,.page-ticket) .app-content form > .card:last-of-type, body:is(.page-productlibrary,.page-selection,.page-ticket) .app-content > form > .d-flex:last-child { position: sticky; bottom: 12px; z-index: 20; } .nav-tabs { gap: 3px; border-bottom-color: var(--hb-border); } .nav-tabs .nav-link { padding: 10px 15px; border: 0; border-radius: 9px 9px 0 0; color: var(--hb-muted); font-weight: 650; } .nav-tabs .nav-link.active { color: var(--hb-primary); background: color-mix(in srgb,var(--hb-primary) 9%,var(--hb-surface)); box-shadow: inset 0 -2px var(--hb-primary); } /* 渠道品牌图标 */ .channel-icon { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 7px; border-radius: 7px; color: #fff; font-size: .68rem; font-weight: 800; vertical-align: middle; flex: none; } .channel-icon i { font-size: .85rem; } .channel-applovin { background: linear-gradient(135deg,#6846ff,#26c6b8); } .channel-meta { background: #0866ff; } .channel-youtube { background: #ff0033; } .channel-tiktok { background: #101010; box-shadow: inset 2px 0 #25f4ee,inset -2px 0 #fe2c55; } .channel-newsbreak { background: #f05b35; } .channel-bigo { background: #19b88f; } h1 .channel-icon { width: 34px; height: 34px; border-radius: 10px; font-size: .72rem; } /* 不同业务页面的视觉节奏 */ body:is(.page-applovinreport,.page-tiktokreport,.page-newsbreakreport,.page-productreport,.page-videoreport) .card-header { background: color-mix(in srgb,var(--hb-primary) 3%,var(--hb-surface)); } body.page-materialaudit .table video, body.page-material .table video { border-radius: 9px; border: 1px solid var(--hb-border); background: #080b10; } body.page-permission .tab-content > .tab-pane { min-height: 420px; } body.page-operationlog .table td:nth-child(4) { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .75rem; } body.page-user .table td:first-child, body.page-shop .table td:first-child { font-weight: 700; } /* 上传区域统一为易识别的虚线工作区 */ input[type="file"].form-control { padding: 6px 9px; } input[type="file"]::file-selector-button { margin: -6px 10px -6px -9px; padding: 8px 12px; border: 0; border-right: 1px solid var(--hb-border); background: color-mix(in srgb,var(--hb-primary) 8%,var(--hb-surface)); color: var(--hb-primary); font-weight: 650; } [data-bs-theme="dark"] .data-card .table tbody td:last-child { background: var(--hb-surface); } [data-bs-theme="dark"] .channel-tiktok { background: #050505; } [data-bs-theme="dark"] .w-e-text-container, [data-bs-theme="dark"] .w-e-text-container [data-slate-editor] { background: #111827 !important; color: #e7edf7 !important; } .hb-toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 2000; display: grid; gap: 10px; } .hb-toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 380px; padding: 13px 15px; border: 1px solid var(--hb-border); border-radius: 12px; background: var(--hb-surface); box-shadow: 0 18px 55px rgba(0,0,0,.18); animation: hb-in .2s ease; } .hb-toast i { color: #23a874; font-size: 1.05rem; } @keyframes hb-in { from { opacity: 0; transform: translateY(10px); } } /* Login */ .heiba-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 12% 0%,rgba(54,104,245,.16),transparent 34%), radial-gradient(circle at 95% 95%,rgba(35,190,193,.11),transparent 30%), var(--hb-canvas); } .login-shell { width: min(100%, 440px); } .login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 25px; } .login-brand .brand-mark { width: 46px; height: 46px; border-radius: 14px; } .login-brand strong { display: block; letter-spacing: .16em; font-size: 1.08rem; } .login-brand small { color: var(--hb-muted); } .login-panel { padding: 32px; border: 1px solid var(--hb-border); border-radius: 22px; background: color-mix(in srgb,var(--hb-surface) 94%,transparent); box-shadow: 0 25px 80px rgba(28,43,74,.12); backdrop-filter: blur(18px); } .login-panel h1 { margin: 0; font-size: 1.65rem; font-weight: 780; letter-spacing: -.035em; } .login-panel .login-subtitle { margin: 7px 0 24px; color: var(--hb-muted); font-size: .86rem; } .login-panel .input-group-text { border-left: 0; flex: 0 0 40px; justify-content: center; } .heiba-login .bi { display: inline-block; width: 1em; height: 1em; line-height: 1; vertical-align: -.125em; } .login-panel .form-control { border-right: 0; } .login-theme { position: fixed; top: 20px; right: 20px; } @media (max-width: 991.98px) { .app-header .container-fluid { padding-inline: 12px; } .app-content { padding-top: 16px; } .app-content > .container-fluid { padding-inline: 12px; } .app-sidebar { box-shadow: 18px 0 55px rgba(0,0,0,.28); } .d-flex.justify-content-between.align-items-center.mb-3 { align-items: flex-start !important; gap: 12px; } .card-body form.d-flex { align-items: stretch !important; } .card-body form.d-flex > .form-control, .card-body form.d-flex > .form-select, .card-body form.d-flex > .input-group { width: 100% !important; } .card-body form.d-flex > .btn { flex: 1; } .modal-dialog { margin: 12px; } .app-footer { padding-inline: 14px; } } @media (max-width: 575.98px) { html { font-size: 13.5px; } .app-header { min-height: 60px; } .user-menu .dropdown-toggle::after, .user-menu .d-none { display: none !important; } .card { border-radius: 12px; } .card-body { padding: 14px; } .btn { min-height: 40px; } .app-footer small { display: none; } .login-panel { padding: 24px 20px; border-radius: 18px; } } /* 全站站内沟通 */ .chat-nav-toggle { position: relative; width: 42px; height: 42px; } .chat-nav-toggle > i { font-size: 1.25rem; line-height: 1; } .chat-nav-badge { position: absolute; right: 1px; top: 2px; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--bs-body-bg); border-radius: 9px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; } .chat-offcanvas { width: min(760px, 96vw) !important; } .chat-panel-head { min-height: 70px; border-bottom: 1px solid var(--hb-border); } .chat-panel-head h5 { font-weight: 700; } .chat-panel-head small { display: block; margin-top: 2px; } .chat-shell { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 0; } .chat-contacts { min-width: 0; border-right: 1px solid var(--hb-border); background: color-mix(in srgb, var(--bs-body-bg) 94%, var(--bs-secondary-bg)); } .chat-search { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 8px 10px; border: 1px solid var(--hb-border); border-radius: 10px; background: var(--bs-body-bg); } .chat-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--bs-body-color); font-size: 13px; } .chat-user-list { overflow-y: auto; height: calc(100vh - 142px); } .chat-user { display: flex; width: 100%; align-items: center; gap: 10px; padding: 11px 12px; border: 0; border-bottom: 1px solid color-mix(in srgb,var(--hb-border) 65%,transparent); background: transparent; color: inherit; text-align: left; } .chat-user:hover,.chat-user.active { background: color-mix(in srgb,var(--bs-primary) 10%,transparent); } .chat-avatar { position: relative; display: inline-flex; flex: 0 0 38px; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg,#4f8df7,#20b8cb); color:#fff; font-weight:700; } .chat-avatar img { width:100%;height:100%;border-radius:50%;object-fit:cover; } .chat-avatar i { position:absolute; right:0; bottom:0; width:10px; height:10px; border:2px solid var(--bs-body-bg); border-radius:50%; background:#94a3b8; } .chat-avatar i.online { background:#22c55e; } .chat-user-copy { min-width:0; flex:1; } .chat-user-copy strong,.chat-user-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .chat-user-copy strong { font-size:13px; }.chat-user-copy small { margin-top:3px; color:var(--hb-muted); font-size:11px; } .chat-user-unread { min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#ef4444; color:#fff; font-size:11px; line-height:20px; text-align:center; } .chat-dialog { position:relative; display:grid; grid-template-rows:auto 1fr auto auto auto; min-width:0; min-height:0; } .chat-dialog.chat-dragging::after { content:'松开以发送图片或视频'; position:absolute; inset:70px 12px 82px; z-index:5; display:grid; place-items:center; border:2px dashed var(--bs-primary); border-radius:14px; background:color-mix(in srgb,var(--bs-primary) 12%,var(--bs-body-bg)); color:var(--bs-primary); font-weight:700; pointer-events:none; } .chat-dialog-head { display:flex; align-items:center; gap:10px; min-height:66px; padding:10px 16px; border-bottom:1px solid var(--hb-border); } .chat-dialog-head strong,.chat-dialog-head small { display:block; }.chat-dialog-head small { color:var(--hb-muted); font-size:11px; margin-top:2px; } .chat-dialog-head .chat-avatar { flex-basis:36px;width:36px;height:36px; } .chat-messages { overflow-y:auto; padding:18px; background:color-mix(in srgb,var(--bs-secondary-bg) 48%,var(--bs-body-bg)); } .chat-welcome,.chat-empty { padding:28px 12px; color:var(--hb-muted); font-size:12px; text-align:center; }.chat-welcome i { display:block;font-size:30px;margin-bottom:8px; } .chat-bubble-row { display:flex; align-items:flex-end; gap:7px; margin:9px 0; }.chat-bubble-row.mine { flex-direction:row-reverse; justify-content:flex-start; }.chat-message-avatar { flex-basis:28px;width:28px;height:28px;font-size:11px; }.chat-message-avatar i { display:none; } .chat-bubble { max-width:78%; padding:9px 11px 6px; border:1px solid var(--hb-border); border-radius:4px 14px 14px 14px; background:var(--bs-body-bg); box-shadow:0 2px 7px rgba(15,23,42,.05); } .chat-bubble-row.mine .chat-bubble { border-color:#4388ed; border-radius:14px 4px 14px 14px; background:#4388ed; color:#fff; } .chat-bubble span { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }.chat-bubble small { display:block; margin-top:4px; opacity:.65; font-size:9px; text-align:right; } .chat-media-bubble { padding:5px; overflow:hidden; }.chat-media-open { position:relative; display:block; max-width:280px; padding:0; border:0; border-radius:10px; overflow:hidden; background:#111; color:#fff; text-align:left; }.chat-media-open img { display:block; width:100%; max-height:280px; object-fit:cover; }.chat-video-thumb video { display:block; width:240px; height:150px; object-fit:cover; opacity:.78; }.chat-video-thumb>i { position:absolute; left:50%; top:50%; translate:-50% -60%; font-size:40px; text-shadow:0 2px 8px #000; }.chat-video-thumb>span { position:absolute; left:8px; right:8px; bottom:7px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; text-shadow:0 1px 4px #000; } .chat-typing { min-height:22px; padding:3px 16px; color:var(--hb-muted); font-size:11px; } .chat-file-preview { position:relative; display:flex; align-items:center; gap:10px; margin:0 12px 4px; padding:8px; border:1px solid var(--hb-border); border-radius:10px; background:var(--bs-secondary-bg); }.chat-file-preview>img,.chat-file-preview>video { width:64px; height:52px; border-radius:7px; object-fit:cover; background:#111; }.chat-file-preview>div { min-width:0; flex:1; }.chat-file-preview strong,.chat-file-preview small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.chat-file-preview strong { font-size:12px; }.chat-file-preview small { margin-top:3px; color:var(--hb-muted); font-size:10px; }.chat-file-preview button { border:0; background:transparent; color:var(--hb-muted); }.chat-file-preview>b { min-width:38px; padding:3px 6px; border-radius:10px; background:var(--bs-primary); color:#fff; font-size:10px; text-align:center; } .chat-compose { display:flex; gap:8px; padding:10px 12px 14px; border-top:1px solid var(--hb-border); }.chat-compose textarea { flex:1; resize:none; padding:9px 11px; border:1px solid var(--hb-border); border-radius:10px; outline:0; background:var(--bs-body-bg); color:var(--bs-body-color); font-size:13px; }.chat-compose textarea:focus { border-color:var(--bs-primary); }.chat-compose button { width:42px; }.chat-attach { display:grid; width:42px; place-items:center; padding:0; font-size:18px !important; } .chat-media-modal-content .modal-body { display:grid; min-height:240px; max-height:80vh; place-items:center; padding:12px; background:#0b0f18; }.chat-media-modal-content img,.chat-media-modal-content video { display:block; max-width:100%; max-height:75vh; object-fit:contain; } @media(max-width:600px){.chat-shell{grid-template-columns:130px minmax(0,1fr)}.chat-search{margin:8px;padding:7px}.chat-user{padding:9px 7px}.chat-avatar{flex-basis:30px;width:30px;height:30px}.chat-user-copy small{display:none}.chat-messages{padding:10px}.chat-bubble{max-width:90%}} @media print { .app-sidebar, .app-header, .app-footer, .d-print-none { display: none !important; } .app-main { margin: 0 !important; background: #fff; } .card { box-shadow: none; } } /* ===== 全站排版校准：所有业务页只允许这一套字号阶梯 ===== 11px 辅助标注 / 12px 次要信息 / 13px 表格按钮 / 14px 正文 / 15px 区块标题 / 22px 页面标题 */ html { font-size: 14px !important; } body.heiba-app, [data-bs-theme] .scrape-task, [data-bs-theme] .adspend-report, [data-bs-theme] .report-anomaly { font-size: 14px !important; line-height: 1.5; } body.heiba-app h1.fs-3, [data-bs-theme] .scrape-task .page-title h1, [data-bs-theme] .adspend-report h1, [data-bs-theme] .report-anomaly h1 { margin: 0; font-size: 22px !important; line-height: 1.28 !important; font-weight: 750 !important; letter-spacing: -.025em; } body.heiba-app h2, body.heiba-app h3.card-title, body.heiba-app .card-title, [data-bs-theme] .scrape-task .ibox-title h2, [data-bs-theme] .adspend-report h2, [data-bs-theme] .report-anomaly h2 { font-size: 15px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: -.01em; } body.heiba-app :is(p,.form-text,.field,.rule), [data-bs-theme] .scrape-task :is(.crumb,.rule b,.rule span,.field label,.empty,.pager), [data-bs-theme] .adspend-report :is(.eyebrow,.field,.filter-help,.hint,.metric-line), [data-bs-theme] .report-anomaly :is(.eyebrow,.field,.filter-help,.hint,.metric-line,.scope-meta) { font-size: 13px !important; } body.heiba-app :is(.small,small,.text-muted), [data-bs-theme] .scrape-task :is(.deadline,.stat-note,.combo-empty,.status,.badge,.foot), [data-bs-theme] .adspend-report :is(.stat-note,.count-badge,.tag,.footnote), [data-bs-theme] .report-anomaly :is(.count-badge,.tag,.footnote,.filtered-note) { font-size: 12px !important; } body.heiba-app :is(.btn,.form-control,.form-select,.input-group-text,.dropdown-item,.page-link), [data-bs-theme] .scrape-task :is(.btn,.control,.combo-input,.combo-item), [data-bs-theme] .adspend-report :is(.button,select,.combo-input,.combo-item,.date-range input), [data-bs-theme] .report-anomaly :is(.button,select,.combo-input,.combo-item,.date-range input) { font-size: 13px !important; } body.heiba-app .table, body.heiba-app .table tbody td, [data-bs-theme] .scrape-task :is(.table,.summary-table), [data-bs-theme] .adspend-report table, [data-bs-theme] .report-anomaly table { font-size: 13px !important; line-height: 1.42; } body.heiba-app .table thead th, [data-bs-theme] .scrape-task :is(.table thead th,.summary-table th), [data-bs-theme] .adspend-report thead th, [data-bs-theme] .report-anomaly thead th { font-size: 12px !important; line-height: 1.35; font-weight: 700 !important; } [data-bs-theme] .scrape-task .stat-value, [data-bs-theme] .adspend-report .kpi-value, [data-bs-theme] .report-anomaly .metric-value { font-size: 26px !important; line-height: 1.15 !important; font-weight: 740; } /* 统一独立页面的内容画布和内外间距，消除页面切换时左右跳动。 */ [data-bs-theme] .scrape-task, [data-bs-theme] .adspend-report, [data-bs-theme] .report-anomaly { width: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } [data-bs-theme] .scrape-task .page-title, [data-bs-theme] .adspend-report .page-heading, [data-bs-theme] .report-anomaly .page-heading { margin-bottom: 16px !important; align-items: flex-end; } [data-bs-theme] .scrape-task .ibox, [data-bs-theme] .adspend-report :is(.filter-card,.report-card,.kpi), [data-bs-theme] .report-anomaly :is(.filter-card,.anomaly-card) { border-radius: var(--hb-radius) !important; border-color: var(--hb-border) !important; box-shadow: var(--hb-shadow) !important; } [data-bs-theme] .adspend-report .panel, [data-bs-theme] .report-anomaly .panel, [data-bs-theme] .scrape-task :is(.ibox,.stat) { border-radius: var(--hb-radius) !important; border-color: var(--hb-border) !important; box-shadow: var(--hb-shadow) !important; } [data-bs-theme] .adspend-report :is(.filters,.dimensions), [data-bs-theme] .report-anomaly .panel { padding: 16px !important; } [data-bs-theme] .adspend-report .kpis { margin: 14px 0 !important; gap: 10px !important; } [data-bs-theme] .adspend-report .kpi, [data-bs-theme] .scrape-task .stat { padding: 14px 15px !important; } [data-bs-theme] .adspend-report .kpi-value { margin: 8px 0 6px !important; } [data-bs-theme] .scrape-task .stat-value { margin: 7px 0 !important; } [data-bs-theme] .adspend-report tbody :is(td,th) { height: 44px !important; padding: 9px 12px !important; } [data-bs-theme] .adspend-report thead th { padding: 10px 12px !important; } [data-bs-theme] .scrape-task .table :is(th,td) { padding: 9px 10px !important; } [data-bs-theme] .report-anomaly :is(th,td) { padding: 9px 10px !important; } [data-bs-theme] .scrape-task .ibox-title, [data-bs-theme] .adspend-report .section-title, [data-bs-theme] .report-anomaly .section-title { min-height: 52px; padding: 13px 16px !important; } [data-bs-theme] .scrape-task .ibox-content, [data-bs-theme] .adspend-report .section-body, [data-bs-theme] .report-anomaly .section-body { padding: 16px !important; } /* 表单网格和详情页对齐 */ .app-content .row { --bs-gutter-x: 14px; --bs-gutter-y: 14px; } .app-content .mb-3 { margin-bottom: 14px !important; } .modal-body .row { --bs-gutter-x: 16px; --bs-gutter-y: 12px; } .modal-body .form-label { min-height: 18px; } .card-body > dl.row { margin-bottom: 0; } .card-body > dl.row > dt { color: var(--hb-muted); font-size: 12px; font-weight: 650; } .card-body > dl.row > dd { font-size: 13px; } @media (max-width: 575.98px) { html { font-size: 14px !important; } body.heiba-app h1.fs-3, [data-bs-theme] .scrape-task .page-title h1, [data-bs-theme] .adspend-report h1, [data-bs-theme] .report-anomaly h1 { font-size: 20px !important; } }