diff --git a/static/css/notes2.css b/static/css/notes2.css index a2dbc11..5a3e0dd 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -10,6 +10,7 @@ */ --colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%); + --line-color: #ccc; --tree-expander: 0px; --functions-width: 150px; } @@ -111,7 +112,7 @@ html { color: #333; background-color: #eee; font-weight: bold; - border-right: 2px solid #ddd; + border-right: 1px solid var(--line-color); display: grid; justify-items: center; @@ -127,6 +128,7 @@ html { } } + #tree { grid-area: tree; display: grid; @@ -134,33 +136,7 @@ html { color: #444; z-index: 100; - border-right: 2px solid #ddd; - - #logo { - display: grid; - grid-template-columns: min-content 1fr min-content; - align-items: center; - justify-items: start; - cursor: pointer; - padding: 16px; - border-bottom: 1px solid #ccc; - - .el-search { - justify-self: end; - } - - img:first-child { - height: 24px; - margin-right: 8px; - } - } - - .icons { - display: flex; - justify-content: center; - margin: 16px 0px 32px 0px; - gap: 8px; - } + border-right: 1px solid var(--line-color); n2-tree { .el-treenodes { @@ -168,10 +144,6 @@ html { } } - &:focus-within { - n2-tree {} - } - .node { display: grid; grid-template-columns: 40px min-content; diff --git a/static/js/tree.mjs b/static/js/tree.mjs index fc861e4..397dfc9 100644 --- a/static/js/tree.mjs +++ b/static/js/tree.mjs @@ -64,16 +64,61 @@ export class N2Tree extends CustomHTMLElement { this.tmpl.innerHTML = ` +