/* ========================================================= 科技风主题（tech） —— 仅在 下生效 暖橙护眼版：奶油暖白底 + 橙色霓虹发光 + 玻璃拟态 + 平滑过渡 不修改任何现有功能逻辑，仅在视觉层叠加 ========================================================= */ html[data-theme="tech"]{ --brand:#ff8a3d; /* 暖橙主色 */ --brand-hover:#ffa45c; --brand-soft:rgba(255,138,61,.14); --brand-soft2:rgba(255,138,61,.08); --bg:#f7f1e8; /* 奶油暖白底（护眼） */ --card:rgba(255,252,247,.86); /* 暖白玻璃面板 */ --text:#3a322b; /* 深暖灰文字 */ --text2:#6b5f54; --text3:#9b8d7e; --border:rgba(214,170,130,.35); --line:rgba(214,170,130,.20); --danger:#e8553e; --danger-soft:rgba(232,85,62,.12); --ok:#3ea87a; --radius:10px; --tech-glow:0 0 18px rgba(255,138,61,.35); } /* ---------- 背景层：暖白渐变 + 细网格 ---------- */ html[data-theme="tech"] body{ background: radial-gradient(1100px 560px at 82% -12%, rgba(255,138,61,.10), transparent 60%), radial-gradient(900px 520px at -8% 112%, rgba(255,176,102,.10), transparent 60%), linear-gradient(180deg,#f7f1e8,#fbf6ee 60%,#f4ede2); transition:background .4s ease; } html[data-theme="tech"] body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(180,150,120,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(180,150,120,.06) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 82%); mask-image:radial-gradient(circle at 50% 38%,#000,transparent 82%); } /* ---------- 水波纹画布（位于内容之上，屏幕混合，不拦截点击） ---------- */ #tech-fx{position:fixed;inset:0;z-index:55;pointer-events:none;mix-blend-mode:multiply} /* ---------- 统一容器层级（让背景画布透出） ---------- */ html[data-theme="tech"] .app{position:relative;z-index:1} /* ---------- 顶栏 ---------- */ html[data-theme="tech"] .top{ background:rgba(255,252,247,.86); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,138,61,.28); box-shadow:0 1px 0 rgba(255,138,61,.12),0 8px 26px rgba(120,90,50,.12); } html[data-theme="tech"] .logo-m{ background:linear-gradient(135deg,#ff8a3d,#ffb86b); box-shadow:0 0 14px rgba(255,138,61,.45); } html[data-theme="tech"] .logo-t{ background:linear-gradient(90deg,#e8702a,#f5974a); -webkit-background-clip:text;background-clip:text;color:transparent; font-weight:700; } html[data-theme="tech"] .stat{color:var(--text3)} /* ---------- 玻璃面板 ---------- */ html[data-theme="tech"] .nav, html[data-theme="tech"] .list, html[data-theme="tech"] .read, html[data-theme="tech"] .apprail{ background:var(--card); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } html[data-theme="tech"] .apprail{border-right:1px solid rgba(214,170,130,.30)} html[data-theme="tech"] .nav{border-right:1px solid rgba(214,170,130,.28)} html[data-theme="tech"] .list{border-right:1px solid rgba(214,170,130,.28)} /* ---------- 导航高亮发光 ---------- */ html[data-theme="tech"] .grp-h:hover{background:rgba(255,138,61,.07)} html[data-theme="tech"] .sub:hover{background:rgba(255,138,61,.07)} html[data-theme="tech"] .sub.on{ background:linear-gradient(90deg,rgba(255,138,61,.22),rgba(255,138,61,.03)); color:var(--brand);border-left:2px solid var(--brand); box-shadow:inset 0 0 18px rgba(255,138,61,.12); } html[data-theme="tech"] .topic:hover{background:rgba(255,138,61,.07)} html[data-theme="tech"] .topic.on{ background:linear-gradient(90deg,rgba(255,138,61,.18),transparent); color:var(--brand);font-weight:600; } /* ---------- 列表项 ---------- */ html[data-theme="tech"] .item:hover{background:rgba(255,138,61,.06)} html[data-theme="tech"] .item.on{ background:rgba(255,138,61,.10);border-left-color:var(--brand); box-shadow:0 0 16px rgba(255,138,61,.16); } html[data-theme="tech"] .item.on .t{color:var(--brand)} html[data-theme="tech"] .lhead{background:rgba(255,252,247,.85);border-bottom-color:rgba(214,170,130,.28)} /* ---------- 左侧入口 rail ---------- */ html[data-theme="tech"] .apprail{border-right:1px solid rgba(214,170,130,.30)} html[data-theme="tech"] .rail-item:hover{background:rgba(255,138,61,.07);color:#3a322b} html[data-theme="tech"] .rail-item.on{ background:rgba(255,138,61,.14);color:var(--brand);font-weight:600; box-shadow:0 0 16px rgba(255,138,61,.22); } /* ---------- 正文阅读 ---------- */ html[data-theme="tech"] .rbody{color:#4a4138} html[data-theme="tech"] .rbody h1, html[data-theme="tech"] .rbody h2, html[data-theme="tech"] .rbody h3, html[data-theme="tech"] .rbody h4{color:#3a322b} html[data-theme="tech"] .rbody h2{border-bottom-color:rgba(255,138,61,.28)} html[data-theme="tech"] .rbody a{color:var(--brand);text-shadow:0 0 8px rgba(255,138,61,.30)} html[data-theme="tech"] .rbody blockquote{ background:rgba(255,138,61,.08);border-left-color:var(--brand);color:#6b5f54} html[data-theme="tech"] .rbody code{background:rgba(255,138,61,.10);color:#c4631e} html[data-theme="tech"] .rbody pre{ background:rgba(120,90,50,.06);border:1px solid rgba(214,170,130,.30)} html[data-theme="tech"] .rbody table th{background:rgba(255,138,61,.10);color:#7a4a20} html[data-theme="tech"] .rbody td, html[data-theme="tech"] .rbody th{border-color:rgba(214,170,130,.32)} html[data-theme="tech"] .rbody tbody tr:nth-child(even) td{background:rgba(255,138,61,.035)} html[data-theme="tech"] .rhead h1{ background:linear-gradient(90deg,#ff9a4d,#ffb86b); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 10px rgba(255,138,61,.28)); } html[data-theme="tech"] .rmeta .tag{background:rgba(255,138,61,.16);color:var(--brand)} /* ---------- 搜索框发光 ---------- */ html[data-theme="tech"] .search input{ background:rgba(255,255,255,.65);border-color:rgba(214,170,130,.40);color:#3a322b} html[data-theme="tech"] .search input::placeholder{color:var(--text3)} html[data-theme="tech"] .search input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,138,61,.16),0 0 18px rgba(255,138,61,.20)} html[data-theme="tech"] .rs .it:hover{background:rgba(255,138,61,.08)} /* ---------- 通用浅色表面改为玻璃（弹窗/菜单/卡片） ---------- */ html[data-theme="tech"] .rs, html[data-theme="tech"] .umenu, html[data-theme="tech"] .cmenu, html[data-theme="tech"] .ctx-menu, html[data-theme="tech"] .file-item, html[data-theme="tech"] .attach, html[data-theme="tech"] .attach-item, html[data-theme="tech"] .fld, html[data-theme="tech"] .isb-btn, html[data-theme="tech"] .ti-tx, html[data-theme="tech"] .ck, html[data-theme="tech"] .lbtn, html[data-theme="tech"] .more, html[data-theme="tech"] .ctx-item, html[data-theme="tech"] .ph-card, html[data-theme="tech"] .se-card, html[data-theme="tech"] .se-row{ background:rgba(255,255,255,.75); border-color:rgba(214,170,130,.40); color:var(--text); } html[data-theme="tech"] .dlg, html[data-theme="tech"] .rs, html[data-theme="tech"] .umenu, html[data-theme="tech"] .cmenu, html[data-theme="tech"] .ctx-menu{ background:rgba(255,252,247,.97); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(214,170,130,.45); box-shadow:0 12px 44px rgba(120,90,50,.18); } html[data-theme="tech"] .dlg-t{color:#3a322b} html[data-theme="tech"] .dlg-c, html[data-theme="tech"] .dlg-desc{color:var(--text2)} html[data-theme="tech"] .dlg-desc{background:rgba(255,138,61,.06)} html[data-theme="tech"] .fld:focus, html[data-theme="tech"] .ti-tx:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,138,61,.16)} html[data-theme="tech"] .ctx-item:hover, html[data-theme="tech"] .umenu-item:hover{background:rgba(255,138,61,.10);color:var(--brand)} html[data-theme="tech"] .ph-api{background:rgba(255,255,255,.55);border-color:rgba(214,170,130,.30);color:var(--text2)} /* ---------- 按钮霓虹 ---------- */ html[data-theme="tech"] .btn-primary{ background:linear-gradient(135deg,#ff7a2f,#ffa45c); color:#3a1e08;font-weight:600;border:none; box-shadow:0 4px 18px rgba(255,138,61,.35); } html[data-theme="tech"] .btn-primary:hover{ box-shadow:0 6px 26px rgba(255,138,61,.5);transform:translateY(-1px)} html[data-theme="tech"] .btn-ghost{ background:rgba(255,255,255,.5);border-color:rgba(214,170,130,.45);color:var(--text2)} html[data-theme="tech"] .btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:rgba(255,138,61,.10)} html[data-theme="tech"] .btn-danger:hover{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)} /* ---------- 结构化编辑器发光 ---------- */ html[data-theme="tech"] .se-board{ background:rgba(255,138,61,.08);border:1px solid rgba(255,138,61,.28); box-shadow:0 0 22px rgba(255,138,61,.10)} html[data-theme="tech"] .se-board-title{color:var(--brand);text-shadow:0 0 10px rgba(255,138,61,.30)} html[data-theme="tech"] .se-card:focus-within{border-color:var(--brand);box-shadow:0 0 16px rgba(255,138,61,.20)} html[data-theme="tech"] .se-row:hover{background:rgba(255,138,61,.10)} html[data-theme="tech"] .se-row.se-dragging{background:rgba(255,138,61,.16)} html[data-theme="tech"] .se-row.se-over{border-top-color:var(--brand)} html[data-theme="tech"] .se-handle{color:var(--text3)} html[data-theme="tech"] .se-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,138,61,.16)} html[data-theme="tech"] .se-add{border-color:rgba(214,170,130,.45);color:var(--text2)} html[data-theme="tech"] .se-add:hover{border-color:var(--brand);color:var(--brand);background:rgba(255,138,61,.10)} /* ---------- 培训/需求卡片发光 ---------- */ html[data-theme="tech"] .ph-card:hover{border-color:var(--brand);background:rgba(255,138,61,.08);box-shadow:0 0 18px rgba(255,138,61,.18)} html[data-theme="tech"] .ph-tr:not(.ph-th):hover{background:rgba(255,138,61,.06)} html[data-theme="tech"] .ph-bar i{background:linear-gradient(90deg,#ff7a2f,#ffa45c);box-shadow:0 0 8px rgba(255,138,61,.4)} /* ---------- 图片/附件 ---------- */ html[data-theme="tech"] .md-img{border-color:rgba(214,170,130,.30)} html[data-theme="tech"] .md-img:hover{box-shadow:0 4px 18px rgba(255,138,61,.28)} html[data-theme="tech"] .file-item:hover{border-color:var(--brand);background:rgba(255,138,61,.08);box-shadow:0 0 14px rgba(255,138,61,.18)} /* ---------- 平滑过渡（仅科技主题，避免经典主题变化） ---------- */ html[data-theme="tech"] .top, html[data-theme="tech"] .nav, html[data-theme="tech"] .list, html[data-theme="tech"] .read, html[data-theme="tech"] .apprail, html[data-theme="tech"] .sub, html[data-theme="tech"] .topic, html[data-theme="tech"] .item, html[data-theme="tech"] .grp-h, html[data-theme="tech"] .btn-primary, html[data-theme="tech"] .btn-ghost, html[data-theme="tech"] .rail-item{ transition:background .22s ease,color .22s ease,box-shadow .22s ease,border-color .22s ease,transform .15s ease; } /* ---------- 主题切换按钮 ---------- */ .btn-theme{ display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px; border:1px solid var(--border);border-radius:var(--radius);background:#fff; font-size:12.5px;color:var(--text2);white-space:nowrap;transition:.15s;flex-shrink:0} .btn-theme:hover{border-color:var(--brand);color:var(--brand)} .btn-theme .bt-ico{font-size:14px;line-height:1} html[data-theme="tech"] .btn-theme{ background:rgba(255,138,61,.14);border-color:rgba(255,138,61,.5); color:var(--brand);box-shadow:0 0 14px rgba(255,138,61,.25)} html[data-theme="tech"] .btn-theme:hover{ background:rgba(255,138,61,.22);box-shadow:0 0 20px rgba(255,138,61,.42)} /* ---------- 首页排名徽标（与暖橙主题区分，避免融入背景） ---------- */ html[data-theme="tech"] .hm-rank{ background:rgba(255,138,61,.18); color:#8a4a1f; border:1px solid rgba(255,138,61,.35); font-weight:700; } html[data-theme="tech"] .hm-rank.top{ background:linear-gradient(135deg,#ff8a3d,#ffaa5c); color:#fff; border:none; box-shadow:0 0 12px rgba(255,138,61,.35); } /* ---------- 尊重减弱动效偏好 ---------- */ @media (prefers-reduced-motion: reduce){ html[data-theme="tech"] *{transition:none!important;animation:none!important} }