From 8d8dc6182299521563ab3a7e33fb54be9a7cfea8 Mon Sep 17 00:00:00 2001 From: RT15548 Date: Wed, 4 Feb 2026 15:33:43 +0800 Subject: [PATCH] Add files via upload --- modules/story-outline/story-outline.html | 4899 +++++++++++++--------- 1 file changed, 2824 insertions(+), 2075 deletions(-) diff --git a/modules/story-outline/story-outline.html b/modules/story-outline/story-outline.html index 143ef40..675ada2 100644 --- a/modules/story-outline/story-outline.html +++ b/modules/story-outline/story-outline.html @@ -1,2136 +1,2885 @@ + - - - 小白板 - - + /* === 通用滚动条（亮/暗主题） === */ + html { + scrollbar-width: thin; + scrollbar-color: var(--sb-thumb) var(--sb-track) + } + + *::-webkit-scrollbar { + width: var(--sb-size); + height: var(--sb-size) + } + + *::-webkit-scrollbar-track { + background: var(--sb-track) + } + + *::-webkit-scrollbar-thumb { + background-color: var(--sb-thumb); + border-radius: 999px; + border: 2px solid var(--sb-track) + } + + *::-webkit-scrollbar-thumb:hover { + background-color: var(--sb-thumb-hover) + } + + [data-theme="dark"] .side-glass { + background: rgba(24, 24, 27, 0.7); + backdrop-filter: blur(12px); + border-color: rgba(255, 255, 255, 0.08) + } + + [data-theme="dark"] .banner-ov { + background: linear-gradient(transparent 40%, #0f0f11) + } + + [data-theme="dark"] .loc-lk { + border-bottom-color: var(--c3) + } + + [data-theme="dark"] .data-item.sel { + background: rgba(255, 255, 255, 0.03); + border-color: var(--c3); + box-shadow: none; + } + + [data-theme="dark"] .data-item:hover { + border-color: var(--c3); + background: var(--bg3); + } + + html, + body { + width: 100%; + height: 100%; + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background: var(--bg); + color: var(--c); + transition: background .3s, color .3s + } + + .fc, + .fcc { + display: flex; + align-items: center + } + + .fcc { + justify-content: center + } + + .g4 { + gap: 4px + } + + .g6 { + gap: 6px + } + + .g10 { + gap: 10px + } + + .g20 { + gap: 20px + } + + .p12 { + padding: 12px + } + + .r6 { + border-radius: var(--r6) + } + + .bd { + border: 1px solid var(--bd) + } + + .bg3 { + background: var(--bg3) + } + + .fs12 { + font-size: 12px + } + + .fw6 { + font-weight: 600 + } + + .c2 { + color: var(--c2) + } + + .usn { + user-select: none + } + + .f1 { + flex: 1 + } + + .jsb { + justify-content: space-between + } + + .mt6 { + margin-top: 6px + } + + .mt8 { + margin-top: 8px + } + + .mt10 { + margin-top: 10px + } + + .mt12 { + margin-top: 12px + } + + .mt16 { + margin-top: 16px + } + + .mb4 { + margin-bottom: 4px + } + + .mb8 { + margin-bottom: 8px + } + + .mb10 { + margin-bottom: 10px + } + + .mb12 { + margin-bottom: 12px + } + + .lh15 { + line-height: 1.5 + } + + .lh165 { + line-height: 1.65 + } + + .w100 { + width: 100px + } + + .w140 { + width: 140px + } + + .btn { + padding: 8px 16px; + background: var(--bg2); + font-size: 13px; + font-weight: 500; + cursor: pointer; + border: 1px solid var(--bd); + border-radius: var(--r4); + color: var(--c); + transition: all .2s; + box-shadow: var(--shadow-sm); + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px + } + + .btn:hover { + background: var(--bg); + border-color: var(--c3); + box-shadow: var(--shadow); + transform: translateY(-1px) + } + + .btn:active { + transform: translateY(0) + } + + .btn:disabled { + opacity: .5; + cursor: not-allowed; + box-shadow: none; + transform: none + } + + .btn-p { + background: var(--c); + color: var(--bg2); + border-color: var(--c) + } + + .btn-p:hover { + background: var(--c2); + color: var(--bg2); + border-color: var(--c2) + } + + .btn-due { + background: var(--due-bg) !important; + border-color: var(--due-bd) !important; + color: var(--due-c) !important + } + + .btn-s { + padding: 6px 12px; + font-size: 12px + } + + .btn-c, + .btn-add { + padding: 0; + border-radius: 50%; + flex-shrink: 0 + } + + .btn-c { + width: 32px; + height: 32px; + background: var(--bg3); + border-color: var(--bd); + color: var(--c2) + } + + .btn-c:hover { + background: var(--bd); + color: var(--c) + } + + .btn-add { + width: 36px; + height: 36px; + background: var(--bg2); + color: var(--c); + box-shadow: var(--shadow-sm) + } + + .fold { + background: var(--bg2); + border: 1px solid var(--bd); + border-radius: var(--r6); + margin-bottom: 8px; + overflow: hidden; + box-shadow: var(--shadow-sm); + transition: box-shadow .2s + } + + .fold:hover { + box-shadow: var(--shadow) + } + + .fold-h { + padding: 12px 16px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center + } + + .fold-a { + color: var(--c3); + font-size: 10px; + transition: transform .15s + } + + .fold.exp .fold-a { + transform: rotate(180deg) + } + + .fold-b { + max-height: 0; + overflow: hidden; + transition: max-height .2s cubic-bezier(0, 1, 0, 1) + } + + .fold.exp .fold-b { + max-height: 500px; + transition: max-height .3s ease-in-out + } + + .side-nav-wrap { + position: fixed; + left: 12px; + top: 50%; + transform: translateY(-50%); + z-index: 500; + display: flex; + flex-direction: column; + gap: 8px + } + + .side-glass { + background: rgba(255, 255, 255, .8); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.5); + box-shadow: var(--shadow); + transition: background .3s, border-color .3s + } + + .side-nav, + .side-menu { + display: flex; + flex-direction: column; + border-radius: 24px + } + + .side-nav { + gap: 6px; + padding: 8px 6px + } + + .side-menu { + position: relative; + padding: 6px 6px; + align-items: center + } + + .side-menu-btn, + .nav-i { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--c3); + transition: all .2s + } + + .side-menu-btn { + width: 32px; + height: 32px; + font-size: 12px; + border-radius: 10px + } + + .nav-i { + width: 36px; + height: 36px; + border-radius: 50% + } + + .nav-i i { + font-size: 14px + } + + .side-menu-btn:hover, + .nav-i:hover { + background: var(--bg3); + color: var(--c) + } + + .side-menu-btn.act, + .nav-i.act { + background: var(--c); + color: var(--bg2); + box-shadow: var(--shadow-sm) + } + + .side-menu-panel { + position: absolute; + left: 100%; + top: 50%; + transform: translateY(-50%); + margin-left: 12px; + display: none; + flex-direction: column; + gap: 6px; + padding: 8px; + background: var(--bg2); + border-radius: var(--r6); + border: 1px solid var(--bd); + white-space: nowrap; + z-index: 600; + box-shadow: var(--shadow) + } + + .side-menu-panel.show { + display: flex + } + + .side-menu-panel .btn { + font-size: 11px; + padding: 6px 12px; + width: 100%; + justify-content: flex-start + } + + .toolbar { + height: 52px; + background: var(--bg2); + border-bottom: 1px solid var(--bd); + padding: 0 16px 0 64px; + position: relative; + z-index: 200; + box-shadow: var(--shadow-sm); + transition: background .3s, border-color .3s + } + + .toolbar-t { + font-size: 16px; + font-weight: 700; + margin-right: auto; + letter-spacing: -0.5px; + color: var(--c) + } + + .toolbar-t span { + font-weight: 400; + color: var(--c3); + margin-left: 8px; + font-size: 12px; + letter-spacing: 0 + } + + .main-wrap { + width: 100%; + height: calc(100% - 52px); + position: relative + } + + .page { + position: absolute; + inset: 0; + background: var(--bg); + display: none; + overflow: hidden; + transition: background .3s + } + + .page.act { + display: block + } + + .page-pad { + padding: 24px 24px 24px 72px; + overflow-y: auto; + height: 100% + } + + .banner { + width: 100%; + height: 180px; + border-radius: var(--r8); + overflow: hidden; + margin-bottom: 24px; + position: relative; + background: var(--bg3); + box-shadow: var(--shadow-sm) + } + + .banner img { + width: 100%; + height: 100%; + object-fit: cover + } + + .banner-ov { + position: absolute; + inset: 0; + background: linear-gradient(transparent 40%, rgba(0, 0, 0, .6)); + display: flex; + align-items: flex-end; + padding: 20px + } + + .banner-ov div { + color: var(--bg2); + font-size: 14px; + font-weight: 500; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) + } + + .sec-t { + font-size: 13px; + color: var(--c3); + margin-bottom: 12px; + font-weight: 600; + letter-spacing: 0.5px; + text-transform: uppercase + } + + .sec-hd { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px + } + + .sec-hd .sec-t { + margin-bottom: 0 + } + + .news-sec { + margin-bottom: 32px + } + + .news-t { + font-size: 14px; + font-weight: 600; + color: var(--c) + } + + .news-time { + font-size: 11px; + color: var(--c3) + } + + .fold.exp .news-b { + padding: 0 16px 16px + } + + .news-b p { + font-size: 13px; + color: var(--c2); + line-height: 1.7 + } + + .user-guide { + padding: 20px; + background: var(--bg2); + border-radius: var(--r6); + border: 1px solid var(--bd); + margin-bottom: 24px; + box-shadow: var(--shadow-sm) + } + + .user-guide-state { + font-size: 14px; + font-weight: 500; + margin-bottom: 12px; + color: var(--c) + } + + .user-guide-actions { + display: flex; + flex-direction: column; + gap: 8px + } + + .user-guide-action { + padding: 10px 14px; + background: var(--bg); + border: 1px solid var(--bd); + border-radius: var(--r4); + font-size: 13px; + color: var(--c2); + cursor: pointer; + transition: all .2s + } + + .user-guide-action:hover { + background: var(--bg2); + border-color: var(--c3) + } + + #mapWrap { + width: 100%; + height: 100%; + background: var(--bg); + cursor: grab; + overflow: hidden; + position: relative; + touch-action: none + } + + #inner, + #lines { + position: absolute; + width: 4000px; + height: 4000px; + transform-origin: 0 0 + } + + #lines { + pointer-events: none + } + + .item { + position: absolute; + padding: 8px 16px; + background: var(--bg2); + border: 1px solid var(--bd); + border-radius: 20px; + font-size: 12px; + font-weight: 600; + white-space: nowrap; + cursor: pointer; + user-select: none; + box-shadow: var(--shadow-sm); + color: var(--c); + transition: transform .1s, border-color .1s, background .3s + } + + .item.node-main { + background: var(--c); + color: var(--bg2); + border-color: var(--c); + z-index: 10 + } + + .item.node-home { + background: var(--bg2); + color: var(--c); + border: 2px solid var(--c); + z-index: 11 + } + + .item.node-sub { + background: var(--bg2) + } + + .item:hover { + transform: scale(1.05); + z-index: 20 + } + + .item.hl { + border-color: var(--c); + box-shadow: 0 0 0 3px rgba(68, 64, 60, 0.2); + z-index: 20 + } + + .map-act { + position: absolute; + top: 16px; + right: 16px; + z-index: 100 + } + + #btn-goto { + display: none; + background: var(--c); + color: var(--bg2); + border: none; + box-shadow: var(--shadow) + } + + #btn-goto.show { + display: flex + } + + .map-lbl { + position: absolute; + top: 16px; + left: 72px; + z-index: 100; + background: var(--bg2); + border: 1px solid var(--bd); + border-radius: 20px; + padding: 8px 16px; + font-size: 12px; + color: var(--c); + cursor: pointer; + display: flex; + align-items: center; + box-shadow: var(--shadow-sm) + } + + .map-lbl i:first-child { + margin-right: 8px; + color: var(--c3) + } + + .map-lbl .fa-chevron-down { + margin-left: 8px; + font-size: 9px; + color: var(--c3) + } + + .map-lbl-sel { + position: absolute; + opacity: 0; + cursor: pointer; + inset: 0; + border: none; + background: transparent; + -webkit-appearance: none; + appearance: none + } + + .panel { + position: fixed; + background: var(--bg2); + padding: 12px 16px; + border-radius: var(--r6); + font-size: 12px; + color: var(--c2); + border: 1px solid var(--bd); + box-shadow: var(--shadow); + transition: background .3s, border-color .3s + } + + #zoom-ind { + bottom: 20px; + right: 20px; + font-family: monospace + } + + #tip { + bottom: 20px; + left: 72px; + max-width: 280px; + line-height: 1.6; + max-height: 220px; + overflow-y: auto; + display: none + } + + #tip .desc { + display: none + } + + #tip .info-w { + display: block + } + + #tip.show { + display: block + } + + .loc-lk { + color: var(--c); + font-weight: 600; + cursor: pointer; + border-bottom: 1px dashed var(--c3); + transition: color .2s + } + + .loc-lk:hover { + color: var(--c2); + border-bottom-style: solid + } + + .local-map-title { + font-size: 15px; + font-weight: 700; + color: var(--c); + margin-bottom: 12px; + padding-bottom: 10px; + border-bottom: 1px solid var(--bd) + } + + .info-h { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px + } + + .info-t { + font-weight: 700; + color: var(--c); + font-size: 14px + } + + .info-bk { + font-size: 11px; + color: var(--c3); + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + background: var(--bg3) + } + + .info-c { + color: var(--c2); + font-size: 13px; + line-height: 1.6 + } + + .comm-hd { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 20px + } + + .comm-tabs { + display: flex; + gap: 4px; + background: var(--bg3); + padding: 4px; + border-radius: var(--r6) + } + + .comm-tab { + padding: 8px 20px; + text-align: center; + border-radius: var(--r4); + cursor: pointer; + font-size: 12px; + font-weight: 600; + color: var(--c3); + transition: all .2s; + border: none + } + + .comm-tab:first-child { + border-radius: var(--r4) + } + + .comm-tab:last-child { + border-radius: var(--r4); + border-left: none + } + + .comm-tab.act { + background: var(--bg2); + color: var(--c); + box-shadow: var(--shadow-sm) + } + + .comm-sec { + display: none + } + + .comm-sec.act { + display: block + } + + .ct-hd { + gap: 12px + } + + .ct-av, + .chat-av { + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--bg2); + font-weight: 600; + font-size: 14px; + flex-shrink: 0; + box-shadow: var(--shadow-sm) + } + + .ct-info { + flex: 1; + min-width: 0 + } + + .ct-name { + font-size: 14px; + font-weight: 600; + color: var(--c) + } + + .ct-st { + font-size: 12px; + color: var(--c3); + margin-top: 2px + } + + .ct-det { + padding: 0 16px 16px + } + + .ct-info-text { + font-size: 13px; + color: var(--c2); + line-height: 1.7; + margin: 0 0 16px; + background: var(--bg); + padding: 10px; + border-radius: var(--r4) + } + + .ct-acts { + display: flex; + gap: 10px + } + + .ct-acts .btn { + flex: 1; + justify-content: center; + font-size: 12px; + height: 32px + } + + .empty { + text-align: center; + padding: 60px 20px; + color: var(--c3); + font-size: 13px; + background: var(--bg3); + border-radius: var(--r6); + border: 1px dashed var(--bd) + } + + .modal { + position: fixed; + inset: 0; + z-index: 10000; + display: none; + justify-content: center; + align-items: center; + backdrop-filter: blur(2px); + transition: all .3s + } + + .modal.act { + display: flex + } + + .modal-bd { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, .15) + } + + .modal-p { + position: relative; + width: 90%; + max-width: 700px; + max-height: 85vh; + background: var(--bg2); + border: 1px solid var(--bd); + border-radius: var(--r8); + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: var(--shadow-lg); + transition: background .3s, border-color .3s + } + + .modal-p.sm { + max-width: 400px + } + + .modal-p.lg { + max-width: 800px + } + + .modal-hd, + .modal-ft { + padding: 16px 20px; + background: var(--bg2); + transition: background .3s + } + + .modal-hd { + justify-content: space-between; + border-bottom: 1px solid var(--bd); + display: flex; + align-items: center + } + + .modal-hd h2 { + font-size: 16px; + font-weight: 700; + color: var(--c) + } + + .modal-ft { + justify-content: flex-end; + gap: 12px; + border-top: 1px solid var(--bd); + background: var(--bg) + } + + .modal-x { + width: 32px; + height: 32px; + background: transparent; + cursor: pointer; + border: none; + border-radius: 50%; + color: var(--c3); + font-size: 16px + } + + .modal-x:hover { + background: var(--bg3); + color: var(--c) + } + + .modal-by { + flex: 1; + overflow-y: auto; + padding: 24px + } + + .form-g { + margin-bottom: 20px + } + + .form-l { + display: block; + font-size: 12px; + font-weight: 600; + margin-bottom: 8px; + color: var(--c2); + text-transform: uppercase; + letter-spacing: 0.5px + } + + .form-in { + width: 100%; + padding: 10px 14px; + border: 1px solid var(--bd); + border-radius: var(--r4); + font-size: 14px; + outline: none; + background: var(--bg); + color: var(--c); + transition: all .2s; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) + } + + .form-in:focus { + background: var(--bg2); + border-color: var(--c3); + box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) + } + + .form-ta { + min-height: 100px; + resize: vertical; + font-family: inherit; + line-height: 1.6 + } + + .goto-d { + font-size: 14px; + color: var(--c); + font-weight: 500; + padding: 12px 16px; + background: var(--bg3); + border-radius: var(--r4); + margin-bottom: 16px; + border: 1px solid var(--bd) + } + + .ed-ta { + width: 100%; + min-height: 120px; + padding: 16px; + background: var(--bg); + border: 1px solid var(--bd); + border-radius: var(--r4); + font-family: "SF Mono", Monaco, Consolas, monospace; + font-size: 12px; + line-height: 1.6; + color: var(--c); + resize: vertical; + outline: 0; + overflow: auto + } + + .ed-ta:focus { + background: var(--bg2); + border-color: var(--c3) + } + + .ed-preview { + margin-top: 12px; + padding: 16px; + background: var(--bg3); + border: 1px solid var(--bd); + border-radius: var(--r4); + font-size: 11px; + font-family: "SF Mono", Monaco, Consolas, monospace; + white-space: pre-wrap; + display: none; + color: var(--c2) + } + + .ed-err { + padding: 12px; + background: var(--err-bg); + border: 1px solid var(--err-bd); + border-radius: var(--r4); + color: var(--err); + font-size: 13px; + margin-top: 12px; + display: none + } + + .ed-err.vis { + display: block + } + + .chat { + position: fixed; + top: 0; + right: -420px; + width: 380px; + height: 100%; + background: var(--bg2); + border-left: 1px solid var(--bd); + z-index: 600; + display: flex; + flex-direction: column; + box-shadow: var(--shadow-lg); + transition: right .3s cubic-bezier(0.16, 1, 0.3, 1), background .3s, border-color .3s + } + + .chat.act { + right: 0 + } + + .chat-hd { + padding: 16px 20px; + border-bottom: 1px solid var(--bd); + display: flex; + align-items: center; + gap: 14px; + flex-shrink: 0 + } + + .chat-t { + flex: 1; + min-width: 0 + } + + .chat-nm { + font-size: 15px; + font-weight: 700; + color: var(--c) + } + + .chat-st { + font-size: 12px; + color: var(--c3); + margin-top: 2px + } + + .chat-hd-acts { + display: flex; + align-items: center; + gap: 6px + } + + .chat-compress, + .chat-clr, + .chat-x { + width: 36px; + height: 36px; + border: none; + background: transparent; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--c3); + transition: background .2s + } + + .chat-compress:hover, + .chat-clr:hover, + .chat-x:hover { + background: var(--bg3); + color: var(--c) + } + + .chat-compress:disabled { + opacity: .4; + cursor: not-allowed + } + + .chat-divider { + width: 100%; + text-align: center; + padding: 12px 0; + color: var(--c3); + font-size: 11px; + position: relative + } + + .chat-divider:before, + .chat-divider:after { + content: ""; + position: absolute; + top: 50%; + width: 30%; + height: 1px; + background: var(--bd) + } + + .chat-divider:before { + left: 0 + } + + .chat-divider:after { + right: 0 + } + + .chat-msgs { + flex: 1; + overflow-y: auto; + padding: 20px; + display: flex; + flex-direction: column; + gap: 16px; + background: var(--bg) + } + + .chat-msg { + max-width: 85%; + padding: 12px 16px; + border-radius: 18px; + font-size: 14px; + line-height: 1.6; + white-space: pre-wrap; + box-shadow: var(--shadow-sm) + } + + .chat-msg.sent { + align-self: flex-end; + background: var(--c); + color: var(--bg2); + border-bottom-right-radius: 4px + } + + .chat-msg.recv { + align-self: flex-start; + background: var(--bg2); + border-bottom-left-radius: 4px; + border: 1px solid var(--bd); + color: var(--c) + } + + .chat-msg.typing { + font-style: italic; + opacity: .7; + background: transparent; + box-shadow: none; + border: none; + padding: 0 + } + + .chat-in-w { + padding: 16px; + border-top: 1px solid var(--bd); + display: flex; + gap: 12px; + flex-shrink: 0; + background: var(--bg2) + } + + .chat-in { + flex: 1; + padding: 12px 16px; + border: 1px solid var(--bd); + border-radius: 24px; + font-size: 14px; + outline: none; + background: var(--bg); + transition: all .2s + } + + .chat-in:focus { + border-color: var(--c); + background: var(--bg2); + box-shadow: var(--shadow-sm) + } + + .chat-in:disabled, + .chat-send:disabled { + opacity: .5; + cursor: not-allowed + } + + .chat-send { + width: 40px; + height: 40px; + border: none; + background: var(--c); + color: var(--bg2); + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: var(--shadow-sm); + transition: transform .2s + } + + .chat-send:hover { + transform: scale(1.05) + } + + .chat-emp { + text-align: center; + color: var(--c3); + font-size: 13px; + padding: 60px 20px + } + + .loc-list { + max-height: 300px; + overflow-y: auto + } + + .loc-i { + padding: 14px 16px; + border: 1px solid var(--bd); + border-radius: var(--r6); + margin-bottom: 10px; + cursor: pointer; + background: var(--bg2); + transition: all .2s + } + + .loc-i:hover { + border-color: var(--c3); + transform: translateY(-1px) + } + + .loc-i.sel { + border-color: var(--c); + background: var(--c); + color: var(--bg2); + box-shadow: var(--shadow) + } + + .loc-i.sel .loc-i-info { + color: rgba(255, 255, 255, 0.8) + } + + .loc-i-nm { + font-size: 14px; + font-weight: 600 + } + + .loc-i-info { + font-size: 12px; + opacity: .7; + margin-top: 4px + } + + .mob-pop { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: var(--bg2); + border-top: 1px solid var(--bd); + border-radius: 20px 20px 0 0; + z-index: 101; + display: none; + flex-direction: column; + box-shadow: var(--shadow-lg) + } + + .mob-pop.act { + display: flex + } + + .pop-hd { + padding: 12px; + cursor: grab; + touch-action: none; + flex-shrink: 0 + } + + .pop-handle { + width: 40px; + height: 5px; + background: var(--bd); + border-radius: 3px; + margin: 0 auto + } + + .pop-ct { + flex: 1; + overflow-y: auto; + padding: 0 24px 24px; + -webkit-overflow-scrolling: touch + } + + .pop-desc { + display: none + } + + .pop-info { + display: block + } + + .pop-info-h { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px + } + + .pop-info-t { + font-weight: 700; + font-size: 16px; + color: var(--c) + } + + .pop-info-bk { + font-size: 12px; + color: var(--c3); + cursor: pointer; + padding: 6px 12px; + border-radius: var(--r4); + background: var(--bg3) + } + + .pop-h-ind { + position: absolute; + top: 50%; + right: 8px; + transform: translateY(-50%); + display: flex; + flex-direction: column; + gap: 4px; + opacity: 0 + } + + .mob-pop.drag .pop-h-ind { + opacity: 1 + } + + .pop-h-ind span { + width: 4px; + height: 10px; + background: var(--bd); + border-radius: 2px + } + + .pop-h-ind span.act { + background: var(--c) + } + + .side-pop { + position: fixed; + top: 44px; + right: 0; + bottom: 0; + background: var(--bg2); + border-left: 1px solid var(--bd); + z-index: 90; + display: none; + width: 12px; + transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background .3s, border-color .3s; + overflow: hidden + } + + .side-pop.show { + display: flex + } + + .side-pop.act { + width: 332px; + box-shadow: var(--shadow-lg) + } + + .side-pop-handle { + width: 12px; + background: var(--bg3); + cursor: pointer; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + touch-action: none; + border-right: 1px solid var(--bd); + transition: background 0.2s + } + + .side-pop-handle:hover { + background: var(--bd) + } + + .side-pop-bar { + width: 3px; + height: 36px; + background: var(--bd); + border-radius: 2px + } + + .side-pop-ct { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + padding: 16px; + margin-bottom: 30vh; + min-width: 0 + } + + .side-pop-hd { + font-size: 11px; + color: var(--c3); + margin-bottom: 10px + } + + .side-pop-desc { + font-size: 13px; + color: var(--c2); + line-height: 1.7; + margin-top: 2em + } + + .set-row { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 10px + } + + .set-row .form-in { + flex: 1 + } + + .set-row .btn { + flex-shrink: 0 + } + + .set-hint { + font-size: 11px; + color: var(--c3); + margin-top: 4px + } + + .set-test { + display: flex; + align-items: center; + gap: 8px; + margin-top: 8px + } + + .set-test-res { + font-size: 12px; + padding: 6px 10px; + border-radius: var(--r4); + display: none + } + + .set-test-res.ok { + display: block; + background: var(--ok-bg); + color: var(--ok-c); + border: 1px solid var(--ok-bd) + } + + .set-test-res.err { + display: block; + background: var(--err-bg); + color: var(--err); + border: 1px solid var(--err-bd) + } + + .warn { + color: var(--warn) + } + + .settings-body { + height: 480px; + overflow-y: auto; + background: var(--bg2); + padding: 24px + } + + .settings-nav { + display: flex; + align-items: center; + gap: 4px; + background: var(--bg3); + padding: 4px; + border-radius: var(--r6); + height: 40px + } + + .set-nav-item { + padding: 0 16px; + height: 32px; + background: transparent; + border: none; + border-radius: var(--r4); + cursor: pointer; + font-size: 13px; + font-weight: 500; + color: var(--c3); + display: flex; + align-items: center; + gap: 8px; + transition: all .2s; + white-space: nowrap + } + + .set-nav-item:hover { + color: var(--c2) + } + + .set-nav-item.act { + background: var(--bg2); + color: var(--c); + box-shadow: var(--shadow-sm); + font-weight: 600 + } + + .set-tab-page { + display: none; + animation: fadeIn .3s + } + + .set-tab-page.act { + display: block + } + + .set-group { + background: var(--bg2); + border: 1px solid var(--bd); + border-radius: var(--r6); + padding: 20px; + margin-bottom: 20px; + box-shadow: var(--shadow-sm) + } + + .set-group-t { + font-size: 14px; + font-weight: 700; + color: var(--c); + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 8px; + padding-bottom: 10px; + border-bottom: 1px dashed var(--bd) + } + + .tips-box { + background: var(--bg3); + padding: 10px 12px; + border-radius: var(--r4); + font-size: 12px; + color: var(--c2); + line-height: 1.5; + margin-top: 8px + } + + .btn.w100 { + width: 100% + } + + #data-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 12px + } + + .data-item { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + background: var(--bg); + border: 1px solid var(--bd); + border-radius: var(--r6); + cursor: pointer; + transition: all .2s; + position: relative; + min-height: 60px + } + + .data-item:hover { + border-color: var(--c3); + transform: translateY(-1px); + box-shadow: var(--shadow-sm) + } + + .data-item.sel { + background: var(--bg2); + border-color: var(--c); + box-shadow: 0 0 0 1px var(--c) inset + } + + .data-ck { + width: 20px; + height: 20px; + border: 1px solid var(--bd); + background: var(--bg3); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + color: transparent; + font-size: 10px; + flex-shrink: 0 + } + + .data-item.sel .data-ck { + background: var(--c); + border-color: var(--c); + color: var(--bg2) + } + + .data-info { + flex: 1; + min-width: 0 + } + + .data-nm { + font-size: 13px; + font-weight: 600; + color: var(--c); + margin-bottom: 2px + } + + .data-desc { + font-size: 11px; + color: var(--c3); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis + } + + .data-edit { + width: 28px; + height: 28px; + border-radius: 4px; + border: 1px solid transparent; + background: transparent; + color: var(--c3); + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + transition: all .2s; + cursor: pointer + } + + .data-edit:hover { + background: var(--bg3); + color: var(--c); + border-color: var(--bd) + } + + @keyframes fadeIn { + from { + opacity: 0; + transform: translateY(4px) + } + + to { + opacity: 1; + transform: translateY(0) + } + } + + @media (max-width:600px) { + .modal-p.lg { + width: 100%; + height: 100%; + max-height: 100%; + border-radius: 0 + } + + .settings-body { + height: auto; + flex: 1; + padding: 16px + } + + .modal-hd { + padding: 10px 16px; + display: flex; + justify-content: flex-end + } + + .modal-hd h2 { + display: none + } + + .modal-hd .settings-nav { + flex: 0 0 auto; + margin-left: auto; + margin-right: 8px + } + + .set-nav-item { + padding: 0 10px; + font-size: 12px + } + + .set-nav-item i { + display: none + } + + #data-list { + grid-template-columns: 1fr + } + + .set-row { + flex-wrap: wrap + } + + .mt-mob-8 { + margin-top: 8px + } + } + + .data-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 12px; + background: var(--bg); + border: 1px solid var(--bd); + border-radius: var(--r6); + margin-bottom: 8px; + cursor: pointer + } + + .data-item.sel { + border-color: var(--c); + background: rgba(34, 34, 34, .05) + } + + .data-ck { + width: 18px; + height: 18px; + border: 2px solid var(--bd); + border-radius: var(--r4); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin-top: 2px + } + + .data-item.sel .data-ck { + background: var(--c); + border-color: var(--c); + color: var(--bg2) + } + + .data-ck i { + font-size: 10px; + opacity: 0 + } + + .data-item.sel .data-ck i { + opacity: 1 + } + + .data-info { + flex: 1; + min-width: 0 + } + + .data-nm { + font-size: 13px; + font-weight: 500; + margin-bottom: 4px + } + + .data-desc { + font-size: 11px; + color: var(--c3); + line-height: 1.4 + } + + .data-edit { + width: 28px; + height: 28px; + border: 1px solid var(--bd); + border-radius: var(--r4); + background: var(--bg2); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: var(--c3) + } + + #set-model-list { + display: none; + margin-top: 8px + } + + #world-gen-status, + #world-sim-status { + display: none; + color: var(--ok) + } + + #adv-u1, + #adv-a1, + #adv-u2, + #adv-a2 { + height: 85px + } + + #adv-json { + min-height: 140px + } + + #data-edit-ta { + min-height: 300px + } + + #res-msg { + margin-bottom: 10px; + line-height: 1.5 + } + + #res-record-box { + display: none + } + + #res-action { + display: none + } + + #res-record { + max-height: 200px; + overflow-y: auto; + background: var(--bg3); + padding: 8px; + border-radius: var(--r4); + font-size: 12px; + white-space: pre-wrap; + word-break: break-all + } + + .adv-layout { + display: flex; + flex: 1; + overflow: hidden; + height: 100% + } + + .adv-sidebar { + width: 260px; + background: var(--bg3); + border-right: 1px solid var(--bd); + padding: 20px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 24px; + flex-shrink: 0 + } + + .adv-sidebar .form-g { + margin-bottom: 0 + } + + .adv-sidebar .set-hint { + font-size: 12px; + color: var(--c3); + line-height: 1.6 + } + + .adv-main { + flex: 1; + padding: 24px 32px; + overflow-y: auto; + background: var(--bg2); + display: flex; + flex-direction: column; + gap: 32px; + min-width: 0 + } + + .adv-var-group-title { + font-size: 12px; + font-weight: 700; + color: var(--c2); + text-transform: uppercase; + letter-spacing: 0.5px; + margin: 16px 0 8px 0; + padding-bottom: 4px; + border-bottom: 1px solid var(--bd) + } + + .adv-var-item { + font-size: 12px; + color: var(--c2); + padding: 4px 0; + display: flex; + flex-direction: column; + gap: 2px + } + + .adv-var-item code { + font-family: "SF Mono", Monaco, Consolas, monospace; + background: rgba(0, 0, 0, 0.06); + padding: 2px 5px; + border-radius: 4px; + color: var(--c); + font-size: 11px; + align-self: flex-start; + border: 1px solid rgba(0, 0, 0, 0.05) + } + + .adv-var-desc { + color: var(--c3); + font-size: 11px; + line-height: 1.4; + padding-left: 2px + } + + .adv-section { + background: var(--bg); + border: 1px solid var(--bd); + border-radius: var(--r6); + padding: 20px; + box-shadow: var(--shadow-sm) + } + + .adv-h-title { + font-size: 14px; + font-weight: 700; + color: var(--c); + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 8px + } + + .adv-h-title::before { + content: ''; + width: 4px; + height: 16px; + background: var(--c); + border-radius: 2px; + display: block + } + + .uaua-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px + } + + .ed-ta-adv { + font-family: "SF Mono", Monaco, Consolas, monospace; + font-size: 12px; + line-height: 1.5; + padding: 12px; + border: 1px solid var(--bd); + border-radius: var(--r4); + background: var(--bg2); + width: 100%; + resize: vertical; + min-height: 120px; + transition: border-color 0.2s; + outline: none; + color: var(--c) + } + + .ed-ta-adv:focus { + border-color: var(--c); + box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) + } + + .adv-tag-list { + display: flex; + flex-wrap: wrap; + gap: 6px; + margin-bottom: 12px + } + + .adv-tag { + font-size: 10px; + padding: 4px 8px; + background: var(--bg2); + border: 1px solid var(--bd); + border-radius: 12px; + color: var(--c2); + cursor: pointer; + transition: all 0.2s; + user-select: none + } + + .adv-tag:hover { + border-color: var(--c3); + color: var(--c); + background: var(--bg2) + } + + /* === 主题切换按钮 === */ + .theme-toggle { + width: 36px; + height: 36px; + border-radius: 50%; + border: 1px solid var(--bd); + background: var(--bg2); + color: var(--c3); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all .2s; + font-size: 14px + } + + .theme-toggle:hover { + background: var(--bg3); + color: var(--c); + border-color: var(--c3) + } + + .theme-toggle i { + transition: transform .3s + } + + [data-theme="dark"] .theme-toggle i.fa-moon { + display: none + } + + [data-theme="dark"] .theme-toggle i.fa-sun { + display: inline + } + + :root .theme-toggle i.fa-sun { + display: none + } + + :root .theme-toggle i.fa-moon { + display: inline + } + + [data-theme="dark"] .adv-var-item code { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.1) + } + + [data-theme="dark"] .item.hl { + box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) + } + + [data-theme="dark"] .modal-bd { + background: rgba(0, 0, 0, .5) + } + + @media(max-width:768px) { + .adv-layout { + flex-direction: column; + overflow-y: auto + } + + .adv-sidebar { + width: 100%; + height: auto; + border-right: none; + border-bottom: 1px solid var(--bd); + padding: 16px + } + + .adv-main { + overflow: visible; + padding: 16px + } + + .uaua-grid { + grid-template-columns: 1fr + } + } + + @media(max-width:550px) { + .chat { + width: 100%; + right: -100% + } + + .side-pop { + bottom: 0 + } + + .side-nav-wrap { + left: 6px + } + + .side-nav { + padding: 6px 4px + } + + .side-menu { + padding: 5px 4px + } + + .nav-i { + width: 28px; + height: 28px + } + + .nav-i i { + font-size: 11px + } + + .toolbar { + padding: 0 12px 0 56px + } + + .toolbar-t span { + display: none + } + + .btn { + padding: 6px 10px; + font-size: 11px + } + + .modal-p { + width: 100%; + max-height: 100%; + border-radius: 0 + } + + #tip { + display: none !important + } + + .page-pad { + padding: 14px 14px 14px 48px + } + + .map-lbl { + left: 48px + } + } + + - -
-
-
-
- - - -
-
- -
- - -
-
小白板预测试
- - - -
- - -
- -
- - -
-

最新消息

-
-
- -
-

当前状态

-
尚未生成世界数据...
-

行动指南

-
等待世界生成...
-
-
- - -
-
-
- - 大地图 - - -
-
- -
-
-
- -
100%
-
-
-
-
-
-
← 返回
-
-
-
-
-
- - -
-
-
-
陌路人
-
联络人
-
- - -
-
-
-
-
- - -
-
-
-
-
-
-
-
- - - -
-
-
-
- - - -
-
- - -
-
-
-
- 场景描述 - -
-
-
-
- - -
-
-
-
-
-
-
-
-
← 返回
-
-
-
-
-
- - -