feat: 外观支持自定义 CSS/JS，并升级发帖工作台与积分存量看板
后台可注入全站 CSS/JS（SSR 生效，CSS 可热换）；发帖/编辑改为锁一屏工作室；经济看板增加存量健康度；主题令牌与弹层误关一并收紧。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -6,8 +6,8 @@
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* 浅色（默认）——冷调石墨：底色微蓝灰，面板纯白浮起，层次干净锐利 */
|
||||
--bg: #f6f7f9;
|
||||
/* 浅色（默认）——中性暖灰底 + 纯白卡片浮起 */
|
||||
--bg: #f7f7f5;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f2f4f7;
|
||||
--tint: #eceff3;
|
||||
@@ -44,18 +44,34 @@
|
||||
--ledger-typed-bg: #f3e8ff;
|
||||
--ledger-typed-fg: #7e22ce;
|
||||
|
||||
/* 工作台语义：导航选中态 / 榜单奖牌色 */
|
||||
--nav-active-bg: var(--accent-soft);
|
||||
/* 积分存量概览：分段条与健康徽章 */
|
||||
--stock-circ: #07c05f;
|
||||
--stock-spent: #d1d5db;
|
||||
--stock-frozen: #f59e0b;
|
||||
--stock-frozen-stripe: rgba(255, 255, 255, 0.35);
|
||||
--stock-badge-ok-bg: #07c05f;
|
||||
--stock-badge-ok-fg: #ffffff;
|
||||
--stock-badge-hot-bg: #f59e0b;
|
||||
--stock-badge-hot-fg: #ffffff;
|
||||
--stock-badge-low-bg: var(--tint);
|
||||
--stock-badge-low-fg: var(--ink-3);
|
||||
|
||||
/* 工作台语义：选中用描边+文字色指示，底保持面板色，避免品牌色铺底 */
|
||||
--nav-active-bg: var(--panel);
|
||||
--nav-active-ink: var(--accent);
|
||||
--nav-active-line: rgba(59, 91, 219, 0.22);
|
||||
--nav-active-line: rgba(59, 91, 219, 0.38);
|
||||
--rank-1: #96620f;
|
||||
--rank-2: #5d6676;
|
||||
--rank-3: #a05a2c;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--shadow: 0 2px 8px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.06);
|
||||
--shadow-lg: 0 6px 16px rgba(16, 24, 40, 0.08), 0 20px 48px rgba(16, 24, 40, 0.12);
|
||||
|
||||
/* 页面画布：极淡品牌绿光晕 + SVG 噪点（色值集中于此） */
|
||||
--bg-halo: rgba(7, 192, 95, 0.04);
|
||||
--bg-noise-opacity: 0.03;
|
||||
|
||||
/* next/font 构建期自托管，变量由 layout.tsx 注入；
|
||||
本地系统字体仅作网络字体分片就绪前的回退（PingFang/雅黑与 Noto 观感接近） */
|
||||
--font-display: var(--font-jakarta), var(--font-noto-sc), -apple-system,
|
||||
@@ -65,7 +81,7 @@
|
||||
--font-mono: var(--font-jetbrains), var(--font-noto-sc), ui-monospace,
|
||||
"Cascadia Code", Consolas, monospace;
|
||||
|
||||
--r: 18px;
|
||||
--r: 12px;
|
||||
--r-sm: 12px;
|
||||
|
||||
/* 顶栏 68px 条 + 1px 底边；main 桌面 py-9。侧栏 sticky 必须等于
|
||||
@@ -80,8 +96,8 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* 近黑锌灰：面板逐层浮起，靛蓝提亮为长春花蓝 */
|
||||
--bg: #0f1115;
|
||||
/* 近黑暖灰：面板逐层浮起，靛蓝提亮为长春花蓝 */
|
||||
--bg: #101211;
|
||||
--panel: #181b21;
|
||||
--panel-2: #20242c;
|
||||
--tint: #282d37;
|
||||
@@ -117,18 +133,32 @@
|
||||
--ledger-typed-bg: rgba(126, 34, 206, 0.28);
|
||||
--ledger-typed-fg: #e9d5ff;
|
||||
|
||||
/* 工作台语义 */
|
||||
--nav-active-bg: rgba(141, 163, 255, 0.14);
|
||||
--stock-circ: #34d399;
|
||||
--stock-spent: #4b5563;
|
||||
--stock-frozen: #fbbf24;
|
||||
--stock-frozen-stripe: rgba(0, 0, 0, 0.22);
|
||||
--stock-badge-ok-bg: #059669;
|
||||
--stock-badge-ok-fg: #ecfdf5;
|
||||
--stock-badge-hot-bg: #d97706;
|
||||
--stock-badge-hot-fg: #fffbeb;
|
||||
--stock-badge-low-bg: var(--tint);
|
||||
--stock-badge-low-fg: var(--ink-3);
|
||||
|
||||
/* 工作台语义：选中不铺品牌色底 */
|
||||
--nav-active-bg: var(--panel);
|
||||
--nav-active-ink: #a9b8ff;
|
||||
--nav-active-line: rgba(141, 163, 255, 0.3);
|
||||
--nav-active-line: rgba(141, 163, 255, 0.38);
|
||||
--rank-1: #e3bf74;
|
||||
--rank-2: #b9c1cd;
|
||||
--rank-3: #e0a06e;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.22);
|
||||
--shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.3);
|
||||
|
||||
--bg-halo: rgba(7, 192, 95, 0.03);
|
||||
--bg-noise-opacity: 0.04;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -148,19 +178,14 @@ body {
|
||||
isolation: isolate; /* 让 z-index:-1 的画布层停在内容之下、html 之上 */
|
||||
}
|
||||
|
||||
/* 浏览器最后一层画布：氛围光 + 石墨微粒。
|
||||
纯 CSS（令牌 + 内联 SVG），不跟位图——跟浅/暗/accent 换肤，无限缩放，无额外请求。 */
|
||||
/* 克制画布：fixed 伪元素（不用 background-attachment:fixed，避免移动端掉帧） */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 52% at 12% -18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
|
||||
radial-gradient(ellipse 48% 36% at 100% 0%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 58%),
|
||||
radial-gradient(ellipse 42% 28% at 78% 100%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--panel) 40%, transparent) 0%, transparent 32%);
|
||||
background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--bg-halo), transparent 70%);
|
||||
}
|
||||
|
||||
body::after {
|
||||
@@ -169,23 +194,11 @@ body::after {
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
opacity: 0.032;
|
||||
opacity: var(--bg-noise-opacity);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 160px 160px;
|
||||
}
|
||||
|
||||
.dark body::before {
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 52% at 12% -18%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
|
||||
radial-gradient(ellipse 48% 36% at 100% 0%, color-mix(in srgb, var(--ink) 6%, transparent), transparent 58%),
|
||||
radial-gradient(ellipse 42% 28% at 78% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--panel) 22%, transparent) 0%, transparent 36%);
|
||||
}
|
||||
|
||||
.dark body::after {
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body::before,
|
||||
body::after {
|
||||
@@ -399,8 +412,140 @@ body::after {
|
||||
|
||||
.j13-compose-typebar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.j13-compose-typeopt {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 4px 3px 3px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
color: var(--ink);
|
||||
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
.j13-compose-typeopt:hover:not(:has(.j13-compose-typeopt-hit:disabled)) {
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
.j13-compose-typeopt.is-on {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
|
||||
}
|
||||
.j13-compose-typeopt.is-on.is-warn {
|
||||
background: color-mix(in srgb, var(--danger-soft) 70%, var(--panel));
|
||||
border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
|
||||
}
|
||||
.j13-compose-typeopt:has(.j13-compose-typeopt-hit:disabled):not(.is-on) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
.j13-compose-typeopt-hit {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 6px 4px 6px 7px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
.j13-compose-typeopt-hit:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.j13-compose-typeopt-hit:focus-visible,
|
||||
.j13-compose-typeopt-setup:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.j13-compose-typeopt-ico {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: var(--panel-2);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.j13-compose-typeopt.is-on .j13-compose-typeopt-ico {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.j13-compose-typeopt.is-on.is-warn .j13-compose-typeopt-ico {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.j13-compose-typeopt-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.j13-compose-typeopt-label {
|
||||
display: block;
|
||||
font-size: 13.5px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.j13-compose-typeopt-hint {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-compose-typeopt.is-on .j13-compose-typeopt-hint.is-status {
|
||||
color: color-mix(in srgb, var(--accent) 58%, var(--ink-2));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.j13-compose-typeopt-hint.is-warn {
|
||||
color: var(--danger);
|
||||
font-weight: 650;
|
||||
}
|
||||
.j13-compose-typeopt-setup {
|
||||
flex-shrink: 0;
|
||||
height: 26px;
|
||||
padding: 0 9px;
|
||||
margin-right: 2px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
|
||||
background: color-mix(in srgb, var(--accent-soft) 80%, var(--panel));
|
||||
color: var(--accent);
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j13-compose-typeopt-setup:hover {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.j13-compose-typeopt-setup.is-warn {
|
||||
border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
|
||||
background: color-mix(in srgb, var(--danger-soft) 85%, var(--panel));
|
||||
color: var(--danger);
|
||||
}
|
||||
.j13-compose-typeopt-setup.is-warn:hover {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
border-color: var(--danger);
|
||||
}
|
||||
.dark .j13-compose-typeopt.is-on.is-warn .j13-compose-typeopt-ico,
|
||||
.dark .j13-compose-typeopt-setup.is-warn:hover {
|
||||
color: #1a0c0b;
|
||||
}
|
||||
.j13-compose-typechip {
|
||||
height: 34px;
|
||||
@@ -468,9 +613,15 @@ body::after {
|
||||
width: 6.5rem;
|
||||
}
|
||||
.j13-lottery-prize-table .col-actions {
|
||||
width: 4.5rem;
|
||||
width: 5.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
.j13-lottery-prize-table .col-actions > span {
|
||||
display: inline-flex;
|
||||
}
|
||||
.j13-lottery-prize-table .col-actions .btn:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
.j13-lottery-prize-table .j13-compose-field {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
@@ -1513,19 +1664,18 @@ body::after {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
height: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0 12px;
|
||||
min-height: 3.25rem;
|
||||
padding: 8px 10px 8px 8px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
color: var(--ink);
|
||||
text-align: left;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.15s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.j13-board-trigger:hover:not(:disabled) {
|
||||
border-color: color-mix(in srgb, var(--line-2) 40%, var(--line));
|
||||
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
||||
}
|
||||
.j13-board-trigger:focus { outline: none; }
|
||||
.j13-board-trigger:focus-visible,
|
||||
@@ -1538,17 +1688,62 @@ body::after {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.j13-board-trigger.is-empty {
|
||||
border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.j13-board-trigger.is-empty .j13-board-trigger-hint {
|
||||
color: var(--accent);
|
||||
font-weight: 650;
|
||||
}
|
||||
.j13-board-trigger-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.j13-board-trigger-name {
|
||||
display: block;
|
||||
font-size: 13.5px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.j13-board-trigger-hint {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-board-trigger-ico {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 7px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 9px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-board-trigger-ico.is-placeholder {
|
||||
background: var(--panel-2);
|
||||
color: var(--ink-3);
|
||||
}
|
||||
.j13-board-option .j13-board-trigger-ico {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.j13-compose-req {
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--accent);
|
||||
vertical-align: 0.05em;
|
||||
}
|
||||
.j13-board-menu {
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
@@ -1856,36 +2051,6 @@ body::after {
|
||||
min-height: 0;
|
||||
gap: 0;
|
||||
}
|
||||
.j13-md-panes.is-split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.j13-md-panes.is-split {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-write-wrap {
|
||||
border-right: 1px solid var(--line);
|
||||
padding-right: 1rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-preview {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
/* 窄屏双栏：上下分栏仍同时显示 */
|
||||
@media (max-width: 959px) {
|
||||
.j13-md-panes.is-split {
|
||||
grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-write-wrap {
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.j13-md-panes.is-split .j13-md-preview {
|
||||
padding-top: 0.35rem;
|
||||
}
|
||||
}
|
||||
.j13-md-panes > [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -2363,14 +2528,23 @@ a.j13-att-cta:hover {
|
||||
}
|
||||
|
||||
|
||||
/* 发帖/编辑：占满 main 剩余高度，减少卡片下方空余（保留页脚） */
|
||||
/* 发帖/编辑工作台：锁一屏、隐藏页脚，高度全部给编辑画布 */
|
||||
body:has([data-compose-viewport]) {
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
body:has([data-compose-viewport]) > footer {
|
||||
display: none;
|
||||
}
|
||||
body:has([data-compose-viewport]) #main {
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
/* 略收紧上下边距，把高度留给舞台 */
|
||||
padding-top: 1.15rem;
|
||||
padding-bottom: 1.15rem;
|
||||
padding-top: 0.55rem;
|
||||
padding-bottom: 0.55rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
body:has([data-compose-viewport]) #main > [data-compose-viewport] {
|
||||
flex: 1 1 auto;
|
||||
@@ -2379,6 +2553,283 @@ body:has([data-compose-viewport]) #main > [data-compose-viewport] {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* 发帖工作台：左画布 + 右设置栏（窄屏设置收入抽屉） */
|
||||
.j13-compose-stage.is-studio {
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-compose-stage.is-studio:not(:has(.j13-compose-studio)) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.j13-compose-stage.is-studio .j13-compose-toolbar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
z-index: 8;
|
||||
padding: 0.7rem 1rem 0.7rem 0.85rem;
|
||||
background: var(--panel);
|
||||
border-radius: var(--r) var(--r) 0 0;
|
||||
}
|
||||
.j13-compose-toolbar-lead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-compose-toolbar-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-compose-toolbar-sub {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
color: var(--ink-3);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.j13-compose-back {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
color: var(--ink-2);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.j13-compose-back:hover,
|
||||
.j13-compose-back:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
.j13-compose-toolbar-hint {
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
max-width: 14rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.j13-compose-rail-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.j13-compose-rail-toggle-count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
padding: 0 0.3rem;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
.j13-compose-draft {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.7rem 1.1rem;
|
||||
font-size: 13px;
|
||||
color: var(--ink);
|
||||
background: var(--accent-soft);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
|
||||
}
|
||||
.j13-compose-banner-error {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
.j13-compose-studio {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
position: relative;
|
||||
}
|
||||
.j13-compose-studio-canvas {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.2rem 1.15rem 0.7rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-compose-title-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-compose-title-count {
|
||||
font-size: 12px;
|
||||
color: var(--ink-3);
|
||||
padding-bottom: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-compose-stage.is-studio .j13-compose-canvas,
|
||||
.j13-compose-stage.is-studio .j13-md-editor {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.j13-compose-stage.is-studio .j13-md-textarea,
|
||||
.j13-compose-stage.is-studio .j13-md-preview {
|
||||
min-height: 0;
|
||||
}
|
||||
.j13-compose-rail-backdrop {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-studio-rail {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.15rem;
|
||||
padding: 1rem 1.05rem 1.35rem;
|
||||
overflow-y: auto;
|
||||
background: color-mix(in srgb, var(--bg) 62%, var(--panel));
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.j13-compose-rail-head {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin: -0.15rem 0 0.15rem;
|
||||
}
|
||||
.j13-compose-rail-head-title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-compose-rail-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.7rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-meta {
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-meta-board,
|
||||
.j13-compose-studio-rail .j13-compose-meta-tags {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
flex: none;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-typebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-section {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-drop {
|
||||
min-height: 5.5rem;
|
||||
padding: 0.8rem 0.7rem;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-drop-lead {
|
||||
font-size: 13px;
|
||||
}
|
||||
.j13-compose-studio-rail .j13-compose-typepanel {
|
||||
padding: 0.85rem 0.9rem;
|
||||
}
|
||||
.j13-compose-typemodal-body {
|
||||
max-height: min(78vh, 42rem);
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.j13-compose-typemodal-body .j13-compose-typepanel {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
.j13-compose-rail-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 69;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: color-mix(in srgb, var(--ink) 28%, transparent);
|
||||
}
|
||||
.j13-compose-studio-rail {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
width: min(100%, 24.5rem);
|
||||
z-index: 70;
|
||||
border-left: 1px solid var(--line);
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateX(100%);
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: transform 0.22s ease, visibility 0.22s ease;
|
||||
}
|
||||
.j13-compose-studio-rail.is-open {
|
||||
transform: translateX(0);
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.j13-compose-rail-head {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.j13-compose-studio {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(18.5rem, 21.5rem);
|
||||
}
|
||||
.j13-compose-studio-canvas {
|
||||
padding: 0.25rem 1.5rem 0.85rem 1.6rem;
|
||||
}
|
||||
.j13-compose-rail-toggle {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-rail-head {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-rail-backdrop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.j13-compose-toolbar-hint {
|
||||
display: none;
|
||||
}
|
||||
.j13-compose-studio-canvas {
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 聊天页：整页锁在视口内，避免「页面滚动 + 对话区滚动」双滚动条 */
|
||||
body:has([data-chat-viewport]) {
|
||||
height: 100dvh;
|
||||
@@ -2717,6 +3168,15 @@ h1, h2, h3, h4 {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* skip-link / 点击主栏空白会聚焦 #main（tabIndex=-1）。
|
||||
本文件 :focus-visible 未分层，会压过 Tailwind .outline-none，画出整栏主题色描边。 */
|
||||
#main:focus,
|
||||
#main:focus-visible,
|
||||
.admin-canvas:focus,
|
||||
.admin-canvas:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 消息侧栏搜索：单层描边，避免外框 + focus-visible 双线 */
|
||||
.j13-chat-search:focus-within {
|
||||
border-color: var(--accent) !important;
|
||||
@@ -3135,9 +3595,6 @@ a.j13-mention-token:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.ledger-feed {
|
||||
max-width: 1000px;
|
||||
}
|
||||
.ledger-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -3204,6 +3661,71 @@ a.j13-mention-token:hover {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 积分存量概览 */
|
||||
.stock-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 160px;
|
||||
padding: 20px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.stock-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.stock-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stock-badge.is-low {
|
||||
background: var(--stock-badge-low-bg);
|
||||
color: var(--stock-badge-low-fg);
|
||||
}
|
||||
.stock-badge.is-ok {
|
||||
background: var(--stock-badge-ok-bg);
|
||||
color: var(--stock-badge-ok-fg);
|
||||
}
|
||||
.stock-badge.is-hot {
|
||||
background: var(--stock-badge-hot-bg);
|
||||
color: var(--stock-badge-hot-fg);
|
||||
}
|
||||
.stock-bar {
|
||||
display: flex;
|
||||
height: 10px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--tint);
|
||||
}
|
||||
.stock-bar-seg {
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.stock-bar-seg.is-circ {
|
||||
background: var(--stock-circ);
|
||||
}
|
||||
.stock-bar-seg.is-spent {
|
||||
background: var(--stock-spent);
|
||||
}
|
||||
.stock-bar-seg.is-frozen {
|
||||
background-color: var(--stock-frozen);
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--stock-frozen-stripe) 0 3px,
|
||||
transparent 3px 7px
|
||||
);
|
||||
}
|
||||
|
||||
.admin-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -4303,9 +4825,9 @@ a.j13-mention-token:hover {
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-tab[aria-selected="true"] {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
||||
color: var(--accent);
|
||||
background: var(--nav-active-bg);
|
||||
border-color: var(--nav-active-line);
|
||||
color: var(--nav-active-ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
.j13-tab:active {
|
||||
@@ -4341,7 +4863,7 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-raillink:hover,
|
||||
.j13-raillink:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
background: var(--panel-2);
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-raillink[aria-current="page"],
|
||||
@@ -4367,7 +4889,7 @@ a.j13-mention-token:hover {
|
||||
transition: border-color 0.16s ease, background 0.16s ease;
|
||||
}
|
||||
.j13-bcard:hover {
|
||||
border-color: var(--nav-active-line);
|
||||
border-color: var(--line-2);
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-bcard:focus-visible {
|
||||
@@ -4450,8 +4972,8 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-about-item:hover,
|
||||
.j13-about-item:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--nav-active-line);
|
||||
background: var(--panel);
|
||||
border-color: var(--line-2);
|
||||
}
|
||||
.j13-about-ico {
|
||||
width: 30px;
|
||||
@@ -4741,9 +5263,9 @@ a.j13-mention-token:hover {
|
||||
}
|
||||
.j13-chip:hover,
|
||||
.j13-chip:focus-visible {
|
||||
background: var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
|
||||
color: var(--accent);
|
||||
background: var(--panel-2);
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink);
|
||||
}
|
||||
.j13-chip[aria-current="page"],
|
||||
.j13-chip[aria-current="page"]:hover,
|
||||
@@ -4791,7 +5313,7 @@ a.j13-mention-token:hover {
|
||||
.j13-toc-link:hover,
|
||||
.j13-toc-link:focus-visible {
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
background: var(--panel-2);
|
||||
}
|
||||
.j13-toc-link.is-active,
|
||||
.j13-toc-link.is-active:hover,
|
||||
@@ -4799,7 +5321,7 @@ a.j13-mention-token:hover {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
border-left-color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user