:root{ --bg:#0b1220; --panel:#0f1b2d; --panel2:#0d1727; --text:#f0f0f7; --muted:#9fb3d6; --border:rgba(140,170,220,.22); --border2:rgba(180,200,240,.18); --accent:#4ea3ff; --slot:#e6e7ea; /* 国服浅灰槽 */ --slotBorder:#a9aeb9; --slotInner:#f4f5f7; --danger:#ff5a6b; } /* ===================== 主题：深色/浅色 ===================== 默认（无 class）为深色。在上加 .theme-light 即可切换到浅色。 */ body.theme-light{ /* Morandi light (方案C：冷雾蓝灰) —— 背景最浅、文字/框线更深；避免“纯白发光” */ --bg:#eef1f4; /* 底板：雾白蓝灰（非纯白） */ --panel:#d9dee7; /* 通用面板：浅冷灰 */ --panel2:#cbd2dd; /* 次级面板：更深一点 */ --text:#04070c; /* 深灰蓝黑 */ --muted:#06192c; /* muted 也保持深灰 */ --border:rgba(27,36,48,.34); --border2:rgba(27,36,48,.22); --accent:#8593a4; /* 标题栏（深） */ --danger:#b85c5c; /* 莫兰迪红 */ /* 方案C三色：深→中→浅（用于：标题栏/大框/pill） */ --c-title:#8593a4; --c-box:#a7acb6; --c-pill:#bfc7d5; } body.theme-light{ /* Morandi light background (淡彩，不刺眼) */ background: radial-gradient(1200px 700px at 18% -10%, rgba(133,147,164,.18), transparent 58%), radial-gradient(900px 600px at 92% 0%, rgba(156,165,182,.12), transparent 58%), var(--bg); } body.theme-light .topbar{ /* 标题栏填充（深） */ background:linear-gradient(180deg, rgba(133,147,164,.96), rgba(125,137,152,.92)); box-shadow: 0 10px 30px rgba(20,30,50,.10); } body.theme-light .col{ /* 大框填充（中） */ background:linear-gradient(180deg, rgba(156,165,182,.94), rgba(146,155,172,.92)); box-shadow: 0 10px 26px rgba(20,30,50,.10); } body.theme-light .col-header, body.theme-light .job-picker{ background: rgba(133,147,164,.58); } body.theme-light .btn, body.theme-light .loadout-tab, body.theme-light .job-picker select{ /* pill 填充（浅） */ background: rgba(191,199,213,.90); } body.theme-light .loadout, body.theme-light .stat-col{ background: rgba(217,222,231,.88); } body.theme-light .job-label{ color:var(--text); } *{box-sizing:border-box;} html,body{height:100%; margin:0;} body{ background: radial-gradient(1200px 700px at 20% -10%, rgba(78,163,255,.18), transparent 55%), radial-gradient(900px 600px at 90% 0%, rgba(160,110,255,.14), transparent 55%), var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; overflow-x:auto; } .app-shell{ width:100%; max-width:1920px; margin:0 auto; padding:10px 12px 12px; min-width:1280px; } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:linear-gradient(180deg, rgba(15,27,45,.92), rgba(15,27,45,.72)); border:1px solid var(--border); border-radius:14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .topbar-left{display:flex; align-items:center; gap:14px;} .logo{ font-weight:800; letter-spacing:.4px; } .version{ font-size:12px; color:var(--muted); margin-left:6px; font-weight:600; } .job-picker{ display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--border2); background:rgba(0,0,0,.16); border-radius:12px; } /* 在配装卡片头部使用的紧凑版职业选择 */ .job-picker.inline{ padding:4px 8px; border-radius:12px; gap:8px; } .job-picker.inline .job-label{font-size:12px;} .job-picker.inline select{padding:6px 10px;} /* ==================== Compare / 双配装 ==================== */ .loadouts{display:flex; flex-direction:column; gap:12px;} .loadout{ border:1px solid var(--border2); background:rgba(0,0,0,.10); border-radius:14px; padding:10px; } .loadout-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .loadout-tools{ display:flex; align-items:center; gap:10px; margin-left:auto; } .loadout-tab{ color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:12px; padding:8px 10px; cursor:pointer; font-weight:900; } .loadout.is-active{ border-color: rgba(78,163,255,.55); box-shadow:0 0 0 3px rgba(78,163,255,.10); } .loadout.is-inactive{ opacity:.55; filter:saturate(.6); } .compare-stats{ /* v1.0.5d: 统计面板上下并列 */ display:flex; flex-direction:column; gap:12px; } .stat-col{ border:1px solid var(--border2); background:rgba(0,0,0,.10); border-radius:14px; padding:10px; min-width:0; } .power-line{ margin:6px 0 10px; padding:10px 12px; border:1px solid var(--border2); border-radius:12px; background:rgba(0,0,0,.14); font-weight:900; letter-spacing:.3px; font-size:20px; text-align:center; } .power-line span{font-variant-numeric: tabular-nums;} /* v1.0.5d: 统计摘要（紧凑分组展示） */ .stats-summary{ display:flex; flex-direction:column; gap:10px; } .stat-group{ border:1px solid var(--border2); background:rgba(0,0,0,.08); border-radius:12px; padding:8px 10px; } .stat-group-title{ font-weight:900; letter-spacing:.4px; margin-bottom:6px; color:var(--text); } .stat-item{ display:grid; grid-template-columns: 1fr auto; gap:6px 10px; align-items:baseline; padding:5px 0; border-top:1px solid rgba(255,255,255,.06); } .stat-item:first-of-type{ border-top:none; } .stat-item .label{ font-weight:800; } .stat-item .value{ font-variant-numeric: tabular-nums; font-weight:900; } .stat-item .note{ grid-column: 1 / -1; color:var(--muted); font-size:12px; margin-top:-2px; } .divider{height:1px; background:var(--border2); margin:10px 0;} .job-label{ color:#d8e8ff; font-weight:800; letter-spacing:.5px; } .job-picker select{ color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; padding:6px 10px; outline:none; } .topbar-right{display:flex; gap:10px; align-items:center;} /* ==================== Settings Menu ==================== */ .settings-wrap{ position:relative; display:inline-flex; align-items:center; } /* 设置按钮：使用 SVG（currentColor）以适配深/浅色模式 */ #btn-settings{ color: var(--text); } .settings-gear{ display:block; } .ms-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:180px; padding:8px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, rgba(15,27,45,.96), rgba(13,23,39,.96)); box-shadow: 0 14px 30px rgba(0,0,0,.35); z-index: 9999; overflow: visible; } body.theme-light .ms-menu{ background:rgba(240,245,252,.98); border-color:rgba(0,0,0,.22); box-shadow: 0 14px 30px rgba(0,0,0,.20); } .ms-menu-item{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--text); cursor:pointer; font-weight:800; text-align:left; } body.theme-light .ms-menu-item{ color: #101827; } .ms-menu-item:hover{ background:rgba(78,163,255,.10); border-color:rgba(78,163,255,.25); } .ms-menu-sep{ height:1px; background:var(--border2); margin:6px 2px; } body.theme-light .ms-menu-sep{ background:rgba(0,0,0,.12); } /* 子菜单：显示在箭头右侧（而不是下方） */ .ms-menu-sub{ position:absolute; top:0; left:calc(100% + 8px); min-width: 180px; padding:8px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, rgba(15,27,45,.96), rgba(13,23,39,.96)); box-shadow: 0 14px 30px rgba(0,0,0,.35); } body.theme-light .ms-menu-sub{ background:rgba(240,245,252,.98); border-color:rgba(0,0,0,.22); box-shadow: 0 14px 30px rgba(0,0,0,.20); } .ms-menu-sub.open-left{ left:auto; right:calc(100% + 8px); } .ms-menu-arrow{ opacity:.8; } .btn{ color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:12px; padding:8px 12px; cursor:pointer; font-weight:700; } .btn:hover{border-color:rgba(78,163,255,.55); box-shadow:0 0 0 3px rgba(78,163,255,.12);} .btn.danger{border-color:rgba(255,90,107,.55); background:rgba(255,90,107,.08);} .btn.danger:hover{box-shadow:0 0 0 3px rgba(255,90,107,.12);} .btn.danger.pc-power-btn{ border-color:rgba(255,90,107,.75); background:rgba(255,90,107,.20); } .btn.danger.pc-power-btn:hover{ box-shadow:0 0 0 3px rgba(255,90,107,.18); } .layout-container{ margin-top:10px; height:calc(100vh - 78px - 22px); /* 顶栏高度 + padding */ display:grid; /* ✅ v0.7.9.1 stage6: 改为弹性列宽，避免低分辨率下背包栏挤占导致装备库无法正确显示 */ grid-template-columns: minmax(320px, 1fr) minmax(520px, 1.75fr) minmax(360px, 1.15fr) minmax(360px, 1.15fr); gap:10px; min-height:0; } /* ✅ 小分辨率：改为 2x2 排布（装备库/配装展示先显示在第一行） */ @media (max-width: 1480px){ .layout-container{ grid-template-columns: minmax(320px, 1fr) minmax(520px, 1.75fr); grid-auto-rows: minmax(0, 1fr); } } .col{ background:linear-gradient(180deg, rgba(15,27,45,.88), rgba(13,23,39,.88)); border:1px solid var(--border); border-radius:14px; overflow:hidden; min-width:0; /* 允许 grid 子项收缩，避免撑开导致横向溢出 */ min-height:0; box-shadow: 0 10px 26px rgba(0,0,0,.22); } .col-header{ height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:rgba(0,0,0,.16); border-bottom:1px solid var(--border2); font-weight:800; } .badge{ display:inline-flex; align-items:center; justify-content:center; height:22px; min-width:22px; padding:0 8px; border-radius:999px; background:rgba(78,163,255,.14); border:1px solid rgba(78,163,255,.22); color:#d8edff; font-weight:800; font-size:12px; } /* v1.2.0：浅色模式下 badge/pill 字色更深（装备库数量、背包容量等） */ body.theme-light .badge{ /* pill 填充（浅） */ background: rgba(191,199,213,.92); border-color: var(--border2); color: var(--text); } .scroll-content{ height:calc(100% - 44px); overflow:auto; padding:12px; min-height:0; } .view-area{padding:10px;} .search-box{padding:10px 12px 0;} .search-box input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(0,0,0,.18); color:var(--text); outline:none; } .search-box input:focus{border-color:rgba(78,163,255,.55); box-shadow:0 0 0 3px rgba(78,163,255,.12);} .filters{ margin-top:10px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; } .filters select{ width:100%; padding:8px 10px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); outline:none; } .list-grid{ display:flex; flex-direction:column; gap:8px; } .lib-item{ display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; background:linear-gradient(180deg, rgba(230,231,234,.95), rgba(220,222,226,.95)); border:1px solid rgba(0,0,0,.10); color:#1b2432; cursor:pointer; } .lib-item:hover{box-shadow:0 8px 18px rgba(0,0,0,.18); transform:translateY(-1px);} .lib-item img{width:34px;height:34px; image-rendering:contain;} .lib-item .meta{display:flex; flex-direction:column; gap:2px;} .lib-item .name{font-weight:900; font-size:13px;} .lib-item .sub{font-size:12px; opacity:.78;} /* v0.7.9v4: 装备库分页加载 footer（loading/end 提示） */ .lib-footer{ display:none; align-items:center; justify-content:center; text-align:center; padding:10px 8px; border-radius:12px; border:1px dashed rgba(0,0,0,.18); background:rgba(255,255,255,.55); color:#1b2432; font-size:12px; opacity:.92; } .highlight-text{color:#d9ecff; font-weight:900;} body.theme-light .highlight-text{ color:#111827; } body.theme-light .highlight-text{ color:#111827; } .empty-hint{ color:var(--muted); display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; } /* ------- 国服装备栏面板 ------- */ .ms-panel{ display:flex; flex-direction:column; gap:10px; position:relative; /* 允许右下角叠放功能按钮 */ } .ms-view-actions{ position:absolute; right:10px; bottom:10px; display:flex; gap:8px; z-index:6; } .btn.btn-mini{ padding:6px 10px; border-radius:10px; font-size:12px; font-weight:800; } /* 战力精算弹窗表单 */ .pc-form{display:flex; flex-direction:column; gap:14px;} .pc-sec{border:1px solid var(--border2); background:rgba(0,0,0,.12); border-radius:14px; padding:10px;} .pc-sec-title{font-weight:900; color:#d8e8ff; margin-bottom:8px;} body.theme-light .pc-sec-title{ color:#111827; } /* 浅色模式下的战力精算：跟随冷雾蓝灰体系（框线更深、填充更柔和） */ body.theme-light .pc-sec{ background: rgba(191,199,213,.52); /* 方案C pill 的半透明层，避免纯白 */ border-color: rgba(27,36,48,.22); } .pc-grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px;} .pc-field{display:flex; flex-direction:column; gap:6px;} .pc-field label{font-size:12px; color:var(--muted); font-weight:800;} .pc-field input{width:100%; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--border2); color:var(--text); outline:none;} .pc-field input:focus{border-color:rgba(78,163,255,.55); box-shadow:0 0 0 3px rgba(78,163,255,.12);} body.theme-light .pc-field input{ background: rgba(217,222,231,.78); border-color: rgba(27,36,48,.22); color: var(--text); } body.theme-light .pc-field input:focus{ border-color: rgba(133,147,164,.52); box-shadow: 0 0 0 3px rgba(133,147,164,.22); } .pc-check{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid var(--border2);min-height: 48px;} .pc-check label{font-size:12px; color:var(--muted); font-weight:800; line-height:1.2;flex: 1 1 auto;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .pc-check input[type="checkbox"]{width:18px; height:18px; accent-color: var(--accent); cursor:pointer;flex: 0 0 auto;} body.theme-light .pc-check{ background: rgba(217,222,231,.66); border-color: rgba(27,36,48,.20); } .pc-span2{grid-column: 1 / -1;} .pc-subtitle{grid-column: 1 / -1; font-size:12px; color:var(--muted); font-weight:900; letter-spacing:.02em; padding:2px 2px; margin-top:2px;} .pc-note{color:var(--muted); font-size:12px; line-height:1.35; margin-top:6px;} body.theme-light .pc-subtitle, body.theme-light .pc-note{ color: rgba(6,18,36,.78); } /* 联盟攻击队：队员/占领 5 属性输入框（左右两组框起来，便于区分） */ .pc-union-squad{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; } .pc-union-box{ border:1px solid var(--border2); border-radius:14px; padding:10px; background: rgba(255,255,255,.04); } .pc-union-box-title{ font-size:12px; font-weight:900; color: var(--muted); margin-bottom:8px; } body.theme-light .pc-union-box{ background: rgba(217,222,231,.52); border-color: rgba(27,36,48,.22); } body.theme-light .pc-union-box-title{ color: rgba(6,18,36,.78); } .ms-top{ display:grid; grid-template-columns: 76px 76px 240px 76px 76px; /* 左两列 + 纸娃娃 + 右两列 */ gap:8px; align-items:start; } .ms-col{display:flex; flex-direction:column; gap:6px;} .ms-paper{ background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12)); border:1px solid var(--border2); border-radius:14px; padding:10px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-height: 420px; } .paperdoll-frame{ position: relative; /* 关键：让内部绝对定位生效 */ width:100%; aspect-ratio: 1 / 1.2; border-radius:12px; background:rgba(0,0,0,.18); border:1px dashed rgba(200,220,255,.22); display:flex; align-items:center; justify-content:center; overflow:hidden; } /* 框内左上角的“上传图片”链接按钮 */ .paperdoll-upload-link{ position:absolute; top:8px; left:10px; background:transparent; border:none; padding:0; font-size:12px; color:#cfe1ff; text-decoration:underline; cursor:pointer; opacity:.9; z-index:5; } .paperdoll-upload-link:hover{ opacity:1; } .paperdoll-frame img{width:100%; height:100%; object-fit:contain; display:block;} .sf-badge{ position:absolute; left:6px; top:6px; font-size:12px; font-weight:900; padding:2px 6px; border-radius:8px; background:rgba(255,255,255,.85); border:1px solid rgba(0,0,0,.08); color:rgba(20,28,40,.85); pointer-events:none; } .slot{ width:76px; height:66px; border-radius:10px; background:linear-gradient(180deg, var(--slotInner), var(--slot)); border:1px solid var(--slotBorder); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; } .slot:hover{outline:2px solid rgba(78,163,255,.35); outline-offset:1px;} .slot .label{ font-size:12px; font-weight:900; color:rgba(27,36,50,.55); letter-spacing:.5px; } .slot img{ width:44px; height:44px; object-fit: contain; /* 保持比例，不变形 */ object-position:center; display:block; } /* v1.1.6：图标细边框（按装备潜能/附潜最高品级；无词条则不会添加 class） */ /* v1.2.0：移除“图标边框按品级着色”的效果（改为背包格/配装格高亮） */ /* 背包格/配装格高亮：当品级 != C 且潜能/附潜存在词条时 */ .tier-frame-SS{ --frame-color: rgba(55,224,55,.95); } .tier-frame-S { --frame-color: rgba(245,222,11,.95); } .tier-frame-A { --frame-color: rgba(168,85,247,.95); } .tier-frame-B { --frame-color: rgba(31,248,255,.95); } .tier-frame-B-{ --frame-color: rgba(31,248,255,.70); } .slot.tier-frame-SS, .slot.tier-frame-S, .slot.tier-frame-A, .slot.tier-frame-B, .slot.tier-frame-B-{ /* 保持原有内高光 + 追加外侧加粗框线 */ box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 2px var(--frame-color); } .bp-slot.tier-frame-SS, .bp-slot.tier-frame-S, .bp-slot.tier-frame-A, .bp-slot.tier-frame-B, .bp-slot.tier-frame-B-{ outline: 2px solid var(--frame-color); outline-offset: -1px; } .slot.active{outline:2px solid rgba(78,163,255,.65); outline-offset:1px;} .ms-equip-grid{ display:grid; grid-template-columns: repeat(7, 76px); grid-template-rows: repeat(6, 66px); gap:8px; justify-content:center; align-content:start; } .ms-paperdoll-wrap{ grid-column: 3 / span 3; /* 第3-5列 */ grid-row: 1 / span 4; /* 第1-4行 */ } /* stats */ .stats-list{display:flex; flex-direction:column; gap:8px;} .stat-row{ display:flex; justify-content:space-between; padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.12); border:1px solid var(--border2); } .stat-row .k{color:var(--muted); font-weight:800;} .stat-row .v{font-weight:900;} .divider{height:1px; background:var(--border2); margin:12px 0;} .section-title{color:#d8e8ff; font-weight:900; margin-bottom:8px;} body.theme-light .section-title{ color:var(--text); } .sets-list{display:flex; flex-direction:column; gap:8px;} /* v1.2.3: 统计面板-套装：紧凑 pill（每行 2 个） */ .sets-pills{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; } .set-pill{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:12px; border:1px solid var(--border2); background:rgba(255,255,255,.04); font-size:12px; font-weight:800; cursor:default; user-select:none; } .set-pill .set-pill-tier{ font-weight:900; opacity:.78; } body.theme-light .set-pill{ background: rgba(191,199,213,.72); /* 使用浅色模式 pill 填充，避免纯白 */ } .set-item{ padding:10px 10px; border-radius:12px; border:1px solid var(--border2); background:rgba(0,0,0,.12); } .set-item .title{font-weight:900;} .set-item .desc{color:var(--muted); margin-top:4px; font-size:12px; line-height:1.35;} .editor-form{display:flex; flex-direction:column; gap:14px;} .editor-group label{font-weight:900; color:#d9ecff; display:block; margin-bottom:6px;} body.theme-light .editor-group label{ color:var(--text); } .editor-group .hint{color:var(--muted); font-size:12px;} .row{display:flex; gap:10px; align-items:center;} .row input[type="range"]{flex:1;} .editor-actions{margin-top:auto; padding-top:8px;} /* 统一下拉框本体 */ select, .filter-bar select, .topbar select { color: var(--text); background: var(--panel2); border: 1px solid var(--border2); } body.theme-light select{ background: var(--panel); border-color: var(--border); } body.theme-light select:focus{ outline:none; box-shadow:0 0 0 3px rgba(133,147,164,.22); } /* 下拉展开后的每一项（很多浏览器只认 option 的 color，不一定认背景） */ select option { color: #111; /* 选项文字用黑色，防止白底白字 */ background: #eef1f4; /* 选项背景避免纯白（仍保持兼容） */ } /* 如果你希望下拉项也走深色主题（部分浏览器可能不完全生效） */ select option:checked { background: #dbe7ff; } /* ===== Editor stack layout ===== */ #editor-content{ width:100%; } .editor-stack{ width:100%; display:flex; flex-direction:column; gap:10px; } .ed-sec{ display:flex; flex-direction:column; gap:10px; } .ed-title{ font-weight:800; letter-spacing:.3px; color:var(--text); font-size:14px; } .ed-dash{ border-top:1px dashed rgba(255,255,255,.18); margin:2px 0; } .ed-subhint{ font-size:12px; color:var(--muted); line-height:1.35; } /* ========================= Editor Dynamic Panel (FINAL) 只作用在编辑器右侧，不污染其它区域 ========================= */ #editor-dynamic { padding-top: 0; } #editor-dynamic .ed-sec:first-child { margin-top: -6px; } #editor-dynamic .ed-sec { margin-bottom: 10px; } #editor-dynamic .ed-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; } #editor-dynamic .ed-subhint { font-size: 12px; color: var(--muted); opacity: .85; margin-top: 4px; } #editor-dynamic .ed-dash { height: 1px; background: rgba(255,255,255,.08); margin: 10px 0; } #editor-dynamic .rowline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #editor-dynamic .muted { color: var(--muted); font-size: 12px; opacity: .85; } /* ---- 星力头部：紧凑 ---- */ #editor-dynamic .sf-head{ display:flex; align-items:center; justify-content:flex-start; gap:6px; margin:0 0 4px 0; padding:0; min-height:0; } #editor-dynamic .sf-num{ display:flex; align-items:center; gap:4px; font-size:12px; line-height:1; flex-wrap:wrap; } #editor-dynamic .sf-num input{ width:46px; max-width:46px; padding:2px 6px; border-radius:10px; line-height:1; height:22px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); outline:none; } #editor-dynamic .sf-cap-note{ font-size:11px; color:var(--muted); opacity:.88; line-height:1; margin-left:2px; } /* ---- 星星区：强制 flex，避免 grid 冲突 ---- */ #editor-dynamic .sf-stars{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; margin:2px 0 4px !important; padding:6px 8px !important; border:1px solid rgba(255,255,255,.10) !important; border-radius:12px !important; background: rgba(255,255,255,.03) !important; } /* 浅色模式：星之力框填充为与统计面板相同的灰色 */ body.theme-light #editor-dynamic .sf-stars{ /* 星之力板块：比 pill 更浅，但不使用纯白 */ background: rgba(89, 95, 104, 0.9) !important; border:1px solid var(--border) !important; } #editor-dynamic .sf-row{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; width:100% !important; flex-wrap:nowrap !important; } #editor-dynamic .sf-group{ display:flex !important; align-items:center !important; gap:4px !important; flex-wrap:nowrap !important; } #editor-dynamic .sf-gap{ width:10px !important; flex:0 0 10px !important; } /* ---- 星星按钮：去掉 button 默认框 ---- */ #editor-dynamic .sf-star{ appearance:none !important; -webkit-appearance:none !important; background:transparent !important; border:none !important; box-shadow:none !important; outline:none !important; padding:0 !important; cursor:pointer !important; user-select:none !important; font-size:14px !important; line-height:1 !important; width:14px !important; height:14px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; color: rgba(255,255,255,.28) !important; } #editor-dynamic .sf-star.off{ opacity:.55 !important; } #editor-dynamic .sf-star.on{ color:#FFD34D !important; opacity:.98 !important; } /* 26~30：暗红预留区（即使 disabled 也要可见） */ #editor-dynamic .sf-star.future{ color: rgba(170,60,60,.80) !important; opacity:.85 !important; } #editor-dynamic .sf-star:disabled{ opacity:.22 !important; cursor:not-allowed !important; } #editor-dynamic .sf-star.future:disabled{ opacity:.85 !important; } /* ---- meta ---- */ #editor-dynamic .sf-meta{ font-size:12px; color:var(--muted); opacity:.9; margin-top:4px; line-height:1.2; } #editor-dynamic .sf-bonus{ font-size:12px; color:var(--muted); opacity:.92; margin-top:2px; line-height:1.2; } /* ---- 卷轴高级区按钮/网格 ---- */ #editor-dynamic .toggle-btn{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:var(--text); padding:6px 10px; border-radius:10px; cursor:pointer; font-size:12px; } #editor-dynamic .toggle-btn:hover{ background:rgba(255,255,255,.06); } #editor-dynamic .grid4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; } #editor-dynamic .grid3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; } #editor-dynamic .field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; } #editor-dynamic .field input{ width:100%; } #editor-dynamic .pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); font-size:12px; color:var(--text); } /* ===== Scroll / Hammer UI ===== */ .hammer-quick{ gap:8px; margin-top:4px; } .hammer-wrap{ display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap; } .hammer-gap{ width:10px; } .hammer-btn{ width:24px; height:24px; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); padding:2px; cursor:pointer; opacity:.35; display:inline-flex; align-items:center; justify-content:center; } .hammer-btn.on{ opacity:1; border-color:rgba(255,255,255,.28); box-shadow:0 0 0 3px rgba(255,255,255,.06); } .hammer-btn:disabled{ cursor:not-allowed; opacity:.18; } .hammer-btn img{ width:100%; height:100%; object-fit:contain; display:block; } /* --- small icon buttons (scroll resets) --- */ .icon-btn{ width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover{ border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 3px rgba(255,255,255,.06); } .icon-btn:disabled{ cursor: not-allowed; opacity: .18; } .icon-btn .fallback{ display: none; font-size: 14px; } .icon-btn img[style*="display:none"] + .fallback{ display: inline; } .icon-btn.danger{ color:#ff4d4f; border-color: rgba(255,77,79,.55); background: rgba(255,77,79,.12); } .icon-btn.danger:hover{ background: rgba(255,77,79,.18); } /* 火花：清空按钮（绿色） */ #btn-flame-clear{ color: #22c55e; font-weight: 800; font-size: 18px; line-height: 1; } #btn-flame-clear:disabled { color: rgba(34, 197, 94, 0.35); font-weight: 800; font-size: 18px; line-height: 1; } /* ===================== 潜能 / 魔方 UI ===================== */ .pot-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pot-lines{ display:flex; flex-direction:column; gap:8px; margin-top:10px; } .pot-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--border2); border-radius:12px; background:rgba(255,255,255,.04); } .pot-line .left{ display:flex; align-items:center; gap:8px; min-width:0; } .pot-line .slot{ width:26px; height:26px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.22); border:1px solid var(--border2); font-weight:900; } .pot-line .tier{ font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(78,163,255,.14); border:1px solid rgba(78,163,255,.22); color:#d8edff; font-weight:900; } .pot-line .text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 潜能/附潜：按品级着色（B/A/S/SS） - B：天蓝色 - A：紫色 - S：橙黄色 - SS：绿色 */ .pot-tier-B .pot-line{ color:#1ff8ff; } .pot-tier-A .pot-line{ color:#6922ac; } .pot-tier-S .pot-line{ color:#f5ca0b; } .pot-tier-SS .pot-line{ color:#75e037; } /* 品级标签本身也继承颜色 */ .pot-tier-B{ color:#1ff8ff; } .pot-tier-C{ color: rgba(210,210,210,.85); } .pot-tier-A{ color:#6922ac; } .pot-tier-S{ color:#f5ca0b; } .pot-tier-SS{ color:#75e037; } /* 词条按“每条词条的品级”独立上色：弧角矩形填充 + 默认字体色 - 文本颜色沿用主题默认（深色：偏白，浅色：偏黑） */ .pot-line.pot-ln-B{ background:rgba(31,248,255,.50); border-color:rgba(31,248,255,.40); } .pot-line.pot-ln-A{ background:rgba(168,85,247,.50); border-color:rgba(168,85,247,.40); } .pot-line.pot-ln-S{ background:rgba(245,222,11,.50); border-color:rgba(245,222,11,.45); } .pot-line.pot-ln-SS{ background:rgba(55,224,55,.50); border-color:rgba(55,224,55,.40); } .cube-bar{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; } .cube-btn{ width:46px; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; position:relative; } .cube-btn:hover{ border-color:rgba(78,163,255,.55); box-shadow:0 0 0 3px rgba(78,163,255,.12); } .cube-btn img{ width:36px; height:36px; object-fit:contain; } .cube-btn.disabled{ opacity:.35; cursor:not-allowed; } .cube-btn .lock{ position:absolute; right:6px; bottom:6px; width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); font-size:11px; } /* --------------------- Modal --------------------- */ .ms-modal{ position:fixed; inset:0; z-index:9999; } .ms-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(4px); } /* 浅色模式：弹窗整体采用与主界面一致的冷雾蓝灰（避免纯白/刺眼） */ body.theme-light .ms-modal-backdrop{ background:rgba(10,16,24,.32); backdrop-filter: blur(6px); } .ms-modal-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(860px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:hidden; border-radius:16px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(15,27,45,.98), rgba(13,23,39,.98)); box-shadow:0 18px 60px rgba(0,0,0,.45); display:flex; flex-direction:column; } body.theme-light .ms-modal-card{ border-color: rgba(27,36,48,.30); background: linear-gradient(180deg, rgba(217,222,231,.98), rgba(203,210,221,.98)); box-shadow: 0 18px 54px rgba(20,30,50,.22); } .ms-modal-header{ padding:12px 12px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border2); background:rgba(0,0,0,.18); } body.theme-light .ms-modal-header{ background: rgba(133,147,164,.18); border-bottom-color: rgba(27,36,48,.18); } .ms-modal-title{ font-weight:900; letter-spacing:.3px; } .ms-modal-sub{ margin-top:4px; color:var(--muted); font-size:12px; line-height:1.4; } .ms-modal-body{ padding:12px; overflow:auto; } /* DevPot (v1.0.8) */ .devpot-wrap{ display:flex; gap:12px; align-items:stretch; } .devpot-list{ width:260px; max-width:260px; overflow:auto; max-height:60vh; padding-right:6px; } .devpot-item{ width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid var(--border2); background:rgba(0,0,0,.10); color:var(--text); cursor:pointer; } .devpot-item:hover{ border-color:var(--border); } .devpot-item.active{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,255,255,.06) inset; } .devpot-item-icon{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--border2); background:rgba(0,0,0,.12); } .devpot-item-icon img{ width:30px; height:30px; image-rendering:pixelated; } .devpot-item-name{ flex:1; font-weight:900; text-align:left; } .devpot-item-slot{ font-size:12px; } .devpot-detail{ flex:1; min-width:320px; } .devpot-headicon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid var(--border2); background:rgba(0,0,0,.12); } .devpot-headicon img{ width:40px; height:40px; image-rendering:pixelated; } .ms-modal-footer{ padding:12px; display:flex; align-items:center; justify-content:flex-end; gap:10px; border-top:1px solid var(--border2); background:rgba(0,0,0,.18); } body.theme-light .ms-modal-footer{ background: rgba(133,147,164,.14); border-top-color: rgba(27,36,48,.18); } .ms-choice-grid{ display:grid; grid-template-columns: 1fr; gap:10px; } @media (max-width: 720px){ .ms-choice-grid{ grid-template-columns: 1fr; } } .choice-card{ border:1px solid var(--border2); border-radius:14px; padding:10px 10px; background:rgba(255,255,255,.04); display:flex; gap:10px; align-items:flex-start; } .choice-card input{ margin-top:4px; } .choice-card .text{ flex:1; line-height:1.5; } .tip{ margin-top:10px; color:var(--muted); line-height:1.6; } /* small toggle */ .pill input[type="checkbox"]{ transform: translateY(1px); } /* ==================== Flames (火花) ==================== */ .flame-kind-bar{ display:flex; gap:8px; flex-wrap:wrap; } .flame-kind-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:14px; border:1px solid var(--border2); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; user-select:none; } .flame-kind-btn:hover{ background:rgba(255,255,255,.07); } .flame-kind-btn.active{ border-color: rgba(124, 201, 255, .55); box-shadow:0 0 0 2px rgba(124, 201, 255, .15) inset; } .flame-kind-btn:disabled{ opacity:.45; cursor:not-allowed; } .flame-kind-btn img{ width:22px; height:22px; object-fit:contain; } .flame-kind-btn span{ font-size:12px; line-height:1; white-space:nowrap; } .flame-custom-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:8px; } .flame-sel{ width:100%; } /* ------- 装备库 + 背包分区 ------- */ .col-library{display:flex; flex-direction:column; min-height:0;} .library-split{flex:1; display:flex; flex-direction:column; min-height:0;} .library-top{flex:1; display:flex; flex-direction:column; min-height:0;} .library-scroll{flex:1; min-height:0;} .btn.btn-mini{ padding:6px 10px; border-radius:10px; font-size:12px; font-weight:800; } .backpack-panel{ border-top:1px solid var(--border2); background:rgba(0,0,0,.10); padding:10px 12px 12px; /* ✅ 关键：让背包与装备库均分高度，并允许内部滚动而不是撑满屏幕 */ flex: 1; min-height: 0; display: flex; flex-direction: column; } /* 共享背包：独立成块，且随当前配装高亮边框 */ .backpack-panel.shared{ border:1px solid var(--border2); border-radius:14px; margin-top:12px; border-top:1px solid var(--border2); /* keep compatible */ } .backpack-panel.shared.is-active{ border-color: rgba(78,163,255,.55); box-shadow:0 0 0 3px rgba(78,163,255,.10); } .bp-active-label{ color:var(--muted); font-size:12px; font-weight:800; margin-left:6px; opacity:.95; } .bp-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .bp-hint{ margin-top:8px; font-size:12px; color:var(--muted); opacity:.95; } .bp-grid{ --bp-cell: 52px; display:grid; grid-template-columns: repeat(4, var(--bp-cell)); gap:6px; justify-content:center; padding:6px; border-radius:12px; border:1px solid var(--border2); background:rgba(0,0,0,.18); /* height: calc(6 * var(--bp-cell) + 5 * 6px + 12px); */ overflow:auto; } .bp-slot{ width:var(--bp-cell); height:var(--bp-cell); border-radius:12px; background:linear-gradient(180deg, rgba(230,231,234,.92), rgba(220,222,226,.92)); border:1px solid rgba(0,0,0,.10); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; } .bp-slot.empty{ background:rgba(255,255,255,.06); border:1px dashed rgba(200,220,255,.22); cursor:default; } .bp-slot img{width:40px;height:40px; image-rendering:contain;} .bp-slot:hover{box-shadow:0 8px 18px rgba(0,0,0,.18); transform:translateY(-1px);} /* 灵魂宝珠 */ #btn-soul-clear { color: #22c55e; } #btn-soul-clear:disabled { color: rgba(34, 197, 94, 0.35); } /* 战力精算弹窗：关闭按钮红色 */ #ms-modal-close{ color:#ff4d4f; border-color: rgba(255,77,79,.45); } #ms-modal-close:hover{ border-color: rgba(255,77,79,.70); box-shadow: 0 0 0 3px rgba(255,77,79,.12); } /* ===================== v1.0.6 Hover Tooltip ===================== */ .ms-tooltip{ position: fixed; z-index: 99999; max-width: 360px; pointer-events: none; border-radius: 12px; padding: 10px 12px; box-shadow: 0 12px 28px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); background: rgba(20, 22, 28, .92); color: rgba(255,255,255,.92); font-size: 12px; line-height: 1.35; } .ms-tooltip.hidden{ display:none; } .ms-tooltip .tt-head{ display:flex; gap:10px; align-items:center; } .ms-tooltip .tt-icon{ width:42px; height:42px; border-radius:10px; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; overflow:hidden; } .ms-tooltip .tt-icon img{ width:100%; height:100%; object-fit:contain; } .ms-tooltip .tt-title{ font-weight: 700; font-size: 13px; } .ms-tooltip .tt-sub{ opacity:.85; margin-top:2px; } .ms-tooltip .tt-sec{ margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,.10); } .ms-tooltip .tt-sec:first-of-type{ border-top:0; padding-top:0; } .ms-tooltip .tt-sec-title{ font-weight: 700; opacity:.95; margin-bottom:6px; } .ms-tooltip .tt-lines{ display:flex; flex-direction:column; gap:3px; } .ms-tooltip .tt-line{ display:flex; justify-content:space-between; gap:12px; } .ms-tooltip .tt-line .k{ opacity:.88; } .ms-tooltip .tt-line .v{ opacity:.96; white-space:nowrap; } .ms-tooltip .tt-pill{ display:inline-block; padding:1px 6px; border-radius:999px; background: rgba(255,255,255,.10); margin-right:6px; } .ms-tooltip .tt-note{ opacity:.75; margin-top:4px; } /* v1.0.6 tooltip: MS-like layout */ .ms-tooltip .tt-top{ display:flex; flex-direction:column; align-items:center; gap:4px; } .ms-tooltip .tt-stars{ font-size:14px; line-height:1.05; letter-spacing:1px; opacity:.95; text-align:center; } .ms-tooltip .tt-stars br{ display:block; margin:2px 0 0; } .ms-tooltip .tt-star{ display:inline-block; margin-right:1px; } .ms-tooltip .tt-star.gap{ margin-right:6px; } .ms-tooltip .tt-star.on{ color: rgba(255, 230, 90, .95); } .ms-tooltip .tt-star.off{ color: rgba(255,255,255,.25); } .ms-tooltip .tt-name{ font-weight:900; font-size:14px; text-align:center; } .ms-tooltip .tt-tier{ font-weight:900; text-align:center; } .ms-tooltip .tt-basic{ display:flex; gap:10px; align-items:center; width:100%; margin-top:6px; } .ms-tooltip .tt-iconbox{ width:46px; height:46px; border-radius:10px; background: rgba(202, 200, 200, 0.753); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; } .ms-tooltip .tt-iconbox img{ width:100%; height:100%; object-fit:contain; } .ms-tooltip .tt-basicinfo{ flex:1 1 auto; min-width:0; } .ms-tooltip .tt-row{ opacity:.92; margin:1px 0; } .ms-tooltip .tt-sep{ height:1px; background: rgba(255,255,255,.12); margin:10px 0 8px; width:100%; } .ms-tooltip .tt-stats{ width:100%; display:flex; flex-direction:column; gap:3px; } .ms-tooltip .tt-statline{ display:flex; justify-content:flex-start; gap:8px; } .ms-tooltip .tt-statline .k{ opacity:.90; white-space:nowrap; } .ms-tooltip .tt-statline .v{ text-align:left; flex:1 1 auto; min-width:0; } .ms-tooltip .tt-total{ font-weight:900; } .ms-tooltip .tt-paren{ opacity:.92; margin-left:4px; } .ms-tooltip .tt-tag{ opacity:.78; } .ms-tooltip .tt-meta{ width:100%; margin-top:8px; display:flex; flex-direction:column; gap:2px; } .ms-tooltip .tt-metaitem{ opacity:.92; } .ms-tooltip .tt-bullets{ display:flex; flex-direction:column; gap:3px; } .ms-tooltip .tt-bullet{ opacity:.95; } /* per-source number colors */ .ms-tooltip .tt-src-base{ color: inherit; } .ms-tooltip .tt-src-scroll{ color: rgba(160,190,255,.95); } .ms-tooltip .tt-src-star{ color: rgba(255, 230, 90, .95); } .ms-tooltip .tt-src-flame{ color: rgba(120, 245, 255, .95); } /* light theme tweaks */ body.theme-light .ms-tooltip .tt-sep{ background: rgba(0,0,0,.10); } body.theme-light .ms-tooltip .tt-src-scroll{ color: rgba(160, 190, 255, 0.95); } body.theme-light .ms-tooltip .tt-src-star{ color: rgba(255, 230, 90, .95); } body.theme-light .ms-tooltip .tt-src-flame{ color: rgba(120, 245, 255, .95); } body.theme-light .ms-tooltip .tt-star.on{ color: rgba(255, 230, 90, .95); } body.theme-light .ms-tooltip .tt-star.off{ color: rgba(0,0,0,.22); } body.theme-light .pot-tier-C{ color: rgba(60,60,60,.75); } body.theme-light .ms-tooltip .tt-star.on{ color: rgba(255, 230, 90, .95); } body.theme-light .ms-tooltip .tt-star.off{ color: rgba(0,0,0,.22); } /* tier color for no potential */ .ms-tooltip .pot-tier-C{ color: rgba(200,200,200,.90); } body.theme-light .ms-tooltip .pot-tier-C{ color: rgba(0,0,0,.55); } /* light theme */ body.theme-light .ms-tooltip{ /* 装备道具浮窗：更浅一层的冷雾底色（避免纯白） */ background: rgba(50, 66, 87, 0.96); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0,0,0,.12); box-shadow: 0 12px 28px rgba(0,0,0,.18); } body.theme-light .ms-tooltip .tt-sec{ border-top:1px solid rgba(0,0,0,.10); } body.theme-light .ms-tooltip .tt-pill{ background: rgba(0,0,0,.06); } /* ==================== v1.0.7d Sets Hover Tooltip ==================== */ .ms-tooltip.set-tooltip{ max-width: 420px; } .ms-tooltip .set-tt-setname{ font-weight:900; font-size:13px; } .ms-tooltip .set-tt-setdesc{ opacity:.88; margin-top:2px; } .ms-tooltip .set-tt-tier{ font-weight:900; margin-top:8px; } .ms-tooltip .set-tt-lines{ margin-left:12px; margin-top:2px; line-height:1.4; } .ms-tooltip .set-tt-tier.off, .ms-tooltip .set-tt-lines.off{ color: rgba(255,255,255,.36); } body.theme-light .ms-tooltip .set-tt-tier.off, body.theme-light .ms-tooltip .set-tt-lines.off{ color: rgba(0,0,0,.45); } /* ==================== v1.0.7b UI polish ==================== */ /* 浅色模式：框线/分割线更醒目 */ body.theme-light .ed-dash{ border-top-color: rgba(40,60,90,.35); } body.theme-light .slot, body.theme-light .equip-slot, body.theme-light .item-card, body.theme-light .loadout, body.theme-light .stat-col, body.theme-light .ed-sec, body.theme-light .editor, body.theme-light .panel{ border-color: var(--border) !important; } /* Morandi light：pill（非品级 pill）用更深的填充/描边，避免“白到发光” */ body.theme-light .pill:not(.tier-pill), body.theme-light #editor-dynamic .pill:not(.tier-pill){ /* pill：方案C（浅） */ background: rgba(191,199,213,.85) !important; border-color: var(--border2) !important; color: var(--text) !important; } /* Morandi light：面板/列表/套装项避免纯白，使用浅燕麦底色 */ body.theme-light .stat-col, body.theme-light .set-item{ background: rgba(217,222,231,.88) !important; border-color: var(--border2) !important; } body.theme-light .set-item .desc{ color: var(--muted) !important; } /* v1.2.0：浅色模式下统一“框/按钮/提示字”为黑色或深灰 */ body.theme-light #editor-dynamic .toggle-btn, body.theme-light .hammer-btn, body.theme-light .icon-btn{ border-color: rgba(0,0,0,.22) !important; background: rgba(203,210,221,.68) !important; color: var(--text) !important; } body.theme-light #editor-dynamic .toggle-btn:hover{ background: rgba(0,0,0,.06) !important; } body.theme-light .hammer-btn.on{ border-color: rgba(0,0,0,.28) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important; } body.theme-light .icon-btn:hover{ border-color: rgba(0,0,0,.28) !important; box-shadow: 0 0 0 3px rgba(0,0,0,.06) !important; } body.theme-light .bp-slot.empty{ background: rgba(203,210,221,.62) !important; border-color: rgba(0,0,0,.18) !important; } /* 浅色模式：卷轴选择 / 痕迹属性 / 灵魂宝珠选择菜单颜色统一 */ body.theme-light #scroll-select, body.theme-light #xenon-trace-stat, body.theme-light #soul-opt{ background: rgba(217,222,231,.92) !important; color: var(--text) !important; border-color: var(--border) !important; } body.theme-light #scroll-select:focus, body.theme-light #xenon-trace-stat:focus, body.theme-light #soul-opt:focus{ outline:none; box-shadow:0 0 0 3px rgba(133,147,164,.22); } /* 潜能/附潜：品级字样 pill（填充=品级色 15% 透明；白字） */ .tier-pill{ display:inline-flex; align-items:center; justify-content:center; padding:2px 10px; min-width: 2.0em; height: 18px; border-radius:999px; border:1.5px solid var(--tier-color, var(--border)); background: var(--tier-bg, rgba(0,0,0,0)); color:#fff; font-weight:900; font-size:12px; line-height:1; letter-spacing:.5px; text-shadow: 0 1px 1px rgba(0,0,0,.55); } /* 自定义潜能：品级按钮更松散 + 选中/当前品级更醒目 */ .devpot-tierrow{ gap:12px !important; } .tier-pill.on{ box-shadow: 0 0 0 2px rgba(255,255,255,.45); } .tier-pill.is-current{ box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); } body.theme-light .tier-pill.on{ box-shadow: 0 0 0 2px rgba(0,0,0,.30); } body.theme-light .tier-pill.is-current{ box-shadow: inset 0 0 0 2px rgba(0,0,0,.22); } .tier-pill.tier-B{ --tier-color:#1ff8ff; --tier-bg: rgba(31,248,255,.85); } .tier-pill.tier-A{ --tier-color:#6922ac; --tier-bg: rgba(168,85,247,.85); } .tier-pill.tier-S{ --tier-color:#f5ca0b; --tier-bg: rgba(245,222,11,.85); } .tier-pill.tier-SS{ --tier-color:#75e037; --tier-bg: rgba(55,224,55,.85); } /* Morandi light：下拉选项背景避免纯白 */ body.theme-light select, body.theme-light option{ background: rgba(231,235,241,.98); color: var(--text); } /* ==================== Cube modal narrow layout (v0.7.9.4 patch) ==================== */ .ms-modal-card.ms-modal-card--narrow{ width: min(430px, calc(100vw - 24px)); } .ms-modal-card.ms-modal-card--tall .ms-modal-body{ flex: 1 1 auto; overflow: auto; } /* Truth cube highlight & flash */ .truth-choice{ cursor: default; } .truth-choice .truth-head{ font-size: 12px; color: var(--muted); margin-bottom: 6px; } .truth-badge{ display:inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(124, 201, 255, .55); background: rgba(124, 201, 255, .10); color: var(--text); font-weight: 900; font-size: 11px; } .truth-choice.active{ border-color: rgba(124, 201, 255, .65); background: rgba(124, 201, 255, .08); box-shadow: 0 0 0 2px rgba(124, 201, 255, .18) inset; } @keyframes ms-truth-flash { 0% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(124, 201, 255, .0) inset; } 35% { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(124, 201, 255, .22) inset; } 100% { transform: translateY(0); box-shadow: 0 0 0 2px rgba(124, 201, 255, .18) inset; } } .truth-choice.flash{ animation: ms-truth-flash .55s ease; }