TmMolStar/src/mol-app/skin/components/entity.scss

.molstar-entity-tree {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    padding-top: $control-spacing;
    background: $control-background;

    .molstar-entity-tree-children {
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: $row-height + $control-spacing + 1;
        padding: $control-spacing 0;
    }
}

.molstar-entity-store-header {
    height: $row-height + 1;
    position: relative;

    > span {
        margin-left: 6px;
        display: inline-block;
        line-height: $row-height;
        font-weight: bold;

        @include non-selectable
    }

    button {
        display: block !important;
        height: $row-height !important;
        margin: 0 !important;
        line-height: $row-height !important;
        border: none !important;
        position: absolute;
        top: 0;
    }

    border-bottom: 1px solid $border-color;
}

.molstar-entity-store-root {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    top: $row-height + 1;
    right: 0;
}

.molstar-entity-tree-entry {
    height: $row-height + 1;
    position: relative;
    border-bottom: 1px solid $control-background;
}

.molstar-entity-tree-entry-current {
    background: color-lower-contrast($default-background, 4%) !important;

    .molstar-entity-tree-entry-label {
        color: $entity-current-font-color;
        font-weight: bold;
        .molstar-entity-tree-entry-label-tag {
            font-weight: normal;
        }
        &:hover {
            color: $hover-font-color;
        }
    }
}

.molstar-entity-tree-entry-current-path {
    background: color-lower-contrast($default-background, 2%) !important;
    .molstar-entity-tree-entry-label {
        color: color-lower-contrast($entity-current-font-color, 5%);
        &:hover {
            color: $hover-font-color;
        }
    }
}

.molstar-entity-tree-entry button, .molstar-entity-tree-entry > div {
    display: block !important;
    height: $row-height !important;
    margin: 0 !important;
    line-height: $row-height !important;
    border: none !important;
    position: absolute;
    top: 0;
}


.molstar-entity-tree-entry-toggle-group {
    width: $row-height;
    height: $row-height;
    padding: 0;
    left: 0;
}

.molstar-entity-tree-entry-toggle-visible {
    width: $row-height;
    right: 0; //$row-height + 6;
    padding: 0 !important;
    font-size: 80%;
}

.molstar-entity-tree-entry-toggle-visible-full, .molstar-entity-tree-entry-toggle-visible-full:focus, .molstar-entity-tree-entry-toggle-visible-full:active {
    color: $entity-color-fully-visible;
}

.molstar-entity-tree-entry-toggle-visible-partial, .molstar-entity-tree-entry-toggle-visible-partial:focus, .molstar-entity-tree-entry-toggle-visible-partial:active {
    color: $entity-color-partialy-visible;
}

.molstar-entity-tree-entry-toggle-visible-none, .molstar-entity-tree-entry-toggle-visible-none:focus, .molstar-entity-tree-entry-toggle-visible-none:active {
    //background: transparent !important;
    color: $entity-color-not-visible;
}

.molstar-entity-tree-entry-remove {
    width: $row-height;
    height: $row-height;
    right: $row-height;
    padding: 0 !important;
    text-align: center;
    font-size: 80%;
    color: color-lower-contrast($font-color, 66%)
}

.molstar-entity-tree-entry-body {
    position: absolute;
    left: $row-height;
    border-radius: 0 0 0 $entity-subtree-offset;
    right: 0;
    background: $default-background;
}

.molstar-entity-tree-entry .molstar-entity-badge {
    width: $row-height;
    position: absolute;
    height: $row-height;
    left: 0;
    top: 0;
    border-radius: 0 $entity-subtree-offset 0 $entity-subtree-offset;
}

.molstar-entity-tree-entry-label-wrap {
    right: 2 * $row-height;
    overflow: hidden;
    left: $row-height;
    height: $row-height;
    position: absolute;
}

.molstar-entity-tree-entry-label {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    text-align: left !important;
    width: 100%;
    padding: 0 $control-spacing !important;
}

.molstar-entity-tree-entry-label-tag {
    color: $entity-tag-color;
    font-size: 70%;
    display: inline-block;
    margin-left: 6px;
}


.molstar-entity-tree-children-wrap {
    padding-left: $entity-subtree-offset;
}

.molstar-entity-tree-root {
    > .molstar-entity-tree-entry {
        .molstar-entity-badge {
            border-top-right-radius: 0;
        }
        .molstar-entity-tree-entry-label {
            font-weight: bold;
        }
        .molstar-entity-tree-entry-toggle-group {
            display: none !important;
        }
        .molstar-entity-tree-entry-body {
            left: $row-height - $entity-subtree-offset !important;
        }
        background: $default-background;
        border-bottom: 1px solid $border-color;
    }

    > .molstar-entity-tree-children-wrap {
       margin-top: $control-spacing;
       padding-left: 0 !important;
    }
}

.molstar-panel {
    .molstar-entity-tree-entry-toggle-visible {
        position: absolute;
        top: 0;
        right: 0;
        height: $row-height;
        font-size: 100%;

        background: $default-background; //color-increase-contrast($default-background, 4%);
    }

    // .molstar-entity-tree-entry-toggle-visible-full {
    //     background: color-increase-contrast($default-background, 8%);
    // }
}