@charset "UTF-8"; /* ========================================================================== Apple 主题适配层 —— assets/css/theme-apple.css -------------------------------------------------------------------------- 加载顺序：bootstrap → macos.css → bs5-overwind.css → dapp.css → theme-apple.css 工作方式：不改动任何 DOM，只重定义 dapp/mc 令牌 + 重绘关键组件， 从而把整套后台（工作台/文件/用户/分组/套餐/安全/设置）切到 Apple 视觉。 配置项（存 pre_config，后台「系统设置 → 主题管理」可改）： admin_theme classic | apple admin_theme_accent blue|purple|pink|red|orange|green|teal|indigo admin_theme_radius compact | comfy | large admin_theme_mode light | dark | auto 生效方式：admin/head.php 按配置在 上输出 ap-theme / ap-accent-* / ap-radius-* / ap-dark ========================================================================== */ /* ---------- 1. 强调色（8 色，Light / Dark 各一套） ---------- */ html.ap-accent-blue {--ap-accent:#007aff; --ap-accent-2:#5ac8fa; --ap-accent-soft:rgba(0,122,255,.10); --ap-accent-ring:rgba(0,122,255,.18)} html.ap-accent-purple {--ap-accent:#af52de; --ap-accent-2:#c48bff; --ap-accent-soft:rgba(175,82,222,.12); --ap-accent-ring:rgba(175,82,222,.18)} html.ap-accent-pink {--ap-accent:#ff2d55; --ap-accent-2:#ff7a95; --ap-accent-soft:rgba(255,45,85,.12); --ap-accent-ring:rgba(255,45,85,.18)} html.ap-accent-red {--ap-accent:#ff3b30; --ap-accent-2:#ff7a72; --ap-accent-soft:rgba(255,59,48,.12); --ap-accent-ring:rgba(255,59,48,.18)} html.ap-accent-orange {--ap-accent:#ff9500; --ap-accent-2:#ffb84d; --ap-accent-soft:rgba(255,149,0,.14); --ap-accent-ring:rgba(255,149,0,.18)} html.ap-accent-green {--ap-accent:#34c759; --ap-accent-2:#5ee7a0; --ap-accent-soft:rgba(52,199,89,.14); --ap-accent-ring:rgba(52,199,89,.18)} html.ap-accent-teal {--ap-accent:#30b0c7; --ap-accent-2:#5ad3e6; --ap-accent-soft:rgba(48,176,199,.14); --ap-accent-ring:rgba(48,176,199,.18)} html.ap-accent-indigo {--ap-accent:#5856d6; --ap-accent-2:#7d7bff; --ap-accent-soft:rgba(88,86,214,.12); --ap-accent-ring:rgba(88,86,214,.18)} html.ap-dark.ap-accent-blue {--ap-accent:#0a84ff; --ap-accent-2:#64d2ff; --ap-accent-soft:rgba(10,132,255,.22); --ap-accent-ring:rgba(10,132,255,.30)} html.ap-dark.ap-accent-purple {--ap-accent:#bf5af2; --ap-accent-2:#da8fff; --ap-accent-soft:rgba(191,90,242,.22); --ap-accent-ring:rgba(191,90,242,.30)} html.ap-dark.ap-accent-pink {--ap-accent:#ff375f; --ap-accent-2:#ff6482; --ap-accent-soft:rgba(255,55,95,.22); --ap-accent-ring:rgba(255,55,95,.30)} html.ap-dark.ap-accent-red {--ap-accent:#ff453a; --ap-accent-2:#ff6961; --ap-accent-soft:rgba(255,69,58,.22); --ap-accent-ring:rgba(255,69,58,.30)} html.ap-dark.ap-accent-orange {--ap-accent:#ff9f0a; --ap-accent-2:#ffb340; --ap-accent-soft:rgba(255,159,10,.24); --ap-accent-ring:rgba(255,159,10,.30)} html.ap-dark.ap-accent-green {--ap-accent:#30d158; --ap-accent-2:#5ee08a; --ap-accent-soft:rgba(48,209,88,.22); --ap-accent-ring:rgba(48,209,88,.30)} html.ap-dark.ap-accent-teal {--ap-accent:#40c8e0; --ap-accent-2:#6fdcef; --ap-accent-soft:rgba(64,200,224,.22); --ap-accent-ring:rgba(64,200,224,.30)} html.ap-dark.ap-accent-indigo {--ap-accent:#5e5ce6; --ap-accent-2:#7d7bff; --ap-accent-soft:rgba(94,92,230,.24); --ap-accent-ring:rgba(94,92,230,.30)} /* ---------- 2. 圆角档位 ---------- */ html.ap-radius-compact{--ap-r-card:14px; --ap-r-shell:18px; --ap-r-ctl:8px; --ap-r-pill:999px; --ap-r-tile:9px} html.ap-radius-comfy {--ap-r-card:18px; --ap-r-shell:24px; --ap-r-ctl:10px; --ap-r-pill:999px; --ap-r-tile:11px} html.ap-radius-large {--ap-r-card:24px; --ap-r-shell:32px; --ap-r-ctl:14px; --ap-r-pill:999px; --ap-r-tile:14px} /* ========================================================================== 3. Apple 主题令牌（覆盖 dapp.css 的 :root） ========================================================================== */ html.ap-theme{ --bg:#f5f5f7; --shell:#ffffff; --ink-1:#1d1d1f; --ink-2:#6e6e73; --ink-3:#8e8e93; /* 部分页面（macos.css 的 .mc-card-title、file.php 内联样式）用的是无后缀的 --ink，dapp.css :root 并未定义它 → 一直走 fallback 深色。这里补上， 让它跟随 --ink-1，深色模式下自动反色。 */ --ink:var(--ink-1,#1d1d1f); --line:rgba(60,60,67,.10); --line-2:rgba(60,60,67,.16); --brand:var(--ap-accent,#007aff); --brand-2:var(--ap-accent-2,#5ac8fa); --brand-soft:var(--ap-accent-soft,rgba(0,122,255,.10)); --mint:#34c759; --mint-soft:rgba(52,199,89,.14); --coral:#ff3b30; --coral-soft:rgba(255,59,48,.12); --amber:#ff9500; --amber-soft:rgba(255,149,0,.14); --sky:#32ade6; --sky-soft:rgba(50,173,230,.14); --pink:#ff2d55; /* 兼容令牌：新增后台页（订单/举报/体检/工具箱/运营数据等）用的 --card/--bg-soft/ --accent。--card 显式给值（不依赖 dapp.css 里 var(--shell) 的引用解析）， --accent 挂到 --brand 上跟随强调色。 */ --card:#ffffff; --bg-soft:#f2f2f5; /* Apple 系统填充色（quaternary / tertiary）。theme-apple.css 里的 .badge .label .dapp-tag .progress 底槽直接用 var(--fill-2) 且无兜底，此前未定义 → 背景失效。 */ --fill:rgba(116,116,128,.08); --fill-2:rgba(118,118,128,.12); --r-xl:var(--ap-r-shell,24px); --r-lg:var(--ap-r-card,18px); --r-md:14px; --r-sm:var(--ap-r-ctl,10px); --r-xs:8px; --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro SC","PingFang SC", "Helvetica Neue","Microsoft YaHei",Inter,Roboto,Arial,sans-serif; } html.ap-theme.ap-dark{ --bg:#000000; --shell:#1c1c1e; --ink-1:#f5f5f7; --ink-2:#98989d; --ink-3:#6e6e73; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --mint:#30d158; --coral:#ff453a; --amber:#ff9f0a; --sky:#64d2ff; --pink:#ff375f; --card:#1c1c1e; --bg-soft:rgba(255,255,255,.06); --fill:rgba(118,118,128,.24); --fill-2:rgba(118,118,128,.32); } /* 页面底色：去掉 dapp 的紫/蓝光晕，改为 Apple 纯浅灰（深色下纯黑） */ html.ap-theme body.dapp-body{ background:var(--bg); color:var(--ink-1); -webkit-font-smoothing:antialiased; } html.ap-theme body.dapp-body ::-webkit-scrollbar{width:9px;height:9px} html.ap-theme body.dapp-body ::-webkit-scrollbar-thumb{ background:rgba(120,120,128,.32);border:2px solid transparent;border-radius:99px;background-clip:content-box; } html.ap-theme body.dapp-body ::-webkit-scrollbar-thumb:hover{background:rgba(120,120,128,.5);background-clip:content-box} /* ---------- 4. 骨架：外壳与图标栏 ---------- */ html.ap-theme .dapp-app{padding:14px;gap:12px} html.ap-theme .dapp-rail{ background:var(--shell); border:.5px solid var(--line); border-radius:var(--ap-r-shell,24px); box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04); padding:16px 0 14px; } html.ap-theme .dapp-shell{ background:var(--shell); border:.5px solid var(--line); border-radius:var(--ap-r-shell,24px); box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.05); } html.ap-theme .dapp-main{padding:0 26px 34px} html.ap-theme .dapp-logo{ width:40px;height:40px;border-radius:11px;font-size:16px; background:linear-gradient(180deg,var(--ap-accent-2),var(--ap-accent)); box-shadow:0 4px 12px var(--ap-accent-soft),inset 0 1px 0 rgba(255,255,255,.4); } html.ap-theme .dapp-rail-btn{ width:44px;height:44px;border-radius:12px;font-size:16px; color:var(--ink-1); /* 菜单项图标/文字保持深色，不再走浅灰 --ink-3 */ transition:background .18s,color .18s,transform .18s cubic-bezier(.32,.72,0,1); } html.ap-theme .dapp-rail-btn:hover{background:var(--brand-soft);color:var(--ink-1)} html.ap-theme .dapp-rail-btn:active{transform:scale(.94)} html.ap-theme .dapp-rail-btn.active{ background:var(--brand);color:#fff; box-shadow:0 2px 8px var(--ap-accent-ring); } html.ap-theme .dapp-rail-btn.active::before{display:none} html.ap-theme .dapp-rail-btn[data-tip]:hover::after{ background:rgba(30,30,32,.94);border-radius:8px;font-size:12px;left:54px; } html.ap-theme .dapp-rail-badge{ background:var(--coral);box-shadow:0 0 0 2px var(--shell); font-size:10px;font-weight:700;border-radius:8px; } html.ap-theme .dapp-rail-dot{border-color:var(--shell)} /* ---------- 5. 顶栏 ---------- */ html.ap-theme .dapp-topbar{ padding:18px 26px 14px; background:rgba(255,255,255,.78); /* 回退：不支持 color-mix 的浏览器 */ background:color-mix(in srgb, var(--shell) 78%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); /* 去掉底边框：与下方卡片之间的"悬浮细线"看起来不自然，圆角磨砂背景已能区分顶栏边界 */ border-bottom:0; } html.ap-theme.ap-dark .dapp-topbar{background:rgba(28,28,30,.78)} html.ap-theme .dapp-greet h1{font-size:21px;font-weight:600;letter-spacing:-.4px} html.ap-theme .dapp-greet p{font-size:12.5px;color:var(--ink-2)} html.ap-theme .dapp-search{ background:var(--brand-soft); border:.5px solid transparent;border-radius:var(--ap-r-ctl,10px);height:40px; } html.ap-theme .dapp-search:focus-within{ background:var(--shell);border-color:var(--line-2);box-shadow:0 0 0 4px var(--ap-accent-ring); } html.ap-theme .dapp-icon-btn{ width:40px;height:40px;border-radius:var(--ap-r-ctl,10px); border:.5px solid var(--line);background:var(--shell); box-shadow:0 1px 2px rgba(0,0,0,.03); } html.ap-theme .dapp-icon-btn:hover{background:var(--brand-soft);border-color:transparent;color:var(--brand)} html.ap-theme .dapp-avatar{ width:40px;height:40px;border-radius:50%;font-size:13px; background:linear-gradient(180deg,#ffb84d,#ff375f); box-shadow:0 4px 12px rgba(255,107,107,.28); } html.ap-theme .dapp-menu{ border:.5px solid var(--line);border-radius:14px;padding:6px; background:rgba(255,255,255,.86); background:color-mix(in srgb, var(--shell) 86%, transparent); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px); box-shadow:0 18px 48px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.07); } html.ap-theme .dapp-menu .dropdown-item{border-radius:9px;font-size:13.5px;padding:8px 11px} html.ap-theme .dapp-menu .dropdown-item:hover{background:var(--brand-soft);color:var(--brand)} html.ap-theme .dapp-menu .dropdown-item:hover i{color:var(--brand)} /* ---------- 6. 按钮 ---------- */ html.ap-theme .dapp-btn-primary{ height:40px;padding:0 18px;border-radius:var(--ap-r-ctl,10px); background:var(--brand);font-weight:500;font-size:13.5px; box-shadow:0 1px 2px var(--ap-accent-ring); transition:filter .18s,transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s; } html.ap-theme .dapp-btn-primary:hover{filter:brightness(1.06);transform:none;box-shadow:0 4px 14px var(--ap-accent-ring)} html.ap-theme.ap-dark .dapp-btn-primary:hover{filter:brightness(1.18)} html.ap-theme .dapp-btn-primary:active{transform:scale(.97)} /* ---------- 7. 卡片 / 标题 / KPI ---------- */ html.ap-theme .dapp-card{ background:var(--shell); border:.5px solid var(--line); border-radius:var(--ap-r-card,18px); box-shadow:0 1px 2px rgba(0,0,0,.04); padding:18px; } html.ap-theme .dapp-card-hover:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.07); border-color:var(--line-2); } html.ap-theme .dapp-sec h2{font-size:16px;font-weight:600;letter-spacing:-.2px} html.ap-theme .dapp-sec .sub{color:var(--ink-3)} html.ap-theme .dapp-tile{border-radius:var(--ap-r-tile,11px)} html.ap-theme .dapp-kpi-label{font-size:12.5px;color:var(--ink-2)} html.ap-theme .dapp-kpi-num{font-size:26px;font-weight:600;letter-spacing:-.6px;font-family:var(--font-sans);font-variant-numeric:tabular-nums} html.ap-theme .dapp-kpi-num small{font-weight:500;color:var(--ink-3)} html.ap-theme .dapp-delta{font-weight:600} html.ap-theme .dapp-up{color:var(--mint)} html.ap-theme .dapp-down{color:var(--coral)} /* 主卡：accent 渐变，光斑更克制 */ html.ap-theme .dapp-hero{ border-radius:var(--ap-r-card,18px);padding:22px; background:linear-gradient(135deg,var(--ap-accent) 0%,var(--ap-accent-2) 100%); box-shadow:0 14px 34px var(--ap-accent-ring); } html.ap-theme .dapp-hero::before{background:#ffffff;opacity:.14;width:220px;height:220px;top:-100px;right:-40px} html.ap-theme .dapp-hero::after{background:#ffffff;opacity:.10;width:180px;height:180px;bottom:-100px;right:130px} html.ap-theme .dapp-hero-dark{background:linear-gradient(135deg,#2c2c2e,#3a3a3c);box-shadow:0 14px 34px rgba(0,0,0,.3)} html.ap-theme .dapp-hero .h-num{font-size:38px;font-weight:700;letter-spacing:-1.2px;font-family:var(--font-sans);font-variant-numeric:tabular-nums} html.ap-theme .dapp-chip-w{background:rgba(255,255,255,.18);border:.5px solid rgba(255,255,255,.28);border-radius:10px} /* ---------- 8. 微图表 / 胶囊 / 列表 ---------- */ html.ap-theme .dapp-bars i{border-radius:4px;background:var(--brand-soft)} html.ap-theme .dapp-bars i.hi{background:linear-gradient(180deg,var(--ap-accent-2),var(--ap-accent))} html.ap-theme .dapp-chip{ border:.5px solid var(--line);background:var(--shell); border-radius:var(--ap-r-pill);color:var(--ink-2);padding:7px 14px; } html.ap-theme .dapp-chip:hover{border-color:var(--line-2);color:var(--ink-1)} html.ap-theme .dapp-chip.on{background:var(--brand);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 2px 8px var(--ap-accent-ring)} html.ap-theme .dapp-chip .n{background:var(--brand-soft);font-family:var(--font-sans)} html.ap-theme .dapp-chip.on .n{background:rgba(255,255,255,.22)} html.ap-theme .dapp-tbl-head, html.ap-theme .dapp-file-row{border-radius:var(--ap-r-ctl,10px);padding:11px 14px} html.ap-theme .dapp-tbl-head{color:var(--ink-3);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase} html.ap-theme .dapp-file-row:hover{background:var(--brand-soft)} html.ap-theme .dapp-f-ico{border-radius:var(--ap-r-tile,11px)} html.ap-theme .dapp-mini-btn{border-radius:8px;border:.5px solid var(--line);background:var(--shell)} html.ap-theme .dapp-mini-btn:hover{background:var(--brand-soft);color:var(--brand);border-color:transparent} html.ap-theme .dapp-feed-dot{box-shadow:0 0 0 3px var(--shell)} html.ap-theme .dapp-task-item{border-radius:var(--ap-r-ctl,10px)} html.ap-theme .dapp-task-item:hover{background:var(--brand-soft)} /* ---------- 9. 设置页：panel / 表单 / 子导航 ---------- */ html.ap-theme .dapp-subnav{ background:var(--brand-soft); border:.5px solid transparent;border-radius:var(--ap-r-ctl,10px); padding:4px;gap:2px; } html.ap-theme .dapp-subnav a{ border-radius:calc(var(--ap-r-ctl,10px) - 3px); font-size:13px;font-weight:500;color:var(--ink-2); padding:7px 13px;transition:background .18s,color .18s,box-shadow .18s; } html.ap-theme .dapp-subnav a:hover{color:var(--ink-1);background:rgba(255,255,255,.6)} html.ap-theme .dapp-subnav a.on{ background:var(--shell);color:var(--ink-1);font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.10); } html.ap-theme .panel{border:.5px solid var(--line);border-radius:var(--ap-r-card,18px);background:var(--shell);box-shadow:0 1px 2px rgba(0,0,0,.04)} html.ap-theme .panel-primary>.card-header, html.ap-theme .panel-info>.card-header, html.ap-theme .card-header{ background:transparent;border-bottom:.5px solid var(--line); border-radius:var(--ap-r-card,18px) var(--ap-r-card,18px) 0 0;padding:14px 18px; } html.ap-theme .card-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-1)} html.ap-theme .card-body{padding:18px} html.ap-theme .card-footer{ background:transparent;border-top:.5px solid var(--line); border-radius:0 0 var(--ap-r-card,18px) var(--ap-r-card,18px); color:var(--ink-2);font-size:12.5px;padding:12px 18px; } html.ap-theme .form-control{ border:.5px solid var(--line-2);border-radius:var(--ap-r-ctl,10px); background:var(--shell);color:var(--ink-1); box-shadow:0 1px 2px rgba(0,0,0,.03);transition:box-shadow .18s,border-color .18s; } html.ap-theme .form-control:focus{ border-color:var(--ap-accent);box-shadow:0 0 0 4px var(--ap-accent-ring); } html.ap-theme .control-label{font-weight:500;color:var(--ink-1)} html.ap-theme .btn{border-radius:var(--ap-r-ctl,10px);font-weight:500;transition:filter .18s,transform .18s} html.ap-theme .btn:active{transform:scale(.975)} html.ap-theme .btn-primary{background:var(--brand);border-color:transparent;box-shadow:0 1px 2px var(--ap-accent-ring)} html.ap-theme .btn-primary:hover{filter:brightness(1.06);background:var(--brand);border-color:transparent} html.ap-theme.ap-dark .btn-primary:hover{filter:brightness(1.18)} html.ap-theme .btn-default{background:var(--shell);border-color:var(--line-2);color:var(--ink-1)} html.ap-theme .btn-default:hover{background:var(--brand-soft)} html.ap-theme .table>thead>tr>th{ font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3); border-bottom:.5px solid var(--line);background:transparent; } html.ap-theme .table>tbody>tr>td{border-top:.5px solid var(--line)} html.ap-theme .table-hover>tbody>tr:hover{background:var(--brand-soft)} html.ap-theme pre{ background:var(--bg);border:.5px solid var(--line);border-radius:var(--ap-r-ctl,10px); color:var(--ink-1);font-size:12px; } /* ---------- 10. layer 弹窗 Apple 化 ---------- */ html.ap-theme .layui-layer{border-radius:var(--ap-r-card,18px)!important;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.24)!important} html.ap-theme .layui-layer-title{ border-radius:var(--ap-r-card,18px) var(--ap-r-card,18px) 0 0!important; background:var(--shell)!important;color:var(--ink-1)!important; border-bottom:.5px solid var(--line)!important;font-weight:600;height:48px;line-height:48px; } html.ap-theme .layui-layer-content{background:var(--shell);color:var(--ink-1)} html.ap-theme .layui-layer-btn{ background:var(--shell);border-top:.5px solid var(--line);padding:0!important;text-align:right; } html.ap-theme .layui-layer-btn a{ height:38px;line-height:38px;margin:6px 8px 6px 0!important;padding:0 18px; border-radius:var(--ap-r-ctl,10px)!important;border:0!important;font-size:13.5px; } html.ap-theme .layui-layer-btn .layui-layer-btn0{background:var(--brand)!important;color:#fff!important} html.ap-theme .layui-layer-btn .layui-layer-btn1{background:var(--brand-soft)!important;color:var(--brand)!important} html.ap-theme .layui-layer-msg{border-radius:var(--ap-r-pill)!important;box-shadow:0 8px 28px rgba(0,0,0,.18)!important} html.ap-theme .layui-layer-dialog .layui-layer-content{font-size:13.5px} /* ---------- 11. 与 Apple 组件库（demo 页）联动：强调色统一 ---------- */ html.ap-theme .ap-scope{--ap-blue:var(--ap-accent,#007aff)} /* ---------- 12. 深色微调：部分硬编码白底元素 ---------- */ html.ap-theme.ap-dark .dapp-card, html.ap-theme.ap-dark .panel, html.ap-theme.ap-dark .card-header, html.ap-theme.ap-dark .card-footer, html.ap-theme.ap-dark .dapp-menu, html.ap-theme.ap-dark .layui-layer, html.ap-theme.ap-dark .layui-layer-title, html.ap-theme.ap-dark .layui-layer-content, html.ap-theme.ap-dark .layui-layer-btn{background:var(--shell)} html.ap-theme.ap-dark .form-control, html.ap-theme.ap-dark .dapp-search, html.ap-theme.ap-dark .btn-default, html.ap-theme.ap-dark .dapp-chip, html.ap-theme.ap-dark .dapp-icon-btn{background:#2c2c2e;color:var(--ink-1)} html.ap-theme.ap-dark pre{background:#0f0f11;color:var(--ink-1)} html.ap-theme.ap-dark .table>thead>tr>th{color:var(--ink-3)} /* ---------- 13. 窄屏 ---------- */ @media (max-width:991px){ html.ap-theme .dapp-app{padding:0;gap:0} html.ap-theme .dapp-rail{border-radius:0;border:0;border-bottom:.5px solid var(--line)} html.ap-theme .dapp-shell{border-radius:0;border:0} html.ap-theme .dapp-main{padding:0 14px 28px} html.ap-theme .dapp-topbar{padding:14px} } /* ========================================================================== 14. 主题管理页专用控件（set.php?mod=theme） —— 用 ap- 前缀，与 demo 组件库一致，但独立定义，不依赖 apple-ui.css ========================================================================== */ .ap-tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .ap-tm-card{ position:relative;cursor:pointer;border-radius:16px;overflow:hidden; background:var(--shell);box-shadow:0 0 0 1.5px var(--line-2); transition:box-shadow .2s,transform .2s cubic-bezier(.32,.72,0,1); } .ap-tm-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.09),0 0 0 1.5px var(--line-2)} .ap-tm-card.on{box-shadow:0 0 0 2px var(--ap-accent,#007aff),0 8px 24px var(--ap-accent-ring,rgba(0,122,255,.18))} .ap-tm-prev{height:104px;display:flex;align-items:stretch;gap:6px;padding:10px} .ap-tm-prev .rail{width:26px;border-radius:7px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0} .ap-tm-prev .rail i{width:16px;height:16px;border-radius:5px;display:block} .ap-tm-prev .body{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} .ap-tm-prev .bar{height:11px;border-radius:5px} .ap-tm-prev .row{display:flex;gap:6px;flex:1} .ap-tm-prev .blk{flex:1;border-radius:7px} .ap-tm-meta{padding:10px 13px 12px;border-top:.5px solid var(--line)} .ap-tm-meta b{display:block;font-size:13.5px;font-weight:600} .ap-tm-meta small{font-size:11.5px;color:var(--ink-3)} .ap-tm-flag{ position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%; background:var(--ap-accent,#007aff);color:#fff;display:none;place-items:center;font-size:11px; } .ap-tm-card.on .ap-tm-flag{display:grid} .ap-sw-row{display:flex;flex-wrap:wrap;gap:10px} .ap-sw{ width:40px;height:40px;border-radius:50%;cursor:pointer;position:relative; box-shadow:inset 0 0 0 1.5px var(--line-2);transition:transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s; } .ap-sw:hover{transform:scale(1.08)} .ap-sw.on{box-shadow:inset 0 0 0 1.5px transparent,0 0 0 3px var(--shell),0 0 0 5px currentColor} .ap-sw i{ position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;opacity:0; } .ap-sw.on i{opacity:1} .ap-seg-3{display:inline-flex;padding:3px;gap:2px;background:var(--brand-soft);border-radius:12px} .ap-seg-3 button{ height:34px;padding:0 18px;border:0;background:transparent;border-radius:9px; font-size:13px;font-weight:500;color:var(--ink-2);transition:.18s; } .ap-seg-3 button.on{background:var(--shell);color:var(--ink-1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.10)} .ap-tm-hint{ display:flex;gap:10px;padding:12px 14px;border-radius:12px; background:var(--brand-soft);color:var(--ink-2);font-size:12.5px;line-height:1.6; } .ap-tm-hint b{color:var(--ink-1)} /* ========================================================================== 15. 全局基础（后台 + 用户中心 + 前台首页共用） ========================================================================== */ html.ap-theme{ --font-num:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,"Liberation Mono",monospace; } html.ap-theme body{ background:var(--bg);color:var(--ink-1);font-family:var(--font-sans); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } html.ap-theme ::selection{background:var(--ap-accent-soft);color:var(--ink-1)} html.ap-theme ::-webkit-scrollbar{width:10px;height:10px} html.ap-theme ::-webkit-scrollbar-track{background:transparent} html.ap-theme ::-webkit-scrollbar-thumb{ background:rgba(120,120,128,.28);border:3px solid transparent;border-radius:99px;background-clip:content-box; } html.ap-theme ::-webkit-scrollbar-thumb:hover{background:rgba(120,120,128,.46);background-clip:content-box} html.ap-theme hr{border:0;border-top:.5px solid var(--line);opacity:1} html.ap-theme code,html.ap-theme kbd{ background:var(--brand-soft);color:var(--brand);border-radius:6px; padding:2px 6px;font-family:var(--font-num);font-size:.88em; } html.ap-theme b,html.ap-theme strong{font-weight:600} html.ap-theme h1,html.ap-theme h2,html.ap-theme h3,html.ap-theme h4{letter-spacing:-.02em} /* ========================================================================== 16. SF Symbols 图标（与 demo-apple 同一套 sprite） ========================================================================== */ .ap-ic{ width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex:none; fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } svg.ap-ic{overflow:visible} .ap-ic-spin{animation:ap-ic-spin 1s linear infinite} @keyframes ap-ic-spin{to{transform:rotate(360deg)}} /* SF 模式：图标略放大，与 demo 的视觉重量一致 */ html.ap-icon-sf .ap-ic{width:1.12em;height:1.12em} /* ========================================================================== 17. 表单控件：输入框 / 选择框 / 勾选 / 开关（与 demo 的 ap-* 控件对齐） ========================================================================== */ html.ap-theme .form-control, html.ap-theme .form-select, html.ap-theme .fr-input, html.ap-theme textarea, html.ap-theme select, html.ap-theme input[type="text"], html.ap-theme input[type="password"], html.ap-theme input[type="number"], html.ap-theme input[type="email"], html.ap-theme input[type="search"]{ min-height:38px;padding:8px 12px;font-size:13.5px; border:.5px solid var(--line-2);border-radius:var(--ap-r-ctl,10px); background:var(--shell);color:var(--ink-1); box-shadow:0 1px 2px rgba(0,0,0,.03); transition:border-color .18s,box-shadow .18s,background .18s; } html.ap-theme .form-control:focus, html.ap-theme .form-select:focus, html.ap-theme .fr-input:focus, html.ap-theme textarea:focus, html.ap-theme select:focus, html.ap-theme input[type="text"]:focus, html.ap-theme input[type="password"]:focus, html.ap-theme input[type="number"]:focus, html.ap-theme input[type="email"]:focus, html.ap-theme input[type="search"]:focus{ outline:0;border-color:var(--ap-accent); box-shadow:0 0 0 4px var(--ap-accent-ring);background:var(--shell); } /* 复合控件（外壳自带底色/描边）：内部 input 保持扁平，避免双层叠加 */ html.ap-theme .dapp-search input{ min-height:0;height:100%;padding:0;font-size:13.5px; border:0;background:transparent;box-shadow:none;border-radius:0; } html.ap-theme .dapp-search input:focus{ outline:0;border:0;background:transparent;box-shadow:none; } html.ap-theme ::placeholder{color:var(--ink-3);opacity:1} /* 选择框：自绘箭头，去掉原生下拉三角 */ html.ap-theme select:not([multiple]){ -webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 4.4 6 7.6l3.2-3.2' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:12px; } html.ap-theme.ap-dark select:not([multiple]){ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 4.4 6 7.6l3.2-3.2' fill='none' stroke='%2398999e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* 勾选框 / 单选框 —— 排除 demo 自绘的 .ap-check/.ap-radio/.ap-switch （它们的 input 是覆盖在 .ap-box 上方 opacity:0 的透明层） */ html.ap-theme input[type="checkbox"], html.ap-theme input[type="radio"]{ -webkit-appearance:none;appearance:none;position:relative;cursor:pointer; width:20px;height:20px;flex:0 0 auto;margin:0 7px 0 0;vertical-align:-4px; background:var(--shell);border:1.5px solid var(--line-2);border-radius:6px; transition:background .18s,border-color .18s,box-shadow .18s; } /* demo 的自定义控件：input 还原为透明小方块覆盖层，让 .ap-box/.ap-sw-* 接管视觉 */ html.ap-theme .ap-check input[type="checkbox"], html.ap-theme .ap-radio input[type="radio"], html.ap-theme .ap-switch input[type="checkbox"]{ width:100%;height:100%;margin:0;opacity:0;z-index:3; background:transparent;border:0;border-radius:0;flex:0 0 auto; } html.ap-theme input[type="radio"]{border-radius:50%} html.ap-theme input[type="checkbox"]:checked, html.ap-theme input[type="radio"]:checked{ background:var(--brand);border-color:transparent;box-shadow:0 1px 3px var(--ap-accent-ring); } html.ap-theme input[type="checkbox"]:checked::after{ content:'';position:absolute;left:5.5px;top:2.5px;width:5px;height:9px; border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg); } html.ap-theme input[type="radio"]:checked::after{ content:'';position:absolute;inset:5px;border-radius:50%;background:#fff; } html.ap-theme input[type="checkbox"]:focus, html.ap-theme input[type="radio"]:focus{ outline:0;box-shadow:0 0 0 4px var(--ap-accent-ring); } html.ap-theme input[type="checkbox"]:disabled, html.ap-theme input[type="radio"]:disabled{opacity:.45;cursor:not-allowed} /* bootstrap-table 列选择下拉的 checkbox（.dropdown-item-marker）—— 让它走原生渲染， 不要被主题层接管（结构特殊、且里面的 input 通常有 bs 自带的 ::after） */ html.ap-theme .dropdown-item-marker input[type="checkbox"], html.ap-theme .dropdown-item-marker input[type="radio"]{ appearance:auto!important;-webkit-appearance:auto!important; width:auto;height:auto;background:none;border:none;border-radius:0; margin:0 6px 0 0;vertical-align:middle;accent-color:var(--brand);cursor:pointer; } html.ap-theme .dropdown-item-marker input[type="checkbox"]::after, html.ap-theme .dropdown-item-marker input[type="radio"]::after{display:none!important} /* f-chkline / mc-chk：dapp 自定义 wrapper，让 checkbox 跟随主题层 20px 样式 */ html.ap-theme .f-chkline, html.ap-theme .mc-chk{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink-1);font-size:13px} html.ap-theme .f-chkline input[type="checkbox"], html.ap-theme .mc-chk input[type="checkbox"]{width:18px;height:18px;border-radius:6px} /* 开关（iOS toggle）：class 含 switch / ap-switch —— 仅作用于不嵌套在 .ap-switch 内的 */ html.ap-theme input[type="checkbox"].switch, html.ap-theme input[type="checkbox"].ap-switch{ width:51px;height:31px;margin-right:0;border:0;border-radius:99px; background:rgba(120,120,128,.18);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.04); transition:background .26s cubic-bezier(.32,.72,0,1); } html.ap-theme input[type="checkbox"].switch::after, html.ap-theme input[type="checkbox"].ap-switch::after{ content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%; background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.16); transition:transform .26s cubic-bezier(.32,.72,0,1); } html.ap-theme input[type="checkbox"].switch:checked, html.ap-theme input[type="checkbox"].ap-switch:checked{background:var(--brand);box-shadow:none} html.ap-theme input[type="checkbox"].switch:checked::after, html.ap-theme input[type="checkbox"].ap-switch:checked::after{ transform:translateX(20px);border:0;width:27px;height:27px;left:2px;top:2px;inset:auto; } /* 文件选择 */ html.ap-theme input[type="file"]{ font-size:13px;padding:7px;border-radius:var(--ap-r-ctl,10px); border:.5px dashed var(--line-2);background:var(--shell);color:var(--ink-2);width:100%; } html.ap-theme input[type="file"]::file-selector-button{ margin-right:10px;padding:6px 13px;border:0;border-radius:8px; background:var(--brand-soft);color:var(--brand);font-weight:600;font-size:12.5px;cursor:pointer; } html.ap-theme .input-group-text{ border:.5px solid var(--line-2);background:var(--bg);color:var(--ink-2); border-radius:var(--ap-r-ctl,10px);font-size:13px; } /* ========================================================================== 18. 提示框 / 弹窗 / 气泡 / 吐司（Apple 化的反馈层） ========================================================================== */ html.ap-theme .alert{ border:.5px solid var(--line);border-radius:var(--ap-r-ctl,10px); background:var(--shell);color:var(--ink-1); padding:11px 14px;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.04); } html.ap-theme .alert-success{background:var(--mint-soft);border-color:transparent;color:#0a7f4f} html.ap-theme .alert-info, html.ap-theme .alert-primary{background:var(--brand-soft);border-color:transparent;color:var(--brand)} html.ap-theme .alert-warning{background:var(--amber-soft);border-color:transparent;color:#8a5a00} html.ap-theme .alert-danger{background:var(--coral-soft);border-color:transparent;color:#c0392b} html.ap-theme .fr-alert{border-radius:var(--ap-r-ctl,10px);border:.5px solid transparent} html.ap-theme .fr-alert.err{background:var(--coral-soft);color:#c0392b} html.ap-theme .fr-alert.ok{background:var(--mint-soft);color:#0a7f4f} html.ap-theme .modal-content{ border:.5px solid var(--line);border-radius:var(--ap-r-card,18px); background:var(--shell);box-shadow:0 32px 80px rgba(0,0,0,.24);overflow:hidden; } html.ap-theme .modal-header{border-bottom:.5px solid var(--line);padding:15px 20px} html.ap-theme .modal-title{font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--ink-1)} html.ap-theme .modal-body{padding:18px 20px;color:var(--ink-1)} html.ap-theme .modal-footer{border-top:.5px solid var(--line);padding:12px 18px} html.ap-theme .modal-backdrop.show{opacity:.34;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} html.ap-theme .btn-close{opacity:.45;transition:opacity .18s} html.ap-theme .btn-close:hover{opacity:.9} html.ap-theme .tooltip .tooltip-inner{ background:rgba(30,30,32,.94);color:#fff;border-radius:8px; padding:6px 10px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.2); } html.ap-theme .popover{ border:.5px solid var(--line);border-radius:14px; background:rgba(255,255,255,.88);background:color-mix(in srgb, var(--shell) 88%, transparent); -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px); box-shadow:0 18px 48px rgba(0,0,0,.16); } html.ap-theme .popover-header{background:transparent;border-bottom:.5px solid var(--line);font-weight:600;color:var(--ink-1)} html.ap-theme .popover-body{color:var(--ink-1);font-size:13px} html.ap-theme .toast{ border:.5px solid var(--line);border-radius:14px; background:color-mix(in srgb, var(--shell) 90%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); box-shadow:0 18px 48px rgba(0,0,0,.16); } /* ========================================================================== 19. 通用控件：徽标 / 进度 / 分页 / 面包屑 / 页签 / 下拉 / 卡片 ========================================================================== */ html.ap-theme .badge{font-weight:600;border-radius:7px;padding:3px 8px;font-size:11px;letter-spacing:.01em} html.ap-theme .label{font-weight:600;border-radius:7px;padding:3px 8px} html.ap-theme .progress{ height:8px;border-radius:99px;background:rgba(120,120,128,.16); overflow:hidden;box-shadow:none; } html.ap-theme .progress-bar{background:var(--brand);border-radius:99px} html.ap-theme .pagination{margin:0} html.ap-theme .pagination .page-link{ border:.5px solid var(--line);background:var(--shell);color:var(--ink-1); border-radius:9px;margin:0 2px;padding:6px 12px;font-size:13px;transition:.18s; } html.ap-theme .pagination .page-link:hover{background:var(--brand-soft);color:var(--brand);border-color:transparent} html.ap-theme .pagination .page-item.active .page-link{ background:var(--brand);border-color:transparent;color:#fff;font-weight:600; box-shadow:0 2px 8px var(--ap-accent-ring); } html.ap-theme .pagination .page-item.disabled .page-link{opacity:.45} html.ap-theme .breadcrumb{font-size:12.5px;color:var(--ink-2);margin-bottom:10px} html.ap-theme .breadcrumb a{color:var(--ink-2)} html.ap-theme .breadcrumb a:hover{color:var(--brand)} html.ap-theme .nav-tabs{border-bottom:.5px solid var(--line);gap:4px} html.ap-theme .nav-tabs .nav-link{ border:0;border-radius:9px 9px 0 0;color:var(--ink-2); font-size:13.5px;padding:8px 14px;font-weight:500;transition:.18s; } html.ap-theme .nav-tabs .nav-link:hover{color:var(--ink-1);background:var(--brand-soft)} html.ap-theme .nav-tabs .nav-link.active{color:var(--brand);background:var(--brand-soft);font-weight:600} html.ap-theme .dropdown-menu{ border:.5px solid var(--line);border-radius:14px;padding:6px; background:rgba(255,255,255,.88);background:color-mix(in srgb, var(--shell) 88%, transparent); -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px); box-shadow:0 18px 48px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.06); } html.ap-theme .dropdown-item{border-radius:9px;font-size:13.5px;padding:8px 11px;color:var(--ink-1)} html.ap-theme .dropdown-item:hover, html.ap-theme .dropdown-item:focus{background:var(--brand-soft);color:var(--brand)} html.ap-theme .dropdown-divider{border-top:.5px solid var(--line);margin:5px 0} html.ap-theme .card{ border:.5px solid var(--line);border-radius:var(--ap-r-card,18px); background:var(--shell);box-shadow:0 1px 2px rgba(0,0,0,.04); } html.ap-theme .list-group-item{border-color:var(--line);background:transparent;color:var(--ink-1)} /* ========================================================================== 20. 前台：导航 / Hero / 区块 / 认证 / 文件详情（fr-* 命名空间） ========================================================================== */ html.ap-theme .fr-nav{ background:rgba(255,255,255,.72); background:color-mix(in srgb, var(--shell) 72%, transparent); border-bottom:.5px solid transparent; } html.ap-theme .fr-nav.is-scrolled{ background:rgba(255,255,255,.84); background:color-mix(in srgb, var(--shell) 86%, transparent); border-bottom-color:var(--line);box-shadow:0 6px 22px rgba(0,0,0,.05); } html.ap-theme.ap-dark .fr-nav, html.ap-theme.ap-dark .fr-nav.is-scrolled{background:rgba(28,28,30,.78)} html.ap-theme .fr-brand-mark{ border-radius:10px;background:linear-gradient(180deg,var(--ap-accent-2),var(--ap-accent)); box-shadow:0 5px 14px var(--ap-accent-ring); } html.ap-theme .fr-nav-links a{border-radius:99px;padding:7px 13px} html.ap-theme .fr-nav-links a:hover{background:var(--brand-soft);color:var(--brand)} html.ap-theme .fr-nav-toggle{border:.5px solid var(--line);border-radius:10px;background:var(--shell)} html.ap-theme .fr-nav-menu{background:var(--shell);border-bottom:.5px solid var(--line)} html.ap-theme .fr-nav-menu a:hover{background:var(--brand-soft);color:var(--brand)} html.ap-theme .fr-btn{ border-radius:var(--ap-r-ctl,10px);height:38px;padding:0 17px;font-weight:500;font-size:13.5px; transition:filter .18s,transform .18s cubic-bezier(.32,.72,0,1),box-shadow .18s; } html.ap-theme .fr-btn-primary{ background:var(--brand);color:#fff;box-shadow:0 1px 2px var(--ap-accent-ring); } html.ap-theme .fr-btn-primary:hover{filter:brightness(1.06);transform:none;box-shadow:0 6px 18px var(--ap-accent-ring);color:#fff} html.ap-theme.ap-dark .fr-btn-primary:hover{filter:brightness(1.18)} html.ap-theme .fr-btn-primary:active{transform:scale(.97)} html.ap-theme .fr-btn-ghost{border-color:var(--line-2);background:var(--shell);color:var(--ink-1)} html.ap-theme .fr-btn-ghost:hover{border-color:transparent;background:var(--brand-soft);color:var(--brand)} html.ap-theme .fr-btn-lg{height:44px;padding:0 22px;border-radius:12px;font-size:14.5px} html.ap-theme .fr-avatar{background:linear-gradient(180deg,#ffb84d,#ff375f);box-shadow:0 4px 12px rgba(255,107,107,.24)} html.ap-theme .fr-menu{ border:.5px solid var(--line)!important;border-radius:14px!important; background:rgba(255,255,255,.88)!important;background:color-mix(in srgb, var(--shell) 88%, transparent)!important; -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px); box-shadow:0 18px 48px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.06)!important; } html.ap-theme .fr-menu .dropdown-item{border-radius:9px} html.ap-theme .fr-menu .dropdown-item:hover{background:var(--brand-soft);color:var(--brand)} html.ap-theme .fr-menu .dropdown-item:hover i{color:var(--brand)} html.ap-theme .fr-menu-head{border-bottom:.5px solid var(--line)} html.ap-theme .fr-hero{background:var(--bg);padding:78px 0 68px} html.ap-theme .fr-hero h1{font-weight:700;letter-spacing:-1.6px;line-height:1.08} html.ap-theme .fr-hero h1 em{ background:linear-gradient(120deg,var(--ap-accent),var(--pink)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } html.ap-theme .fr-hero-sub{color:var(--ink-2);font-size:17px;line-height:1.7} html.ap-theme .fr-hero-meta{border-top:.5px solid var(--line)} html.ap-theme .fr-hero-meta div b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums} html.ap-theme .fr-eyebrow{ background:var(--shell);border:.5px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.04);border-radius:99px; } html.ap-theme .fr-visual{ border:.5px solid var(--line);border-radius:var(--ap-r-card,18px); background:var(--shell);box-shadow:0 24px 60px rgba(0,0,0,.09); } html.ap-theme .fr-visual-hero{ background:linear-gradient(135deg,var(--ap-accent),var(--ap-accent-2)); box-shadow:0 14px 32px var(--ap-accent-ring); } html.ap-theme .fr-visual-hero::before{background:#fff;opacity:.16;filter:blur(34px)} html.ap-theme .fr-mini{border:.5px solid var(--line);border-radius:var(--ap-r-tile,11px);background:var(--shell)} html.ap-theme .fr-mini .n{font-variant-numeric:tabular-nums} html.ap-theme .fr-mini-row{border-top:.5px solid var(--line)} html.ap-theme .fr-mini-row .ic{border-radius:9px} html.ap-theme .fr-float-card{ border:.5px solid var(--line);border-radius:var(--ap-r-tile,11px); box-shadow:0 18px 40px rgba(0,0,0,.10); } html.ap-theme .fr-section.alt{background:var(--shell);border-top:.5px solid var(--line);border-bottom:.5px solid var(--line)} html.ap-theme .fr-sec-head .tag{background:var(--brand-soft);color:var(--brand);font-weight:600} html.ap-theme .fr-sec-head h2{font-weight:700;letter-spacing:-1px} html.ap-theme .fr-feat{ border:.5px solid var(--line);border-radius:var(--ap-r-card,18px); background:var(--shell);box-shadow:0 1px 2px rgba(0,0,0,.03); } html.ap-theme .fr-feat:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 16px 36px rgba(0,0,0,.07)} html.ap-theme .fr-feat-ic{border-radius:13px} html.ap-theme .fr-feat h3{font-weight:600} html.ap-theme .fr-stor{ border:.5px solid var(--line);border-radius:var(--ap-r-tile,11px); background:var(--shell);transition:.18s; } html.ap-theme .fr-stor:hover{border-color:transparent;color:var(--brand);background:var(--brand-soft)} html.ap-theme .fr-stor i{color:var(--brand)} html.ap-theme .fr-code{background:#1c1c1e;border-radius:var(--ap-r-card,18px);box-shadow:0 22px 50px rgba(0,0,0,.2)} html.ap-theme .fr-faq-item{border:.5px solid var(--line);border-radius:var(--ap-r-tile,11px);background:var(--shell)} html.ap-theme .fr-faq-q{padding:15px 17px;font-weight:600} html.ap-theme .fr-cta{ border-radius:var(--ap-r-shell,24px); background:linear-gradient(135deg,var(--ap-accent),var(--ap-accent-2)); box-shadow:0 26px 60px var(--ap-accent-ring); } html.ap-theme .fr-cta::before,html.ap-theme .fr-cta::after{display:none} html.ap-theme .fr-footer{background:var(--shell);border-top:.5px solid var(--line)} html.ap-theme .fr-footer a:hover{color:var(--brand)} html.ap-theme .fr-auth-box{ border:.5px solid var(--line);border-radius:var(--ap-r-shell,24px); background:var(--shell);box-shadow:0 30px 70px rgba(0,0,0,.12); } html.ap-theme .fr-auth-side{background:linear-gradient(150deg,var(--ap-accent),var(--ap-accent-2))} html.ap-theme .fr-auth-side::before{background:#fff;opacity:.14;filter:blur(40px)} html.ap-theme .fr-tabs{background:var(--brand-soft);border-radius:12px;padding:3px;gap:2px} html.ap-theme .fr-tab{border-radius:9px;font-weight:500;color:var(--ink-2)} html.ap-theme .fr-tab.active{background:var(--shell);color:var(--ink-1);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.10)} html.ap-theme .fr-field label{font-weight:500;color:var(--ink-1)} html.ap-theme .fr-btn-code{ border:.5px solid var(--line-2);border-radius:var(--ap-r-ctl,10px); background:var(--shell);color:var(--brand);font-weight:500; } html.ap-theme .fr-btn-code:hover:not(:disabled){border-color:var(--ap-accent);box-shadow:0 0 0 4px var(--ap-accent-ring)} html.ap-theme .fr-oauth-btn{ border:.5px solid var(--line-2);border-radius:var(--ap-r-ctl,10px); background:var(--shell);font-weight:500; } html.ap-theme .fr-oauth-btn:hover{border-color:transparent;transform:none;background:var(--brand-soft)} html.ap-theme .fr-divider::before,html.ap-theme .fr-divider::after{background:var(--line)} html.ap-theme .fr-auth-foot a{color:var(--brand)} html.ap-theme .fr-back:hover{color:var(--brand)} html.ap-theme .fr-link-box{border:.5px solid var(--line);border-radius:var(--ap-r-ctl,10px);background:var(--bg)} html.ap-theme .fr-link-box:focus-within{border-color:var(--ap-accent);background:var(--shell);box-shadow:0 0 0 3px var(--ap-accent-ring)} html.ap-theme .fr-link-copy{border-radius:8px;background:var(--brand-soft);color:var(--brand);font-weight:600} html.ap-theme .fr-link-copy:hover{background:var(--ap-accent-soft);color:var(--brand)} html.ap-theme .fr-btn-danger-soft{ border:.5px solid rgba(255,59,48,.26);background:var(--coral-soft); color:var(--coral);border-radius:var(--ap-r-ctl,10px);font-weight:500; } html.ap-theme .fr-btn-danger-soft:hover{background:var(--coral-soft);border-color:var(--coral);color:var(--coral)} html.ap-theme .fr-tabs .nav-link.active{border-bottom-color:var(--brand);color:var(--brand)} /* ========================================================================== 21. 用户中心（uc-* 命名空间） ========================================================================== */ html.ap-theme .uc-app{padding:14px;gap:12px} html.ap-theme .uc-rail{ background:var(--shell);border:.5px solid var(--line); border-radius:var(--ap-r-shell,24px); box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04); padding:16px 12px; } html.ap-theme .uc-rail-label{font-size:10.5px;letter-spacing:.8px;color:var(--ink-3)} html.ap-theme .uc-rail-btn{ border-radius:12px;height:42px; color:var(--ink-1); /* 覆盖全局 a{color:var(--brand)}：菜单文字保持深色（深色模式自动反白） */ transition:background .18s,color .18s,transform .18s cubic-bezier(.32,.72,0,1); } html.ap-theme .uc-rail-btn:hover{background:var(--brand-soft);color:var(--ink-1)} html.ap-theme .uc-rail-btn:active{transform:scale(.98)} html.ap-theme .uc-rail-btn.active{ background:var(--brand);color:#fff;font-weight:600;box-shadow:0 2px 8px var(--ap-accent-ring); } html.ap-theme .uc-rail-btn.active .badge{background:rgba(255,255,255,.22);color:#fff} html.ap-theme .uc-rail-btn .badge{background:var(--surface-2,var(--line));color:var(--ink-2)} html.ap-theme .uc-rail-foot{border-top:.5px solid var(--line)} html.ap-theme .uc-user-card{border:.5px solid var(--line);border-radius:var(--ap-r-card,18px);background:var(--shell)} html.ap-theme .uc-card{ border:.5px solid var(--line);border-radius:var(--ap-r-card,18px); background:var(--shell);box-shadow:0 1px 2px rgba(0,0,0,.04);padding:18px; } html.ap-theme .uc-card-head h2{font-size:15px;font-weight:600} html.ap-theme .uc-stat .n{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.6px} html.ap-theme .uc-page-head h1{font-size:22px;font-weight:600;letter-spacing:-.5px} html.ap-theme .uc-file{border-radius:var(--ap-r-ctl,10px)} html.ap-theme .uc-file:hover{background:var(--brand-soft)} html.ap-theme .uc-file-ic{border-radius:var(--ap-r-tile,11px)} html.ap-theme .uc-mini-btn{border:.5px solid var(--line);border-radius:8px;background:var(--shell)} html.ap-theme .uc-mini-btn:hover{border-color:transparent;background:var(--brand-soft);color:var(--brand)} html.ap-theme .uc-mini-btn.danger:hover{background:var(--coral-soft);color:var(--coral);border-color:transparent} html.ap-theme .uc-progress{background:rgba(120,120,128,.16)} html.ap-theme .uc-progress i{background:var(--brand)} html.ap-theme .uc-drop{border:1.5px dashed var(--line-2);border-radius:var(--ap-r-card,18px);background:var(--shell)} html.ap-theme .uc-drop:hover, html.ap-theme .uc-drop.over{border-color:var(--ap-accent);background:var(--brand-soft)} html.ap-theme .uc-drop i{color:var(--brand)} html.ap-theme .uc-space-tip{border-radius:var(--ap-r-ctl,10px);border:.5px solid transparent} html.ap-theme .uc-space-tip.warn{background:var(--amber-soft);color:#8a5a00} html.ap-theme .uc-empty>i{opacity:.35;color:var(--ink-3)} html.ap-theme .uc-empty p{color:var(--ink-2)} /* 窄屏：用户中心底部 tab bar 与后台一致 */ @media (max-width:991.98px){ html.ap-theme .uc-app{padding:0;gap:0} html.ap-theme .uc-rail{ border-radius:20px;border:.5px solid var(--line); -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); box-shadow:0 10px 30px rgba(0,0,0,.14); } html.ap-theme .uc-rail-btn.active{box-shadow:none} } /* ========================================================================== 22. 深色补充：前台与用户中心的硬编码白底元素 ========================================================================== */ html.ap-theme.ap-dark body{background:#000;color:#f5f5f7} html.ap-theme.ap-dark .fr-section.alt{background:#1c1c1e;border-color:var(--line)} html.ap-theme.ap-dark .fr-feat, html.ap-theme.ap-dark .fr-stor, html.ap-theme.ap-dark .fr-faq-item, html.ap-theme.ap-dark .fr-visual, html.ap-theme.ap-dark .fr-mini, html.ap-theme.ap-dark .fr-eyebrow, html.ap-theme.ap-dark .fr-footer, html.ap-theme.ap-dark .fr-nav-menu, html.ap-theme.ap-dark .fr-nav-toggle, html.ap-theme.ap-dark .fr-btn-ghost, html.ap-theme.ap-dark .fr-oauth-btn, html.ap-theme.ap-dark .fr-btn-code, html.ap-theme.ap-dark .fr-auth-box, html.ap-theme.ap-dark .uc-card, html.ap-theme.ap-dark .uc-user-card, html.ap-theme.ap-dark .uc-rail, html.ap-theme.ap-dark .uc-drop, html.ap-theme.ap-dark .uc-mini-btn, html.ap-theme.ap-dark .fr-link-box{background:#1c1c1e;color:var(--ink-1)} html.ap-theme.ap-dark .fr-code{background:#000;border:.5px solid var(--line)} html.ap-theme.ap-dark .alert, html.ap-theme.ap-dark .modal-content, html.ap-theme.ap-dark .dropdown-menu, html.ap-theme.ap-dark .popover, html.ap-theme.ap-dark .toast, html.ap-theme.ap-dark .card, html.ap-theme.ap-dark .list-group-item{background:#1c1c1e;color:var(--ink-1)} html.ap-theme.ap-dark .tooltip .tooltip-inner{background:rgba(58,58,60,.96)} html.ap-theme.ap-dark .progress, html.ap-theme.ap-dark .uc-progress{background:rgba(255,255,255,.12)} html.ap-theme.ap-dark .pagination .page-link{background:#2c2c2e;color:var(--ink-1)} html.ap-theme.ap-dark .form-select, html.ap-theme.ap-dark .input-group-text{background:#2c2c2e;color:var(--ink-1)} html.ap-theme.ap-dark .alert-success{color:var(--mint)} html.ap-theme.ap-dark .alert-danger{color:var(--coral)} html.ap-theme.ap-dark .alert-warning{color:var(--amber)} html.ap-theme.ap-dark .uc-space-tip.warn{color:var(--amber)} /* ========================================================================== 23. 深色模式 —— 令牌重映射（macOS + Bootstrap 双体系） -------------------------------------------------------------------------- 大部分组件（.btn-secondary / .card / .form-control / 表格 / 下拉…）消费的 其实是 macos.css 的 --mc-* 与 Bootstrap 的 --bs-* 变量，而非硬编码白色。 所以这里优先重定义令牌：一处改，整片跟随；硬编码的再逐条穷举覆盖。 ========================================================================== */ html.ap-theme.ap-dark{ /* 关键：让浏览器原生控件（滚动条 / select 下拉 / 日期 / 表单）同步变深 */ color-scheme:dark; /* ---- macOS 令牌（macos.css :root） ---- */ --mc-text-1:#f5f5f7; --mc-text-2:#a1a1a6; --mc-text-3:#8e8e93; --mc-text-4:#6e6e73; --mc-page:#000000; --mc-card:#1c1c1e; --mc-hover:rgba(255,255,255,.07); --mc-active:rgba(255,255,255,.12); --mc-sunken:rgba(255,255,255,.05); --mc-border:rgba(255,255,255,.10); --mc-border-2:rgba(255,255,255,.16); --mc-border-3:rgba(255,255,255,.24); --mc-glass:rgba(28,28,30,.72); --mc-glass-solid:rgba(28,28,30,.96); --mc-shadow-1:0 1px 2px rgba(0,0,0,.40); --mc-shadow-2:0 2px 10px rgba(0,0,0,.50); --mc-shadow-3:0 8px 30px rgba(0,0,0,.60); --mc-shadow-4:0 24px 70px rgba(0,0,0,.72); --mc-accent:var(--ap-accent,#0a84ff); --mc-accent-btn:var(--ap-accent,#0a84ff); --mc-accent-btn-hover:var(--ap-accent-2,#64d2ff); --mc-accent-btn-active:var(--ap-accent,#0a84ff); --mc-accent-soft:var(--ap-accent-soft,rgba(10,132,255,.22)); /* ---- Bootstrap 5.2 令牌（bs5-overwind.css :root） ---- */ --bs-body-color:#f5f5f7; --bs-body-color-rgb:245,245,247; --bs-body-bg:#000000; --bs-body-bg-rgb:0,0,0; --bs-emphasis-color:#ffffff; --bs-secondary-color:rgba(245,245,247,.70); --bs-tertiary-color:rgba(245,245,247,.46); --bs-secondary-bg:#2c2c2e; --bs-tertiary-bg:#1c1c1e; --bs-heading-color:#f5f5f7; --bs-border-color:rgba(255,255,255,.10); --bs-border-color-translucent:rgba(255,255,255,.12); --bs-link-color:var(--ap-accent,#0a84ff); --bs-link-hover-color:var(--ap-accent-2,#64d2ff); --bs-input-bg:#2c2c2e; --bs-input-color:#f5f5f7; --bs-input-border-color:rgba(255,255,255,.16); --bs-input-placeholder-color:#6e6e73; --bs-input-focus-border-color:var(--ap-accent,#0a84ff); --bs-input-focus-box-shadow:0 0 0 .25rem var(--ap-accent-ring,rgba(10,132,255,.30)); --bs-form-label-color:var(--ink-2,#98989d); --bs-card-bg:#1c1c1e; --bs-card-cap-bg:transparent; --bs-card-border-color:rgba(255,255,255,.10); --bs-modal-bg:#1c1c1e; --bs-modal-color:#f5f5f7; --bs-modal-border-color:rgba(255,255,255,.12); --bs-dropdown-bg:#1c1c1e; --bs-dropdown-border-color:rgba(255,255,255,.12); --bs-dropdown-link-color:#f5f5f7; --bs-dropdown-link-hover-color:#ffffff; --bs-dropdown-link-hover-bg:rgba(255,255,255,.08); --bs-dropdown-link-active-color:#ffffff; --bs-dropdown-link-active-bg:var(--ap-accent-soft,rgba(10,132,255,.22)); --bs-dropdown-divider-bg:rgba(255,255,255,.10); --bs-progress-bg:rgba(255,255,255,.10); --bs-nav-tabs-border-color:rgba(255,255,255,.12); --bs-nav-tabs-link-active-color:#f5f5f7; --bs-pagination-bg:#2c2c2e; --bs-pagination-color:var(--ap-accent,#0a84ff); --bs-pagination-border-color:rgba(255,255,255,.12); --bs-pagination-hover-bg:rgba(255,255,255,.08); --bs-pagination-hover-color:#ffffff; --bs-pagination-disabled-bg:#1c1c1e; --bs-pagination-disabled-color:#6e6e73; --bs-list-group-bg:#1c1c1e; --bs-list-group-color:#f5f5f7; --bs-list-group-border-color:rgba(255,255,255,.10); --bs-list-group-hover-bg:rgba(255,255,255,.06); --bs-table-color:#f5f5f7; --bs-table-bg:transparent; --bs-table-border-color:rgba(255,255,255,.10); --bs-table-striped-bg:rgba(255,255,255,.03); --bs-table-hover-bg:rgba(255,255,255,.06); --bs-tooltip-bg:#3a3a3c; --bs-tooltip-color:#ffffff; --bs-popover-bg:#1c1c1e; --bs-popover-border-color:rgba(255,255,255,.12); --bs-popover-header-bg:#1c1c1e; --bs-popover-header-color:#f5f5f7; --bs-popover-body-color:#f5f5f7; } /* ========================================================================== 24. 深色模式 —— 基础与排版 ========================================================================== */ html.ap-theme.ap-dark body{background:#000;color:var(--ink-1)} html.ap-theme.ap-dark ::placeholder{color:#6e6e73!important;opacity:1} html.ap-theme.ap-dark ::selection{background:var(--ap-accent-ring);color:#fff} html.ap-theme.ap-dark hr{border-color:rgba(255,255,255,.10);opacity:1} html.ap-theme.ap-dark h1, html.ap-theme.ap-dark h2, html.ap-theme.ap-dark h3, html.ap-theme.ap-dark h4, html.ap-theme.ap-dark h5, html.ap-theme.ap-dark h6, html.ap-theme.ap-dark .h1, html.ap-theme.ap-dark .h2, html.ap-theme.ap-dark .h3, html.ap-theme.ap-dark .h4, html.ap-theme.ap-dark .h5, html.ap-theme.ap-dark .h6{color:var(--ink-1)} html.ap-theme.ap-dark .text-muted, html.ap-theme.ap-dark .text-secondary, html.ap-theme.ap-dark .text-black-50{color:var(--ink-2)!important} html.ap-theme.ap-dark .text-dark, html.ap-theme.ap-dark .text-body{color:var(--ink-1)!important} html.ap-theme.ap-dark label, html.ap-theme.ap-dark .form-label, html.ap-theme.ap-dark .col-form-label, html.ap-theme.ap-dark .form-check-label{color:var(--ink-2)} html.ap-theme.ap-dark .card-title, html.ap-theme.ap-dark .modal-title{color:var(--ink-1)} html.ap-theme.ap-dark .btn-close{filter:invert(1) grayscale(1) brightness(1.6);opacity:.7} html.ap-theme.ap-dark .btn-close:hover{opacity:1} /* ========================================================================== 25. 深色模式 —— dapp 组件（dapp.css 里硬编码的 #fff） ========================================================================== */ html.ap-theme.ap-dark .dapp-search:focus-within{background:#2c2c2e;border-color:var(--line-2)} html.ap-theme.ap-dark .dapp-icon-btn, html.ap-theme.ap-dark .dapp-icon-btn:hover{background:#2c2c2e;color:var(--ink-1)} html.ap-theme.ap-dark .dapp-menu .dropdown-item:hover{background:rgba(255,255,255,.08)} html.ap-theme.ap-dark .dapp-card, html.ap-theme.ap-dark .dapp-page .mc-card, html.ap-theme.ap-dark .mc-card, html.ap-theme.ap-dark .dapp-page .mc-table-card, html.ap-theme.ap-dark .mc-table-card{background:var(--shell);color:var(--ink-1)} html.ap-theme.ap-dark .dapp-chip-w, html.ap-theme.ap-dark .dapp-chip-w-solid, html.ap-theme.ap-dark .dapp-chip{background:#2c2c2e;color:var(--ink-1);border-color:var(--line)} html.ap-theme.ap-dark .dapp-chip.on .n{background:var(--brand);color:#fff} html.ap-theme.ap-dark .dapp-file-row:hover{background:rgba(255,255,255,.06)} html.ap-theme.ap-dark .dapp-mini-btn{background:#2c2c2e;color:var(--ink-1);border-color:var(--line)} html.ap-theme.ap-dark .dapp-subnav{background:var(--shell);border-color:var(--line)} html.ap-theme.ap-dark .dapp-main .card-header, html.ap-theme.ap-dark .dapp-page .card-header, html.ap-theme.ap-dark .card-header{background:var(--shell);color:var(--ink-1);border-color:var(--line)} html.ap-theme.ap-dark .dapp-page .card-body, html.ap-theme.ap-dark .card-body, html.ap-theme.ap-dark .dapp-page .card-footer, html.ap-theme.ap-dark .card-footer{background:var(--shell);color:var(--ink-1);border-color:var(--line)} html.ap-theme.ap-dark .dapp-main .panel, html.ap-theme.ap-dark .panel{background:var(--shell);border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .dapp-main .panel-footer, html.ap-theme.ap-dark .panel-footer{background:var(--shell);border-color:var(--line)} html.ap-theme.ap-dark .dapp-main .well, html.ap-theme.ap-dark .well{background:#1c1c1e;border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .dapp-main select option, html.ap-theme.ap-dark select option{background:#2c2c2e;color:var(--ink-1)} html.ap-theme.ap-dark .dapp-main .input-group-text, html.ap-theme.ap-dark .input-group-text{background:#2c2c2e;color:var(--ink-2);border-color:var(--line)} html.ap-theme.ap-dark .dapp-main .bootstrap-table .fixed-table-toolbar .columns button{background:#2c2c2e!important;color:var(--ink-1)!important;border-color:var(--line)!important} html.ap-theme.ap-dark .dapp-main .table>tbody>tr:hover>*{background:rgba(255,255,255,.05)} html.ap-theme.ap-dark .dapp-main .table.table-bordered>thead>tr>th{background:#2c2c2e;color:var(--ink-3)} /* 图表 / 迷你进度条：轨道改深色，主色条保留品牌色 */ html.ap-theme.ap-dark .dapp-bar-mini, html.ap-theme.ap-dark #typeStack, html.ap-theme.ap-dark .dapp-stack{background:rgba(255,255,255,.10)} html.ap-theme.ap-dark .dapp-f-ico{border:.5px solid var(--line)} /* 安全中心 */ /* 主题全局 radio 为 20px 自绘控件且 position:relative 会压过 dapp 的 absolute 定位，强制拉回左侧留白槽 */ html.ap-theme .sec-channel{padding-left:46px} html.ap-theme .sec-channel input[type="radio"]{position:absolute;left:15px;top:13px;margin:0;flex:0 0 auto} html.ap-theme.ap-dark .sec-ov{background:var(--shell);border-color:var(--line)} html.ap-theme.ap-dark .sec-channel{background:var(--shell);border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .sec-channel:hover{background:rgba(255,255,255,.06);border-color:var(--line-2)} html.ap-theme.ap-dark .sec-channel.on{background:var(--brand-soft);border-color:var(--brand)} html.ap-theme.ap-dark .sec-channel .rec{background:#2c2c2e;color:var(--ink-2)} html.ap-theme.ap-dark .sec-env-item{background:var(--shell);border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .sec-savebar{background:rgba(28,28,30,.94)!important;border-color:var(--line);backdrop-filter:blur(20px)} /* ========================================================================== 26. 深色模式 —— Bootstrap 通用组件 ========================================================================== */ html.ap-theme.ap-dark .card{background:var(--shell);border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .modal-content{background:var(--shell);border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .modal-header, html.ap-theme.ap-dark .modal-footer{background:var(--shell);border-color:var(--line)} html.ap-theme.ap-dark .offcanvas{background:var(--shell);color:var(--ink-1)} html.ap-theme.ap-dark .dropdown-menu{background:#1c1c1e;border-color:var(--line)} html.ap-theme.ap-dark .dropdown-item{color:var(--ink-1)} html.ap-theme.ap-dark .dropdown-item:hover, html.ap-theme.ap-dark .dropdown-item:focus{background:rgba(255,255,255,.08);color:#fff} html.ap-theme.ap-dark .dropdown-divider{border-color:rgba(255,255,255,.10)} html.ap-theme.ap-dark .list-group-item{background:var(--shell);color:var(--ink-1);border-color:var(--line)} html.ap-theme.ap-dark .nav-tabs{border-color:var(--line)} html.ap-theme.ap-dark .nav-tabs .nav-link{color:var(--ink-2);border-color:transparent} html.ap-theme.ap-dark .nav-tabs .nav-link:hover{color:var(--ink-1);border-color:var(--line) var(--line) transparent} html.ap-theme.ap-dark .nav-tabs .nav-link.active{background:var(--shell);color:var(--ink-1);border-color:var(--line) var(--line) var(--shell)} html.ap-theme.ap-dark .nav-link{color:var(--ink-2)} html.ap-theme.ap-dark .nav-link:hover, html.ap-theme.ap-dark .nav-link.active{color:var(--ink-1)} html.ap-theme.ap-dark .breadcrumb{background:var(--shell);border:.5px solid var(--line)} html.ap-theme.ap-dark .breadcrumb-item, html.ap-theme.ap-dark .breadcrumb-item a{color:var(--ink-2)} html.ap-theme.ap-dark .breadcrumb-item.active{color:var(--ink-3)} html.ap-theme.ap-dark .pagination .page-link{background:#2c2c2e;color:var(--ink-1);border-color:var(--line)} html.ap-theme.ap-dark .pagination .page-link:hover{background:rgba(255,255,255,.08);color:#fff} html.ap-theme.ap-dark .pagination .page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:#fff} html.ap-theme.ap-dark .pagination .page-item.disabled .page-link{background:#1c1c1e;color:#6e6e73} html.ap-theme.ap-dark .progress{background:rgba(255,255,255,.10)} html.ap-theme.ap-dark .table{ --bs-table-color:var(--ink-1); --bs-table-bg:transparent; --bs-table-border-color:var(--line); color:var(--ink-1); } html.ap-theme.ap-dark .table>thead{background:rgba(255,255,255,.04)} html.ap-theme.ap-dark .table td, html.ap-theme.ap-dark .table th{border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .table-hover>tbody>tr:hover>*{ --bs-table-hover-bg:rgba(255,255,255,.06); background:rgba(255,255,255,.06); } html.ap-theme.ap-dark .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-striped-bg:rgba(255,255,255,.03)} html.ap-theme.ap-dark .btn-secondary{background:#2c2c2e;border-color:var(--line-2);color:var(--ink-1)} html.ap-theme.ap-dark .btn-secondary:hover, html.ap-theme.ap-dark .btn-secondary:focus{background:#3a3a3c;border-color:var(--line-2);color:#fff} html.ap-theme.ap-dark .btn-light, html.ap-theme.ap-dark .btn-white{background:#2c2c2e;border-color:var(--line-2);color:var(--ink-1)} html.ap-theme.ap-dark .btn-light:hover{background:#3a3a3c;color:#fff} html.ap-theme.ap-dark .btn-outline-secondary{color:var(--ink-2);border-color:var(--line-2)} html.ap-theme.ap-dark .btn-outline-secondary:hover{background:rgba(255,255,255,.08);color:#fff} html.ap-theme.ap-dark .form-control, html.ap-theme.ap-dark .form-select, html.ap-theme.ap-dark textarea, html.ap-theme.ap-dark input[type=text], html.ap-theme.ap-dark input[type=password], html.ap-theme.ap-dark input[type=number], html.ap-theme.ap-dark input[type=email], html.ap-theme.ap-dark input[type=url]{ background:#2c2c2e;color:var(--ink-1);border-color:var(--line-2); } html.ap-theme.ap-dark .form-control:focus, html.ap-theme.ap-dark .form-select:focus{ background:#2c2c2e;color:var(--ink-1); border-color:var(--ap-accent);box-shadow:0 0 0 .25rem var(--ap-accent-ring); } html.ap-theme.ap-dark .form-check-input{background-color:#2c2c2e;border-color:var(--line-2)} html.ap-theme.ap-dark .form-check-input:checked{background-color:var(--brand);border-color:var(--brand)} html.ap-theme.ap-dark .form-range::-webkit-slider-runnable-track{background:rgba(255,255,255,.12)} html.ap-theme.ap-dark .fixed-table-loading, html.ap-theme.ap-dark .bootstrap-table.fullscreen{background:rgba(28,28,30,.96);color:var(--ink-1)} html.ap-theme.ap-dark .tooltip .tooltip-inner{background:rgba(58,58,60,.96);color:#fff} html.ap-theme.ap-dark .popover{background:#1c1c1e;border-color:var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .popover-header{background:#1c1c1e;color:var(--ink-1);border-color:var(--line)} html.ap-theme.ap-dark .popover-body{color:var(--ink-2)} /* ========================================================================== 27. 深色模式 —— 前台（首页 / 上传 / 登录 / 用户中心） ========================================================================== */ html.ap-theme.ap-dark .fr-float-card{background:#2c2c2e;border:.5px solid var(--line);color:var(--ink-1)} html.ap-theme.ap-dark .fr-float-card .cap{color:var(--ink-3)} html.ap-theme.ap-dark .uc-drop, html.ap-theme.ap-dark .uc-drop#fileInput{background:#1c1c1e!important;border-color:var(--line-2);color:var(--ink-1)} html.ap-theme.ap-dark .uc-drop:hover, html.ap-theme.ap-dark .uc-drop.over{background:var(--brand-soft)!important;border-color:var(--brand)} html.ap-theme.ap-dark .uc-drop span{color:var(--ink-2)} html.ap-theme.ap-dark .uc-card, html.ap-theme.ap-dark .uc-user-card, html.ap-theme.ap-dark .uc-rail, html.ap-theme.ap-dark .uc-mini-btn, html.ap-theme.ap-dark .uc-file:hover{background:#1c1c1e;color:var(--ink-1)} html.ap-theme.ap-dark .uc-progress{background:rgba(255,255,255,.12)} html.ap-theme.ap-dark .fr-link-box{background:#2c2c2e;border-color:var(--line-2)} html.ap-theme.ap-dark .fr-link-box input{background:transparent;color:var(--ink-1)} html.ap-theme.ap-dark .fr-tab.active{background:var(--shell);color:var(--ink-1)} html.ap-theme.ap-dark .fr-tabs{background:#2c2c2e} html.ap-theme.ap-dark .fr-input{background:#2c2c2e;color:var(--ink-1);border-color:var(--line-2)} html.ap-theme.ap-dark .fr-input:focus{ background:#2c2c2e;border-color:var(--ap-accent); box-shadow:0 0 0 4px var(--ap-accent-ring); } html.ap-theme.ap-dark .fr-auth-list li i{background:#2c2c2e} html.ap-theme.ap-dark .fr-eyebrow{background:#2c2c2e;color:var(--ink-2);border-color:var(--line)} html.ap-theme.ap-dark .fr-mini{background:#2c2c2e;border-color:var(--line)} html.ap-theme.ap-dark .fr-stor:hover, html.ap-theme.ap-dark .fr-feat:hover{background:#2c2c2e} html.ap-theme.ap-dark .fr-faq-item, html.ap-theme.ap-dark .fr-faq-item summary{color:var(--ink-1)} /* 品牌渐变大块：压暗一档，避免深色下刺眼 */ html.ap-theme.ap-dark .fr-visual-hero, html.ap-theme.ap-dark .fr-cta, html.ap-theme.ap-dark .fr-auth-side{ background-image:linear-gradient(135deg, color-mix(in srgb, var(--ap-accent) 58%, #000), color-mix(in srgb, var(--ap-accent-2) 40%, #000))!important; } html.ap-theme.ap-dark .fr-visual-bar{background:rgba(255,255,255,.14)} html.ap-theme.ap-dark .fr-visual-bar i{background:rgba(255,255,255,.9)} /* ========================================================================== 28. 深色模式 —— 主题管理面板自身（预览卡跟随当前外观） ========================================================================== */ html.ap-theme.ap-dark .ap-tm-prev{background:#1c1c1e!important} html.ap-theme.ap-dark .ap-tm-prev .rail{background:#000!important} html.ap-theme.ap-dark .ap-tm-prev .rail i{background:rgba(255,255,255,.14)!important} html.ap-theme.ap-dark .ap-tm-prev .rail i:first-child{background:var(--ap-accent)!important} html.ap-theme.ap-dark .ap-tm-prev .bar{background:rgba(255,255,255,.12)!important} html.ap-theme.ap-dark .ap-tm-prev .blk{background:#2c2c2e!important} /* ========================================================================== 29. 深色模式 —— 内联样式兜底 -------------------------------------------------------------------------- 部分底色是 JS/模板内联写死的（如文件类型图标 .dapp-f-ico、.uc-file-ic）， 无法从源码层改色。这里用 currentColor 混合出柔和底色：既保留各类型原本 的品牌色区分，又不会在深色下亮成一块白。 ========================================================================== */ html.ap-theme.ap-dark .dapp-f-ico, html.ap-theme.ap-dark .uc-file-ic, html.ap-theme.ap-dark .uc-file-ic i{ background:rgba(255,255,255,.10)!important; /* 回退 */ background:color-mix(in srgb, currentColor 20%, transparent)!important; border:.5px solid color-mix(in srgb, currentColor 26%, transparent); } /* 内联白底容器（set_stor.php 等）：属性选择器兜住写死的 #fff */ html.ap-theme.ap-dark .dapp-page div[style*="background:#fff"], html.ap-theme.ap-dark .dapp-page div[style*="background: #fff"], html.ap-theme.ap-dark .dapp-page div[style*="background:#ffffff"]{ background:var(--shell)!important; } /* 轨道/骨架色：页面内联写死的浅灰（#eef0f5 / #e6e8f0）已改为消费这两个变量 */ html.ap-theme{--ap-track:#e8e9ed;--ap-track-2:#e2e4ea} html.ap-theme.ap-dark{--ap-track:rgba(255,255,255,.14);--ap-track-2:rgba(255,255,255,.18)} /* 组件演示页（admin/demo-apple.php）：它用 apple-ui.css 的 --ap-* 独立变量体系， 不消费上面的 --mc-* / --bs-* / dapp 令牌。这里在深色下同步重映射， （theme.js 也会给 .ap-scope 加 ap-dark，两者取值一致，互为兜底防闪烁） */ html.ap-theme.ap-dark .ap-scope{ --ap-bg:#000000; --ap-bg-alt:#0b0b0d; --ap-surface:#1c1c1e; --ap-surface-2:#232325; --ap-surface-3:#2c2c2e; --ap-line:rgba(255,255,255,.10); --ap-line-2:rgba(255,255,255,.18); --ap-tx:#f5f5f7; --ap-tx-2:#98989d; --ap-tx-3:#6e6e73; --ap-tx-4:#58585c; --ap-fill:rgba(120,120,128,.20); --ap-fill-2:rgba(120,120,128,.26); --ap-fill-3:rgba(120,120,128,.34); --ap-glass:rgba(28,28,30,.72); --ap-glass-2:rgba(20,20,22,.78); --ap-sh-1:0 1px 2px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.06); --ap-sh-2:0 4px 16px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.06); --ap-sh-3:0 18px 48px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.08); } /* ========================================================================== 30. 通用组件统一对齐（与 demo 的 ap-* 对齐） -------------------------------------------------------------------------- 本段集中处理之前散落在 dapp.css / bs5-overwind.css / macos.css 的 「dapp 自定义」组件 / Bootstrap 通用组件 / FontAwesome 内联元素， 让浅深色、圆角、字号、颜色全部跟 demo 的 ap-* 体系对齐。 ========================================================================== */ html.ap-theme{--bs-link-color:var(--brand);--bs-link-hover-color:var(--brand-2)} /* —— .dapp-icon-btn（顶栏图标按钮） —— */ html.ap-theme .dapp-icon-btn{ width:36px;height:36px;border-radius:10px;background:transparent;border:.5px solid transparent; color:var(--ink-2);transition:background .18s,color .18s,border-color .18s; } html.ap-theme .dapp-icon-btn:hover{background:var(--brand-soft);color:var(--brand)} html.ap-theme .dapp-icon-btn:active{transform:scale(.94)} /* —— 顶栏搜索框（dapp-search）—— */ html.ap-theme .dapp-search{background:var(--fill,#f2f2f7);border:.5px solid transparent} html.ap-theme.ap-dark .dapp-search{background:rgba(255,255,255,.10)} html.ap-theme .dapp-search:focus-within{background:var(--shell);border-color:var(--line-2)} /* —— 链接 —— */ html.ap-theme a{color:var(--brand);transition:color .18s} html.ap-theme a:hover{color:var(--brand-2)} /* —— 通用 badge / label（Apple 软底 + pill 圆角） —— */ html.ap-theme .badge, html.ap-theme .label{ display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500; padding:2px 9px;border-radius:var(--ap-pill,999px);background:var(--fill-2);color:var(--ink-1); } html.ap-theme .badge-primary, html.ap-theme .label-primary{background:var(--brand-soft);color:var(--brand)} html.ap-theme .badge-success, html.ap-theme .label-success{background:var(--mint-soft);color:#0a7f4f} html.ap-theme.ap-dark .badge-success, html.ap-theme.ap-dark .label-success{color:#30d158} html.ap-theme .badge-info{background:rgba(50,173,230,.14);color:#176f8a} html.ap-theme .badge-warning, html.ap-theme .label-warning{background:var(--amber-soft);color:#8a5a00} html.ap-theme.ap-dark .badge-warning, html.ap-theme.ap-dark .label-warning{color:#ff9f0a} html.ap-theme .badge-danger, html.ap-theme .label-danger{background:var(--coral-soft);color:#c0392b} html.ap-theme.ap-dark .badge-danger, html.ap-theme.ap-dark .label-danger{color:#ff6961} /* —— alert（提示条） —— */ html.ap-theme .alert{border-radius:var(--ap-r-ctl,10px);border:.5px solid var(--line); background:var(--shell);color:var(--ink-1);padding:11px 14px;font-size:13px;} html.ap-theme .alert-success{background:var(--mint-soft);border-color:transparent;color:#0a7f4f} html.ap-theme .alert-info, html.ap-theme .alert-primary{background:var(--brand-soft);border-color:transparent;color:var(--brand)} html.ap-theme .alert-warning{background:var(--amber-soft);border-color:transparent;color:#8a5a00} html.ap-theme .alert-danger{background:var(--coral-soft);border-color:transparent;color:#c0392b} /* —— dropdown-menu —— */ html.ap-theme .dropdown-menu{ border:.5px solid var(--line);border-radius:12px;background:var(--shell); box-shadow:0 18px 48px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.06); padding:5px;font-size:13px;} html.ap-theme .dropdown-item{padding:7px 11px;border-radius:7px;color:var(--ink-1)} html.ap-theme .dropdown-item:hover, html.ap-theme .dropdown-item:focus{background:var(--brand-soft);color:var(--brand)} html.ap-theme .dropdown-divider{border-color:var(--line)} /* —— nav-tabs —— */ html.ap-theme .nav-tabs{border-bottom:.5px solid var(--line);gap:18px} html.ap-theme .nav-tabs .nav-link{ border:0;background:transparent;color:var(--ink-2); padding:8px 0 11px;border-radius:0;font-size:13.5px; position:relative;transition:color .18s;} html.ap-theme .nav-tabs .nav-link:hover{color:var(--ink-1)} html.ap-theme .nav-tabs .nav-link.active{color:var(--ink-1);font-weight:600;background:transparent} html.ap-theme .nav-tabs .nav-link.active::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px; background:var(--brand);animation:ap-tab-grow .26s var(--ap-ease, cubic-bezier(.32,.72,0,1));} @keyframes ap-tab-grow{from{transform:scaleX(.4);opacity:0}to{transform:scaleX(1);opacity:1}} /* —— pagination —— */ html.ap-theme .pagination{margin:14px 0 6px;gap:4px} html.ap-theme .pagination .page-link{ min-width:32px;height:32px;padding:0 9px;border-radius:9px; background:transparent;border:.5px solid transparent;color:var(--ink-2); font-variant-numeric:tabular-nums;font-size:13px;} html.ap-theme .pagination .page-link:hover{background:var(--brand-soft);color:var(--brand)} html.ap-theme .pagination .page-item.active .page-link{ background:var(--brand);color:#fff;border-color:transparent;font-weight:600;} html.ap-theme .pagination .page-item.disabled .page-link{color:var(--ink-3);background:transparent} /* —— progress —— */ html.ap-theme .progress{height:6px;border-radius:3px;background:var(--fill-2);overflow:hidden} html.ap-theme .progress-bar{background:var(--brand);border-radius:3px} /* —— list-group —— */ html.ap-theme .list-group{border-radius:var(--ap-r-card,18px);overflow:hidden;border:.5px solid var(--line)} html.ap-theme .list-group-item{ background:var(--shell);color:var(--ink-1);border-color:var(--line); padding:11px 16px;font-size:13.5px;} html.ap-theme .list-group-item:hover{background:var(--brand-soft)} /* —— tooltip / popover —— */ html.ap-theme .tooltip-inner{background:rgba(30,30,32,.92);color:#fff;border-radius:7px;font-size:11.5px;padding:5px 9px} html.ap-theme .popover{border:.5px solid var(--line);border-radius:12px;background:var(--shell);box-shadow:0 18px 48px rgba(0,0,0,.12)} html.ap-theme .popover-header{background:transparent;color:var(--ink-1);font-size:13px;font-weight:600} html.ap-theme .popover-body{color:var(--ink-1);font-size:12.5px} /* —— modal —— */ html.ap-theme .modal-content{border:.5px solid var(--line);border-radius:var(--ap-r-xl,22px);background:var(--shell);box-shadow:0 32px 80px rgba(0,0,0,.24)} html.ap-theme .modal-header{border-bottom:.5px solid var(--line);padding:18px 22px} html.ap-theme .modal-title{font-size:15px;font-weight:600;letter-spacing:-.012em} html.ap-theme .modal-body{padding:18px 22px} html.ap-theme .modal-footer{border-top:.5px solid var(--line);padding:14px 18px;gap:8px} /* —— 表格 cell padding 与行高统一（与 demo ap-table 对齐） —— */ html.ap-theme .dapp-page .table{margin-bottom:0} html.ap-theme .dapp-page .table>thead>tr>th, html.ap-theme .dapp-page .table>tbody>tr>td{ padding:12px 16px;font-size:13px;vertical-align:middle; border-top:0;border-bottom:.5px solid var(--line);} html.ap-theme .dapp-page .table>thead>tr>th{ background:var(--surface-2,rgba(0,0,0,.02));color:var(--ink-3); font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; border-bottom:.5px solid var(--line);white-space:nowrap;} html.ap-theme .dapp-page .table>tbody>tr:hover{background:var(--brand-soft)} html.ap-theme .dapp-page .table>tbody>tr:last-child>td{border-bottom:0} html.ap-theme .dapp-page .fixed-table-container{border:.5px solid var(--line);border-radius:var(--ap-r-card,18px);background:var(--shell);box-shadow:0 1px 2px rgba(0,0,0,.04)} html.ap-theme .dapp-page .fixed-table-toolbar{padding:14px 18px;border-bottom:.5px solid var(--line)} html.ap-theme .dapp-page .fixed-table-toolbar .search input{height:34px;border-radius:9px;border:.5px solid var(--line-2);padding:0 12px;font-size:13px;background:var(--shell);color:var(--ink-1)} html.ap-theme .dapp-page .fixed-table-toolbar .btn, html.ap-theme .dapp-page .fixed-table-toolbar button{border-radius:9px!important} /* —— bootstrap-table 列切换下拉 —— */ html.ap-theme .dapp-page .columns .btn-default{ background:var(--shell)!important;border:.5px solid var(--line-2)!important;color:var(--ink-1)!important; border-radius:9px!important;} html.ap-theme .dapp-page .columns label{margin:0;padding:6px 10px;border-radius:7px;display:flex;align-items:center;gap:7px;color:var(--ink-1)} html.ap-theme .dapp-page .columns label:hover{background:var(--brand-soft);color:var(--brand)} /* —— heading / text —— */ html.ap-theme h1,html.ap-theme h2,html.ap-theme h3,html.ap-theme h4,html.ap-theme h5,html.ap-theme h6{color:var(--ink-1)} html.ap-theme small,.text-muted{color:var(--ink-2)!important} html.ap-theme hr{border-color:var(--line);opacity:1} /* —— nav-pills —— */ html.ap-theme .nav-pills .nav-link{border-radius:9px;color:var(--ink-2)} html.ap-theme .nav-pills .nav-link.active{background:var(--brand);color:#fff;font-weight:600} /* —— well —— */ html.ap-theme .well{background:var(--shell);border:.5px solid var(--line);border-radius:var(--ap-r-card,18px);color:var(--ink-1)} /* —— input-group —— */ html.ap-theme .input-group>.form-control{border-radius:var(--ap-r-ctl,10px) 0 0 var(--ap-r-ctl,10px)} html.ap-theme .input-group>.input-group-append>.btn, html.ap-theme .input-group>.input-group-prepend>.btn{ border-radius:0 var(--ap-r-ctl,10px) var(--ap-r-ctl,10px) 0; background:var(--brand-soft);color:var(--brand);font-weight:600;border:0;} /* —— layui-layer 标题/按钮 —— */ html.ap-theme .layui-layer-content{padding:18px} html.ap-theme .layui-layer-btn{padding:8px 14px 12px} html.ap-theme .layui-layer-btn .layui-layer-btn0{ background:var(--brand)!important;color:#fff!important;border-color:transparent!important;border-radius:9px!important;} html.ap-theme .layui-layer-btn a{background:var(--shell)!important;color:var(--ink-1)!important;border:.5px solid var(--line-2)!important;border-radius:9px!important;margin-right:8px!important} html.ap-theme .layui-layer-title{background:transparent!important;color:var(--ink-1)!important;font-size:14.5px!important;font-weight:600!important;padding:14px 22px!important;border-bottom:.5px solid var(--line)!important} /* —— 字体统一 —— */ html.ap-theme .dapp-page, html.ap-theme .dapp-page *{font-family:var(--font-sans)} /* —— 后台角色 chip —— */ html.ap-theme .dapp-tag{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--ap-pill,999px);font-size:11.5px;font-weight:500;background:var(--fill-2);color:var(--ink-1)} html.ap-theme .dapp-tag.admin{background:var(--brand-soft);color:var(--brand)} html.ap-theme .dapp-tag.super{background:rgba(175,82,222,.14);color:var(--ap-purple,#af52de)} /* ========================================================================== 新增后台页适配（DB 1027-1029：订单/举报/存储体检/工具箱/运营数据/兑换码/ 优惠券/备份恢复/存储迁移/登录日志） -------------------------------------------------------------------------- 这些页用私有类搭卡片（.od-* / .rp-* / .sh-* / .tl-* / .st-* / .rd-* / .cp-* / .bk-* / .mg-* / .lg-*），不走 .mc-table-card。卡片底色/描边已全部 换成主题令牌（--card/--line/--r-md），这里只补 Apple 特有的柔和阴影与 表头语义，使其与工作台、文件管理等既有页同一观感。 ========================================================================== */ html.ap-theme .od-stat .it, html.ap-theme .od-table, html.ap-theme .rp-table, html.ap-theme .sh-card, html.ap-theme .tl-card, html.ap-theme .tl-panel, html.ap-theme .st-card, html.ap-theme .st-panel, html.ap-theme .rd-panel, html.ap-theme .cp-panel, html.ap-theme .bk-panel, html.ap-theme .mg-panel, html.ap-theme .lg-stat .it, html.ap-theme .lg-table{ box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); } html.ap-theme.ap-dark .od-stat .it, html.ap-theme.ap-dark .od-table, html.ap-theme.ap-dark .rp-table, html.ap-theme.ap-dark .sh-card, html.ap-theme.ap-dark .tl-card, html.ap-theme.ap-dark .tl-panel, html.ap-theme.ap-dark .st-card, html.ap-theme.ap-dark .st-panel, html.ap-theme.ap-dark .rd-panel, html.ap-theme.ap-dark .cp-panel, html.ap-theme.ap-dark .bk-panel, html.ap-theme.ap-dark .mg-panel, html.ap-theme.ap-dark .lg-stat .it, html.ap-theme.ap-dark .lg-table{box-shadow:none} /* 表头：Apple 浅填充 + 次级文字色 */ html.ap-theme .od-table th, html.ap-theme .rp-table th, html.ap-theme .rd-table th, html.ap-theme .cp-table th, html.ap-theme .bk-table th, html.ap-theme .mg-table th, html.ap-theme .lg-table th{ background:var(--bg-soft,#f2f2f5); color:var(--ink-2); font-weight:600; letter-spacing:.2px; } /* 入口卡（工具箱）：hover 抬起而非贴纸平移 */ html.ap-theme .tl-card:hover{box-shadow:0 2px 6px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.08)} /* 子导航：Apple 胶囊组 */ html.ap-theme .dapp-subnav{border:.5px solid var(--line-2);background:var(--shell)} html.ap-theme .dapp-subnav a.on{background:var(--ink-1);color:var(--shell)}