Yeomai/SpineParticlesWeb
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

颜色主题

Browse Source
This commit is contained in:
tianmo committed 2026-11-09 18:11:53 +08:00
1 parent 4b1a329e1b
commit 7ce5ad3166
43 files changed
+837 -636
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/HelpDialog.vue
+49 -49
View File
@@ -304,107 +304,107 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
<style scoped>
.help-overlay {
position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 72px 24px 28px;
box-sizing: border-box; background: rgba(5, 8, 15, .72); backdrop-filter: blur(3px);
box-sizing: border-box; background: var(--ui-backdrop); backdrop-filter: blur(3px);
}
.help-dialog {
width: min(820px, 100%); height: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
border: 1px solid #3a4864; border-radius: 14px; background: #141a27; color: #b8c3d8;
border: 1px solid var(--ui-border-strong); border-radius: 14px; background: var(--ui-surface); color: var(--ui-text-body);
box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
}
.help-head {
position: relative; display: flex; align-items: flex-end; min-height: 82px; padding: 14px 52px 0 18px;
border-bottom: 1px solid #2b354a; background: linear-gradient(135deg, #202942, #181e2d);
border-bottom: 1px solid var(--ui-border-subtle); background: linear-gradient(135deg, var(--ui-surface-raised), var(--ui-surface-soft));
}
.help-tabs { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-tab {
display: flex; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
padding: 11px 14px 10px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0;
background: transparent; color: #7786a3; font: inherit; text-align: left; cursor: pointer;
background: transparent; color: var(--ui-text-faint); font: inherit; text-align: left; cursor: pointer;
}
.help-tab strong { color: inherit; font-size: 19px; }
.help-tab small { overflow: hidden; width: 100%; color: inherit; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.help-tab:hover { color: #b9c5dc; }
.help-tab.active { border-color: #3a4864; background: #141a27; color: #eef2ff; }
.help-tab:focus-visible { outline: 2px solid #8b86ff; outline-offset: -2px; }
.help-tab:hover { color: var(--ui-text-body); }
.help-tab.active { border-color: var(--ui-border-strong); background: var(--ui-surface); color: var(--ui-accent-text-soft); }
.help-tab:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: -2px; }
.help-close {
position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 1px solid #43516b; border-radius: 6px;
background: #273249; color: #ccd7ed; cursor: pointer;
position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 1px solid var(--ui-border-button); border-radius: 6px;
background: var(--ui-control-hover); color: var(--ui-text-body); cursor: pointer;
}
.help-close:hover { border-color: #7774ff; background: #3b4670; color: #fff; }
.help-close:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
.help-body {
min-height: 0; overflow: auto; padding: 18px 20px 21px;
scrollbar-width: thin; scrollbar-color: #3a455e transparent;
scrollbar-width: thin; scrollbar-color: var(--ui-scrollbar) transparent;
}
.help-body::-webkit-scrollbar { width: 6px; }
.help-body::-webkit-scrollbar-track { background: transparent; }
.help-body::-webkit-scrollbar-thumb { border-radius: 3px; background: #3a455e; }
.help-body::-webkit-scrollbar-thumb:hover { background: #596683; }
.help-section { padding: 14px 15px; border: 1px solid #2c3850; border-radius: 10px; background: #181f2e; }
.help-section h3 { margin: 0 0 11px; color: #9fb2ff; font-size: 13px; }
.help-start ol { margin: 0; padding-left: 21px; color: #aab6cc; font-size: 12px; line-height: 1.75; }
.help-start li::marker { color: #7774ff; font-weight: 700; }
.help-section b { color: #dce4f7; }
.help-body::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--ui-scrollbar); }
.help-body::-webkit-scrollbar-thumb:hover { background: var(--ui-scrollbar-hover); }
.help-section { padding: 14px 15px; border: 1px solid var(--ui-border-strong); border-radius: 10px; background: var(--ui-surface-soft); }
.help-section h3 { margin: 0 0 11px; color: var(--ui-accent-text-muted); font-size: 13px; }
.help-start ol { margin: 0; padding-left: 21px; color: var(--ui-text-body); font-size: 12px; line-height: 1.75; }
.help-start li::marker { color: var(--ui-accent-strong); font-weight: 700; }
.help-section b { color: var(--ui-text-strong); }
.help-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: 12px; margin-top: 12px; }
.help-list { display: grid; gap: 0; margin: 0; }
.help-list > div { display: grid; grid-template-columns: 78px 1fr; gap: 9px; padding: 7px 0; border-bottom: 1px solid #263146; }
.help-list > div { display: grid; grid-template-columns: 78px 1fr; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ui-border-subtle); }
.help-list > div:last-child { border-bottom: 0; }
.help-list dt { color: #d3dcf0; font-size: 11px; font-weight: 700; }
.help-list dd { margin: 0; color: #8795ae; font-size: 11px; line-height: 1.5; }
.help-list dt { color: var(--ui-text-strong); font-size: 11px; font-weight: 700; }
.help-list dd { margin: 0; color: var(--ui-text-faint); font-size: 11px; line-height: 1.5; }
.shortcut-list { display: grid; gap: 7px; }
.shortcut-list > div { display: flex; align-items: center; min-height: 25px; gap: 5px; }
.shortcut-list kbd {
min-width: 24px; box-sizing: border-box; padding: 3px 6px; border: 1px solid #465470; border-bottom-width: 2px;
border-radius: 5px; background: #101623; color: #e0e7f6; font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center;
min-width: 24px; box-sizing: border-box; padding: 3px 6px; border: 1px solid var(--ui-border-strong); border-bottom-width: 2px;
border-radius: 5px; background: var(--ui-control-deep); color: var(--ui-text-strong); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center;
}
.shortcut-list span { color: #65728b; font-size: 10px; }
.shortcut-list em { margin-left: auto; color: #9ca9c1; font-size: 11px; font-style: normal; }
.help-note { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid #2a3549; color: #697791; font-size: 10px; line-height: 1.55; }
.shortcut-list span { color: var(--ui-text-faint); font-size: 10px; }
.shortcut-list em { margin-left: auto; color: var(--ui-text-secondary); font-size: 11px; font-style: normal; }
.help-note { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid var(--ui-border-subtle); color: var(--ui-text-faint); font-size: 10px; line-height: 1.55; }
.help-export { margin-top: 12px; }
.help-export p { margin: 0; color: #8997b0; font-size: 11px; line-height: 1.65; }
.help-export p { margin: 0; color: var(--ui-text-faint); font-size: 11px; line-height: 1.65; }
.help-updates { display: grid; gap: 10px; }
.release-card { padding: 0; overflow: hidden; }
.release-head {
display: flex; width: 100%; align-items: center; gap: 11px; padding: 14px 15px; border: 0;
background: transparent; color: #d3dcf0; font: inherit; font-size: 12px; text-align: left; cursor: pointer;
background: transparent; color: var(--ui-text-strong); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.release-head time {
flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: #30395a;
color: #b8c2ff; font-size: 10px; font-weight: 700;
flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: var(--ui-accent-soft);
color: var(--ui-accent-text-soft); font-size: 10px; font-weight: 700;
}
.release-head span { flex: 1; min-width: 0; font-weight: 700; }
.release-head b { color: #7b86a2; font-size: 12px; font-weight: 400; }
.release-head:hover, .release-card.open .release-head { background: #1d2638; color: #fff; }
.release-card.open .release-head b { color: #9fb2ff; }
.release-body { margin: 0 15px; padding: 12px 0 14px; border-top: 1px solid #2a3549; }
.release-body p { margin: 0; color: #9ba9c2; font-size: 12px; line-height: 1.7; }
.release-body ol { display: grid; gap: 7px; margin: 8px 0 0; padding-left: 21px; color: #9ba9c2; font-size: 12px; line-height: 1.7; }
.release-body li::marker { color: #8f9eff; font-weight: 700; }
.help-doc-title { margin: 16px 2px 2px; color: #9fb2ff; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.release-head b { color: var(--ui-text-faint); font-size: 12px; font-weight: 400; }
.release-head:hover, .release-card.open .release-head { background: var(--ui-nav-hover); color: #fff; }
.release-card.open .release-head b { color: var(--ui-accent-text-muted); }
.release-body { margin: 0 15px; padding: 12px 0 14px; border-top: 1px solid var(--ui-border-subtle); }
.release-body p { margin: 0; color: var(--ui-text-faint); font-size: 12px; line-height: 1.7; }
.release-body ol { display: grid; gap: 7px; margin: 8px 0 0; padding-left: 21px; color: var(--ui-text-faint); font-size: 12px; line-height: 1.7; }
.release-body li::marker { color: var(--ui-accent-text-muted); font-weight: 700; }
.help-doc-title { margin: 16px 2px 2px; color: var(--ui-accent-text-muted); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.help-module { margin-top: 12px; }
.help-module-head {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent;
color: #9fb2ff; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
color: var(--ui-accent-text-muted); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
}
.help-module-head:hover { color: #fff; }
.help-module-head .mtitle { flex: 1; min-width: 0; }
.help-module-head .caret { flex: 0 0 auto; color: #7b86a2; font-size: 12px; }
.help-module-head .caret { flex: 0 0 auto; color: var(--ui-text-faint); font-size: 12px; }
.help-module.open .help-module-head { color: #fff; }
.help-module.open .help-module-head .caret { color: #9fb2ff; }
.help-module.open .help-module-head .caret { color: var(--ui-accent-text-muted); }
.help-module .mnum {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 6px;
background: linear-gradient(135deg, #4a53b8, #6a5fd0); color: #fff; font-size: 12px; font-weight: 700;
background: linear-gradient(135deg, var(--ui-accent-button), var(--ui-accent-button)); color: #fff; font-size: 12px; font-weight: 700;
}
.help-module.help-connector { border-color: #4a4f8a; background: linear-gradient(135deg, #1d2442, #181d2f); }
.help-module.help-connector .help-module-head { color: #b8c2ff; }
.help-module .connector-intro { margin: 0 0 10px; color: #9aa8c4; font-size: 11px; line-height: 1.6; }
.help-module .connector-intro b { color: #dce4f7; }
.help-module.help-connector { border-color: var(--ui-accent-soft); background: linear-gradient(135deg, var(--ui-accent-soft), var(--ui-surface-soft)); }
.help-module.help-connector .help-module-head { color: var(--ui-accent-text-soft); }
.help-module .connector-intro { margin: 0 0 10px; color: var(--ui-text-body); font-size: 11px; line-height: 1.6; }
.help-module .connector-intro b { color: var(--ui-text-strong); }
.help-module .dl-link {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 10px 6px 0; padding: 6px 12px;
border: 1px solid #5652b5; border-radius: 6px; background: #4540a0; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none;
border: 1px solid var(--ui-accent-button); border-radius: 6px; background: var(--ui-accent-bg); color: #fff; font-size: 12px; font-weight: 700; text-decoration: none;
}
.help-module .dl-link:hover { border-color: #8982ff; background: #554dc2; }
.help-module .dl-link small { color: #cfe0ff; font-weight: 500; font-size: 9px; }
.help-module .dl-link:hover { border-color: var(--ui-accent-bright); background: var(--ui-accent-bg-hover); }
.help-module .dl-link small { color: var(--ui-accent-text-soft); font-weight: 500; font-size: 9px; }
.help-module-body { padding-top: 10px; }
@media (max-width: 760px) {
.help-overlay { padding: 66px 12px 14px; }