/* agency CSS (base/chrome/panels/forms/drawer) 已改为「模板里 5 个并列 」加载, 不再 @import。
原因: @import 子文件版本号是写死字符串, static_version 进不来, 改 CSS 要手动 bump 6 处、漏一处 iOS 就缓存死。
改成 后每个文件吃 ?v={{static_version}}(改文件自动变号), 同时消除 @import 串行阻塞 + iOS 嵌套缓存。
本文件只保留自身规则(下方)。改动顺序见各模板 : base→chrome→panels→forms→drawer→style.css。 */
/* ===== 机构设置弹窗微调 ===== */
.wb-modal-settings-grid {
display: flex;
gap: 15px;
margin-bottom: 18px;
align-items: flex-start;
}
.wb-modal-settings-type-group {
flex: 0 0 180px;
margin-bottom: 0;
}
.wb-modal-settings-brand {
flex: 1;
margin-bottom: 0;
}
.wb-modal-settings-brand-row {
display: flex;
gap: 10px;
align-items: flex-start;
}
.wb-modal-settings-brand-row > div {
flex: 1;
}
.wb-modal-settings-brand-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.wb-modal-settings-brand-field__label {
font-size: var(--font-xs);
font-weight: 500;
color: var(--text-grey);
padding-left: 0;
}
.wb-modal-settings-type-select,
.wb-modal-settings-input {
min-height: var(--field-h-compact);
height: var(--field-h-compact);
font-size: var(--font-xs);
padding: 0 12px;
border-radius: var(--radius-base);
}
.wb-modal-settings-type-select {
appearance: none;
background-position: right 14px center;
background-size: 16px;
background-repeat: no-repeat;
padding-right: 34px;
}
#settings-modal .wb-field-input,
#settings-modal select.wb-field-input,
#settings-modal .wb-select-display {
min-height: var(--field-h-compact);
height: var(--field-h-compact);
padding-top: 0;
padding-bottom: 0;
font-size: var(--font-xs);
font-weight: 400;
}
#settings-modal .wb-field-inline .wb-field-input {
padding-right: 70px;
}
#settings-modal .wb-btn--confirm-small {
height: var(--field-h-compact);
font-size: var(--font-sm);
}
.wb-modal-settings-type-select:disabled {
background-color: var(--bg-page);
color: rgba(0, 0, 0, 0.38);
border-color: rgba(127, 127, 127, 0.16);
cursor: not-allowed;
box-shadow: none;
opacity: 1;
}
.wb-modal-settings-qr-inline {
flex: 0 0 42px !important;
width: 42px;
}
.wb-modal-settings-qr-box {
position: relative;
width: 42px;
height: 42px;
border-radius: 0;
border: none;
background: rgba(127, 127, 127, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
overflow: hidden;
transition: transform 0.2s ease, background 0.2s ease;
}
.wb-modal-settings-qr-box:hover {
background: rgba(127, 127, 127, 0.18);
transform: translateY(-1px);
}
.wb-modal-settings-qr-box img {
width: 100%;
height: 100%;
object-fit: cover;
display: none;
}
.wb-modal-settings-qr-box.has-image img {
display: block;
}
.wb-modal-settings-qr-plus {
color: #9aa0a6;
font-size: 22px;
line-height: 1;
font-weight: 500;
}
.wb-modal-settings-qr-box.has-image .wb-modal-settings-qr-plus {
display: none;
}
.wb-modal-settings-qr-delete {
position: absolute;
top: 4px;
right: 4px;
width: 16px;
height: 16px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: var(--font-sm);
line-height: 16px;
text-align: center;
opacity: 0;
transition: opacity 0.18s ease;
}
.wb-modal-settings-qr-box.has-image:hover .wb-modal-settings-qr-delete {
opacity: 1;
}
/* ===== 设置窗口: 卡片式居中对话框 (重新设计) ===== */
/* 工作区面板作背景, 内容收成居中卡片, 高度自适应, 不再铺满整屏 */
#settings-modal { align-items: center; justify-content: center; }
/* 不再做成独立外层卡片: 面板本身即对话框, 内部只留"一层"分区卡; 内容居中限宽 */
#settings-modal .wb-modal-content {
width: 100%;
max-width: 600px;
max-height: 100%;
overflow-y: auto;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
}
.wb-settings-head {
display: flex; align-items: center; justify-content: space-between;
padding: 2px 4px 16px;
}
.wb-settings-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: 0.5px; }
.wb-settings-x {
width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 50%;
background: var(--chip-bg); color: var(--text-grey); font-size: 14px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.wb-settings-x:hover { background: var(--chip-bg-hover); }
/* 分区卡片 */
.wb-settings-section {
margin: 0 0 16px;
background: var(--chip-bg);
border-radius: var(--radius-base);
padding: 16px 18px 18px;
}
.wb-settings-sec-title {
font-size: 13px; font-weight: 700; color: var(--text-main);
margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.wb-settings-sec-title::before {
content: ""; width: 3px; height: 13px; background: var(--brand-primary); border-radius: 2px;
}
/* 字段 */
.wb-settings-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.wb-settings-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
#settings-modal .wb-settings-grid3 .wb-select { width: 100%; }
.wb-settings-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; }
.wb-settings-field > label {
font-size: 12px; color: var(--text-grey); font-weight: 500; margin: 0;
display: flex; align-items: center; gap: 6px;
}
.wb-settings-badge {
font-size: 10px; font-weight: 700; color: #fff; background: var(--brand-primary);
padding: 1px 7px; border-radius: 5px;
}
.wb-settings-note { font-size: 11px; color: var(--text-grey); line-height: 1.5; }
.wb-settings-note--warn { color: var(--vitality-orange); }
.wb-settings-divider { height: 1px; background: rgba(127, 127, 127, 0.16); margin: 16px 0; }
/* 品牌素材: Logo + 二维码 方块 + 说明 */
.wb-settings-assets { display: flex; align-items: center; gap: 16px; }
.wb-settings-asset { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.wb-settings-asset-cap { font-size: 11px; color: var(--text-grey); }
.wb-settings-asset-hint { flex: 1; min-width: 180px; font-size: 11px; color: var(--text-grey); line-height: 1.6; align-self: center; }
#settings-modal .wb-modal-settings-qr-box { width: 54px; height: 54px; border-radius: 10px; }
/* 账号安全: 标签 | 输入(含 inline 确认) 一行对齐 */
.wb-settings-secrow { margin-bottom: 14px; }
.wb-settings-secrow:last-child { margin-bottom: 0; }
.wb-settings-secrow-main { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; }
.wb-settings-secrow-main > label { font-size: 12px; color: var(--text-grey); margin: 0; }
/* 底部 */
.wb-settings-save {
display: block; width: calc(100% - 48px); margin: 6px 24px 0;
height: 44px; border: none; border-radius: 11px;
background: var(--brand-primary); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
transition: background 0.15s;
}
.wb-settings-save:hover { background: var(--brand-primary-hover); }
.wb-settings-logout { text-align: center; padding: 14px 0 22px; }
@media (max-width: 960px) {
.wb-modal-settings-grid {
flex-direction: column;
}
.wb-modal-settings-type-group,
.wb-modal-settings-brand {
flex: 1 1 auto;
width: 100%;
}
}
/* ============================================================================
Beta 特性开关 (前端 feature flag)
- .beta-only: 默认不显示, 只有 body.beta-active 才显示
- .beta-badge: Beta 模式下显示的小标签 (橙色), 关掉 Beta 自动隐藏
============================================================================ */
.beta-only { display: none !important; }
body.beta-active .beta-only { display: revert !important; }
.beta-badge {
display: inline-block;
background: #ff6b35;
color: #fff;
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
margin-left: 6px;
vertical-align: middle;
letter-spacing: 0.4px;
}
body:not(.beta-active) .beta-badge { display: none; }
/* 运行时特性发布: [data-feature="xxx"] 元素默认隐藏, 只有 data-feature-visible="1" 或 body.beta-active 时显示 */
[data-feature]:not([data-feature-visible="1"]) { display: none !important; }
body.beta-active [data-feature] { display: revert !important; }
/* ============================================================================
Persona Override — 入口按钮在顶栏 (.wb-persona-toggle), 面板 fixed 在右上.
可见性双 gate: Beta 模式开 + .open class 才显示
============================================================================ */
.wb-persona-toggle {
background: #ff6b35;
color: #fff;
padding: 4px 12px;
border: none;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
margin-right: 8px;
letter-spacing: 0.5px;
line-height: 1.4;
}
.wb-persona-toggle:hover { background: #e85a24; }
.wb-persona-panel {
display: none; /* 默认隐藏 */
position: fixed;
right: 24px;
top: 64px; /* 顶栏下方 */
width: 280px;
z-index: var(--z-dev, 9000); /* Beta 调试浮层, 永远顶层 */
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
padding: 0;
overflow: hidden;
color: #222;
font-size: 13px;
}
.wb-persona-panel.open { display: block; }
/* Beta 关掉时, 即使有 .open class 也强制隐藏 */
body:not(.beta-active) .wb-persona-panel { display: none !important; }
.wb-persona-panel-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #ff6b35;
color: #fff;
font-size: 14px;
}
.wb-persona-panel-close {
background: transparent;
color: #fff;
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.wb-persona-panel-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.wb-persona-row { display: flex; flex-direction: column; gap: 4px; }
.wb-persona-row label { font-size: 11px; color: #666; font-weight: 600; }
.wb-persona-row select,
.wb-persona-row input {
width: 100%;
padding: 6px 8px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 12px;
background: #fff;
color: #222;
box-sizing: border-box;
}
.wb-persona-panel-foot {
display: flex;
gap: 8px;
padding: 10px 16px;
border-top: 1px solid #eee;
}
.wb-persona-btn {
flex: 1;
padding: 7px 10px;
border-radius: 6px;
border: 1px solid transparent;
cursor: pointer;
font-size: 12px;
font-weight: 600;
}
.wb-persona-btn--apply { background: #ff6b35; color: #fff; }
.wb-persona-btn--apply:hover { background: #e85a24; }
.wb-persona-btn--reset { background: #f5f5f5; color: #666; border-color: #ddd; }
.wb-persona-btn--reset:hover { background: #eee; }
.wb-persona-hint {
padding: 8px 16px 12px;
font-size: 10.5px;
color: #999;
line-height: 1.5;
}