.notes-container {
position: absolute;
pointer-events: none;
}
.notes-container .note {
display: flex;
justify-content: center;
align-items: center;
color: black;
background-color: #FFE;
border: 1px dashed black;
overflow: hidden;
opacity: 0.5;
z-index: 1;
pointer-events: auto;
.notes-container .note.editing {
opacity: 1;
border: 1px dashed red;
z-index: 2;
.notes-container .note.editing.dragging {
.notes-container .note:hover {
z-index: 3;
.notes-container .editor {
display: grid;
background-color: #EFE;
border: 1px dashed blue;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"text text"
"save cancel"
"delete delete";
z-index: 4;
.notes-container .editor TEXTAREA {
grid-area: text;
// resize: none;
.notes-container .editor BUTTON[value="Save"] {
grid-area: save;
.notes-container .editor BUTTON[value="Cancel"] {
grid-area: cancel;
.notes-container .editor BUTTON[value="Delete"] {
grid-area: delete;