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/particle-panel/SceneObjectsSection.vue
+52 -52
View File
@@ -359,56 +359,56 @@ const displaySystems = computed<DisplaySystem[]>(() => {
<style scoped>
.scene-context-menu {
position: fixed; z-index: 10000; min-width: 142px; padding: 4px;
border: 1px solid #3d4962; border-radius: 7px; background: #171d2a;
border: 1px solid var(--ui-border-strong); border-radius: 7px; background: var(--ui-surface);
box-shadow: 0 10px 28px rgba(0, 0, 0, .48);
}
.scene-context-menu button {
display: block; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 5px;
background: transparent; color: #d5dced; 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;
}
.scene-context-menu button:hover, .scene-context-menu button:focus-visible {
outline: none; background: #2d3953; color: #fff;
outline: none; background: var(--ui-control-hover); color: #fff;
}
.panel { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; background: #14141f; border-left: 1px solid #2a2a3c; padding: 12px; box-sizing: border-box; }
.empty, .panel-hint { color: #667; font-size: 12px; padding: 8px 0; }
.group { border: 1px solid #2a2a3c; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.panel { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; background: var(--ui-panel-bg); border-left: 1px solid var(--ui-border); padding: 12px; box-sizing: border-box; }
.empty, .panel-hint { color: var(--ui-text-muted); font-size: 12px; padding: 8px 0; }
.group { border: 1px solid var(--ui-border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.group-head {
display: flex; align-items: center; gap: 6px; padding: 7px 10px; cursor: pointer;
font-size: 12px; font-weight: 600; color: #ccd; background: #191924; user-select: none;
font-size: 12px; font-weight: 600; color: var(--ui-text-soft); background: var(--ui-surface-muted); user-select: none;
}
.group-head:hover { background: #20202e; }
.group-head:hover { background: var(--ui-hover-surface); }
.scene-head { padding-right: 6px; }
.scene-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.scene-add {
height: 24px; padding: 0 6px; border: 1px solid #3a4a6a; border-radius: 5px;
background: #2e3a55; color: #cdf; font-size: 10px; white-space: nowrap; cursor: pointer;
height: 24px; padding: 0 6px; border: 1px solid var(--ui-border-strong); border-radius: 5px;
background: var(--ui-border-strong); color: var(--ui-accent-text-muted); font-size: 10px; white-space: nowrap; cursor: pointer;
}
.scene-add:hover { border-color: #7774ff; background: #45426f; color: #fff; }
.scene-add:disabled { opacity: 0.42; cursor: not-allowed; border-color: #343a4b; background: #252a38; color: #778095; }
.scene-add:hover { border-color: var(--ui-accent-strong); background: var(--ui-accent-soft); color: #fff; }
.scene-add:disabled { opacity: 0.42; cursor: not-allowed; border-color: var(--ui-border-control); background: var(--ui-surface); color: var(--ui-text-faint); }
.group-body { padding: 8px 10px 12px; }
.caret { display: inline-block; width: 12px; color: #667; font-size: 11px; }
.caret { display: inline-block; width: 12px; color: var(--ui-text-muted); font-size: 11px; }
.tree { margin-bottom: 8px; }
.tree-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; font-size: 12px; color: #bcd; border-radius: 6px; margin-bottom: 2px; }
.tree-item.on { background: #26324a; color: #ffe; }
.tree-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; font-size: 12px; color: var(--ui-accent-text-muted); border-radius: 6px; margin-bottom: 2px; }
.tree-item.on { background: var(--ui-surface-raised); color: var(--ui-text-strong); }
.tree-item .tdot { color: #ffcc33; font-size: 10px; }
.tree-item .tdot.dim { color: #556; }
.tree-item .tdot.dim { color: var(--ui-text-faint); }
.tree-item .tdot.collision-dot { color: #ff7070; }
.tree-item .tdot.path-dot { color: #ff933e; font-size: 14px; }
.tree-item .tdot.spine-dot { color: #c08cff; font-size: 11px; }
.tree-item .sub-branch { color: #5f7090; font-size: 12px; }
.tree-item .sub-branch { color: var(--ui-text-faint); font-size: 12px; }
.tree-item .tlabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-tree { padding-bottom: 8px; border-bottom: 1px solid #2a2a3c; }
.scene-tree { padding-bottom: 8px; border-bottom: 1px solid var(--ui-border); }
.scene-object-item { min-height: 28px; cursor: pointer; }
.scene-object-item:hover { background: #202b40; }
.scene-object-child { background: rgba(30, 42, 62, .35); }
.scene-object-kind { color: #75829c; font-size: 10px; }
.scene-object-kind.sub-emitter-kind { color: #8f8cff; }
.scene-object-item:hover { background: var(--ui-surface-raised); }
.scene-object-child { background: var(--ui-hover-translucent); }
.scene-object-kind { color: var(--ui-text-faint); font-size: 10px; }
.scene-object-kind.sub-emitter-kind { color: var(--ui-accent-text-soft); }
.scene-object-eye {
width: 24px; height: 22px; padding: 3px; flex: 0 0 24px; border: 1px solid transparent; border-radius: 5px;
background: transparent; color: #9aa6bf; cursor: pointer;
background: transparent; color: var(--ui-text-body); cursor: pointer;
}
.scene-object-eye:hover { border-color: #4b5972; background: #29354a; color: #e1e7f4; }
.scene-object-eye.off { color: #59647a; }
.scene-object-eye:hover { border-color: var(--ui-border-strong); background: var(--ui-control-hover); color: var(--ui-text-strong); }
.scene-object-eye.off { color: var(--ui-text-faint); }
.scene-object-eye svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scene-object-eye .eye-slash { stroke: #d47b88; stroke-width: 2; }
.scene-object-delete {
@@ -416,45 +416,45 @@ const displaySystems = computed<DisplaySystem[]>(() => {
background: #3a272f; color: #efb4bd; font-size: 11px; cursor: pointer;
}
.scene-object-delete:hover { border-color: #a45c69; background: #57303a; color: #fff; }
.object-editor-title { margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid #2a2a3c; color: #cbd4e8; font-weight: 700; }
.field-block { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; color: #8f9ab3; font-size: 11px; }
.object-editor-title { margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid var(--ui-border); color: var(--ui-text-body); font-weight: 700; }
.field-block { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; color: var(--ui-text-faint); font-size: 11px; }
.field-block > .inp { width: 100%; box-sizing: border-box; min-height: 30px; }
.field-block small { color: #5f6d86; line-height: 1.5; }
.field-block small { color: var(--ui-text-faint); line-height: 1.5; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.compact-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin: 5px 0; color: #8f9ab3; font-size: 11px; }
.compact-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin: 5px 0; color: var(--ui-text-faint); font-size: 11px; }
.compact-field .inp { width: 100%; min-height: 30px; box-sizing: border-box; }
.check-field { align-items: flex-start; }
.check-field input { width: 18px; height: 18px; margin: 4px 0; accent-color: #4f7ee8; }
.follow-path, .setting-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; color: #aeb8cf; font-size: 12px; }
.check-field input { width: 18px; height: 18px; margin: 4px 0; accent-color: var(--ui-accent-strong); }
.follow-path, .setting-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; color: var(--ui-text-body); font-size: 12px; }
.setting-line { justify-content: space-between; }
.follow-path input, .setting-line input[type='checkbox'] { width: 17px; height: 17px; accent-color: #4f7ee8; }
.collider-follow-section { margin-top: 12px; padding-top: 4px; border-top: 1px solid #30394d; }
.collider-curve-title { display: flex; flex-direction: column; gap: 3px; margin: 12px 0 6px; color: #aeb8cf; font-size: 12px; }
.collider-curve-title small { color: #67738c; font-size: 10px; line-height: 1.45; }
.path-color { width: 48px; height: 28px; padding: 0; border: 1px solid #3a4963; background: transparent; cursor: pointer; }
.path-help { margin: 12px 0; color: #7d89a2; font-size: 11px; line-height: 1.55; }
.path-help > span { color: #aeb8cf; }
.follow-path input, .setting-line input[type='checkbox'] { width: 17px; height: 17px; accent-color: var(--ui-accent-strong); }
.collider-follow-section { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--ui-border-strong); }
.collider-curve-title { display: flex; flex-direction: column; gap: 3px; margin: 12px 0 6px; color: var(--ui-text-body); font-size: 12px; }
.collider-curve-title small { color: var(--ui-text-faint); font-size: 10px; line-height: 1.45; }
.path-color { width: 48px; height: 28px; padding: 0; border: 1px solid var(--ui-border-button); background: transparent; cursor: pointer; }
.path-help { margin: 12px 0; color: var(--ui-text-faint); font-size: 11px; line-height: 1.55; }
.path-help > span { color: var(--ui-text-body); }
.path-help ul { margin: 6px 0 0; padding-left: 20px; }
.path-help li { margin: 3px 0; }
.path-action { width: 100%; height: 31px; margin-top: 7px; border: 0; border-radius: 5px; background: #33425b; color: #c9d1e1; cursor: pointer; }
.path-action { width: 100%; height: 31px; margin-top: 7px; border: 0; border-radius: 5px; background: var(--ui-border-strong); color: var(--ui-text-body); cursor: pointer; }
.path-action:hover { filter: brightness(1.12); }
.path-action.primary { background: #f05408; color: #fff; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: #aab; }
.row > span:first-child { width: 60px; flex-shrink: 0; color: #8a93bb; }
.inp { flex: 1; min-width: 0; padding: 3px 5px; background: #1a1a28; border: 1px solid #2e2e44; border-radius: 5px; color: #dde; font-size: 12px; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; color: var(--ui-text); }
.row > span:first-child { width: 60px; flex-shrink: 0; color: var(--ui-text-secondary); }
.inp { flex: 1; min-width: 0; padding: 3px 5px; background: var(--ui-control-bg); border: 1px solid var(--ui-border-control); border-radius: 5px; color: var(--ui-text-strong); font-size: 12px; }
.inp.tiny { width: 46px; flex: 0 0 46px; text-align: center; }
.seed-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #2d3950; }
.seed-row label { width: 64px; color: #8f9bb5; font-size: 12px; }
.seed-input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid #344158; border-radius: 6px; outline: none; background: #0f1625; color: #e2e7f2; font-size: 12px; }
.seed-input:focus { border-color: #625ff1; }
.seed-random { width: 34px; height: 30px; border: 1px solid #3a4860; border-radius: 6px; background: #2c3950; color: #d7def0; cursor: pointer; }
.seed-random:hover { background: #394964; }
.seed-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-border-strong); }
.seed-row label { width: 64px; color: var(--ui-text-faint); font-size: 12px; }
.seed-input { min-width: 0; flex: 1; padding: 6px 8px; border: 1px solid var(--ui-border-strong); border-radius: 6px; outline: none; background: var(--ui-control-deep); color: var(--ui-text-strong); font-size: 12px; }
.seed-input:focus { border-color: var(--ui-accent); }
.seed-random { width: 34px; height: 30px; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-border-strong); color: var(--ui-text-strong); cursor: pointer; }
.seed-random:hover { background: var(--ui-border-strong); }
.scene-seed { margin-top: 10px; }
.scene-warmup { margin-top: 10px; }
.scene-number-unit { min-width: 0; flex: 1; display: flex; align-items: center; border: 1px solid #344158; border-radius: 6px; background: #0f1625; }
.scene-number-unit:focus-within { border-color: #625ff1; }
.scene-number-unit { min-width: 0; flex: 1; display: flex; align-items: center; border: 1px solid var(--ui-border-strong); border-radius: 6px; background: var(--ui-control-deep); }
.scene-number-unit:focus-within { border-color: var(--ui-accent); }
.scene-number-unit .seed-input { border: 0; background: transparent; }
.scene-number-unit > span { padding-right: 8px; color: #7e8aa3; font-size: 12px; }
.scene-number-unit > span { padding-right: 8px; color: var(--ui-text-faint); font-size: 12px; }
.scene-number-unit.disabled { opacity: .5; }
.seed-hint { margin: 5px 0 1px 72px; color: #657188; font-size: 9px; line-height: 1.45; }
.seed-hint { margin: 5px 0 1px 72px; color: var(--ui-text-faint); font-size: 9px; line-height: 1.45; }
</style>