magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Design changes

Browse source
This commit is contained in:
Magnus Åhall 2026-06-04 07:47:27 +02:00
parent 131c6133ba
commit 44ee1ac94b
2 changed files with 50 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

47
static/js/tree.mjs
View file

@ -64,16 +64,61 @@ export class N2Tree extends CustomHTMLElement {
this.tmpl.innerHTML = `
<style>
n2-tree {
anchor-name: --tree;
#logo {
display: grid;
grid-template-columns: 1fr min-content;
align-items: center;
justify-items: start;
cursor: pointer;
padding: 16px;
border-bottom: 1px solid var(--line-color);
img:first-child {
height: 24px;
margin-right: 8px;
}
}
.icons {
display: flex;
justify-content: center;
margin: 16px 0px 32px 0px;
gap: 8px;
padding-bottom: 16px;
border-bottom: 1px solid var(--line-color);
}
.el-hide-tree {
font-size: 1.25em;
font-weight: bold;
cursor: pointer;
margin-left: 16px;
}
.focusline {
position: fixed;
background-color: #a00;
top: 0px;
left: anchor(--tree left);
right: anchor(--tree right);
height: 2px;
opacity: 0;
}
&:focus-within {
.focusline {
opacity: 1;
background-color: #fff;
transition: background-color 150ms;
}
}
}
</style>
<div class="focusline"></div>
<div id="logo">
<img src="/images/${_VERSION}/logo_small.svg" />
<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
<div data-el="hide-tree">&lt;</div>
</div>