diff --git a/modules/story-outline/story-outline.html b/modules/story-outline/story-outline.html index ae0f476..3658877 100644 --- a/modules/story-outline/story-outline.html +++ b/modules/story-outline/story-outline.html @@ -14,45 +14,111 @@ } :root { + /* === 背景色阶 (3级) === */ --bg: #FDFDF9; --bg2: #FFFFFF; --bg3: #F0F0EE; + + /* === 文字色阶 (4级) === */ --c: #1C1917; --c2: #57534E; --c3: #78716C; + --c4: #aaa; + + /* === 边框 === */ --bd: #E5E5E4; + + /* === 状态色 - 成功/绿 === */ + --ok: #4a9; + --ok-bg: #dcfce7; + --ok-c: #166534; + --ok-bd: #86efac; + + /* === 状态色 - 错误/红 === */ + --err: #b91c1c; + --err-bg: #fef2f2; + --err-bd: #fecaca; + + /* === 状态色 - 到期/红 === */ + --due-bg: #ffe1e1; + --due-bd: #ff9b9b; + --due-c: #7a1f1f; + + /* === 状态色 - 警告/橙 === */ + --warn: #f80; + + /* === 尺寸 === */ --r4: 8px; --r6: 12px; --r8: 16px; + + /* === 阴影 === */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - --accent: #6366f1; - --accent2: #8b5cf6; - --glass: rgba(255, 255, 255, 0.8); - --glass-border: rgba(255, 255, 255, 0.5) + --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) } - html.dark { - --bg: #0f0f12; + /* === 暗黑主题 (Refined) === */ + [data-theme="dark"] { + /* 背景:更深邃的层次,类似 Vercel/Modern Dark */ + --bg: #0f0f11; --bg2: #18181b; - --bg3: #27272a; - --c: #fafafa; + --bg3: #0f0f11; + + /* 文字:略微降低纯白刺眼感,提升阅读舒适度 */ + --c: #ededed; --c2: #a1a1aa; - --c3: #71717a; - --bd: #3f3f46; - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); - --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3); - --accent: #818cf8; - --accent2: #a78bfa; - --glass: rgba(24, 24, 27, 0.85); - --glass-border: rgba(63, 63, 70, 0.6) + --c3: #52525b; + --c4: #3f3f46; + + /* 边框:大幅降低亮度,融入背景 */ + --bd: #2e2e32; + + /* 状态色:使用深色半透明背景 */ + --ok: #4ade80; + --ok-bg: rgba(20, 83, 45, 0.4); + --ok-c: #bbf7d0; + --ok-bd: #14532d; + + --err: #f87171; + --err-bg: rgba(69, 10, 10, 0.4); + --err-bd: #7f1d1d; + + --due-bg: rgba(69, 10, 10, 0.6); + --due-bd: #7f1d1d; + --due-c: #fca5a5; + + --warn: #fbbf24; + + /* 阴影:加深阴影以适应暗色背景 */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); + --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.6) } - html, - body { - transition: background .3s, color .3s + [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, @@ -62,7 +128,8 @@ overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); - color: var(--c) + color: var(--c); + transition: background .3s, color .3s } .fc, @@ -201,8 +268,8 @@ } .btn:hover { - background: #fafafa; - border-color: #dcdcdc; + background: var(--bg); + border-color: var(--c3); box-shadow: var(--shadow); transform: translateY(-1px) } @@ -220,20 +287,20 @@ .btn-p { background: var(--c); - color: #fff; + color: var(--bg2); border-color: var(--c) } .btn-p:hover { - background: #2a2a28; - color: #fff; - border-color: #2a2a28 + background: var(--c2); + color: var(--bg2); + border-color: var(--c2) } .btn-due { - background: #ffe1e1 !important; - border-color: #ff9b9b !important; - color: #7a1f1f !important + background: var(--due-bg) !important; + border-color: var(--due-bd) !important; + color: var(--due-c) !important } .btn-s { @@ -257,7 +324,7 @@ } .btn-c:hover { - background: #e7e5e4; + background: var(--bd); color: var(--c) } @@ -327,7 +394,8 @@ background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); - box-shadow: var(--shadow) + box-shadow: var(--shadow); + transition: background .3s, border-color .3s } .side-nav, @@ -384,7 +452,7 @@ .side-menu-btn.act, .nav-i.act { background: var(--c); - color: #fff; + color: var(--bg2); box-shadow: var(--shadow-sm) } @@ -424,7 +492,8 @@ padding: 0 16px 0 64px; position: relative; z-index: 200; - box-shadow: var(--shadow-sm) + box-shadow: var(--shadow-sm); + transition: background .3s, border-color .3s } .toolbar-t { @@ -454,7 +523,8 @@ inset: 0; background: var(--bg); display: none; - overflow: hidden + overflow: hidden; + transition: background .3s } .page.act { @@ -494,7 +564,7 @@ } .banner-ov div { - color: #fff; + color: var(--bg2); font-size: 14px; font-weight: 500; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) @@ -618,18 +688,18 @@ user-select: none; box-shadow: var(--shadow-sm); color: var(--c); - transition: transform .1s, border-color .1s + transition: transform .1s, border-color .1s, background .3s } .item.node-main { background: var(--c); - color: #fff; + color: var(--bg2); border-color: var(--c); z-index: 10 } .item.node-home { - background: #fff; + background: var(--bg2); color: var(--c); border: 2px solid var(--c); z-index: 11 @@ -660,7 +730,7 @@ #btn-goto { display: none; background: var(--c); - color: #fff; + color: var(--bg2); border: none; box-shadow: var(--shadow) } @@ -716,7 +786,8 @@ font-size: 12px; color: var(--c2); border: 1px solid var(--bd); - box-shadow: var(--shadow) + box-shadow: var(--shadow); + transition: background .3s, border-color .3s } #zoom-ind { @@ -756,7 +827,7 @@ } .loc-lk:hover { - color: #000; + color: var(--c2); border-bottom-style: solid } @@ -859,7 +930,7 @@ display: flex; align-items: center; justify-content: center; - color: #fff; + color: var(--bg2); font-weight: 600; font-size: 14px; flex-shrink: 0; @@ -951,7 +1022,8 @@ overflow: hidden; display: flex; flex-direction: column; - box-shadow: var(--shadow-lg) + box-shadow: var(--shadow-lg); + transition: background .3s, border-color .3s } .modal-p.sm { @@ -965,12 +1037,15 @@ .modal-hd, .modal-ft { padding: 16px 20px; - background: var(--bg2) + background: var(--bg2); + transition: background .3s } .modal-hd { justify-content: space-between; - border-bottom: 1px solid var(--bd) + border-bottom: 1px solid var(--bd); + display: flex; + align-items: center } .modal-hd h2 { @@ -983,7 +1058,7 @@ justify-content: flex-end; gap: 12px; border-top: 1px solid var(--bd); - background: #fafaf9 + background: var(--bg) } .modal-x { @@ -1036,7 +1111,7 @@ } .form-in:focus { - background: #fff; + background: var(--bg2); border-color: var(--c3); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) } @@ -1076,7 +1151,7 @@ } .ed-ta:focus { - background: #fff; + background: var(--bg2); border-color: var(--c3) } @@ -1095,10 +1170,10 @@ .ed-err { padding: 12px; - background: #fef2f2; - border: 1px solid #fecaca; + background: var(--err-bg); + border: 1px solid var(--err-bd); border-radius: var(--r4); - color: #b91c1c; + color: var(--err); font-size: 13px; margin-top: 12px; display: none @@ -1120,7 +1195,7 @@ display: flex; flex-direction: column; box-shadow: var(--shadow-lg); - transition: right .3s cubic-bezier(0.16, 1, 0.3, 1) + transition: right .3s cubic-bezier(0.16, 1, 0.3, 1), background .3s, border-color .3s } .chat.act { @@ -1237,7 +1312,7 @@ .chat-msg.sent { align-self: flex-end; background: var(--c); - color: #fff; + color: var(--bg2); border-bottom-right-radius: 4px } @@ -1280,7 +1355,7 @@ .chat-in:focus { border-color: var(--c); - background: #fff; + background: var(--bg2); box-shadow: var(--shadow-sm) } @@ -1295,7 +1370,7 @@ height: 40px; border: none; background: var(--c); - color: #fff; + color: var(--bg2); border-radius: 50%; cursor: pointer; display: flex; @@ -1339,7 +1414,7 @@ .loc-i.sel { border-color: var(--c); background: var(--c); - color: #fff; + color: var(--bg2); box-shadow: var(--shadow) } @@ -1464,7 +1539,7 @@ z-index: 90; display: none; width: 12px; - transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background .3s, border-color .3s; overflow: hidden } @@ -1560,20 +1635,20 @@ .set-test-res.ok { display: block; - background: #dcfce7; - color: #166534; - border: 1px solid #86efac + background: var(--ok-bg); + color: var(--ok-c); + border: 1px solid var(--ok-bd) } .set-test-res.err { display: block; - background: #fef2f2; - color: #b91c1c; - border: 1px solid #fecaca + background: var(--err-bg); + color: var(--err); + border: 1px solid var(--err-bd) } .warn { - color: #f80 + color: var(--warn) } .settings-body { @@ -1631,7 +1706,7 @@ } .set-group { - background: #fff; + background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r6); padding: 20px; @@ -1692,7 +1767,7 @@ } .data-item.sel { - background: #fff; + background: var(--bg2); border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset } @@ -1714,7 +1789,7 @@ .data-item.sel .data-ck { background: var(--c); border-color: var(--c); - color: #fff + color: var(--bg2) } .data-info { @@ -1785,7 +1860,19 @@ } .modal-hd { - padding: 10px 16px + 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 { @@ -1842,7 +1929,7 @@ .data-item.sel .data-ck { background: var(--c); border-color: var(--c); - color: #fff + color: var(--bg2) } .data-ck i { @@ -1893,7 +1980,7 @@ #world-gen-status, #world-sim-status { display: none; - color: #4a9 + color: var(--ok) } #adv-u1, @@ -1935,33 +2022,6 @@ word-break: break-all } - .adv-modal .modal-p { - max-width: 900px; - height: 80vh; - max-height: 800px; - display: flex; - flex-direction: column; - padding: 0; - background: var(--bg2); - border-radius: var(--r8); - box-shadow: var(--shadow-lg); - border: 1px solid var(--bd) - } - - .adv-modal .modal-hd { - padding: 16px 24px; - border-bottom: 1px solid var(--bd); - background: var(--bg2); - flex-shrink: 0 - } - - .adv-modal .modal-hd h2 { - font-size: 18px; - font-weight: 700; - color: var(--c); - letter-spacing: -0.5px - } - .adv-layout { display: flex; flex: 1; @@ -2080,12 +2140,13 @@ padding: 12px; border: 1px solid var(--bd); border-radius: var(--r4); - background: #fff; + background: var(--bg2); width: 100%; resize: vertical; min-height: 120px; transition: border-color 0.2s; - outline: none + outline: none; + color: var(--c) } .ed-ta-adv:focus { @@ -2115,7 +2176,62 @@ .adv-tag:hover { border-color: var(--c3); color: var(--c); - background: #fff + 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) { @@ -2187,7 +2303,7 @@ } .modal-p { - max-width: 100%; + width: 100%; max-height: 100%; border-radius: 0 } @@ -2205,302 +2321,6 @@ } } - /* 600px 响应式布局 */ - @media (max-width: 600px) { - .modal-hd { - padding: 10px 16px; - display: flex; - justify-content: flex-end - } - } - - /* 主题切换按钮样式 */ - .theme-toggle { - width: 36px; - height: 36px; - border-radius: 50%; - border: 1px solid var(--bd); - background: var(--bg3); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - color: var(--c2); - transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden - } - - .theme-toggle:hover { - background: var(--bd); - color: var(--c); - transform: scale(1.05) - } - - .theme-toggle i { - font-size: 14px; - transition: all .3s cubic-bezier(0.4, 0, 0.2, 1) - } - - .theme-toggle .fa-sun { - position: absolute; - opacity: 0; - transform: rotate(-90deg) scale(0) - } - - .theme-toggle .fa-moon { - opacity: 1; - transform: rotate(0) scale(1) - } - - html.dark .theme-toggle .fa-sun { - opacity: 1; - transform: rotate(0) scale(1) - } - - html.dark .theme-toggle .fa-moon { - opacity: 0; - transform: rotate(90deg) scale(0) - } - - /* 暗色模式额外样式修复 */ - - /* 按钮样式修复 */ - html.dark .btn:hover { - background: var(--bg3); - border-color: var(--c3) - } - - html.dark .btn-c:hover { - background: var(--bg3); - color: var(--c) - } - - html.dark .btn-p { - background: var(--accent); - border-color: var(--accent); - color: #fff - } - - html.dark .btn-p:hover { - background: var(--accent2); - border-color: var(--accent2); - color: #fff - } - - html.dark .modal-ft { - background: var(--bg3) - } - - /* 输入框样式修复 */ - html.dark .form-in { - background: var(--bg); - color: var(--c) - } - - html.dark .form-in:focus { - background: var(--bg2); - box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) - } - - html.dark .ed-ta:focus, - html.dark .ed-ta-adv:focus { - background: var(--bg); - box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2) - } - - html.dark .ed-ta-adv { - background: var(--bg) - } - - html.dark .set-group { - background: var(--bg2) - } - - /* 聊天界面修复 */ - html.dark .chat-in { - background: var(--bg); - color: var(--c) - } - - html.dark .chat-in:focus { - background: var(--bg2); - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) - } - - html.dark .chat-send { - background: var(--accent); - color: #fff - } - - html.dark .chat-send:hover { - background: var(--accent2) - } - - html.dark .chat-msg.sent { - background: var(--accent); - color: #fff - } - - html.dark .chat-msg.recv { - background: var(--bg2); - border-color: var(--bd); - color: var(--c) - } - - html.dark .chat-av { - border: 2px solid var(--accent) - } - - /* 地图节点修复 */ - html.dark .item { - background: var(--bg2); - border-color: var(--bd); - color: var(--c) - } - - html.dark .item.node-main { - background: var(--accent); - border-color: var(--accent); - color: #fff - } - - html.dark .item.node-home { - background: var(--bg); - border-color: var(--accent); - color: var(--c) - } - - html.dark .item.node-sub { - background: var(--bg2); - color: var(--c) - } - - html.dark .item.hl { - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3) - } - - html.dark #btn-goto { - background: var(--accent); - color: #fff - } - - /* 标签和导航修复 */ - html.dark .nav-i.act { - background: var(--accent); - color: #fff - } - - html.dark .side-menu-btn.act { - background: var(--accent); - color: #fff - } - - html.dark .comm-tab.act { - background: var(--accent); - color: #fff; - border-color: var(--accent) - } - - /* 其他元素修复 */ - html.dark .adv-tag:hover { - background: var(--bg3) - } - - html.dark .adv-var-item code { - background: rgba(255, 255, 255, 0.08); - border-color: rgba(255, 255, 255, 0.1) - } - - html.dark .side-glass { - background: var(--glass); - border-color: var(--glass-border) - } - - html.dark .loc-lk { - color: var(--accent) - } - - html.dark .loc-lk:hover { - color: var(--accent2) - } - - html.dark .data-item.sel { - background: rgba(129, 140, 248, 0.1); - border-color: var(--accent) - } - - html.dark .loc-i.sel { - background: rgba(129, 140, 248, 0.1); - border-color: var(--accent) - } - - html.dark .fold-h:hover { - background: var(--bg3) - } - - html.dark .ct-av { - border: 2px solid rgba(255, 255, 255, 0.1) - } - - html.dark .map-lbl { - background: var(--bg2); - border-color: var(--bd); - color: var(--c) - } - - html.dark #zoom-ind { - background: var(--bg2); - border-color: var(--bd); - color: var(--c2) - } - - html.dark #tip { - background: var(--bg2); - border-color: var(--bd) - } - - html.dark .set-nav-item.act { - color: var(--accent); - border-color: var(--accent) - } - - html.dark .btn-add { - border-color: var(--bd); - color: var(--c3) - } - - html.dark .btn-add:hover { - background: var(--bg3); - color: var(--c) - } - - /* 选择框修复 */ - html.dark select.form-in { - background: var(--bg); - color: var(--c) - } - - html.dark select.form-in option { - background: var(--bg2); - color: var(--c) - } - - /* 复选框修复 */ - html.dark input[type="checkbox"] { - accent-color: var(--accent) - } - - /* SVG 地图线条修复 */ - html.dark #lines line { - stroke: #71717a !important - } - - html.dark #lines line[stroke="#333"] { - stroke: var(--accent) !important - } @@ -2528,7 +2348,7 @@
- @@ -2812,7 +2632,7 @@