Joscha
54795b81ac
The individual components are more-or-less working, but the code that glues them together is still pretty ugly. I should probably revisit and clean up the individual components too. Also, the cursor code is missing a few features, but everything is usable for the first time :D
71 lines
1.4 KiB
CSS
71 lines
1.4 KiB
CSS
.node-line {
|
|
display: flex;
|
|
}
|
|
.node-text {
|
|
flex-grow: 1;
|
|
}
|
|
.node-permissions {
|
|
color: var(--bright-black);
|
|
margin-left: 1ch;
|
|
}
|
|
.node textarea {
|
|
width: 100%;
|
|
resize: none;
|
|
}
|
|
|
|
/* Special display states a node can be in */
|
|
.has-children > .node-line > .node-text {
|
|
font-weight: bold;
|
|
color: var(--yellow);
|
|
}
|
|
.has-cursor > .node-line > .node-text {
|
|
background-color: var(--blue);
|
|
}
|
|
.has-editor > .node-line {
|
|
display: none;
|
|
}
|
|
.is-folded > .node-children {
|
|
display: none;
|
|
}
|
|
|
|
/* Fancy tree lines */
|
|
.node-children > *, .node-children > *::before {
|
|
border-color: var(--bright-black);
|
|
border-width: 2px;
|
|
}
|
|
.node-children > * {
|
|
position: relative; /* .node is containing block for its .node::before */
|
|
margin-left: calc(0.5ch - 1px);
|
|
padding-left: calc(1.5ch - 1px);
|
|
border-left-style: solid;
|
|
}
|
|
.node-children > *:last-child {
|
|
padding-left: calc(1.5ch + 1px);
|
|
border-left-style: none;
|
|
}
|
|
.node-children > *::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: calc(1ch - 1px);
|
|
height: calc(0.6em - 1px);
|
|
border-bottom-style: solid;
|
|
}
|
|
.node-children > *:last-child::before {
|
|
border-left-style: solid;
|
|
transition: border-bottom-left-radius 0.4s;
|
|
}
|
|
|
|
/* Curvy lines */
|
|
.curvy .node:last-child::before {
|
|
border-bottom-left-radius: 6px;
|
|
}
|
|
|
|
/* About link in bottom right corner */
|
|
#about {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 1ch;
|
|
}
|