mirror of
https://wget.la/https://github.com/432539/gpt
synced 2026-08-17 11:37:04 +08:00
432539
fef45134d5
只开源「GPT 账号注册机 / 管理」(account-manager)：账号列表/导入导出、检测/批量检测、 拿 RT、协议/浏览器注册等注册机能力。批量直开 / 协议支付 / 提取链接 / 直卡直开 等其它功能 不含实现代码，仅通过 iframe 内嵌外链访问。真实机密均由 .gitignore 忽略，仅提供脱敏示例配置。
361 lines
13 KiB
CSS
361 lines
13 KiB
CSS
@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; }
|
|
}
|