TeaWeb/shared/js/ui/tree/View.scss

@import "../../../css/static/properties";
@import "../../../css/static/mixin";

html:root {
    --channel-tree-entry-move: #313235;
    --channel-tree-entry-selected: #2d2d2d;
    --channel-tree-entry-hovered: #393939;
    --channel-tree-entry-color: #828282;

    --channel-tree-entry-marker-unread: rgba(168, 20, 20, 0.5);
}

.channelTree {
    @include user-select(none);
    width: 100%;

    min-width: 10em;
    min-height: 5em;

    display: flex;
    flex-direction: column;

    flex-shrink: 0;
    flex-grow: 1;

    * {
        font-family: sans-serif;
        white-space: pre;
        line-height: 1;
    }

    .treeEntry {
        position: absolute;
        left: 0;
        right: 0;

        display: flex;
        flex-direction: row;
        justify-content: stretch;

        height: 1.3em;
        padding-top: 1px;
        padding-bottom: 1px;

        flex-grow: 0;
        flex-shrink: 0;

        &:hover {
            background-color: var(--channel-tree-entry-hovered);
        }

        &.selected {
            background-color: var(--channel-tree-entry-selected);
        }


        .markerUnread {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;

            width: 1px;
            background-color: var(--channel-tree-entry-marker-unread);

            opacity: 1;

            &:before {
                content: '';
                position: absolute;

                left: 0;
                top: 0;
                bottom: 0;

                width: 24px;

                background: linear-gradient(to right, var(--channel-tree-entry-marker-unread) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            }

            &.hidden {
                opacity: 0;
            }

            @include transition(opacity $button_hover_animation_time);
        }
    }

    .leftPadding {
        flex-shrink: 0;
    }

    &.move {
        .treeEntry.selected {
            background-color: var(--channel-tree-entry-move);
        }
    }
}

.treeContainer {
    height: 100%;

    flex-grow: 1;
    flex-shrink: 1;

    display: flex;
    flex-direction: column;

    overflow: hidden;
    position: relative;

    &:hover {
        .popoutButton {
            top: 1em;
        }
    }
}

.channelTreeContainer {
    @include chat-scrollbar-vertical();

    position: relative;
    height: 100%;

    flex-grow: 1;
    flex-shrink: 1;

    overflow: hidden;
    overflow-y: auto;

    &.smoothScroll {
        scroll-behavior: smooth;
    }
}

.popoutButton {
    position: absolute;
    top: -3em;
    right: 1em;

    @include transition(all ease-in-out $button_hover_animation_time);

    .button {
        display: flex;
        flex-direction: column;
        justify-content: center;

        border-radius: 50%;
        background-color: #0000004f;

        padding: .6em;

        cursor: pointer;

        @include transition(all ease-in-out $button_hover_animation_time);

        &:hover {
            background-color: #0000008f;
        }
    }
}

.arrow {
    display: inline-block;
    border: solid hsla(220, 5%, 30%, 1);

    border-width: 0 .2em .2em 0;
    padding: .21em;
    height: .5em;
    width: .5em;

    &.right {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }

    &.left {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
    }

    &.up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    &.down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}

@media all and (max-width: 250px) {
    .channelTree .leftPadding {
        font-size: .4em;
    }

    .treeEntry {
        padding-left: 10px; /* space for the arrow */
    }
}