2142 lines
44 KiB
CSS
2142 lines
44 KiB
CSS
/* story-summary.css */
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--bg: #fafafa;
|
||
--bg2: #fff;
|
||
--bg3: #f5f5f5;
|
||
--txt: #1a1a1a;
|
||
--txt2: #444;
|
||
--txt3: #666;
|
||
--bdr: #dcdcdc;
|
||
--bdr2: #e8e8e8;
|
||
--acc: #1a1a1a;
|
||
--hl: #d87a7a;
|
||
--hl-soft: rgba(184, 90, 90, .1);
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--txt);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Layout
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
padding: 24px 40px;
|
||
max-width: 1800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid var(--bdr);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
main {
|
||
display: grid;
|
||
grid-template-columns: 1fr 480px;
|
||
gap: 24px;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
.left, .right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24px;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* 关键词卡片：固定高度 */
|
||
.left > .card:first-child {
|
||
flex: 0 0 auto; /* 关键词：不伸缩 */
|
||
}
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Typography
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
h1 {
|
||
font-size: 2rem;
|
||
font-weight: 300;
|
||
letter-spacing: -.02em;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
h1 span {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: .875rem;
|
||
color: var(--txt3);
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Stats
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.stats {
|
||
display: flex;
|
||
gap: 48px;
|
||
text-align: right;
|
||
}
|
||
|
||
.stat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.stat-val {
|
||
font-size: 2.5rem;
|
||
font-weight: 200;
|
||
line-height: 1;
|
||
letter-spacing: -.03em;
|
||
}
|
||
|
||
.stat-val .hl {
|
||
color: var(--hl);
|
||
}
|
||
|
||
.stat-lbl {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
text-transform: uppercase;
|
||
letter-spacing: .1em;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.stat-warning {
|
||
font-size: .625rem;
|
||
color: #ff9800;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Controls
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 0;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.spacer {
|
||
flex: 1;
|
||
}
|
||
|
||
.chk-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr);
|
||
font-size: .8125rem;
|
||
color: var(--txt2);
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.chk-label:hover {
|
||
border-color: var(--acc);
|
||
}
|
||
|
||
.chk-label input {
|
||
width: 16px;
|
||
height: 16px;
|
||
accent-color: var(--hl);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.chk-label strong {
|
||
color: var(--hl);
|
||
}
|
||
|
||
#keep-visible-count {
|
||
width: 32px;
|
||
padding: 2px 4px;
|
||
margin: 0 2px;
|
||
background: var(--bg2);
|
||
border: 1px solid var(--bdr);
|
||
font-size: inherit;
|
||
font-weight: bold;
|
||
color: var(--hl);
|
||
text-align: center;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
#keep-visible-count:focus {
|
||
border-color: var(--acc);
|
||
outline: none;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Buttons
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.btn {
|
||
padding: 12px 28px;
|
||
background: var(--bg2);
|
||
color: var(--txt);
|
||
border: 1px solid var(--bdr);
|
||
font-size: .875rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.btn:hover {
|
||
border-color: var(--acc);
|
||
background: var(--bg3);
|
||
}
|
||
|
||
.btn-p {
|
||
background: var(--acc);
|
||
color: #fff;
|
||
border-color: var(--acc);
|
||
}
|
||
|
||
.btn-p:hover {
|
||
background: #555;
|
||
}
|
||
|
||
.btn-p:disabled {
|
||
background: #999;
|
||
border-color: #999;
|
||
cursor: not-allowed;
|
||
opacity: .7;
|
||
}
|
||
|
||
.btn-icon {
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.btn-icon svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 8px 16px;
|
||
font-size: .8125rem;
|
||
}
|
||
|
||
.btn-del {
|
||
background: transparent;
|
||
color: var(--hl);
|
||
border-color: var(--hl);
|
||
}
|
||
|
||
.btn-del:hover {
|
||
background: var(--hl-soft);
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.btn-group .btn {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 10px 14px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.btn-group .btn-icon {
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.btn-recall {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
border-color: #667eea;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-recall:hover {
|
||
background: linear-gradient(135deg, #5a67d8 0%, #6b46a1 100%);
|
||
border-color: #5a67d8;
|
||
}
|
||
|
||
.btn-recall::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
|
||
animation: shimmer 3s infinite;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% { transform: translateX(-100%) rotate(45deg); }
|
||
100% { transform: translateX(100%) rotate(45deg); }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Cards & Sections
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.card {
|
||
background: var(--bg2);
|
||
border: 1px solid var(--bdr);
|
||
padding: 24px;
|
||
}
|
||
|
||
.sec-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.sec-title {
|
||
font-size: .75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .15em;
|
||
color: var(--txt2);
|
||
}
|
||
|
||
.sec-btn {
|
||
padding: 4px 12px;
|
||
background: transparent;
|
||
border: 1px solid var(--bdr);
|
||
font-size: .6875rem;
|
||
color: var(--txt3);
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
}
|
||
|
||
.sec-btn:hover {
|
||
border-color: var(--acc);
|
||
color: var(--txt);
|
||
background: var(--bg3);
|
||
}
|
||
|
||
.sec-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.sec-icon {
|
||
padding: 4px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Keywords
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.keywords {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.tag {
|
||
padding: 8px 20px;
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr2);
|
||
font-size: .875rem;
|
||
color: var(--txt2);
|
||
transition: all .2s;
|
||
cursor: default;
|
||
}
|
||
|
||
.tag.p {
|
||
background: var(--acc);
|
||
color: #fff;
|
||
border-color: var(--acc);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tag.s {
|
||
background: var(--hl-soft);
|
||
border-color: rgba(255, 68, 68, .2);
|
||
color: var(--hl);
|
||
}
|
||
|
||
.tag:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Timeline
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.timeline {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
max-height: 1140px;
|
||
}
|
||
|
||
.tl-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding-right: 8px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.tl-list::-webkit-scrollbar,
|
||
.scroll::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
.tl-list::-webkit-scrollbar-thumb,
|
||
.scroll::-webkit-scrollbar-thumb {
|
||
background: var(--bdr);
|
||
}
|
||
|
||
.tl-item {
|
||
position: relative;
|
||
padding-left: 32px;
|
||
padding-bottom: 32px;
|
||
border-left: 1px solid var(--bdr);
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.tl-item:last-child {
|
||
border-left-color: transparent;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.tl-dot {
|
||
position: absolute;
|
||
left: -5px;
|
||
top: 0;
|
||
width: 9px;
|
||
height: 9px;
|
||
background: var(--bg2);
|
||
border: 2px solid var(--txt3);
|
||
border-radius: 50%;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.tl-item:hover .tl-dot {
|
||
border-color: var(--hl);
|
||
background: var(--hl);
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
.tl-item.crit .tl-dot {
|
||
border-color: var(--hl);
|
||
background: var(--hl);
|
||
}
|
||
|
||
.tl-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tl-title {
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tl-time {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.tl-brief {
|
||
font-size: .875rem;
|
||
color: var(--txt2);
|
||
line-height: 1.7;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.tl-meta {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
}
|
||
|
||
.tl-meta .imp {
|
||
color: var(--hl);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Relations Chart
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.relations {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
max-height: 480px;
|
||
}
|
||
|
||
#relation-chart,
|
||
#relation-chart-fullscreen {
|
||
width: 100%;
|
||
flex: 1;
|
||
min-height: 0;
|
||
touch-action: none;
|
||
}
|
||
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Profile
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.profile {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
max-height: 480px;
|
||
}
|
||
|
||
.profile-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding-right: 8px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.prof-arc {
|
||
padding: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.prof-name {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.prof-traj {
|
||
font-size: .8125rem;
|
||
color: var(--txt3);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.prof-prog-wrap {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.prof-prog-lbl {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.prof-prog {
|
||
height: 4px;
|
||
background: var(--bdr);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.prof-prog-inner {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--hl), #d85858);
|
||
border-radius: 2px;
|
||
transition: width .6s;
|
||
}
|
||
|
||
.prof-moments {
|
||
background: var(--bg2);
|
||
border-left: 3px solid var(--hl);
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.prof-moments-title {
|
||
font-size: .6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .1em;
|
||
color: var(--txt3);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.prof-moment {
|
||
position: relative;
|
||
padding-left: 16px;
|
||
margin-bottom: 6px;
|
||
font-size: .8125rem;
|
||
color: var(--txt2);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.prof-moment::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 7px;
|
||
width: 6px;
|
||
height: 6px;
|
||
background: var(--hl);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.prof-moment:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.prof-rels {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.rels-group {
|
||
border-bottom: 1px solid var(--bdr2);
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.rels-group:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.rels-group:first-child {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.rels-group-title {
|
||
font-size: .75rem;
|
||
font-weight: 600;
|
||
color: var(--txt3);
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.rel-item {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.rel-item:hover {
|
||
background: var(--bg3);
|
||
}
|
||
|
||
.rel-target {
|
||
font-size: .9rem;
|
||
color: var(--txt2);
|
||
white-space: nowrap;
|
||
min-width: 60px;
|
||
}
|
||
|
||
.rel-label {
|
||
font-size: .7rem;
|
||
line-height: 1.5;
|
||
flex: 1;
|
||
}
|
||
|
||
.rel-trend {
|
||
font-size: .6875rem;
|
||
padding: 2px 8px;
|
||
border-radius: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.trend-broken { background: rgba(68, 68, 68, .15); color: #444; }
|
||
.trend-hate { background: rgba(139, 0, 0, .15); color: #8b0000; }
|
||
.trend-dislike { background: rgba(205, 92, 92, .15); color: #cd5c5c; }
|
||
.trend-stranger { background: rgba(136, 136, 136, .15); color: #888; }
|
||
.trend-click { background: rgba(102, 205, 170, .15); color: #4a9a7e; }
|
||
.trend-close { background: rgba(235, 106, 106, .15); color: var(--hl); }
|
||
.trend-merge { background: rgba(199, 21, 133, .2); color: #c71585; }
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Custom Select
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.custom-select {
|
||
position: relative;
|
||
min-width: 140px;
|
||
font-size: .8125rem;
|
||
}
|
||
|
||
.sel-trigger {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 6px 12px;
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
user-select: none;
|
||
}
|
||
|
||
.sel-trigger:hover {
|
||
border-color: var(--acc);
|
||
background: var(--bg2);
|
||
}
|
||
|
||
.sel-trigger::after {
|
||
content: '';
|
||
width: 16px;
|
||
height: 16px;
|
||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8d8d' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") center/16px no-repeat;
|
||
transition: transform .2s;
|
||
}
|
||
|
||
.custom-select.open .sel-trigger::after {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.sel-opts {
|
||
position: absolute;
|
||
top: calc(100% + 4px);
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg2);
|
||
border: 1px solid var(--bdr);
|
||
border-radius: 6px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
|
||
z-index: 100;
|
||
display: none;
|
||
max-height: 240px;
|
||
overflow-y: auto;
|
||
padding: 4px;
|
||
}
|
||
|
||
.custom-select.open .sel-opts {
|
||
display: block;
|
||
animation: fadeIn .2s;
|
||
}
|
||
|
||
.sel-opt {
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: background .1s;
|
||
}
|
||
|
||
.sel-opt:hover {
|
||
background: var(--bg3);
|
||
}
|
||
|
||
.sel-opt.sel {
|
||
background: var(--hl-soft);
|
||
color: var(--hl);
|
||
font-weight: 600;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(-4px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Modal
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.modal {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 10000;
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal.active {
|
||
display: flex;
|
||
}
|
||
|
||
.modal-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, .5);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.modal-box {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 720px;
|
||
max-height: 90vh;
|
||
background: var(--bg2);
|
||
border: 1px solid var(--bdr);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modal-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid var(--bdr);
|
||
}
|
||
|
||
.modal-head h2 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .1em;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
border: 1px solid var(--bdr);
|
||
cursor: pointer;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
background: var(--bg3);
|
||
border-color: var(--acc);
|
||
}
|
||
|
||
.modal-close svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.modal-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 24px;
|
||
}
|
||
|
||
.modal-foot {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
padding: 16px 24px;
|
||
border-top: 1px solid var(--bdr);
|
||
}
|
||
|
||
.fullscreen .modal-box {
|
||
width: calc(100vw - 48px);
|
||
max-width: none;
|
||
height: calc(100vh - 48px);
|
||
max-height: none;
|
||
}
|
||
|
||
.fullscreen .modal-body {
|
||
flex: 1;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Editor
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.editor-ta {
|
||
width: 100%;
|
||
min-height: 300px;
|
||
padding: 16px;
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr);
|
||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||
font-size: .8125rem;
|
||
line-height: 1.6;
|
||
color: var(--txt);
|
||
resize: vertical;
|
||
outline: none;
|
||
}
|
||
|
||
.editor-ta:focus {
|
||
border-color: var(--acc);
|
||
}
|
||
|
||
.editor-hint {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
margin-bottom: 12px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.editor-err {
|
||
padding: 12px;
|
||
background: var(--hl-soft);
|
||
border: 1px solid rgba(255, 68, 68, .3);
|
||
color: var(--hl);
|
||
font-size: .8125rem;
|
||
margin-top: 12px;
|
||
display: none;
|
||
}
|
||
|
||
.editor-err.visible {
|
||
display: block;
|
||
}
|
||
|
||
.struct-item {
|
||
border: 1px solid var(--bdr);
|
||
background: var(--bg3);
|
||
padding: 12px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.struct-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.struct-row input,
|
||
.struct-row select,
|
||
.struct-row textarea {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 8px 10px;
|
||
background: var(--bg2);
|
||
border: 1px solid var(--bdr);
|
||
font-size: .8125rem;
|
||
color: var(--txt);
|
||
outline: none;
|
||
transition: border-color .2s;
|
||
}
|
||
|
||
.struct-row input:focus,
|
||
.struct-row select:focus,
|
||
.struct-row textarea:focus {
|
||
border-color: var(--acc);
|
||
}
|
||
|
||
.struct-row textarea {
|
||
resize: vertical;
|
||
font-family: inherit;
|
||
min-height: 60px;
|
||
}
|
||
|
||
.struct-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.struct-actions span {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Settings
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.settings-section {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.settings-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.settings-section-title {
|
||
font-size: .6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: .15em;
|
||
color: var(--txt3);
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--bdr2);
|
||
}
|
||
|
||
.settings-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.settings-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.settings-field {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
flex: 1;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.settings-field.full {
|
||
flex: 100%;
|
||
}
|
||
|
||
.settings-field label {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
text-transform: uppercase;
|
||
letter-spacing: .05em;
|
||
}
|
||
|
||
.settings-field input,
|
||
.settings-field select {
|
||
padding: 10px 14px;
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr);
|
||
font-size: .875rem;
|
||
color: var(--txt);
|
||
outline: none;
|
||
transition: border-color .2s;
|
||
}
|
||
|
||
.settings-field input:focus,
|
||
.settings-field select:focus {
|
||
border-color: var(--acc);
|
||
}
|
||
|
||
.settings-field input[type="password"] {
|
||
letter-spacing: .15em;
|
||
}
|
||
|
||
.settings-field-inline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.settings-field-inline input[type="checkbox"] {
|
||
width: 18px;
|
||
height: 18px;
|
||
accent-color: var(--acc);
|
||
}
|
||
|
||
.settings-field-inline label {
|
||
font-size: .8125rem;
|
||
color: var(--txt2);
|
||
text-transform: none;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.settings-hint {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.settings-btn-row {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Vector Settings
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.engine-selector {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.engine-option {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
font-size: .875rem;
|
||
color: var(--txt2);
|
||
}
|
||
|
||
.engine-option input {
|
||
accent-color: var(--hl);
|
||
}
|
||
|
||
.engine-area {
|
||
margin-top: 12px;
|
||
padding: 16px;
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr);
|
||
}
|
||
|
||
.engine-card {
|
||
text-align: center;
|
||
}
|
||
|
||
.engine-card-title {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.engine-card-desc {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.engine-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
font-size: .8125rem;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--txt3);
|
||
}
|
||
|
||
.status-dot.ready { background: #22c55e; }
|
||
.status-dot.cached { background: #3b82f6; }
|
||
.status-dot.downloading { background: #f59e0b; animation: pulse 1s infinite; }
|
||
.status-dot.error { background: #ef4444; }
|
||
.status-dot.success { background: #22c55e; }
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: .5; }
|
||
}
|
||
|
||
.engine-progress {
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 6px;
|
||
background: var(--bdr);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-inner {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--hl), #d85858);
|
||
border-radius: 3px;
|
||
width: 0%;
|
||
transition: width .3s;
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
display: block;
|
||
text-align: center;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.engine-actions {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.model-select-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.model-select-row select {
|
||
flex: 1;
|
||
padding: 8px 12px;
|
||
background: var(--bg2);
|
||
border: 1px solid var(--bdr);
|
||
font-size: .875rem;
|
||
color: var(--txt);
|
||
}
|
||
|
||
.model-desc {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
text-align: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.vector-stats {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: .875rem;
|
||
color: var(--txt2);
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.vector-stats strong {
|
||
color: var(--hl);
|
||
}
|
||
|
||
.vector-mismatch-warning {
|
||
font-size: .75rem;
|
||
color: #f59e0b;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.vector-chat-section {
|
||
border-top: 1px solid var(--bdr);
|
||
padding-top: 16px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
#vector-action-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
#vector-action-row .btn {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.provider-hint {
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.provider-hint a {
|
||
color: var(--hl);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Recall Log
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
#recall-log-modal .modal-box {
|
||
max-width: 900px;
|
||
}
|
||
|
||
#recall-log-content {
|
||
white-space: pre-wrap;
|
||
font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
|
||
font-size: 12px;
|
||
line-height: 1.6;
|
||
background: var(--bg3);
|
||
padding: 16px;
|
||
border-radius: 4px;
|
||
min-height: 200px;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.recall-empty {
|
||
color: var(--txt3);
|
||
text-align: center;
|
||
padding: 40px;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
HF Guide
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.hf-guide {
|
||
font-size: .875rem;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hf-section {
|
||
margin-bottom: 28px;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid var(--bdr2);
|
||
}
|
||
|
||
.hf-section:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.hf-intro {
|
||
background: linear-gradient(135deg, rgba(102,126,234,.08), rgba(118,75,162,.08));
|
||
border: 1px solid rgba(102,126,234,.2);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.hf-intro-text {
|
||
font-size: 1.1rem;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.hf-intro-badges {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.hf-badge {
|
||
padding: 4px 12px;
|
||
background: var(--bg2);
|
||
border: 1px solid var(--bdr);
|
||
border-radius: 20px;
|
||
font-size: .75rem;
|
||
color: var(--txt2);
|
||
}
|
||
|
||
.hf-step-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.hf-step-num {
|
||
width: 28px;
|
||
height: 28px;
|
||
background: var(--acc);
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
font-size: .875rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.hf-step-title {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--txt);
|
||
}
|
||
|
||
.hf-step-content {
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.hf-step-content p {
|
||
margin: 0 0 12px;
|
||
}
|
||
|
||
.hf-step-content a {
|
||
color: var(--hl);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.hf-step-content a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.hf-checklist {
|
||
margin: 12px 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.hf-checklist li {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.hf-checklist li::marker {
|
||
color: var(--hl);
|
||
}
|
||
|
||
.hf-checklist code,
|
||
.hf-faq code {
|
||
background: var(--bg3);
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-size: .8125rem;
|
||
}
|
||
|
||
.hf-file {
|
||
margin-bottom: 16px;
|
||
border: 1px solid var(--bdr);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hf-file:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.hf-file-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
background: var(--bg3);
|
||
border-bottom: 1px solid var(--bdr);
|
||
font-size: .8125rem;
|
||
}
|
||
|
||
.hf-file-icon {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.hf-file-name {
|
||
font-weight: 600;
|
||
font-family: 'SF Mono', Monaco, Consolas, monospace;
|
||
}
|
||
|
||
.hf-file-note {
|
||
color: var(--txt3);
|
||
font-size: .75rem;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.hf-code {
|
||
margin: 0;
|
||
padding: 14px;
|
||
background: #1e1e1e;
|
||
overflow-x: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.hf-code code {
|
||
font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
|
||
font-size: .75rem;
|
||
line-height: 1.5;
|
||
color: #d4d4d4;
|
||
display: block;
|
||
white-space: pre;
|
||
}
|
||
|
||
.hf-code .copy-btn {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 8px;
|
||
padding: 4px 10px;
|
||
background: rgba(255,255,255,.1);
|
||
border: 1px solid rgba(255,255,255,.2);
|
||
color: #999;
|
||
font-size: .6875rem;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
transition: all .2s;
|
||
}
|
||
|
||
.hf-code .copy-btn:hover {
|
||
background: rgba(255,255,255,.2);
|
||
color: #fff;
|
||
}
|
||
|
||
.hf-status-badge {
|
||
display: inline-block;
|
||
padding: 2px 10px;
|
||
background: rgba(34,197,94,.15);
|
||
color: #22c55e;
|
||
border-radius: 10px;
|
||
font-size: .75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hf-config-table {
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hf-config-row {
|
||
display: flex;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--bdr);
|
||
}
|
||
|
||
.hf-config-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.hf-config-label {
|
||
width: 100px;
|
||
flex-shrink: 0;
|
||
font-weight: 500;
|
||
color: var(--txt2);
|
||
}
|
||
|
||
.hf-config-value {
|
||
flex: 1;
|
||
color: var(--txt);
|
||
}
|
||
|
||
.hf-config-value code {
|
||
background: var(--bg2);
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-size: .8125rem;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.hf-faq {
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr);
|
||
border-radius: 6px;
|
||
padding: 16px 20px;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.hf-faq-title {
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--txt);
|
||
}
|
||
|
||
.hf-faq ul {
|
||
margin: 0;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.hf-faq li {
|
||
margin-bottom: 8px;
|
||
color: var(--txt2);
|
||
}
|
||
|
||
.hf-faq li:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.hf-faq a {
|
||
color: var(--hl);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Utilities
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
padding: 40px;
|
||
color: var(--txt3);
|
||
font-size: .875rem;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Responsive - Tablet
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (max-width: 1200px) {
|
||
.container {
|
||
padding: 16px 24px;
|
||
}
|
||
|
||
main {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.right {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.relations,
|
||
.world-state,
|
||
.profile {
|
||
min-height: 280px;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Responsive - Mobile
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
height: auto;
|
||
min-height: 100vh;
|
||
padding: 16px;
|
||
}
|
||
|
||
header {
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
padding-bottom: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.stats {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-val {
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
.stat-lbl {
|
||
font-size: .625rem;
|
||
}
|
||
|
||
.controls {
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
padding: 10px 0;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.spacer {
|
||
display: none;
|
||
}
|
||
|
||
.chk-label {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-group {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 6px;
|
||
}
|
||
|
||
.btn-group .btn {
|
||
padding: 10px 8px;
|
||
font-size: .75rem;
|
||
}
|
||
|
||
.btn-group .btn-icon {
|
||
padding: 10px 8px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.btn-group .btn-icon svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
|
||
.btn-group .btn-icon span {
|
||
display: none;
|
||
}
|
||
|
||
main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.left, .right {
|
||
gap: 16px;
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.timeline {
|
||
max-height: 400px;
|
||
}
|
||
|
||
/* 关键：relations 和 profile 完全一致的高度 */
|
||
.relations,
|
||
.profile {
|
||
min-height: 350px;
|
||
max-height: 350px;
|
||
height: 350px;
|
||
}
|
||
|
||
#relation-chart {
|
||
height: 100%;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.world-state {
|
||
min-height: 180px;
|
||
max-height: 180px;
|
||
}
|
||
|
||
.card {
|
||
padding: 16px;
|
||
}
|
||
|
||
.keywords {
|
||
gap: 8px;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.tag {
|
||
padding: 6px 14px;
|
||
font-size: .8125rem;
|
||
}
|
||
|
||
.tl-item {
|
||
padding-left: 24px;
|
||
padding-bottom: 24px;
|
||
}
|
||
|
||
.tl-title {
|
||
font-size: .9375rem;
|
||
}
|
||
|
||
.tl-brief {
|
||
font-size: .8125rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.modal-box {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
|
||
.modal-head,
|
||
.modal-body,
|
||
.modal-foot {
|
||
padding: 16px;
|
||
}
|
||
|
||
.settings-row {
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.settings-field {
|
||
min-width: 100%;
|
||
}
|
||
|
||
.settings-field input,
|
||
.settings-field select {
|
||
padding: 12px 14px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.fullscreen .modal-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.hf-step-content {
|
||
padding-left: 0;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.hf-config-row {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.hf-config-label {
|
||
width: auto;
|
||
font-size: .75rem;
|
||
color: var(--txt3);
|
||
}
|
||
|
||
.hf-intro-badges {
|
||
gap: 8px;
|
||
}
|
||
|
||
.hf-badge {
|
||
font-size: .6875rem;
|
||
padding: 3px 10px;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Responsive - Small Mobile
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (max-width: 480px) {
|
||
.container {
|
||
padding: 12px;
|
||
}
|
||
|
||
header {
|
||
padding-bottom: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
.stats {
|
||
gap: 8px;
|
||
}
|
||
|
||
.stat {
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-val {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.controls {
|
||
gap: 6px;
|
||
padding: 8px 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.btn-group {
|
||
gap: 4px;
|
||
}
|
||
|
||
.btn-group .btn {
|
||
padding: 10px 6px;
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
main, .left, .right {
|
||
gap: 12px;
|
||
}
|
||
|
||
.card {
|
||
padding: 12px;
|
||
}
|
||
|
||
.sec-title {
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
.sec-btn {
|
||
font-size: .625rem;
|
||
padding: 3px 8px;
|
||
}
|
||
|
||
/* 小屏也保持一致 */
|
||
.relations,
|
||
.profile {
|
||
min-height: 300px;
|
||
max-height: 300px;
|
||
height: 300px;
|
||
}
|
||
|
||
#relation-chart {
|
||
height: 100%;
|
||
min-height: 250px;
|
||
}
|
||
|
||
.world-state {
|
||
min-height: 150px;
|
||
max-height: 150px;
|
||
}
|
||
|
||
.keywords {
|
||
gap: 6px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.tag {
|
||
padding: 5px 10px;
|
||
font-size: .75rem;
|
||
}
|
||
|
||
.tl-item {
|
||
padding-left: 20px;
|
||
padding-bottom: 20px;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
.tl-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
left: -4px;
|
||
}
|
||
|
||
.tl-head {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 2px;
|
||
}
|
||
|
||
.tl-title {
|
||
font-size: .875rem;
|
||
}
|
||
|
||
.tl-time {
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
.tl-brief {
|
||
font-size: .8rem;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tl-meta {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
.modal-head h2 {
|
||
font-size: .875rem;
|
||
}
|
||
|
||
.settings-section-title {
|
||
font-size: .625rem;
|
||
}
|
||
|
||
.settings-field label {
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
.settings-field-inline label {
|
||
font-size: .75rem;
|
||
}
|
||
|
||
.settings-hint {
|
||
font-size: .6875rem;
|
||
}
|
||
|
||
.btn-sm {
|
||
padding: 10px 14px;
|
||
font-size: .75rem;
|
||
width: 100%;
|
||
}
|
||
|
||
.editor-ta {
|
||
min-height: 200px;
|
||
font-size: .75rem;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
Touch Devices
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (hover: none) and (pointer: coarse) {
|
||
.btn {
|
||
min-height: 44px;
|
||
}
|
||
|
||
.tag {
|
||
min-height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tag:hover {
|
||
transform: none;
|
||
}
|
||
|
||
.tl-item:hover .tl-dot {
|
||
transform: none;
|
||
}
|
||
|
||
.modal-close {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
|
||
.settings-field input,
|
||
.settings-field select {
|
||
min-height: 44px;
|
||
}
|
||
|
||
.settings-field-inline input[type="checkbox"] {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.sec-btn {
|
||
min-height: 32px;
|
||
padding: 6px 12px;
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════════
|
||
World State (L3)
|
||
═══════════════════════════════════════════════════════════════════════════ */
|
||
|
||
.world-state {
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.world-state-list {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.world-group {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.world-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.world-group-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 0.6875rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--txt3);
|
||
margin-bottom: 8px;
|
||
padding-bottom: 6px;
|
||
border-bottom: 1px solid var(--bdr2);
|
||
}
|
||
|
||
.world-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding: 8px 10px;
|
||
margin-bottom: 6px;
|
||
background: var(--bg3);
|
||
border: 1px solid var(--bdr2);
|
||
border-radius: 6px;
|
||
font-size: 0.8125rem;
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
.world-item:hover {
|
||
border-color: var(--bdr);
|
||
background: var(--bg2);
|
||
}
|
||
|
||
.world-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.world-topic {
|
||
font-weight: 600;
|
||
color: var(--txt);
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.world-topic::after {
|
||
content: '';
|
||
}
|
||
|
||
.world-content {
|
||
color: var(--txt2);
|
||
flex: 1;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 分类图标颜色 */
|
||
.world-group[data-category="status"] .world-group-title {
|
||
color: #e57373;
|
||
}
|
||
|
||
.world-group[data-category="inventory"] .world-group-title {
|
||
color: #64b5f6;
|
||
}
|
||
|
||
.world-group[data-category="relation"] .world-group-title {
|
||
color: #ba68c8;
|
||
}
|
||
|
||
.world-group[data-category="knowledge"] .world-group-title {
|
||
color: #4db6ac;
|
||
}
|
||
|
||
.world-group[data-category="rule"] .world-group-title {
|
||
color: #ffd54f;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.world-state-list .empty {
|
||
padding: 24px;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 768px) {
|
||
.world-state {
|
||
max-height: none;
|
||
}
|
||
|
||
.world-state-list {
|
||
max-height: 180px;
|
||
}
|
||
|
||
.world-item {
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.world-topic::after {
|
||
content: '';
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.world-state-list {
|
||
max-height: 150px;
|
||
}
|
||
|
||
.world-group-title {
|
||
font-size: 0.625rem;
|
||
}
|
||
|
||
.world-item {
|
||
font-size: 0.75rem;
|
||
padding: 6px 8px;
|
||
}
|
||
}
|