1bfcfc0458
Previously, a button proxy was used which required the use of complicated reference management. Using the HTML `input` element directly simplifies the implementation. Also moved some styles. ref: N25B-189
129 lines
2.6 KiB
CSS
129 lines
2.6 KiB
CSS
/* editor UI */
|
|
|
|
.inner-editor-container {
|
|
box-sizing: border-box;
|
|
margin: 1rem;
|
|
width: calc(100% - 2rem);
|
|
height: 100%;
|
|
}
|
|
|
|
.dnd-panel {
|
|
margin-inline-start: auto;
|
|
margin-inline-end: auto;
|
|
background-color: canvas;
|
|
align-content: center;
|
|
margin-bottom: 0.5rem;
|
|
margin-top:auto;
|
|
width: 50%;
|
|
height:7%;
|
|
}
|
|
|
|
.inner-dnd-panel {
|
|
outline: 2.5pt solid black;
|
|
border-radius: 0 0 5pt 5pt;
|
|
border-color: dimgrey;
|
|
background-color: canvas;
|
|
align-items: center;
|
|
}
|
|
|
|
.dnd-node-container {
|
|
background-color: canvas;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Node Styles */
|
|
|
|
.default-node {
|
|
padding: 10px 15px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: black solid 2pt;
|
|
filter: drop-shadow(0 0 0.75rem black);
|
|
}
|
|
|
|
.node-norm {
|
|
outline: rgb(0, 149, 25) solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem forestgreen);
|
|
}
|
|
|
|
.node-goal {
|
|
outline: yellow solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem yellow);
|
|
}
|
|
|
|
.node-trigger {
|
|
outline: teal solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem teal);
|
|
}
|
|
|
|
.node-phase {
|
|
outline: dodgerblue solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem dodgerblue);
|
|
}
|
|
|
|
.node-start {
|
|
outline: orange solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem orange);
|
|
}
|
|
|
|
.node-end {
|
|
outline: red solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem red);
|
|
}
|
|
|
|
.draggable-node {
|
|
padding: 3px 10px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: black solid 2pt;
|
|
filter: drop-shadow(0 0 0.75rem black);
|
|
}
|
|
|
|
.draggable-node-norm {
|
|
padding: 3px 10px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: forestgreen solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem forestgreen);
|
|
}
|
|
|
|
.draggable-node-goal {
|
|
padding: 3px 10px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: yellow solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem yellow);
|
|
}
|
|
|
|
.draggable-node-trigger {
|
|
padding: 3px 10px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: teal solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem teal);
|
|
}
|
|
|
|
.draggable-node-phase {
|
|
padding: 3px 10px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: dodgerblue solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem dodgerblue);
|
|
}
|
|
|
|
.draggable-node-start {
|
|
padding: 3px 10px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: orange solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem orange);
|
|
}
|
|
|
|
.draggable-node-end {
|
|
padding: 3px 10px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: red solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem red);
|
|
}
|