TuxMonkey/Arborflow
1
0
Fork 0
mirror of https://gitee.com/dlmu-cone/Arborflow synced 2026-10-24 02:02:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: subtree navigation, i18n cleanup, UI polish (centered node text, smooth theme transition, remapped icons)

Browse Source
This commit is contained in:
TuxMonkey
2026-08-05 00:57:31 +08:00
parent 77740bf45f
commit cd605877cc
11 changed files with 200 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/styles.css
View File

@@ -356,6 +356,11 @@
--color-root: #d99a20;
}
/* ── Smooth theme transition ── */
*, *::before, *::after {
transition: background-color 0.35s ease, color 0.25s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg-primary); }
@@ -608,20 +613,24 @@ button:disabled { cursor: default; opacity: .38; }
.node-top-row {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-height: 60px;
gap: 8px;
padding: 0 14px;
}
.node-accent { align-self: stretch; flex: 0 0 4px; border-radius: 6px 0 0 6px; background: var(--category-color); }
.node-icon { display: grid; place-items: center; flex: 0 0 33px; height: 33px; margin-left: 10px; border: 1px solid color-mix(in srgb, var(--category-color) 35%, var(--border-icon-well)); border-radius: 6px; color: var(--category-color); background: var(--bg-icon-well); }
.node-copy { min-width: 0; margin: 0 11px 0 9px; flex: 1; }
.node-title { max-width: 135px; overflow: hidden; color: var(--text-title); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.node-subtitle { max-width: 135px; overflow: hidden; color: var(--text-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.node-type { max-width: 132px; margin-top: 6px; overflow: hidden; color: var(--text-mono); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.node-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 7px 0 0 7px; background: var(--category-color); }
.node-icon { display: grid; place-items: center; flex: 0 0 33px; height: 33px; border: 1px solid color-mix(in srgb, var(--category-color) 35%, var(--border-icon-well)); border-radius: 6px; color: var(--category-color); background: var(--bg-icon-well); }
.node-copy { min-width: 0; flex: 1; text-align: center; }
.node-title { max-width: 135px; overflow: hidden; color: var(--text-title); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; margin: 0 auto; }
.node-subtitle { max-width: 135px; overflow: hidden; color: var(--text-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; margin: 1px auto 0; }
.node-type { max-width: 132px; margin: 6px auto 0; overflow: hidden; color: var(--text-mono); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
/* ── Port params inside node card ── */
.node-ports-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 10px 5px 10px;
border-top: 1px solid var(--border-default);
@@ -665,11 +674,9 @@ button:disabled { cursor: default; opacity: .38; }
.node-ports-more {
color: var(--text-dim);
font-size: 8px;
padding-left: 2px;
margin-top: 1px;
}
/* ── Handle labels ── */
.handle-wrapper {
position: relative;
display: flex;
@@ -677,19 +684,6 @@ button:disabled { cursor: default; opacity: .38; }
justify-content: center;
height: 10px;
}
.handle-label {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 7px;
font-weight: 650;
color: var(--text-dim);
pointer-events: none;
}
.handle-label-in { top: 1px; }
.handle-label-out { bottom: 1px; }
.node-handle { width: 9px !important; height: 9px !important; border: 2px solid var(--handle-border) !important; background: var(--handle-bg) !important; }
.node-handle:hover { border-color: var(--category-color) !important; background: var(--category-color) !important; }
.node-handle-target { top: -5px !important; }