Update story-summary modules

This commit is contained in:
RT15548
2026-02-16 17:25:34 +08:00
parent 22d3002786
commit 3ea3a62cad
9 changed files with 1062 additions and 263 deletions

View File

@@ -21,6 +21,10 @@
padding-right: 4px;
}
.confirm-modal-box {
max-width: 440px;
}
.fact-group {
margin-bottom: 12px;
}
@@ -73,6 +77,7 @@
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Base ── */
--bg: #f0f0f0;
--bg2: #ffffff;
--bg3: #eeeeee;
@@ -80,36 +85,127 @@
--txt2: #333333;
--txt3: #555555;
/* Neo-Brutalism Core */
/* ── Neo-Brutalism Core ── */
--bdr: #000000;
--bdr2: #000000;
/* Secondary border is also black/high contrast */
--shadow: 4px 4px 0 var(--txt);
--shadow-hover: 2px 2px 0 var(--txt);
--acc: #000000;
--hl: #ff4444;
/* Harsh Red */
--hl2: #d85858;
--hl-soft: #ffeaea;
/* Light Red bg */
--inv: #fff;
/* ── Buttons ── */
--btn-p-hover: #333;
--btn-p-disabled: #999;
/* ── Status ── */
--warn: #ff9800;
--success: #22c55e;
--info: #3b82f6;
--downloading: #f59e0b;
--error: #ef4444;
/* ── Code blocks ── */
--code-bg: #1e1e1e;
--code-txt: #d4d4d4;
--muted: #999;
/* ── Overlay ── */
--overlay: rgba(0, 0, 0, .5);
/* ── Tag ── */
--tag-s-bdr: rgba(255, 68, 68, .2);
--tag-shadow: rgba(0, 0, 0, .12);
/* ── Category colors ── */
--cat-status: #e57373;
--cat-inventory: #64b5f6;
--cat-relation: #ba68c8;
--cat-knowledge: #4db6ac;
--cat-rule: #ffd54f;
/* ── Trend colors ── */
--trend-broken: #444;
--trend-broken-bg: rgba(68, 68, 68, .15);
--trend-hate: #8b0000;
--trend-hate-bg: rgba(139, 0, 0, .15);
--trend-dislike: #cd5c5c;
--trend-dislike-bg: rgba(205, 92, 92, .15);
--trend-stranger: #888;
--trend-stranger-bg: rgba(136, 136, 136, .15);
--trend-click: #4a9a7e;
--trend-click-bg: rgba(102, 205, 170, .15);
--trend-close-bg: rgba(235, 106, 106, .15);
--trend-merge: #c71585;
--trend-merge-bg: rgba(199, 21, 133, .2);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111111;
--bg2: #222222;
--bg3: #333333;
--txt: #ffffff;
--txt2: #eeeeee;
--txt3: #cccccc;
:root[data-theme="dark"] {
/* ── Base ── */
--bg: #111111;
--bg2: #222222;
--bg3: #333333;
--txt: #ffffff;
--txt2: #eeeeee;
--txt3: #cccccc;
--bdr: #ffffff;
--bdr2: #ffffff;
/* ── Neo-Brutalism Core ── */
--bdr: #ffffff;
--bdr2: #ffffff;
--shadow: 4px 4px 0 var(--txt);
--shadow-hover: 2px 2px 0 var(--txt);
--acc: #ffffff;
--hl: #ff6b6b;
--hl2: #e07070;
--hl-soft: #442222;
--inv: #222;
--acc: #ffffff;
--hl: #ff6b6b;
--hl-soft: #442222;
}
/* ── Buttons ── */
--btn-p-hover: #ddd;
--btn-p-disabled: #666;
/* ── Status ── */
--warn: #ffb74d;
--success: #4caf50;
--info: #64b5f6;
--downloading: #ffa726;
--error: #ef5350;
/* ── Code blocks ── */
--code-bg: #0d0d0d;
--code-txt: #d4d4d4;
--muted: #777;
/* ── Overlay ── */
--overlay: rgba(0, 0, 0, .7);
/* ── Tag ── */
--tag-s-bdr: rgba(255, 107, 107, .3);
--tag-shadow: rgba(0, 0, 0, .4);
/* ── Category colors ── */
--cat-status: #ef9a9a;
--cat-inventory: #90caf9;
--cat-relation: #ce93d8;
--cat-knowledge: #80cbc4;
--cat-rule: #ffe082;
/* ── Trend colors ── */
--trend-broken: #999;
--trend-broken-bg: rgba(153, 153, 153, .15);
--trend-hate: #ef5350;
--trend-hate-bg: rgba(239, 83, 80, .15);
--trend-dislike: #e57373;
--trend-dislike-bg: rgba(229, 115, 115, .15);
--trend-stranger: #aaa;
--trend-stranger-bg: rgba(170, 170, 170, .12);
--trend-click: #66bb6a;
--trend-click-bg: rgba(102, 187, 106, .15);
--trend-close-bg: rgba(255, 107, 107, .15);
--trend-merge: #f06292;
--trend-merge-bg: rgba(240, 98, 146, .15);
}
body {
@@ -218,7 +314,7 @@ h1 {
.stat-warning {
font-size: .625rem;
color: #ff9800;
color: var(--warn);
margin-top: 4px;
}
@@ -705,7 +801,7 @@ h1 {
.prof-prog-inner {
height: 100%;
background: linear-gradient(90deg, var(--hl), #d85858);
background: linear-gradient(90deg, var(--hl), var(--hl2));
border-radius: 2px;
transition: width .6s;
}
@@ -810,38 +906,38 @@ h1 {
}
.trend-broken {
background: rgba(68, 68, 68, .15);
color: #444;
background: var(--trend-broken-bg);
color: var(--trend-broken);
}
.trend-hate {
background: rgba(139, 0, 0, .15);
color: #8b0000;
background: var(--trend-hate-bg);
color: var(--trend-hate);
}
.trend-dislike {
background: rgba(205, 92, 92, .15);
color: #cd5c5c;
background: var(--trend-dislike-bg);
color: var(--trend-dislike);
}
.trend-stranger {
background: rgba(136, 136, 136, .15);
color: #888;
background: var(--trend-stranger-bg);
color: var(--trend-stranger);
}
.trend-click {
background: rgba(102, 205, 170, .15);
color: #4a9a7e;
background: var(--trend-click-bg);
color: var(--trend-click);
}
.trend-close {
background: rgba(235, 106, 106, .15);
background: var(--trend-close-bg);
color: var(--hl);
}
.trend-merge {
background: rgba(199, 21, 133, .2);
color: #c71585;
background: var(--trend-merge-bg);
color: var(--trend-merge);
}
/* ═══════════════════════════════════════════════════════════════════════════
@@ -1009,7 +1105,7 @@ h1 {
}
.modal-close:hover svg {
stroke: #fff;
stroke: var(--inv);
}
.modal-close svg {
@@ -1361,24 +1457,24 @@ h1 {
}
.status-dot.ready {
background: #22c55e;
background: var(--success);
}
.status-dot.cached {
background: #3b82f6;
background: var(--info);
}
.status-dot.downloading {
background: #f59e0b;
background: var(--downloading);
animation: pulse 1s infinite;
}
.status-dot.error {
background: #ef4444;
background: var(--error);
}
.status-dot.success {
background: #22c55e;
background: var(--success);
}
@keyframes pulse {
@@ -1406,7 +1502,7 @@ h1 {
.progress-inner {
height: 100%;
background: linear-gradient(90deg, var(--hl), #d85858);
background: linear-gradient(90deg, var(--hl), var(--hl2));
border-radius: 3px;
width: 0%;
transition: width .3s;
@@ -1445,7 +1541,7 @@ h1 {
.vector-mismatch-warning {
font-size: .75rem;
color: #f59e0b;
color: var(--downloading);
margin-top: 6px;
}
@@ -1499,7 +1595,7 @@ h1 {
font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
font-size: 12px;
line-height: 1.6;
color: #e8e8e8;
color: var(--code-txt);
white-space: pre-wrap !important;
overflow-x: hidden !important;
word-break: break-word;
@@ -1570,7 +1666,7 @@ h1 {
width: 28px;
height: 28px;
background: var(--acc);
color: #fff;
color: var(--inv);
border-radius: 50%;
display: flex;
align-items: center;
@@ -1660,7 +1756,7 @@ h1 {
.hf-code {
margin: 0;
padding: 14px;
background: #1e1e1e;
background: var(--code-bg);
overflow-x: auto;
position: relative;
}
@@ -1669,7 +1765,7 @@ h1 {
font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
font-size: .75rem;
line-height: 1.5;
color: #d4d4d4;
color: var(--code-txt);
display: block;
white-space: pre;
}
@@ -1681,7 +1777,7 @@ h1 {
padding: 4px 10px;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .2);
color: #999;
color: var(--muted);
font-size: .6875rem;
cursor: pointer;
border-radius: 4px;
@@ -1690,14 +1786,14 @@ h1 {
.hf-code .copy-btn:hover {
background: rgba(255, 255, 255, .2);
color: #fff;
color: var(--inv);
}
.hf-status-badge {
display: inline-block;
padding: 2px 10px;
background: rgba(34, 197, 94, .15);
color: #22c55e;
color: var(--success);
border-radius: 10px;
font-size: .75rem;
}
@@ -1856,23 +1952,23 @@ h1 {
/* Category Icon Colors */
.world-group[data-category="status"] .world-group-title {
color: #e57373;
color: var(--cat-status);
}
.world-group[data-category="inventory"] .world-group-title {
color: #64b5f6;
color: var(--cat-inventory);
}
.world-group[data-category="relation"] .world-group-title {
color: #ba68c8;
color: var(--cat-relation);
}
.world-group[data-category="knowledge"] .world-group-title {
color: #4db6ac;
color: var(--cat-knowledge);
}
.world-group[data-category="rule"] .world-group-title {
color: #ffd54f;
color: var(--cat-rule);
}
/* Empty State */
@@ -1971,7 +2067,7 @@ h1 {
top: 2px;
width: 5px;
height: 10px;
border: solid #fff;
border: solid var(--inv);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
@@ -2205,8 +2301,8 @@ h1 {
═══════════════════════════════════════════════════════════════════════════ */
.debug-log-viewer {
background: #1a1a1a;
color: #e0e0e0;
background: var(--code-bg);
color: var(--code-txt);
padding: 16px;
border-radius: 8px;
font-family: 'Consolas', 'Monaco', 'SF Mono', monospace;
@@ -2221,7 +2317,7 @@ h1 {
}
.recall-empty {
color: #999;
color: var(--muted);
text-align: center;
padding: 40px;
font-style: italic;
@@ -2234,15 +2330,15 @@ h1 {
═══════════════════════════════════════════════════════════════════════════ */
#recall-log-content .metric-warn {
color: #f59e0b;
color: var(--downloading);
}
#recall-log-content .metric-error {
color: #ef4444;
color: var(--error);
}
#recall-log-content .metric-good {
color: #22c55e;
color: var(--success);
}
/* ═══════════════════════════════════════════════════════════════════════════
@@ -2485,8 +2581,8 @@ h1 {
.neo-badge {
/* Explicitly requested Black Background & White Text */
background: #000;
color: #fff;
background: var(--acc);
color: var(--inv);
padding: 2px 8px;
border-radius: 4px;
font-size: 0.75rem;