Rudimentary creating of nodes

This commit is contained in:
Magnus Åhall 2025-07-03 21:53:09 +02:00
parent 08fd2cf4e9
commit c0255fadb8
7 changed files with 363 additions and 55 deletions

View file

@ -21,14 +21,16 @@ body {
[onClick] {
cursor: pointer;
}
.page {
display: none;
}
.page.show {
display: block;
}
.section {
background-color: #fff;
padding: 32px;
border-radius: 8px;
display: none;
}
.section.show {
display: block;
}
#layout {
display: grid;
@ -43,7 +45,7 @@ body {
grid-gap: 16px;
align-items: center;
}
#menu.section {
#menu.page {
display: grid;
padding: 16px 32px;
}
@ -63,6 +65,8 @@ body {
}
#editor-node {
grid-area: details;
display: grid;
grid-gap: 16px;
}
#types {
grid-area: navigation;
@ -103,6 +107,12 @@ body {
.node img {
height: 24px;
}
.node.selected > .name {
color: #a02c2c;
}
.node.selected > .type-icon {
filter: invert(0.7) sepia(0.5) hue-rotate(0deg) saturate(750%) brightness(0.85) !important;
}
.node.expanded > .children {
display: block;
}
@ -123,7 +133,7 @@ body {
padding-right: 4px;
}
.node .type-icon img {
filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85) !important;
filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
}
.node .name {
margin-bottom: 8px;
@ -136,9 +146,33 @@ body {
border-left: 1px solid #ccc;
padding-left: 12px;
margin-left: 19px;
/*
&.expanded {
display: block;
}
*/
}
select {
font-size: 1em;
border: 1px solid #bcc3ce;
background: #fff;
color: #444;
padding: 4px;
}
select optgroup {
color: #a22;
}
datalist div:before {
display: block;
content: 'group';
font-weight: bold;
}
dialog#create-type {
min-width: 400px;
}
dialog#create-type > div {
display: grid;
grid-gap: 8px;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.75);
}
select:focus {
outline: 2px solid #888;
outline-offset: -2px;
}