tabby/tabby-core/src/theme.new.scss

$font-family-sans-serif: "Source Sans Pro";
$font-size-base: 14rem / 16;

app-root {
    background: transparent;

    &.vibrant {
        background: rgba(var(--bs-dark-rgb),.65);
    }

    &> .content {
        .tab-bar {
            background: var(--theme-bg-more-2);

            .btn-tab-bar {
                background: transparent;
                line-height: 42px;
                align-items: center;
                svg, path {
                    fill: var(--bs-body-color);
                    fill-opacity: 0.75;
                }

                &:hover { background: rgba(0, 0, 0, .125) !important; }
                &:active { background: rgba(0, 0, 0, .25) !important; }
            }

            &>.tabs {
                tab-header {
                    border-left: 1px solid transparent;
                    border-right: 1px solid transparent;
                    transition: 0.125s ease-out width;
                    color: var(--theme-fg-more-2);

                    .index {
                        color: var(--bs-body-color);
                        opacity: 0.4;
                    }

                    button {
                        color: var(--bs-body-color);
                        border: none;
                        transition: 0.25s all;

                        &:hover { background: var(--theme-bg-more-2) !important; }
                        &:active { background: var(--theme-bg-more-2) !important; }
                    }

                    .progressbar {
                        background: var(--bs-blue);
                    }

                    .activity-indicator {
                        background:var(--bs-body-color);
                        opacity: .2;
                    }

                    .current-tab-indicator {
                        background:var(--bs-light);
                    }

                    &.active {
                        color: var(--theme-fg);
                        background: var(--body-bg);
                    }
                }
            }
        }
    }
}

tab-body {
    background: var(--body-bg);
}

$tab-border-radius: 5px;

$modal-header-border-color:      transparent;
$modal-footer-border-color:      transparent;

$form-check-input-width: 1.4em;
$form-switch-width: 2.5em;

$input-placeholder-color: var(--theme-fg-more-2);

@import '~bootstrap/scss/bootstrap.scss';
@import "./theme.vendor.scss";

body {
    background: var(--body-bg);
    --bs-border-color: var(--theme-bg-more-2);
    --bs-form-control-bg: var(--theme-bg-more-2);
    --bs-emphasis-color: var(--theme-fg-less-2);
}

.list-group {
    --bs-list-group-bg: var(--theme-bg-more);
    --bs-list-group-border-color: var(--theme-bg-more-2);
    --bs-list-group-border-width: 0;
    --bs-list-group-action-color: var(--bs-body-color);
    --bs-list-group-action-hover-color: var(--theme-fg);
    --bs-list-group-action-hover-bg: var(--theme-bg-more-2);

    --bs-list-group-action-active-color: var(--theme-fg);
    --bs-list-group-action-active-bg: var(--theme-bg-more-2);
    --bs-list-group-disabled-color: var(--bs-secondary-color);
    --bs-list-group-disabled-bg: var(--bs-body-bg);
    --bs-list-group-active-color: var(--bs-primary-color);
    --bs-list-group-active-bg: var(--bs-primary-bg);
}

.nav {
    --bs-nav-link-color: var(--theme-fg-more);
    --bs-nav-link-hover-color: var(--theme-fg-less);
    --bs-nav-link-disabled-color: var(--bs-gray);
}

.nav-tabs {
    --bs-nav-tabs-border-width: 2px;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: var(--bs-body-bg);
    --bs-nav-tabs-border-color: var(--theme-fg);
    --bs-nav-tabs-link-active-color: var(--theme-fg);

    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
}

.nav-pills {
    --bs-nav-pills-border-radius: #{$nav-pills-border-radius};
    --bs-nav-pills-link-active-color: var(--theme-primary-fg);
    --bs-nav-pills-link-active-bg: var(--theme-primary);
}

.nav-tabs {
    margin-bottom: 10px;
    border: none;

    &.nav-justified .nav-link {
        margin-right: 5px;
    }

    .nav-link {
        border: none;
        border-bottom: var(--bs-nav-tabs-border-width) solid transparent;
        text-transform: uppercase;
        font-weight: bold;
        padding: 5px 0;
        margin-right: 20px;

        uib-tab-heading > i {
            font-size: 18px;
        }

        &.disabled {
            color: var(--bs-nav-tabs-link-disabled-color);
            border-color: transparent;
        }
    }

    .nav-item:last-child .nav-link {
        margin-right: 0;
    }

    .nav-link.active,
    .nav-item.show .nav-link {
        color: var(--bs-nav-tabs-link-active-color);
        border-color: var(--bs-nav-tabs-border-color);
    }

    .nav-item {
        outline: none !important;
    }
}

.dropdown-menu {
    --bs-dropdown-bg: var(--theme-bg-more);
}

.progress {
    --bs-progress-height: 3px;
}

tab-body {
    terminal-toolbar {
        background: var(--bs-body-bg);

        .btn, .toolbar-pin-button {
            font-weight: bold;
        }
    }
}

