kestra/ui/src/styles/app.scss

@use "fonts";

@use "@kestra-io/ui-libs/src/scss/variables.scss" as global-var;
@use 'element-plus/theme-chalk/src/mixins/mixins' as mixin;

@use "@kestra-io/ui-libs/style.css";

// element-plus
@use "layout/element-plus-overload";

// vue-tour
@use "vue3-tour/dist/vue3-tour.css";

// layout
@use "layout/root";
@use "layout/root-dark";
@use "layout/html-tag" as *;

// components
@use "layout/charts";
@use "components/vue-material-design-icon";
@use "components/vue-nprogress" with (
    $indigo: global-var.$indigo
);

@use "components/sidebar-menu";

html, body, #app, #app-container {
    height: 100%;
}

html {
    scroll-padding-top: 80px;
    transition: padding-left 0.3s ease;

    code[class*="language-"], pre[class*="language-"]  {
        white-space: pre-wrap !important;
    }

    &.menu-collapsed {
        #{--offset-from-menu}: 1rem;
    }

    &.menu-not-collapsed {
        #{--offset-from-menu}: 1rem;
        @include mixin.res(lg) {
            #{--offset-from-menu}: 4rem;
        }
    }
}

* > {
    ::-webkit-scrollbar {
        width: 15px !important;

        &:horizontal {
            height: 15px !important;
        }
    }

    ::-webkit-scrollbar-track {
        background: var(--ks-background-body) !important;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--ks-border-primary) !important;
        border-radius: 8px !important;
        border: 4px solid var(--ks-background-body) !important;
    }

    ::-webkit-scrollbar-corner {
        background: var(--ks-background-body) !important;
    }
}

// main layout
main {
    display: flex;
    flex-direction: column;
    min-height: 100%;

    &:has(section.full-container) {
        max-height: 100%;
    }

    > section.container {
        margin: 24px 0;
        min-width: 100%;
        transition: padding 0.3s ease;
        padding: 0 24px;

        &.full-height {
            flex: 1;
            display: flex;
            min-height: 0;
            > * {
                flex: 1;
            }
        }
    }

    > section.full-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;

        > * {
            flex: 1;
        }
    }
}

.el-icon.el-select__caret.el-select__icon {
    font-size: 1.1rem;
}

// status
@each $key, $value in global-var.$colors {
    .bg-#{$key} {
        background-color: $value;
    }

    .el-button.status-#{$key} {
        cursor: default;
        border: 0.5px solid $value;
        background: var(--ks-background-card);

        .material-design-icon {
            color: $value;
        }

        html.dark & {
            background: var(--bs-tertiary);
        }
    }
}

// Browser autofill background color
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}

// full page
html.full-screen {
    --menu-width: 0;

    body {
        display: flex;
        flex-direction: column;
    }

    #app {

        height: 100%;
        main {
            transition: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    }
}

// setup non color CSS variables
:root{
    --el-box-shadow: $box-shadow;
    --el-box-shadow-light: $box-shadow-sm;
    --el-box-shadow-lighter: $box-shadow-sm;
    --el-box-shadow-dark: $box-shadow-lg;

    --el-transition-duration: 0.2s;
    --el-transition-duration-fast: 0.2s;
    --top-navbar-height: 79px;
    #{--menu-width}: global-var.$menu-width;
    #{--menu-collapsed-width}: 65px;
    #{--spacer}: global-var.$spacer;

    #{--font-size-xs}: global-var.$font-size-xs;
    #{--font-size-sm}: global-var.$font-size-sm;
    #{--font-size-base}: global-var.$font-size-base;
    #{--font-size-lg}: global-var.$font-size-lg;
}

body{
    background-color: var(--ks-background-body);
}

.no-code-skeleton{
    color: var(--ks-content-secondary);
    background-color: var(--ks-background-card);
    width: 100%;
    border-radius: 4px;
    padding: 0 .5rem;
    // slowly appearing grey background animation
    animation: skeleton-loading 6s 1;
    position: relative;
    &:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .1) 35%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
        background-size: 200% 200%;
        background-repeat: no-repeat;
        background-position: 0 0;
        opacity: 0.7;
        border-radius: 4px;
        animation: skeleton-animation 3s infinite;
        height: 32px;
    }
}

@keyframes skeleton-animation {
    0% {
        background-position: -55% -30%;
    }
    100% {
        background-position: 185% 100%;
    }
}

@keyframes skeleton-loading {
    0% {
        opacity:0;
    }
    40% {
        opacity:0;
    }
    100% {
        opacity:.7;
    }
}

@media (max-width: 768px) {
    main > section.container:has(.empty-template) {
        padding: 0 0;
    }
}

#app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}
#app main {
    flex: 1;
    overflow: auto;
}