128 lines
2.5 KiB
CSS
128 lines
2.5 KiB
CSS
/* editor UI */
|
|
|
|
.outer-editor-container {
|
|
margin-inline: auto;
|
|
display: flex;
|
|
justify-self: center;
|
|
padding: 10px;
|
|
align-items: center;
|
|
width: 80vw;
|
|
height: 80vh;
|
|
}
|
|
|
|
.inner-editor-container {
|
|
outline-style: solid;
|
|
border-radius: 10pt;
|
|
width: 90%;
|
|
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);
|
|
}
|
|
|
|
.default-node-norm {
|
|
padding: 10px 15px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: forestgreen solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem forestgreen);
|
|
}
|
|
|
|
.default-node-phase {
|
|
padding: 10px 15px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: dodgerblue solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem dodgerblue);
|
|
}
|
|
|
|
.default-node-start {
|
|
padding: 10px 15px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
outline: orange solid 2pt;
|
|
filter: drop-shadow(0 0 0.25rem orange);
|
|
}
|
|
|
|
.default-node-end {
|
|
padding: 10px 15px;
|
|
background-color: canvas;
|
|
border-radius: 5pt;
|
|
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-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);
|
|
} |