@each $color, $value in $theme-colors {
    .btn-#{$color} {
        // 6c757d
        --bs-btn-bg: var(--theme-#{$color});
        --bs-btn-border-color: var(--theme-#{$color});
        --bs-btn-disabled-bg: var(--theme-#{$color});
        --bs-btn-disabled-border-color: var(--theme-#{$color});

        --bs-btn-hover-border-color: var(--theme-#{$color}-less);
        --bs-btn-hover-bg: var(--theme-#{$color}-less);

        --bs-btn-active-border-color: var(--theme-#{$color});
        --bs-btn-active-bg: var(--theme-#{$color}-active-bg);

        --bs-btn-focus-shadow-rgb: 130, 138, 145;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

        --bs-btn-color: var(--theme-#{$color}-fg);
        --bs-btn-hover-color: var(--theme-#{$color}-fg);
        --bs-btn-active-color: var(--theme-#{$color}-active-fg);
        --bs-btn-disabled-color: var(--theme-#{$color}-fg);
    }

    .alert-#{$color} {
        --bs-alert-bg: var(--theme-#{$color}-fg);
        --bs-alert-border-color: var(--theme-#{$color}-more);
        --bs-alert-color: var(--theme-#{$color});
    }
}


multi-hotkey-input {
    .item {
        background: var(--theme-bg-more);
        border: 1px solid var(--bs-primary);
        border-radius: 3px;
        margin-right: 5px;

        .body {
            padding: 3px 0 2px;

            .stroke {
                padding: 0 6px;
                border-right: 1px solid var(--bs-body-bg);
            }
        }

        .remove {
            padding: 3px 8px 2px;
        }
    }

    .item:has(.duplicate) {
        background-color: var(--bs-danger);
        border: 1px solid var(--bs-danger);
    }

    .add {
        color: #777;
        padding: 4px 10px 0;
    }

    .add, .item .body, .item .remove {
        &:hover { background: var(--theme-bg-more); }
        &:active { background: var(--theme-bg-more-2); }
    }

    .add:has(.duplicate), .item:has(.duplicate) .body, .item:has(.duplicate) .remove {
        &:hover { background: var(--theme-danger-less); }
        &:active { background: var(--theme-danger-less-2); }
    }
}

hotkey-input-modal {
    .input {
        // background: $input-bg;
        padding: 10px;
        font-size: 24px;
        line-height: 27px;
        height: 55px;

        .stroke {
            background: var(--theme-bg-more);
            border: 1px solid var(--bs-primary);
            border-radius: 3px;
            margin-right: 10px;
            padding: 3px 10px;
        }
    }

    .timeout {
        background: $input-bg;

        div {
            background: $blue;
        }
    }
}

.mb-3 label {
    margin-bottom: 2px;
}

.btn {
    i + * {
        margin-left: 5px;
    }

    &.btn-lg i + * {
        margin-left: 10px;
    }
}

.input-group-addon + .form-control {
    border-left: none;
}

.input-group > select.form-control {
    flex-direction: row;
}

.list-group-item {
    // transition: 0.0625s background ease;

    i + * {
        margin-left: 10px;
    }
}

.list-group.list-group-flush .list-group-item {
    background: transparent;
    border: none;

    &:not(:last-child) {
        border-bottom: none;
    }
}

.list-group-light {
    .list-group-item {
        border: none !important;
        outline: none !important;
        background: transparent;
        border-radius: $border-radius;
        margin: 0 !important;

        &.active {
            background-color: var(--bs-list-group-active-bg);
        }
    }
}

.list-group-item svg {
    fill: var(--bs-body-color);
    fill-opacity: 0.75;
}

*::-webkit-scrollbar {
    background: rgba(0, 0, 0, .125);
    width: 10px;
    margin: 5px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
}

*::-webkit-scrollbar-corner,
*::-webkit-resizer {
    opacity: 0;
}

search-panel {
    background: var(--theme-bg-more) !important;

    input {
        border-radius: 0 !important;
    }
}


.btn {
    cursor: pointer;
    justify-content: flex-start;
    overflow: hidden;

    &.disabled,
    &:disabled {
        cursor: not-allowed;
    }
}

.btn-link {
    text-decoration: none;
}

ngx-colors-panel .opened {
    background: var(--bs-body-bg) !important;

    button {
        color: var(--bs-body-color) !important;
    }

    .button svg {
        fill: white;
    }
}

.text-muted {
    opacity: .5;
    color: var(--theme-fg) !important;
}

.form-switch .form-check-input {
    --bs-form-switch-bg: inherit;
    border-color: var(--theme-bg-more);
    background-color: var(--theme-bg-more-2);

    &:checked {
        border-color: var(--theme-primary-more);
        background-color: var(--theme-primary);
    }
}

.form-control:focus {
    border-color: var(--theme-fg-more-2);
}

.accordion {
    --bs-accordion-bg: var(--theme-bg-more);
    --bs-accordion-active-color: var(--theme-fg);
    --bs-accordion-active-bg: var(--theme-bg-more-2);
}

start-page {
    background: var(--theme-bg-more-2);
}

split-tab-spanner {
    background: rgba(var(--bs-dark-rgb), .1);

    &:hover, &.active {
        background: rgba(var(--bs-dark-rgb), .2);
    }
}

window-controls {
    button svg {
        fill: var(--theme-fg) !important;
    }
}