dsql-admin/dsql-app/less/admin.less

////////////////////////////////////////
////////////// - Imports - /////////////
////////////////////////////////////////

@import "constants";

////////////////////////////////////////
/////////////// - Aside - //////////////
////////////////////////////////////////

.admin {
    .aside {
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: 100vh;
        overflow-y: auto;
        position: sticky;
        top: 0;
        padding: 20px 20px 40px 20px;
        box-shadow: 0 0 20px -5px fade(@slate_600, 10%);
        border-right: 1px solid @slate_200;
        z-index: 800;
        transition: padding 0.2s ease-out;

        ////////////////////////////////////////
        ////////////////////////////////////////

        .main-links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;

            ////////////////////////////////////////

            a {
                color: @slate_600;
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                padding: 10px;
                border-radius: 3px;

                &:hover,
                &.active {
                    background-color: fade(@slate_400, 10%);

                    span {
                        font-weight: 600;
                    }
                }

                &:hover span,
                &.active span {
                    // font-weight: 800;
                    color: @slate_800;
                }

                &:hover svg,
                &.active svg {
                    color: @slate_800;
                    opacity: 1;
                }

                span {
                    font-weight: 500;
                }

                img {
                    opacity: 0.6;
                }

                svg {
                    opacity: 0.6;
                }
            }
        }

        ////////////////////////////////////////
        ////////////////////////////////////////

        &.mobile-collapsed {
            position: sticky;
            height: 100vh;
            width: 100%;
            top: 0;
            max-width: 300px;
            width: 300px;
        }

        &.mobile-expanded {
            height: 100vh;
            position: fixed;
            overflow-y: auto;
            padding-bottom: 40px;
            top: 0;
            width: 300px;
            max-width: 300px;
        }

        ////////////////////////////////////////
        ////////////////////////////////////////

        @media @media_lg {
            & {
                min-width: 150px;
                width: 150px;
            }

            &.mobile-collapsed {
                position: absolute;
                height: 49px;
                width: 300px;
                overflow: hidden;
                padding: 8px 8px 8px 20px;
            }

            &.mobile-expanded {
                height: 100vh;
                position: fixed;
                overflow-y: auto;
                padding-bottom: 40px;
            }
        }

        @media @media_sm {
            &.mobile-collapsed {
                position: absolute;
                height: 49px;
                width: 180px;

                .logo {
                    .logo-text {
                        display: none;
                    }
                }
            }

            &.mobile-expanded {
                max-width: 230px;
                width: 230px;

                .logo {
                    .logo-text {
                        display: none;
                    }
                }
            }
        }
    }

    ////////////////////////////////////////
    ////////////////////////////////////////

    .admin-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 30px;
        gap: 30px;
        background-color: fade(@slate_100, 60%);

        @media @media_md {
            padding: 30px 15px;
        }
    }
}

////////////////////////////////////////
///////////// - Dark Mode - ////////////
////////////////////////////////////////

html.dark .admin {
    .aside {
        background-color: @slate_800;
        box-shadow: 0 0 20px -5px fade(@slate_600, 10%);
        border-right: 1px solid @slate_700;

        ////////////////////////////////////////
        ////////////////////////////////////////

        .main-links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;

            ////////////////////////////////////////

            a {
                color: @slate_500;

                &:hover span,
                &:hover svg,
                &.active span,
                &.active svg {
                    color: white;
                }
            }
        }
    }

    ////////////////////////////////////////
    ////////////////////////////////////////

    .admin-content {
        background-color: transparent;
    }
}

.terminal {
    div {
        display: block;
    }

    // .xterm-helper-textarea {
    //     position: absolute;
    // }
}

.xterm {
    padding: 20px;
}

.xterm,
.xterm-screen {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
}

.xterm-viewport {
    background-color: transparent !important;
    &::-webkit-scrollbar {
        // width: 12px;
        background-color: @slate_800;
    }

    &::-webkit-scrollbar-thumb {
        // width: 12px;
        background-color: lighten(@slate_600, 10%);
    }
}

////////////////////////////////////////
////////////// - Connect - /////////////
////////////////////////////////////////