mirror of
https://wget.la/https://github.com/432539/gpt
synced 2026-08-17 03:26:59 +08:00
Initial commit: GPT 账号注册机 (open source)
只开源「GPT 账号注册机 / 管理」(account-manager)：账号列表/导入导出、检测/批量检测、 拿 RT、协议/浏览器注册等注册机能力。批量直开 / 协议支付 / 提取链接 / 直卡直开 等其它功能 不含实现代码，仅通过 iframe 内嵌外链访问。真实机密均由 .gitignore 忽略，仅提供脱敏示例配置。
This commit is contained in:
432539
@@ -0,0 +1,458 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/* 账号管理 —— 复用 app-shell.css 的蓝色企业风令牌，仅补充本页所需组件 */
|
||||
|
||||
/* ---------- 统计卡片 ---------- */
|
||||
.am-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.am-stat-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.am-stat-num { font-size: 28px; color: var(--blue-700); line-height: 1.1; }
|
||||
.am-stat-label { margin-top: 6px; color: var(--ink-500); font-size: 13px; }
|
||||
|
||||
/* ---------- 工具栏 ---------- */
|
||||
.am-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.am-search {
|
||||
position: relative;
|
||||
flex: 0 0 260px;
|
||||
max-width: 260px;
|
||||
}
|
||||
.am-search-icon {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 13px;
|
||||
opacity: .6;
|
||||
pointer-events: none;
|
||||
}
|
||||
.am-search input { padding-left: 30px; }
|
||||
.am-filter { width: 130px; flex: 0 0 130px; }
|
||||
.am-toolbar-spacer { flex: 1 1 auto; }
|
||||
.am-toolbar button { flex: 0 0 auto; }
|
||||
|
||||
/* 协议注册（占位·绿色按钮） */
|
||||
.am-btn-green { background: #16a34a; border-color: #16a34a; color: #fff; }
|
||||
.am-btn-green:hover:not(:disabled) { background: #15803d; border-color: #15803d; color: #fff; }
|
||||
|
||||
/* 工具栏下拉菜单（批量操作 / 删除） */
|
||||
.am-dropdown { position: relative; display: inline-flex; flex: 0 0 auto; }
|
||||
.am-dropdown-toggle .am-caret { font-size: 11px; opacity: .85; }
|
||||
.am-dropdown-menu {
|
||||
position: absolute; top: calc(100% + 6px); right: 0; z-index: 45;
|
||||
min-width: 168px; padding: 6px;
|
||||
background: var(--card); border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
|
||||
display: none; flex-direction: column; gap: 2px;
|
||||
}
|
||||
.am-dropdown.open .am-dropdown-menu { display: flex; }
|
||||
.am-dropdown-menu button {
|
||||
width: 100%; height: 34px; justify-content: flex-start;
|
||||
background: #fff; color: var(--ink-700); border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm); font-size: 13px;
|
||||
}
|
||||
.am-dropdown-menu button:hover:not(:disabled) { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
|
||||
.am-dropdown-menu button.danger-item { color: var(--danger); }
|
||||
.am-dropdown-menu button.danger-item:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: #fecaca; }
|
||||
|
||||
/* 批量检测进度文案 */
|
||||
.am-detect-status { font-size: 13px; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 4px 10px; border-radius: var(--radius-sm); }
|
||||
.am-detect-status[hidden] { display: none; }
|
||||
|
||||
/* ---------- 表格 ---------- */
|
||||
.am-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
|
||||
.am-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.am-table thead th {
|
||||
background: var(--blue-50);
|
||||
color: var(--ink-700);
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.am-table tbody td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
color: var(--ink-900);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.am-table tbody tr:hover { background: var(--blue-50); }
|
||||
.am-table .col-check { width: 40px; text-align: center; }
|
||||
.am-table .col-idx { width: 52px; color: var(--ink-500); }
|
||||
.am-table .col-ops { width: 150px; }
|
||||
|
||||
.email-cell { display: flex; align-items: center; gap: 6px; }
|
||||
.email-cell .text-mono { font-family: var(--mono); }
|
||||
.pw-cell { display: flex; align-items: center; gap: 6px; }
|
||||
.pw-mask { letter-spacing: 2px; color: var(--ink-500); }
|
||||
.pw-text { font-family: var(--mono); }
|
||||
.icon-btn {
|
||||
height: 24px; width: 24px; padding: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff; color: var(--ink-500);
|
||||
cursor: pointer; font-size: 13px; line-height: 1;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
/* 悬停对比修复：全局 button:hover:not(:disabled) 会把背景变成深蓝(blue-700)，
|
||||
其特异度(0,2,1)高于原来的 .icon-btn:hover(0,2,0)，导致深底+蓝字不可读。
|
||||
这里用 button.<class>:hover:not(:disabled)(0,3,1) 提高特异度，并同时固定浅底+深字。 */
|
||||
button.icon-btn:hover:not(:disabled) { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
|
||||
|
||||
.row-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||||
.op-link {
|
||||
height: 28px; padding: 0 10px;
|
||||
border: 1px solid var(--line); background: #fff; color: var(--ink-700);
|
||||
border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
|
||||
}
|
||||
button.op-link:hover:not(:disabled) { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
|
||||
.op-link.danger { color: var(--danger); border-color: #fecaca; }
|
||||
button.op-link.danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: #fecaca; }
|
||||
.op-link.detect { color: var(--blue-700); border-color: var(--blue-100); }
|
||||
button.op-link.detect:hover:not(:disabled) { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
|
||||
|
||||
/* 状态药丸 */
|
||||
.sk-tag {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
padding: 2px 9px; border-radius: 4px; font-size: 12px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.sk-tag.has { background: var(--ok-soft); color: #047857; border-color: #a7f3d0; cursor: pointer; }
|
||||
.sk-tag.none { background: #f1f5f9; color: var(--ink-500); }
|
||||
.sk-tag.banned { background: var(--danger-soft); color: #991b1b; border-color: #fecaca; }
|
||||
.code-chip {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
padding: 2px 8px; border-radius: 4px; font-size: 12px;
|
||||
background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100);
|
||||
cursor: pointer; font-family: var(--mono);
|
||||
}
|
||||
.muted { color: var(--ink-400); }
|
||||
|
||||
/* ---------- 分页 ---------- */
|
||||
.am-pager {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-top: 14px; gap: 12px; flex-wrap: wrap;
|
||||
}
|
||||
.am-pager-left, .am-pager-right { display: flex; align-items: center; gap: 8px; }
|
||||
.am-pager-label { color: var(--ink-500); font-size: 13px; }
|
||||
.am-pagesize { width: 84px; height: 32px; }
|
||||
.am-pager-info { color: var(--ink-500); font-size: 13px; }
|
||||
|
||||
/* ---------- 导入弹窗 ---------- */
|
||||
.am-modal {
|
||||
position: fixed; inset: 0; z-index: 60;
|
||||
background: rgba(15, 23, 42, .45);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.am-modal[hidden] { display: none; }
|
||||
.am-modal-dialog {
|
||||
width: 560px; max-width: 100%;
|
||||
background: var(--card); border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-pop); padding: 20px;
|
||||
}
|
||||
.am-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.am-modal-head b { font-size: 15px; }
|
||||
button.am-modal-close {
|
||||
height: 28px; width: 28px; padding: 0; font-size: 18px; line-height: 1;
|
||||
background: #fff; color: var(--ink-600); border: 1px solid var(--line); border-radius: var(--radius-sm);
|
||||
}
|
||||
button.am-modal-close:hover:not(:disabled) { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
|
||||
.am-modal-dialog textarea { min-height: 200px; margin: 8px 0; }
|
||||
.am-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
|
||||
|
||||
/* 通用确认弹窗:紧凑尺寸 + 危险(删除)确定按钮红色 */
|
||||
.am-modal-confirm { width: 420px; }
|
||||
.am-modal-confirm .hint { margin: 4px 0 16px; color: var(--ink-700); font-size: 14px; line-height: 1.6; }
|
||||
.am-prompt-input {
|
||||
width: 100%; height: 38px; padding: 0 12px; margin: 0 0 16px; box-sizing: border-box;
|
||||
border: 1px solid var(--line); border-radius: var(--radius-sm);
|
||||
font-size: 14px; color: var(--ink-900); font-family: var(--mono);
|
||||
}
|
||||
.am-prompt-input:focus { outline: none; border-color: var(--blue-500, var(--blue-600)); box-shadow: 0 0 0 3px var(--blue-50); }
|
||||
.am-prompt-input[hidden] { display: none; }
|
||||
|
||||
/* 邮箱编辑弹窗 */
|
||||
.am-mb-edit-field { margin: 0 0 14px; }
|
||||
.am-mb-edit-lbl { display: block; margin: 0 0 6px; font-size: 13px; color: var(--ink-700); }
|
||||
.am-mb-edit-email { font-family: var(--mono); font-size: 14px; color: var(--ink-900); word-break: break-all; }
|
||||
.am-mb-edit-field .am-prompt-input { margin: 0; }
|
||||
.am-mb-edit-used { margin: 0 0 4px; }
|
||||
#confirmOk.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
|
||||
#confirmOk.danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: #fff; }
|
||||
|
||||
/* ---------- 查收抽屉 ---------- */
|
||||
.am-drawer { position: fixed; inset: 0; z-index: 70; }
|
||||
.am-drawer[hidden] { display: none; }
|
||||
.am-drawer-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .35); }
|
||||
.am-drawer-panel {
|
||||
position: absolute; top: 0; right: 0; height: 100%; width: 460px; max-width: 90vw;
|
||||
background: var(--card); box-shadow: var(--shadow-pop);
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.am-drawer-head {
|
||||
display: flex; align-items: flex-start; justify-content: space-between;
|
||||
padding: 16px 20px; border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.am-drawer-head b { font-size: 15px; }
|
||||
.am-drawer-addr { color: var(--ink-500); font-size: 12px; margin-top: 4px; font-family: var(--mono); }
|
||||
.am-drawer-head-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.am-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
|
||||
.msg-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
|
||||
.msg-from { color: var(--ink-500); font-size: 12px; }
|
||||
.msg-subject { color: var(--ink-900); margin: 3px 0; }
|
||||
.msg-time { color: var(--ink-400); font-size: 12px; }
|
||||
.msg-code { margin-top: 8px; }
|
||||
.msg-body { margin-top: 8px; color: var(--ink-700); font-size: 12px; white-space: pre-wrap; max-height: 160px; overflow: auto; }
|
||||
.drawer-loading, .drawer-empty { color: var(--ink-400); text-align: center; padding: 40px 0; }
|
||||
|
||||
/* ---------- 拿 RT 进度面板 ---------- */
|
||||
.am-rt-panel {
|
||||
position: fixed; right: 20px; bottom: 20px; z-index: 55;
|
||||
width: 420px; max-width: calc(100vw - 40px);
|
||||
background: var(--card); border: 1px solid var(--line);
|
||||
border-radius: var(--radius); box-shadow: var(--shadow-pop);
|
||||
display: flex; flex-direction: column; max-height: 60vh;
|
||||
}
|
||||
.am-rt-panel[hidden] { display: none; }
|
||||
.am-rt-head {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 12px 14px; border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.am-rt-head b { font-size: 14px; }
|
||||
.am-rt-summary { flex: 1; color: var(--ink-500); font-size: 12px; }
|
||||
.am-rt-logs { flex: 1; overflow-y: auto; padding: 10px 14px; font-family: var(--mono); font-size: 12px; }
|
||||
.am-rt-line { padding: 2px 0; color: var(--ink-700); white-space: pre-wrap; word-break: break-all; }
|
||||
.am-rt-line.ok { color: #047857; }
|
||||
.am-rt-line.warn { color: #92400e; }
|
||||
.am-rt-line.error { color: #991b1b; }
|
||||
|
||||
/* ---------- Toast ---------- */
|
||||
.am-toast {
|
||||
position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px);
|
||||
background: var(--ink-900); color: #fff; padding: 10px 18px; border-radius: var(--radius-sm);
|
||||
font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90;
|
||||
box-shadow: var(--shadow-pop);
|
||||
}
|
||||
.am-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
.am-toast.ok { background: #047857; }
|
||||
.am-toast.err { background: #b91c1c; }
|
||||
|
||||
@media (max-width: 1100px) { .am-stats { grid-template-columns: repeat(2, 1fr); } }
|
||||
|
||||
/* ---------- 自动刷新开关 ---------- */
|
||||
.am-auto-refresh {
|
||||
display: inline-flex; align-items: center; gap: 8px; margin: 0;
|
||||
color: var(--ink-700); font-size: 13px; cursor: pointer; white-space: nowrap;
|
||||
}
|
||||
.am-auto-refresh input { width: 15px; height: 15px; }
|
||||
.am-auto-refresh .muted { color: var(--ink-400); font-size: 12px; }
|
||||
|
||||
/* ---------- Plan / 状态 药丸 ---------- */
|
||||
.pb-plan-tag {
|
||||
display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 4px;
|
||||
font-size: 12px; background: #f1f5f9; color: var(--ink-600, #475569); border: 1px solid var(--line);
|
||||
}
|
||||
.pb-plan-tag.plus {
|
||||
background: linear-gradient(135deg, #fbbf24, #d97706);
|
||||
color: #fff; border-color: #d97706; font-weight: 600; letter-spacing: .3px;
|
||||
box-shadow: 0 1px 4px rgba(217, 119, 6, .35);
|
||||
}
|
||||
.pb-plan-tag.pro { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; font-weight: 600; }
|
||||
.pb-plan-tag.free { background: #f1f5f9; color: var(--ink-500); }
|
||||
|
||||
/* 批量直开「已开通」徽标：绿色系，与 pb-status.ok / at-chip.has 同一语义色 */
|
||||
.pb-opened-tag {
|
||||
display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 4px;
|
||||
font-size: 12px; font-weight: 600;
|
||||
background: var(--ok-soft); color: #047857; border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
.pb-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 4px; font-size: 12px; border: 1px solid var(--line); }
|
||||
.pb-status.ok { background: var(--ok-soft); color: #047857; border-color: #a7f3d0; }
|
||||
.pb-status.expiring { background: var(--warn-soft); color: #92400e; border-color: #fde68a; }
|
||||
.pb-status.invalid { background: var(--danger-soft); color: #991b1b; border-color: #fecaca; }
|
||||
.pb-status.unknown { background: #f1f5f9; color: var(--ink-500); }
|
||||
|
||||
.pb-exp-main { color: var(--ink-900); }
|
||||
.pb-exp-sub { color: var(--ink-400); font-size: 12px; }
|
||||
.pb-exp-cell.expired .pb-exp-sub { color: var(--danger); }
|
||||
|
||||
.at-cell { display: flex; align-items: center; gap: 6px; }
|
||||
.at-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
|
||||
.at-chip.has { background: var(--ok-soft); color: #047857; border: 1px solid #a7f3d0; cursor: pointer; }
|
||||
.at-chip.none { background: #f1f5f9; color: var(--ink-500); border: 1px solid var(--line); }
|
||||
.rt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
|
||||
.rt-chip.has { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); cursor: pointer; }
|
||||
.rt-chip.none { background: #f1f5f9; color: var(--ink-500); border: 1px solid var(--line); }
|
||||
.sub-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; }
|
||||
.sub-chip.yes { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
|
||||
.sub-chip.no { background: #f1f5f9; color: var(--ink-500); border: 1px solid var(--line); }
|
||||
|
||||
/* ---------- 编辑 / 设置 弹窗控件 ---------- */
|
||||
.am-mono-area { min-height: 72px; font-family: var(--mono); font-size: 12px; }
|
||||
/* AT / Refresh Token 框调矮：约 3 行高（用更高优先级覆盖上面 .am-modal-dialog textarea 的 min-height:200px） */
|
||||
.am-modal-dialog textarea.am-mono-area-sm { min-height: 52px; max-height: 72px; resize: vertical; }
|
||||
/* 邮箱池「清空」按钮：次要按钮上加红色语义 */
|
||||
button.am-danger { color: var(--danger); border-color: #fecaca; }
|
||||
button.am-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); border-color: #fecaca; }
|
||||
.am-modal-dialog label { display: block; margin-bottom: 10px; color: var(--ink-700); }
|
||||
.am-modal-dialog label > input,
|
||||
.am-modal-dialog label > textarea,
|
||||
.am-modal-dialog label > select { margin-top: 4px; }
|
||||
.am-modal-wide { width: 720px; max-width: 100%; }
|
||||
.am-set-block { margin-bottom: 18px; }
|
||||
.am-set-proxies { min-height: 140px; }
|
||||
.am-set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.am-set-grid label { margin-bottom: 0; }
|
||||
/* 协议注册弹窗 */
|
||||
.reg-avail { margin: 12px 0 4px; font-size: 13px; color: var(--ink-700); }
|
||||
.reg-avail b { color: var(--blue-700); font-size: 15px; }
|
||||
|
||||
/* 协议注册：右下角浮层 */
|
||||
.reg-panel {
|
||||
position: fixed; right: 20px; bottom: 20px; z-index: 3000;
|
||||
width: 380px; background: #fff;
|
||||
border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(15, 23, 42, .22);
|
||||
display: flex; flex-direction: column; overflow: hidden;
|
||||
}
|
||||
.reg-panel[hidden] { display: none; }
|
||||
.reg-panel-head {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 10px 12px; background: var(--blue-600); color: #fff;
|
||||
}
|
||||
.reg-panel-title { flex: 0 0 auto; font-size: 14px; }
|
||||
.reg-panel-stat { flex: 1 1 auto; font-size: 12px; color: rgba(255, 255, 255, .9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.reg-panel-tools { flex: 0 0 auto; display: flex; gap: 6px; }
|
||||
.reg-panel-btn {
|
||||
height: 24px; min-width: 24px; padding: 0 8px;
|
||||
background: rgba(255, 255, 255, .18); color: #fff;
|
||||
border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; line-height: 24px;
|
||||
}
|
||||
button.reg-panel-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .32); }
|
||||
.reg-panel-body { padding: 12px; }
|
||||
.reg-panel.min .reg-panel-body { display: none; }
|
||||
.reg-progress { height: 8px; background: var(--blue-50); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
|
||||
.reg-progress-bar { height: 100%; width: 0; background: var(--blue-600); transition: width .3s ease; }
|
||||
.reg-logs {
|
||||
height: 220px; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
|
||||
font-family: var(--mono); font-size: 12px; line-height: 1.6;
|
||||
background: #0f172a; color: #cbd5e1; border-radius: var(--radius-sm); padding: 8px 10px;
|
||||
}
|
||||
.reg-log-line {
|
||||
display: block; white-space: pre-wrap; word-break: break-word;
|
||||
padding: 1px 0; border-left: 2px solid transparent; padding-left: 6px;
|
||||
}
|
||||
.reg-log-ts { color: #64748b; margin-right: 6px; }
|
||||
.reg-log-acct { color: #60a5fa; margin-right: 6px; }
|
||||
.reg-log-msg { color: #cbd5e1; }
|
||||
.reg-log-line.lv-ok { border-left-color: #4ade80; }
|
||||
.reg-log-line.lv-ok .reg-log-msg { color: #4ade80; }
|
||||
.reg-log-line.lv-error { border-left-color: #f87171; }
|
||||
.reg-log-line.lv-error .reg-log-msg { color: #f87171; }
|
||||
.reg-log-line.lv-warn { border-left-color: #fbbf24; }
|
||||
.reg-log-line.lv-warn .reg-log-msg { color: #fbbf24; }
|
||||
.reg-log-line.lv-info { border-left-color: #334155; }
|
||||
.reg-log-line.lv-info .reg-log-msg { color: #cbd5e1; }
|
||||
/* 兼容旧结构（span.lv-*） */
|
||||
.reg-log-line .lv-ok { color: #4ade80; }
|
||||
.reg-log-line .lv-error { color: #f87171; }
|
||||
.reg-log-line .lv-warn { color: #fbbf24; }
|
||||
.reg-log-line .lv-info { color: #94a3b8; }
|
||||
|
||||
.am-sms-testbar { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
|
||||
.am-sms-bal { font-size: 13px; }
|
||||
.am-sms-bal.ok { color: var(--blue-700); }
|
||||
.am-sms-bal.err { color: var(--danger); }
|
||||
|
||||
/* 设置弹窗内的 Tab */
|
||||
.am-set-tabs { display: flex; gap: 8px; margin: 4px 0 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
|
||||
.am-set-tab {
|
||||
height: 34px; padding: 0 16px;
|
||||
background: #fff; color: var(--ink-700);
|
||||
border: 1px solid var(--line); border-radius: var(--radius-sm);
|
||||
cursor: pointer; font-size: 14px;
|
||||
}
|
||||
button.am-set-tab:hover:not(:disabled) { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
|
||||
.am-set-tab.active, button.am-set-tab.active:hover:not(:disabled) {
|
||||
background: var(--blue-600); color: #fff; border-color: var(--blue-600);
|
||||
}
|
||||
.am-set-panel[hidden] { display: none; }
|
||||
|
||||
/* 邮箱池 */
|
||||
.am-set-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 13px; color: var(--ink-700); cursor: pointer; }
|
||||
.am-set-check input { width: auto; margin: 0; }
|
||||
.am-set-check code { background: var(--blue-50); color: var(--blue-700); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); }
|
||||
.am-mb-splitbar { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; font-size: 13px; color: var(--ink-700); }
|
||||
.am-mb-splitbar[hidden] { display: none; }
|
||||
.am-mb-splitnum { width: 72px; }
|
||||
.am-mb-importbar { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
|
||||
.am-mb-importbar .hint { margin: 0; }
|
||||
.am-mb-splitbar { flex-wrap: wrap; }
|
||||
.am-mb-splitbar .am-mb-count { margin: 0 0 0 auto; }
|
||||
#mbImportBox[hidden] { display: none; }
|
||||
#mbImportBox { margin: 8px 0; }
|
||||
.am-mb-list { border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 260px; overflow: auto; }
|
||||
.am-mb-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
|
||||
.am-mb-row:last-child { border-bottom: 0; }
|
||||
.am-mb-addr { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-900); font-family: var(--mono); }
|
||||
.am-mb-badge { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font-size: 12px; }
|
||||
.am-mb-badge.free { background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100); }
|
||||
.am-mb-badge.used { background: #f1f5f9; color: var(--ink-500); border: 1px solid var(--line); }
|
||||
.am-mb-tag { flex: 0 0 auto; color: var(--ink-400); font-size: 12px; }
|
||||
.am-mb-ops { flex: 0 0 auto; display: flex; gap: 6px; }
|
||||
.am-mb-testbar { display: flex; gap: 10px; align-items: center; margin: 6px 0 10px; }
|
||||
.am-mb-select { flex: 1; min-width: 0; }
|
||||
.am-mb-result { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; max-height: 220px; overflow: auto; background: #fff; }
|
||||
.am-mb-result[hidden] { display: none; }
|
||||
.am-mb-loading, .am-mb-empty { color: var(--ink-400); text-align: center; padding: 16px 0; font-size: 13px; }
|
||||
.am-mb-head { color: var(--blue-700); font-size: 13px; margin-bottom: 8px; }
|
||||
.am-mb-item { border-bottom: 1px solid var(--line-soft); padding: 8px 0; }
|
||||
.am-mb-item:last-child { border-bottom: 0; }
|
||||
.am-mb-subj { color: var(--ink-900); font-size: 13px; }
|
||||
.am-mb-meta { color: var(--ink-400); font-size: 12px; margin-top: 2px; word-break: break-all; }
|
||||
.am-mb-code { margin-top: 4px; font-size: 13px; color: var(--ink-700); }
|
||||
.am-mb-code b { color: var(--blue-700); font-family: var(--mono); font-size: 15px; letter-spacing: 1px; }
|
||||
.topbar-actions button { margin-right: 4px; }
|
||||
|
||||
/* ---------- GPT 账号表：固定列宽（table-layout: fixed）---------- */
|
||||
.am-table-gpt { table-layout: fixed; width: 100%; }
|
||||
.am-table-gpt .col-check { width: 40px; }
|
||||
.am-table-gpt .col-idx { width: 48px; }
|
||||
.am-table-gpt .col-email { width: 240px; }
|
||||
.am-table-gpt .col-at { width: 190px; }
|
||||
.am-table-gpt .col-rt { width: 96px; }
|
||||
.am-table-gpt .col-sub { width: 64px; text-align: center; }
|
||||
.am-table-gpt .col-status { width: 84px; }
|
||||
.am-table-gpt .col-ops { width: 300px; }
|
||||
/* 邮箱过长时省略号 + title 悬浮提示 */
|
||||
.am-table-gpt .email-cell { min-width: 0; }
|
||||
.am-table-gpt .email-cell .am-email {
|
||||
flex: 0 1 auto; min-width: 0;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
/* FREE / PLUS 徽标统一靠右、等宽居中，保证跨行竖向对齐 */
|
||||
.am-table-gpt .email-cell .pb-plan-tag {
|
||||
margin-left: auto; flex: none;
|
||||
min-width: 48px; justify-content: center; white-space: nowrap;
|
||||
}
|
||||
.am-table-gpt .email-cell .pb-opened-tag { flex: none; white-space: nowrap; }
|
||||
/* 操作列按钮保持单行不换行 */
|
||||
.am-table-gpt .row-ops { flex-wrap: nowrap; white-space: nowrap; }
|
||||
.am-table-gpt tbody td { overflow: hidden; }
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,360 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/* ==========================================================================
|
||||
App Shell — 统一设计系统(参考 auto 项目 · 蓝色企业风 · 全局非加粗)
|
||||
左右布局:蓝色渐变侧栏 + 右侧功能区
|
||||
所有功能页共用;功能样式在各自 css 里补充(复用下方令牌)
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
/* 品牌蓝 */
|
||||
--blue-700: #1e40af;
|
||||
--blue-600: #2563eb;
|
||||
--blue-500: #3b82f6;
|
||||
--blue-100: #dbeafe;
|
||||
--blue-50: #eff6ff;
|
||||
/* 墨色文字 */
|
||||
--ink-900: #0f172a;
|
||||
--ink-700: #334155;
|
||||
--ink-500: #64748b;
|
||||
--ink-400: #94a3b8;
|
||||
/* 线与底 */
|
||||
--line: #e2e8f0;
|
||||
--line-soft: #eef2f7;
|
||||
--bg: #f4f7fb;
|
||||
--card: #ffffff;
|
||||
/* 语义色 */
|
||||
--danger: #dc2626;
|
||||
--danger-soft: #fef2f2;
|
||||
--ok: #059669;
|
||||
--ok-soft: #ecfdf5;
|
||||
--warn: #b45309;
|
||||
--warn-soft: #fffbeb;
|
||||
/* 圆角/阴影/字体 */
|
||||
--radius: 6px;
|
||||
--radius-sm: 4px;
|
||||
--shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
|
||||
--shadow-pop: 0 12px 40px rgba(15, 23, 42, .18);
|
||||
--font: "Inter", -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
--mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
|
||||
|
||||
/* 兼容旧令牌名(功能页 css 复用) */
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1e40af;
|
||||
--primary-light: #3b82f6;
|
||||
--panel: #ffffff;
|
||||
--panel2: #f8fafc;
|
||||
--line-strong: #cbd5e1;
|
||||
--text: #0f172a;
|
||||
--muted: #64748b;
|
||||
}
|
||||
|
||||
/* 全局:一律不加粗,盒模型统一 */
|
||||
* { box-sizing: border-box; font-weight: 400 !important; }
|
||||
html, body { margin: 0; padding: 0; height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--ink-900);
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
h1, h2, h3, h4 { margin: 0; }
|
||||
code, .text-mono { font-family: var(--mono); }
|
||||
input, textarea, button, select { font-family: inherit; font-size: 14px; color: inherit; }
|
||||
|
||||
/* 统一滚动条 */
|
||||
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
|
||||
*::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
*::-webkit-scrollbar-track { background: transparent; }
|
||||
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
|
||||
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }
|
||||
|
||||
/* ---------- 布局骨架 ---------- */
|
||||
.layout { display: flex; min-height: 100vh; }
|
||||
|
||||
/* ---------- 侧栏(蓝色渐变) ---------- */
|
||||
.sidebar {
|
||||
width: 224px;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(180deg, var(--blue-700), var(--blue-600));
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .12);
|
||||
}
|
||||
.sidebar-brand .logo-box {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, .18);
|
||||
border: 1px solid rgba(255, 255, 255, .3);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.3; }
|
||||
.sidebar-brand .brand-text b { color: #fff; font-size: 16px; letter-spacing: 1px; }
|
||||
.sidebar-brand .brand-text small { color: rgba(255, 255, 255, .78); font-size: 12px; }
|
||||
|
||||
.sidebar-menu { flex: 1 1 auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
|
||||
/* 底部固定链接组：被主菜单的 flex:1 顶到侧栏底部，并用分隔线与主导航区分 */
|
||||
.menu-foot {
|
||||
margin-top: auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
border-top: 1px solid rgba(255, 255, 255, .12);
|
||||
}
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 11px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: rgba(255, 255, 255, .82);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
.menu-item:hover { background: rgba(255, 255, 255, .12); color: #fff; }
|
||||
.menu-item.active { background: rgba(255, 255, 255, .18); color: #fff; }
|
||||
.menu-item .icon { font-size: 18px; width: 20px; text-align: center; }
|
||||
/* 导航图标：CSS mask + currentColor（白色），替代 emoji */
|
||||
.menu-item .nav-ic {
|
||||
width: 18px; height: 18px; text-align: initial; flex: 0 0 auto;
|
||||
background-color: currentColor;
|
||||
-webkit-mask: var(--icon) center / contain no-repeat;
|
||||
mask: var(--icon) center / contain no-repeat;
|
||||
opacity: .9;
|
||||
}
|
||||
.menu-item:hover .nav-ic, .menu-item.active .nav-ic { opacity: 1; }
|
||||
.nav-ic-accounts {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.nav-ic-cardflow {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.nav-ic-protocol {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.nav-ic-pay {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.nav-ic-cardlink {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.nav-ic-github {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56 0-.27-.01-1.16-.02-2.1-3.2.7-3.87-1.36-3.87-1.36-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.58.23 2.75.11 3.04.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.25 5.67.41.35.78 1.05.78 2.12 0 1.53-.01 2.76-.01 3.14 0 .31.21.68.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.nav-ic-qq {
|
||||
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
|
||||
}
|
||||
.menu-item .count {
|
||||
margin-left: auto;
|
||||
min-width: 18px; height: 18px; padding: 0 5px;
|
||||
border-radius: 4px; background: #f87171; color: #fff;
|
||||
font-size: 11px; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
||||
/* ---------- 主区域 ---------- */
|
||||
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.topbar {
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: var(--card);
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 28px;
|
||||
}
|
||||
.topbar-title { font-size: 18px; color: var(--ink-900); letter-spacing: .3px; }
|
||||
.topbar-actions { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-500); }
|
||||
.topbar-actions .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
|
||||
|
||||
.content { flex: 1; padding: 22px 28px 60px; min-width: 0; width: 100%; }
|
||||
|
||||
/* ---------- 面板/卡片 ---------- */
|
||||
.card, .panel {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.section-title b { font-size: 14px; color: var(--ink-900); }
|
||||
.section-title small { color: var(--ink-500); font-size: 12px; }
|
||||
|
||||
/* 药丸标签 */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 9px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
background: var(--blue-50);
|
||||
color: var(--blue-700);
|
||||
border: 1px solid var(--blue-100);
|
||||
}
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 9px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
background: var(--blue-50);
|
||||
color: var(--blue-700);
|
||||
border: 1px solid var(--blue-100);
|
||||
}
|
||||
|
||||
/* ---------- 表单控件 ---------- */
|
||||
label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ink-500); }
|
||||
label > span { color: var(--ink-500); }
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
background: #fff;
|
||||
color: var(--ink-900);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
outline: none;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
input:not([type="checkbox"]):not([type="radio"]) { height: 38px; padding: 0 12px; }
|
||||
textarea { resize: vertical; font-family: var(--mono); line-height: 1.6; }
|
||||
input:focus, textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }
|
||||
|
||||
/* 下拉框:统一箭头样式 */
|
||||
select {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 34px 0 12px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
|
||||
color: var(--ink-900);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }
|
||||
select option { background: #fff; color: var(--ink-900); }
|
||||
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--blue-600); cursor: pointer; }
|
||||
|
||||
/* ---------- 统一按钮 ---------- */
|
||||
button, .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--blue-600);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--blue-600);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background .15s, border-color .15s, color .15s;
|
||||
}
|
||||
button:hover:not(:disabled), .btn:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: var(--blue-700); border-color: var(--blue-700); }
|
||||
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
|
||||
|
||||
/* 次要 / 幽灵按钮 */
|
||||
button.secondary, button.ghost, .btn-ghost, .btn-secondary,
|
||||
.load-card-button, .copy-one-button, .remove-pair, .add-at-button {
|
||||
background: #fff;
|
||||
color: var(--ink-700);
|
||||
border-color: var(--line);
|
||||
}
|
||||
button.secondary:hover:not(:disabled), button.ghost:hover:not(:disabled),
|
||||
.btn-ghost:hover:not(:disabled), .btn-secondary:hover:not(:disabled),
|
||||
.load-card-button:hover:not(:disabled), .copy-one-button:hover:not(:disabled) {
|
||||
background: var(--blue-50);
|
||||
color: var(--blue-700);
|
||||
border-color: var(--blue-100);
|
||||
}
|
||||
|
||||
/* 危险按钮 */
|
||||
.btn-danger, button.danger {
|
||||
background: #fff; color: var(--danger); border-color: #fecaca;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled), button.danger:hover:not(:disabled) { background: var(--danger-soft); }
|
||||
|
||||
/* 小尺寸 */
|
||||
.small, .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
|
||||
|
||||
/* ---------- 提示框(status/hint) ---------- */
|
||||
.status {
|
||||
margin-top: 16px;
|
||||
padding: 11px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-left: 3px solid var(--blue-600);
|
||||
color: var(--ink-700);
|
||||
font-size: 13px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.status.ok { border-left-color: var(--ok); background: var(--ok-soft); color: #047857; }
|
||||
.status.error { border-left-color: var(--danger); background: var(--danger-soft); color: #991b1b; }
|
||||
.status.warn { border-left-color: var(--warn); background: var(--warn-soft); color: #92400e; }
|
||||
|
||||
.hint { color: var(--ink-500); font-size: 13px; margin: 0 0 12px; }
|
||||
.hint code { background: var(--blue-50); color: var(--blue-700); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
|
||||
|
||||
/* ---------- 空态 ---------- */
|
||||
.empty {
|
||||
min-height: 300px;
|
||||
border: 1px dashed var(--line-strong);
|
||||
border-radius: var(--radius);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
gap: 6px;
|
||||
color: var(--ink-400);
|
||||
background: #fbfcfd;
|
||||
}
|
||||
.empty b { font-size: 15px; color: var(--ink-700); }
|
||||
.empty[hidden] { display: none; }
|
||||
|
||||
/* ---------- 响应式:窄屏侧栏收窄为图标 ---------- */
|
||||
@media (max-width: 960px) {
|
||||
.sidebar { width: 64px; }
|
||||
.sidebar-brand { justify-content: center; padding: 16px 0; }
|
||||
.sidebar-brand .brand-text { display: none; }
|
||||
.menu-item { justify-content: center; padding: 11px 0; }
|
||||
.menu-item span:not(.icon):not(.count) { display: none; }
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.content, .topbar { padding-left: 16px; padding-right: 16px; }
|
||||
}
|
||||
Reference in New Issue
Block a user