treehouse/static/css/tree.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;
}