/* ============================================================ 管理后台主题桥接 · 阶段4（Route A 调和） 把 design-tokens 映射到 OneUI/Bootstrap 取色变量 + 定向覆盖硬编码主色 加载于 oneui.min-5.6.css 之后；依赖 design-tokens.css 提供 --accent-*/--radius-*/--font-sans 明暗双主题：--accent-* 随 [data-theme] 翻转；OneUI 暗表面由 .dark-mode 自理 ============================================================ */ /* ---- Layer 1：变量映射（:root 一次，明暗共用——OneUI .dark-mode 不重设 --bs-primary）---- */ :root { --bs-primary: var(--accent-primary); --bs-primary-rgb: var(--accent-primary-rgb); --bs-link-color: var(--accent-primary); --bs-link-hover-color: var(--accent-active); --bs-border-radius: var(--radius-md); --bs-body-font-family: var(--font-sans); } /* ---- Layer 2：OneUI 硬编码主色的组件定向覆盖（用令牌，自动随明暗）---- */ /* 主按钮（BS5.3 按钮变量 + 显式兜底）*/ .btn-primary { --bs-btn-bg: var(--accent-primary); --bs-btn-border-color: var(--accent-primary); --bs-btn-hover-bg: var(--accent-active); --bs-btn-hover-border-color: var(--accent-active); --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); background-color: var(--accent-primary); border-color: var(--accent-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--accent-active); border-color: var(--accent-active); } /* OneUI「alt」主色按钮（登录/部分操作按钮用；OneUI 以 --bs-btn-* 字面量定义，须在变体上覆盖。 半透明 accent 作底——明暗主题皆可读（暗色下 accent 自动转亮蓝））*/ .btn-alt-primary { --bs-btn-color: var(--accent-primary); --bs-btn-bg: rgba(var(--accent-primary-rgb), 0.14); --bs-btn-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--accent-primary); --bs-btn-hover-border-color: var(--accent-primary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); } /* 链接 */ a { color: var(--accent-primary); } a:hover { color: var(--accent-active); } /* ============================================================ SaaS 极客风侧栏菜单项 (UI-UX-PRO-MAX) ============================================================ */ /* 默认态：去蓝噪、低调中性哑光灰 */ .nav-main-link { color: rgba(255, 255, 255, 0.45) !important; font-weight: 500 !important; font-size: 13px !important; border-radius: var(--radius-md) !important; padding: 10px 16px !important; margin: 2px 8px !important; transition: all 0.2s var(--ease-spring) !important; border-left: 3px solid transparent !important; /* 占位以防抖动 */ } /* 默认图标一致色值 */ .nav-main-link-icon { color: rgba(255, 255, 255, 0.45) !important; transition: color 0.2s var(--ease-spring) !important; margin-right: 12px !important; } /* 悬停态：微白磨砂底 + 选项/图标变白 + 平滑右移 4px */ .nav-main-link:hover { background-color: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; transform: translateX(4px); } .nav-main-link:hover .nav-main-link-icon { color: #ffffff !important; } /* 激活态：半透明品牌蓝底 + 文字高亮品牌蓝 + 左侧 3px 垂直指示条 */ .nav-main-link.active { background-color: rgba(var(--accent-primary-rgb), 0.08) !important; color: var(--accent-primary) !important; border-left: 3px solid var(--accent-primary) !important; padding-left: 13px !important; /* 补偿 3px 边框 */ } .nav-main-link.active .nav-main-link-icon { color: var(--accent-primary) !important; } /* 分页 */ .page-link { color: var(--accent-primary); } .page-item.active .page-link { background-color: var(--accent-primary); border-color: var(--accent-primary); } /* 主色徽章 / 工具类 */ .badge.bg-primary, .bg-primary { background-color: var(--accent-primary) !important; } .text-primary { color: var(--accent-primary) !important; } .border-primary { border-color: var(--accent-primary) !important; } /* 表单聚焦环（用 token rgb）*/ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 0.25rem rgba(var(--accent-primary-rgb), 0.25); } .form-check-input:checked { background-color: var(--accent-primary); border-color: var(--accent-primary); } /* 卡片块圆角对齐令牌 */ .block { border-radius: var(--radius-md); } /* ============================================================ Layer 3：表面重塑（阶段4 增量2，更贴近公开站"克制蓝灰"） 均用主题令牌——浅色用 :root 值、深色随 [data-theme="dark"] 翻转； 侧栏为 OneUI 恒暗设计（sidebar-dark），用固定中性近黑（不随主题翻转） ============================================================ */ /* 页头：实心表面 + 底边框；同时修复暗色下页头偏白（Task3 移除了旧 JS 的 bg 切换）*/ #page-header { background-color: var(--bg-base); border-bottom: 1px solid var(--border-default); backdrop-filter: none; } /* 内容卡片块：细边框 + 令牌圆角，呈 GitHub/Linear 式干净卡片 */ .block { border: 1px solid var(--border-default); border-radius: var(--radius-md); } /* 侧栏：去蓝调中性碳黑 + 右侧细描边物理割断 */ .sidebar-dark #sidebar { background-color: #09090b !important; border-right: 1px solid var(--border-default) !important; } #sidebar .content-header { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } /* 侧栏分组小标题 (Group Heading) 极简大写 */ .nav-main-heading { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: rgba(255, 255, 255, 0.3) !important; font-weight: 700 !important; padding: 24px 16px 8px !important; } /* 暗色基底兜底（关键）：OneUI 暗色只给组件类/卡片着色，不给 body/容器基底着色， 导致基底仍为浅色、而 OneUI 已把文字转浅 → 浅底浅字不可见。此处显式补暗底+亮字。 */ .dark-mode body, .dark-mode #page-container, .dark-mode #main-container, .dark-mode .content { background-color: var(--bg-base); color: var(--text-secondary); } /* ============================================================ Layer 4：UX 打磨（依 ui-ux-pro-max 规则集，针对数据密集后台） ============================================================ */ /* 卡片一致阴影层级（elevation-consistent）——OneUI 默认 box-shadow:none，故 !important 覆盖； 配合 Layer3 细边框 = GitHub/Linear 式干净卡片 */ .block { box-shadow: var(--shadow-sm) !important; } /* 数据表：等宽数字使数列纵向对齐不跳动（number-tabular）+ 行悬停反馈底色（state-clarity）*/ .table { font-variant-numeric: tabular-nums; --bs-table-hover-bg: var(--bg-subtle); } /* 键盘聚焦可见性：品牌色焦点环，明暗皆清晰（accessibility · focus-states）*/ .btn:focus-visible, .nav-main-link:focus-visible, .page-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* ============================================================ SaaS 级 glass-metric-card 指标卡片 (UI-UX-PRO-MAX) ============================================================ */ .glass-metric-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: var(--shadow-sm); transition: all 0.2s var(--ease-spring); cursor: pointer; text-decoration: none !important; height: 100%; } .glass-metric-card:hover { transform: translateY(-2px); border-color: var(--accent-primary); box-shadow: var(--shadow-glow) !important; } .glass-metric-value { font-size: 2.25rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .glass-metric-label { font-size: 13px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px; margin: 0; } /* ============================================================ 全局 OneUI 控件深度 UI-UX 美化 (UI-UX-PRO-MAX) ============================================================ */ /* 按钮微交互悬停 */ .btn { transition: all 0.2s var(--ease-spring) !important; } .btn:hover { transform: translateY(-1px); } .btn-alt-primary:hover { box-shadow: var(--shadow-sm); } /* 所有的 .block 卡片块 (Linear-like 阴影) */ .block { border: 1px solid var(--border-default) !important; background-color: var(--bg-surface0) !important; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important; transition: all 0.2s var(--ease-spring); } [data-theme="dark"] .block { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12), 0 8px 32px rgba(0, 0, 0, 0.4) !important; border-color: rgba(63, 63, 70, 0.4) !important; } .block-header-default { background-color: var(--bg-subtle) !important; border-bottom: 1px solid var(--border-default) !important; } .bg-body-light { background-color: var(--bg-subtle) !important; border-top: 1px solid var(--border-default) !important; } /* 输入框与下拉选择框 */ .form-control, .form-select { border-radius: var(--radius-md) !important; border: 1px solid var(--border-default) !important; background-color: var(--bg-surface0) !important; color: var(--text-primary) !important; transition: all 0.2s var(--ease-spring) !important; } .form-control:focus, .form-select:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 4px rgba(var(--accent-primary-rgb), 0.15) !important; background-color: var(--bg-surface0) !important; color: var(--text-primary) !important; } /* 高级语义状态徽章 */ .badge { font-weight: 700 !important; padding: 5px 10px !important; border-radius: var(--radius-xs) !important; } .badge.bg-success { background-color: rgba(22, 163, 74, 0.12) !important; color: var(--accent-success) !important; border: 1px solid rgba(22, 163, 74, 0.25) !important; } .badge.bg-danger { background-color: rgba(220, 38, 38, 0.12) !important; color: var(--accent-error) !important; border: 1px solid rgba(220, 38, 38, 0.25) !important; } .badge.bg-warning { background-color: rgba(202, 138, 4, 0.12) !important; color: var(--accent-warning) !important; border: 1px solid rgba(202, 138, 4, 0.25) !important; } .badge.bg-info { background-color: rgba(2, 132, 199, 0.12) !important; color: var(--accent-info) !important; border: 1px solid rgba(2, 132, 199, 0.25) !important; } .badge.bg-secondary { background-color: rgba(113, 113, 122, 0.12) !important; color: var(--text-muted) !important; border: 1px solid rgba(113, 113, 122, 0.25) !important; } /* 干净高对比表格 & Geist-like 表头 */ .table { color: var(--text-secondary) !important; border-color: var(--border-default) !important; } .table th { color: var(--text-muted) !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; background-color: var(--bg-subtle) !important; border-bottom: 2px solid var(--border-default) !important; padding: 12px 16px !important; } .table td { background-color: var(--bg-surface0) !important; padding: 12px 16px !important; } /* 弹出模态框 (Modal) 美化 */ .modal-content { background-color: var(--bg-surface0) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-xl) !important; } .modal-header { border-bottom: 1px solid var(--border-default) !important; background-color: var(--bg-subtle) !important; } .modal-footer { border-top: 1px solid var(--border-default) !important; background-color: var(--bg-subtle) !important; } /* 干净的一致圆角和排版修正 */ .block-rounded { border-radius: var(--radius-lg) !important; } .block-content { padding: 1.75rem !important; /* 拓宽内边距提升呼吸感 */ } .content-heading { color: var(--text-primary) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; /* Geist-like 紧缩 */ font-size: 1.5rem !important; } /* 全站正文行高覆盖 */ body, p, td, li, label { line-height: 1.6 !important; } /* 前沿表单聚焦限宽容器 */ .form-layout-focused { max-width: 800px; margin: 0 auto; } /* 表单行呼吸间距打磨 */ .form-layout-focused .mb-4 { margin-bottom: 1.75rem !important; } /* ============================================================ 进度条美化 (UI-UX-PRO-MAX) ============================================================ */ .progress { background-color: var(--bg-muted) !important; border-radius: var(--radius-full) !important; overflow: hidden !important; height: 10px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .progress-bar { background-color: var(--accent-primary) !important; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important; background-size: 1rem 1rem !important; transition: width 0.4s ease !important; border-radius: var(--radius-full) !important; } /* ============================================================ 设备管理 UI-UX-PRO-MAX 高阶重塑 (Vercel Geist / Linear 风格) ============================================================ */ /* 1. 极致极简无界表格系统 */ .device-table-wrap, .table-responsive { border: 1px solid var(--border-default) !important; border-radius: var(--radius-lg) !important; background-color: var(--bg-surface0) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden !important; } /* 移除 Bootstrap table 粗重网格线和外边框 */ .device-table, .table-vcenter { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; border: none !important; margin-bottom: 0 !important; } .device-table th, .device-table td, .table-vcenter th, .table-vcenter td { border: none !important; border-bottom: 1px solid var(--border-default) !important; /* 仅保留水平底线 */ } /* 移除最后一行多余的底线 */ .device-table tbody tr:last-child td, .table-vcenter tbody tr:last-child td { border-bottom: none !important; } /* 表头设计：大写小字体、加宽字距、淡灰色 */ .device-table thead th, .table-vcenter thead th { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--text-muted) !important; background-color: var(--bg-muted) !important; padding: 12px 16px !important; border-bottom: 1px solid var(--border-default) !important; white-space: nowrap !important; } /* 单元格排版与呼吸感 */ .device-table tbody td, .table-vcenter tbody td { padding: 14px 16px !important; vertical-align: middle !important; color: var(--text-default) !important; background-color: transparent !important; } /* 行悬浮平滑淡入动效 */ .device-table tbody tr, .table-vcenter tbody tr { transition: background-color 0.15s ease !important; } .device-table tbody tr:hover td, .table-vcenter tbody tr:hover td { background-color: rgba(var(--accent-primary-rgb), 0.02) !important; } /* 2. 数据与文字排版优化 */ .device-primary { font-size: 13px !important; font-weight: 600 !important; color: var(--text-default) !important; line-height: 1.4 !important; } .device-subtitle { margin-top: 4px !important; color: var(--text-muted) !important; font-size: 11px !important; line-height: 1.4 !important; } /* 等宽数据字型渲染 */ .device-mono, .is-mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; font-size: 12px !important; font-variant-numeric: tabular-nums !important; } /* 设备指纹单色徽章 */ .device-mono { display: inline-block !important; padding: 4px 8px !important; border-radius: var(--radius-sm) !important; background-color: var(--bg-muted) !important; color: var(--accent-primary) !important; border: 1px solid var(--border-default) !important; word-break: break-all !important; } /* 指纹标记 label */ .device-fingerprint-label { display: inline-block !important; margin-bottom: 4px !important; padding: 2px 6px !important; border-radius: var(--radius-sm) !important; background-color: rgba(var(--accent-primary-rgb), 0.08) !important; color: var(--accent-primary) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; } /* 属性元数据对齐 */ .device-meta-list { display: flex !important; flex-direction: column !important; gap: 4px !important; } .device-meta-item { display: flex !important; align-items: center !important; font-size: 12px !important; } .device-meta-key { width: 32px !important; color: var(--text-muted) !important; font-weight: 600 !important; flex-shrink: 0 !important; } .device-meta-value { color: var(--text-default) !important; } /* 最后活跃相对时间 */ .device-last-seen strong { color: var(--text-default) !important; font-size: 13px !important; font-weight: 600 !important; } .device-last-seen span { color: var(--text-muted) !important; font-size: 11px !important; } /* 3. 状态胶囊 Pill Badges 现代化 */ .device-table .badge, .table-vcenter .badge, .badge { font-size: 11px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: var(--radius-full) !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; line-height: 1 !important; } /* 绿色成功微光胶囊 */ .badge.bg-success { background-color: rgba(16, 185, 129, 0.08) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.16) !important; } /* 红色错误微光胶囊 */ .badge.bg-danger { background-color: rgba(239, 68, 68, 0.08) !important; color: #ef4444 !important; border: 1px solid rgba(239, 68, 68, 0.16) !important; } /* 橙色警告微光胶囊 */ .badge.bg-warning, .badge.bg-warning.text-dark { background-color: rgba(245, 158, 11, 0.08) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.16) !important; } /* 灰色次要微光胶囊 */ .badge.bg-secondary { background-color: rgba(100, 116, 139, 0.08) !important; color: #64748b !important; border: 1px solid rgba(100, 116, 139, 0.16) !important; } /* 蓝色主色微光胶囊 */ .badge.bg-primary { background-color: rgba(var(--accent-primary-rgb), 0.08) !important; color: var(--accent-primary) !important; border: 1px solid rgba(var(--accent-primary-rgb), 0.16) !important; } /* 4. 搜索与筛选控制栏抛光 */ .form-control, .form-select { background-color: var(--bg-surface0) !important; border: 1px solid var(--border-default) !important; color: var(--text-default) !important; border-radius: var(--radius-md) !important; padding: 8px 14px !important; font-size: 13px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .form-control:focus, .form-select:focus { border-color: var(--accent-primary) !important; box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.15) !important; background-color: var(--bg-surface0) !important; color: var(--text-default) !important; } .form-control::placeholder { color: var(--text-muted) !important; opacity: 0.7 !important; } /* 5. 详情页键值对网格 (device_detail.php) */ /* 覆盖详情页元数据展示 table（两列键值对表格，无 thead） */ .col-xl-8 .block-content table.table-bordered, .col-xl-4 .block-content table.table-bordered { border-collapse: collapse !important; border: none !important; width: 100% !important; margin-bottom: 0 !important; } .col-xl-8 .block-content table.table-bordered tr, .col-xl-4 .block-content table.table-bordered tr { border-bottom: 1px dashed var(--border-default) !important; } .col-xl-8 .block-content table.table-bordered tr:last-child, .col-xl-4 .block-content table.table-bordered tr:last-child { border-bottom: none !important; } .col-xl-8 .block-content table.table-bordered th, .col-xl-4 .block-content table.table-bordered th { background-color: transparent !important; border: none !important; color: var(--text-muted) !important; font-size: 13px !important; font-weight: 500 !important; padding: 12px 0 !important; text-align: left !important; width: 140px !important; } .col-xl-8 .block-content table.table-bordered td, .col-xl-4 .block-content table.table-bordered td { background-color: transparent !important; border: none !important; color: var(--text-default) !important; font-size: 13px !important; font-weight: 600 !important; padding: 12px 0 !important; text-align: right !important; } /* 调整详情页中内嵌徽章的居中对齐 */ .col-xl-8 .block-content table.table-bordered td .badge, .col-xl-4 .block-content table.table-bordered td .badge { float: right !important; } /* 5b. 多列数据表格重置（有 thead 的表格，如"次数调整记录"）*/ /* thead ~ tbody 仅匹配 thead 之后的 tbody，键值对表格无 thead 不受影响 */ .col-xl-8 .block-content table.table-bordered thead th, .col-xl-4 .block-content table.table-bordered thead th { width: auto !important; text-align: left !important; padding: 12px 16px !important; background-color: var(--bg-muted) !important; border-bottom: 1px solid var(--border-default) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--text-muted) !important; white-space: nowrap !important; } .col-xl-8 .block-content table.table-bordered thead ~ tbody td, .col-xl-4 .block-content table.table-bordered thead ~ tbody td { text-align: left !important; width: auto !important; padding: 14px 16px !important; vertical-align: middle !important; border-bottom: 1px solid var(--border-default) !important; } .col-xl-8 .block-content table.table-bordered thead ~ tbody tr:last-child td, .col-xl-4 .block-content table.table-bordered thead ~ tbody tr:last-child td { border-bottom: none !important; } /* 6. 操作按钮组微交互 */ .device-actions { display: inline-flex !important; gap: 6px !important; } .device-actions .btn { border-radius: var(--radius-md) !important; padding: 6px 10px !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: all 0.15s ease !important; border: 1px solid var(--border-default) !important; background-color: var(--bg-muted) !important; color: var(--text-default) !important; } .device-actions .btn:hover { background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #ffffff !important; transform: translateY(-1px) !important; box-shadow: var(--shadow-sm) !important; } .device-actions form { margin-bottom: 0 !important; } /* ============================================================ 首页内容管理 UI-UX-PRO-MAX 高阶重塑 (Linear 极客风 Tab/卡片) ============================================================ */ /* 1. 极客无界选项卡 (Borderless Pill Tabs) */ .nav-tabs-block { border-bottom: none !important; background-color: var(--bg-muted) !important; padding: 6px !important; border-radius: var(--radius-lg) !important; display: flex !important; gap: 4px !important; margin-bottom: 24px !important; } .nav-tabs-block .nav-item { flex: 1 !important; text-align: center !important; } .nav-tabs-block .nav-link { width: 100% !important; border: none !important; border-radius: var(--radius-md) !important; padding: 10px 16px !important; color: var(--text-muted) !important; font-size: 13px !important; font-weight: 600 !important; background-color: transparent !important; transition: all 0.2s ease !important; position: relative !important; } .nav-tabs-block .nav-link:hover { color: var(--text-default) !important; background-color: rgba(255, 255, 255, 0.03) !important; } .nav-tabs-block .nav-link.active { color: var(--accent-primary) !important; background-color: var(--bg-surface0) !important; box-shadow: var(--shadow-sm) !important; } /* 选项卡内容区外距 */ .tab-content { padding: 12px 0 0 0 !important; } /* 2. 微光条目分组卡片 (Subtle Grouping Cards) */ .tab-pane > form > .mb-4 { background-color: var(--bg-muted) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-lg) !important; padding: 24px !important; margin-bottom: 24px !important; box-shadow: var(--shadow-sm) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } .tab-pane > form > .mb-4:hover { border-color: rgba(var(--accent-primary-rgb), 0.15) !important; box-shadow: var(--shadow-md) !important; } /* 条目大标题 (e.g. Hero 1, 服务 1) */ .tab-pane > form > .mb-4 h4 { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--text-default) !important; margin-bottom: 20px !important; border-bottom: 1px solid var(--border-default) !important; padding-bottom: 12px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; } /* 删除按钮微尘化 */ .delete-item { font-size: 11px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: var(--radius-md) !important; background-color: transparent !important; border: 1px solid var(--border-default) !important; color: var(--text-muted) !important; float: none !important; /* 清除原有 float */ transition: all 0.15s ease !important; } .delete-item:hover { background-color: rgba(239, 68, 68, 0.08) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #ef4444 !important; } /* 3. 拼合输入组与上传按钮优化 */ .input-group { box-shadow: none !important; } .input-group .form-control { border-radius: var(--radius-md) 0 0 var(--radius-md) !important; } .input-group input[type="file"].form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; border-left: none !important; cursor: pointer !important; } /* 媒体预览容器 (图片/视频) */ .tab-pane .mb-3 img, .tab-pane .mb-3 video { border-radius: var(--radius-md) !important; border: 1px solid var(--border-default) !important; box-shadow: var(--shadow-md) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; background-color: var(--bg-surface0) !important; } .tab-pane .mb-3 img:hover, .tab-pane .mb-3 video:hover { transform: scale(1.02) !important; box-shadow: var(--shadow-lg) !important; } /* 4. 更新/添加动作按钮微动效 */ .tab-pane .btn-primary { background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #ffffff !important; font-weight: 600 !important; font-size: 13px !important; padding: 10px 20px !important; border-radius: var(--radius-md) !important; transition: all 0.15s ease !important; box-shadow: var(--shadow-sm) !important; } .tab-pane .btn-primary:hover { background-color: var(--accent-active) !important; border-color: var(--accent-active) !important; transform: translateY(-1px) !important; box-shadow: var(--shadow-md) !important; } .tab-pane .btn-success { background-color: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.16) !important; color: #10b981 !important; font-weight: 600 !important; font-size: 13px !important; padding: 10px 20px !important; border-radius: var(--radius-md) !important; transition: all 0.15s ease !important; } .tab-pane .btn-success:hover { background-color: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.3) !important; color: #059669 !important; transform: translateY(-1px) !important; } /* 提示警示框微调 */ .tab-pane .alert-info { background-color: rgba(100, 116, 139, 0.08) !important; border: 1px solid rgba(100, 116, 139, 0.16) !important; color: var(--text-muted) !important; font-size: 13px !important; border-radius: var(--radius-md) !important; padding: 16px 20px !important; } /* ============================================================ 弹窗 Modal 及控制按钮 UI-UX-PRO-MAX 重塑 (Linear SaaS 极简风) ============================================================ */ /* 1. 弹窗卡片 (Modal Card) 结构无界化 */ .modal-content { background-color: var(--bg-surface0) !important; border: 1px solid var(--border-default) !important; border-radius: 14px !important; /* 升级为 14px 大圆角 */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; transition: background-color var(--theme-transition) !important; } /* 消除 header/footer 沉重边框与背景 */ .modal-header { border-bottom: none !important; background-color: transparent !important; padding: 24px 24px 12px 24px !important; } .modal-body { padding: 12px 24px 20px 24px !important; color: var(--text-default) !important; } .modal-footer { border-top: none !important; background-color: transparent !important; padding: 12px 24px 24px 24px !important; display: flex !important; justify-content: flex-end !important; gap: 12px !important; } /* 弹窗标题 */ .modal-title { font-size: 15px !important; font-weight: 700 !important; color: var(--text-default) !important; letter-spacing: -0.01em !important; } /* 关闭按钮 .btn-close */ .btn-close { background-size: 12px !important; opacity: 0.5 !important; transition: all 0.15s ease !important; } .btn-close:hover { opacity: 0.9 !important; transform: rotate(90deg) !important; } /* 2. 弹窗按钮风格对比层级重构 (SaaS Style) */ /* 确认主动作按钮 (Primary Button) */ .modal-footer .btn-primary { font-size: 13px !important; font-weight: 600 !important; padding: 10px 22px !important; /* 宽度拉伸 */ border-radius: var(--radius-md) !important; background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; color: #ffffff !important; box-shadow: var(--shadow-sm) !important; transition: all 0.2s var(--ease-spring) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .modal-footer .btn-primary:hover { background-color: var(--accent-active) !important; border-color: var(--accent-active) !important; transform: translateY(-1px) !important; box-shadow: var(--shadow-glow) !important; } /* 取消次要动作按钮 (Secondary Button) */ .modal-footer .btn-secondary { font-size: 13px !important; font-weight: 500 !important; padding: 10px 22px !important; border-radius: var(--radius-md) !important; background-color: transparent !important; /* 去除深灰色背景 */ border: 1px solid var(--border-default) !important; /* 替换为精致极细边框 */ color: var(--text-muted) !important; box-shadow: none !important; transition: all 0.15s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .modal-footer .btn-secondary:hover { background-color: var(--bg-muted) !important; border-color: var(--text-muted) !important; color: var(--text-default) !important; } /* 3. 禁用态 (Disabled) 控件优雅化 */ .form-control:disabled, .form-select:disabled, .form-control[disabled], .form-select[disabled] { background-color: var(--bg-muted) !important; /* 雅致的淡灰色背景 */ border: 1px dashed var(--border-default) !important; /* 改为点划线/虚线，强调只读特性 */ color: var(--text-muted) !important; opacity: 0.75 !important; cursor: not-allowed !important; box-shadow: none !important; } /* ============================================================ 1. 侧栏二级子菜单高阶打磨 (Sidebar Submenu Polish) ============================================================ */ .nav-main-submenu { padding-left: 0 !important; } .nav-main-submenu .nav-main-link { font-size: 12px !important; font-weight: 500 !important; padding: 8px 16px 8px 38px !important; /* 精致缩进 */ color: rgba(255, 255, 255, 0.4) !important; border-left: none !important; /* 移除子级指示条以突出顶级 */ transition: all 0.2s var(--ease-spring) !important; } .nav-main-submenu .nav-main-link:hover { background-color: rgba(255, 255, 255, 0.04) !important; color: #ffffff !important; transform: translateX(2px) !important; /* 轻微右移 */ } .nav-main-submenu .nav-main-link.active { background-color: transparent !important; color: var(--accent-primary) !important; font-weight: 600 !important; } /* ============================================================ 2. 粗放危险操作按钮微尘化 (Borderless Action Buttons) ============================================================ */ .btn-danger, .btn-outline-danger { background-color: transparent !important; border: 1px solid var(--border-default) !important; color: var(--text-muted) !important; transition: all 0.15s ease !important; box-shadow: none !important; } .btn-danger:hover { background-color: rgba(239, 68, 68, 0.06) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #ef4444 !important; transform: translateY(-1px) !important; } /* ============================================================ 3. 苹果滑块开关与 Checkbox 精致化 (iOS Style Switch) ============================================================ */ .form-check-input { border: 1px solid var(--border-default) !important; background-color: var(--bg-subtle) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .form-check-input:checked { background-color: var(--accent-primary) !important; border-color: var(--accent-primary) !important; box-shadow: var(--shadow-sm) !important; } /* 优雅的滑块开关 */ .form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d4d4d8'/%3e%3c/svg%3e") !important; transition: background-position 0.2s var(--ease-spring), background-color 0.2s ease !important; } .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%233b82f6'/%3e%3c/svg%3e") !important; } .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important; } /* ============================================================ 4. 媒体/Logo 预览图卡片化 (Preview Cards) ============================================================ */ form img, .logo-image-input img, .input-group + div img { border-radius: var(--radius-md) !important; border: 1px solid var(--border-default) !important; padding: 6px !important; background-color: var(--bg-surface0) !important; box-shadow: var(--shadow-sm) !important; transition: all 0.2s var(--ease-spring) !important; } form img:hover { transform: scale(1.03) !important; box-shadow: var(--shadow-md) !important; border-color: var(--accent-primary) !important; } /* ============================================================ 5. 全局下拉菜单物理悬浮增强 (Dropdown Menu Elevation) ============================================================ */ .dropdown-menu { border-radius: var(--radius-md) !important; border: 1px solid var(--border-default) !important; background-color: var(--bg-surface0) !important; box-shadow: var(--shadow-xl) !important; padding: 6px !important; } .dropdown-item { border-radius: var(--radius-sm) !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--text-secondary) !important; transition: all 0.15s ease !important; } .dropdown-item:hover { background-color: var(--bg-muted) !important; color: var(--text-primary) !important; } /* ============================================================ 6. 表单提示文本规范化 (Muted Typography) ============================================================ */ .text-muted, small, .form-text { font-size: 11px !important; font-weight: 500 !important; color: var(--text-muted) !important; opacity: 0.85 !important; }