mirror of
https://github.com/hansjone/mind-map.git
synced 2026-10-09 04:30:46 +08:00
Initial commit: DSH mind-map canvas monorepo
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
commit
2ecd300ada
92 changed files with 20486 additions and 0 deletions
311
apps/web/src/node-props/node-shell.css
Normal file
311
apps/web/src/node-props/node-shell.css
Normal file
|
|
@ -0,0 +1,311 @@
|
|||
/* Node property system — card / inspector shell */
|
||||
.ns-editor {
|
||||
--ns-bg: var(--dsw-alias-bg-layer-1, #1b1e28);
|
||||
--ns-border: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.1));
|
||||
--ns-label: var(--dsw-alias-label-secondary, #a5adb8);
|
||||
--ns-text: var(--dsw-alias-label-primary, #f4f5f7);
|
||||
--ns-brand: var(--dsw-alias-brand-primary, #5e6ad2);
|
||||
--ns-input: rgba(255, 255, 255, 0.04);
|
||||
--ns-font: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
|
||||
"Noto Sans SC", system-ui, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
background: var(--ns-bg);
|
||||
border: 1px solid var(--ns-border);
|
||||
border-radius: 14px;
|
||||
overflow: visible;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.04) inset,
|
||||
0 10px 32px rgba(0, 0, 0, 0.38);
|
||||
color: var(--ns-text);
|
||||
font-family: var(--ns-font);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.45;
|
||||
min-width: 248px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.ns-editor--panel {
|
||||
box-shadow: none;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.ns-editor__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.28) 0%,
|
||||
rgba(0, 0, 0, 0.14) 100%
|
||||
);
|
||||
border-bottom: 1px solid var(--ns-border);
|
||||
border-radius: 14px 14px 0 0;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ns-editor__header:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.ns-editor__dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--ns-brand);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ns-brand) 28%, transparent);
|
||||
}
|
||||
|
||||
.ns-editor__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ns-text);
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
font-size: 13.5px;
|
||||
letter-spacing: 0.01em;
|
||||
padding: 2px 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ns-editor__title:focus {
|
||||
box-shadow: inset 0 -1.5px 0 var(--ns-brand);
|
||||
}
|
||||
|
||||
.ns-editor__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 8px 10px 10px;
|
||||
}
|
||||
|
||||
.ns-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
align-items: start;
|
||||
padding: 8px 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ns-row:hover {
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
}
|
||||
|
||||
.ns-row__label {
|
||||
color: var(--ns-label);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.2;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ns-row__ctrl {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ns-row__ctrl input,
|
||||
.ns-row__ctrl textarea,
|
||||
.ns-row__ctrl select {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
background: var(--ns-input);
|
||||
color: var(--ns-text);
|
||||
font-family: inherit;
|
||||
font-size: 12.5px;
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
transition: border-color 0.12s ease, background 0.12s ease;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.ns-row__ctrl select option {
|
||||
color: #f4f5f7;
|
||||
background: #1b1e28;
|
||||
}
|
||||
|
||||
.ns-row__ctrl input:focus,
|
||||
.ns-row__ctrl textarea:focus,
|
||||
.ns-row__ctrl select:focus {
|
||||
border-color: color-mix(in srgb, var(--ns-brand) 70%, transparent);
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
.ns-row__clear {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ns-label);
|
||||
padding: 6px 6px;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
opacity: 0.65;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ns-row__clear:hover {
|
||||
opacity: 1;
|
||||
color: var(--ns-text);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.ns-thumb {
|
||||
width: 100%;
|
||||
max-height: 140px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ns-row__ctrl--image {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.ns-image-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ns-image-pick {
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--ns-border);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--ns-text);
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ns-image-pick:hover:not(:disabled) {
|
||||
border-color: var(--ns-brand);
|
||||
}
|
||||
|
||||
.ns-image-pick:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
}
|
||||
|
||||
.ns-image-url {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ns-image-hint {
|
||||
font-size: 10.5px;
|
||||
color: var(--ns-label);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.ns-image-err {
|
||||
font-size: 11px;
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.ns-add {
|
||||
margin: 2px 10px 10px;
|
||||
position: relative;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.ns-add__btn {
|
||||
width: 100%;
|
||||
border: 1px dashed color-mix(in srgb, var(--ns-border) 80%, transparent);
|
||||
background: transparent;
|
||||
color: var(--ns-label);
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
font-family: inherit;
|
||||
font-size: 11.5px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
|
||||
}
|
||||
|
||||
.ns-add__btn:hover {
|
||||
border-color: var(--ns-brand);
|
||||
color: var(--ns-text);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.ns-add__menu {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/* Open downward so it isn't clipped by siblings / host */
|
||||
top: calc(100% + 6px);
|
||||
bottom: auto;
|
||||
background: var(--ns-bg);
|
||||
border: 1px solid var(--ns-border);
|
||||
border-radius: 10px;
|
||||
padding: 4px;
|
||||
z-index: 20;
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ns-add__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ns-text);
|
||||
font-family: inherit;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ns-add__item:hover {
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.ns-overlay {
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.ns-editor {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ns-editor--panel {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ns-editor__title,
|
||||
.ns-editor__body,
|
||||
.ns-add {
|
||||
pointer-events: auto;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue