summaryrefslogtreecommitdiff
path: root/src/node.css
diff options
context:
space:
mode:
authorSam Nystrom <sam@samnystrom.dev>2024-03-13 22:37:58 +0000
committerSam Nystrom <sam@samnystrom.dev>2024-03-13 20:17:07 -0400
commitb4d7b00dd1add8e1cffb7771539fa6c419b64846 (patch)
treea634501f724077d981e7c6121f9960cfe24a22d4 /src/node.css
parent9eb1625ec5de3c221ed0445dde874fcb1dc3ff48 (diff)
refactor: extract nodes/sockets to components
Diffstat (limited to 'src/node.css')
-rw-r--r--src/node.css150
1 files changed, 0 insertions, 150 deletions
diff --git a/src/node.css b/src/node.css
deleted file mode 100644
index 3b0ba16..0000000
--- a/src/node.css
+++ /dev/null
@@ -1,150 +0,0 @@
-@scope (.__NodeShell) {
- :scope {
- width: 0;
- height: 0;
- overflow: visible;
- }
-
- .node {
- background-color: var(--surface);
- min-width: 180px;
- width: fit-content;
- font-size: 0.9rem;
- margin: 4px;
- padding-bottom: 8px;
- display: flex;
- flex-direction: column;
- border-radius: 6px;
- user-select: none;
- --shadow-color: 0deg 0% 0%;
- box-shadow:
- 0.1px 0.4px 0.6px hsl(var(--shadow-color) / 0.04),
- 0.5px 3.3px 4.8px -0.2px hsl(var(--shadow-color) / 0.15),
- 1.4px 10.2px 14.7px -0.5px hsl(var(--shadow-color) / 0.27);
-
- &:focus-within {
- outline: 1px white solid;
- }
-
- input[type="number"] {
- background-color: var(--overlay);
- border: none;
- border-radius: 4px;
- outline: none;
- color: var(--text);
- font-size: 1em;
- text-align: right;
- width: 100%;
- max-width: 200px;
- margin-right: 12px;
- padding-top: 3px;
- padding-bottom: 2px;
- }
-
- summary {
- background-color: var(--primary);
- padding: 3px;
- padding-left: 6px;
- margin-bottom: 4px;
- border-radius: 6px 6px 0 0;
- list-style-image: url('icons/chevron-down.svg');
- }
- &:not([open]) summary {
- list-style-image: url('icons/chevron-right.svg');
- }
-
- ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }
-
- ul li {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 4px 0;
-
- circle {
- fill: var(--data-float);
- .number & { fill: var(--data-float) }
- .vector & { fill: var(--data-vector) }
- .select & { fill: var(--data-float) }
- }
-
- &.out + &.in {
- padding-top: 8px;
- }
-
- &.out {
- justify-content: flex-end;
-
- svg {
- position: relative;
- left: 4px;
- }
- }
-
- &.in {
- justify-content: flex-start;
-
- svg {
- position: relative;
- right: 4px;
- }
-
- &.number {
- + .number { padding-top: 0 }
- &.linked input { display: none }
-
- span {
- position: relative;
- left: 8px;
- width: 0;
- white-space: nowrap;
- padding-bottom: 2px;
- }
- }
-
- &.vector {
- flex-direction: column;
- align-items: flex-start;
- gap: 1px;
-
- & :first-child {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: 2px;
- margin-bottom: 4px;
- .linked & { margin-bottom: 0 }
- }
-
- input {
- width: 89%;
- margin-left: 8px;
- margin-right: 16px;
-
- &:nth-child(2) { border-radius: 4px 4px 0 0 }
- &:nth-child(3) { border-radius: 0 }
- &:nth-child(4) { border-radius: 0 0 4px 4px }
-
- .linked & { display: none }
- }
- }
-
- &.select select {
- background-color: color-mix(in srgb, var(--base) 50%, var(--surface));
- color: var(--text);
- border: 1px solid color-mix(in srgb, var(--overlay) 50%, var(--surface));
- border-radius: 4px;
- width: 100%;
- margin-right: 12px;
- padding: 3px 1px;
-
- .linked & { display: none }
- }
- }
- }
- }
-} \ No newline at end of file