109 lines
2 KiB
CSS
109 lines
2 KiB
CSS
/* The tree indents shouldn't be too spaced out */
|
|
|
|
.tree ul {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
/* Make the tree have + and - instead of the default details/summary arrow */
|
|
|
|
.tree {
|
|
--tree-icon-position: 8px 50%;
|
|
--tree-icon-space: 28px;
|
|
|
|
/* I have no clue why this works, deal with it */
|
|
--tree-hover-expansion: 0.01px;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.tree details>summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tree li {
|
|
list-style: none;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.tree li>*:first-child {
|
|
width: 100%;
|
|
}
|
|
|
|
.tree li>div:first-child {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tree li>div:first-child,
|
|
.tree li>details>summary:first-child {
|
|
padding-right: 32px;
|
|
}
|
|
|
|
.tree li>div:first-child:hover {
|
|
border-bottom: 1px solid rgba(0, 0, 0, 15%);
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.tree details>summary {
|
|
background-image: url('../svg/expand.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: var(--tree-icon-position);
|
|
padding-left: var(--tree-icon-space);
|
|
margin-left: calc(- var(--tree-icon-space));
|
|
|
|
padding-top: var(--tree-hover-expansion);
|
|
padding-bottom: var(--tree-hover-expansion);
|
|
border-radius: 8px;
|
|
|
|
background-color: rgba(0, 0, 0, 0%);
|
|
}
|
|
|
|
.tree details>summary:hover {
|
|
background-color: rgba(0, 0, 0, 5%);
|
|
}
|
|
|
|
.tree li.leaf {
|
|
background-image: url('../svg/leaf.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: var(--tree-icon-position);
|
|
padding-left: var(--tree-icon-space);
|
|
margin-left: calc(- var(--tree-icon-space));
|
|
}
|
|
|
|
.tree details[open]>summary {
|
|
background-image: url('../svg/collapse.svg');
|
|
}
|
|
|
|
.tree th-bb {
|
|
height: 24px;
|
|
margin: 4px;
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
opacity: 0%;
|
|
}
|
|
|
|
.tree li>details>summary:hover>th-bb,
|
|
.tree li>div:hover>th-bb {
|
|
opacity: 100%;
|
|
}
|
|
|
|
.tree .branch-link {
|
|
background-image: url("../svg/link.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
opacity: 35%;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|