tabby/app/src/components/appRoot.less

@import "~variables.less";

.button-states() {
    transition: 0.125s all;
    border: none;

    &:hover:not(.active) {
        background: rgba(0, 0, 0, .15);
    }

    &:active:not(.active),
    &.active {
        background: rgba(0, 0, 0, .3);
    }
}


@title-bg: #131d27;

:host {
    display: flex;
    width: ~"calc(100vw - 2px)";
    height: ~"calc(100vh - 2px)";
    flex-direction: column;
    overflow: hidden;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
    cursor: default;
    background: @body-bg;
}

@tabs-height: 40px;
@tab-border-radius: 4px;


:host > .spacer {
    flex: 0 0 5px;
    background: @title-bg;
}

.tabs {
    flex: none;
    height: @tabs-height;
    background: @body-bg;
    display: flex;
    flex-direction: row;

    &>button {
        line-height: @tabs-height - 2px;
        cursor: pointer;

        padding: 0 15px;
        flex: 0 0 auto;
        border-bottom: 2px solid transparent;
        transition: 0.25s all;
        font-size: 12px;

        text-transform: uppercase;
        font-weight: bold;
        color: #888;
        border: none;
        border-radius: 0;

        &:not(:hover):not(:active) {
            background: @title-bg;
        }
    }

    &.active-tab-0 .btn-new-tab {
        border-bottom-right-radius: @tab-border-radius;
    }

    tab-header.active + button {
        border-bottom-left-radius: @tab-border-radius;
    }
}

.tabs-content {
    flex: auto;
    display: flex;
}

hotkey-hint {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 300px;
}