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

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

@import "constants";
@import "animations";

////////////////////////////////////////
////////////// - General - /////////////
////////////////////////////////////////

html {
    width: 100%;
    font-family: "Inter", Helvetica, Arial, system-ui;
    font-size: 16px;
    line-height: 1.5;
    color: @text_color;
}

html.dark {
    color: @slate_400;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

body {
    width: 100%;
    margin: 0;
    color: @text_color;
    font-size: 16px;
    position: relative;
    font-weight: 400;
    background-color: white;
}

html.dark body {
    background-color: @slate_900;
    color: @slate_400;
}

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

#__next {
    flex-direction: column;
    width: 100%;
    gap: 0;
}

////////////////////////////////////////
////////////// - General - /////////////
////////////////////////////////////////

div {
    display: flex;
    align-items: center;
    gap: 10px;
}

main {
    width: 100%;
}

section {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;

    @media @media_md {
        padding: 40px 20px;
    }
}

.main-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

////////////////////////////////////////
////////////// - General - /////////////
////////////////////////////////////////

hr {
    border: none;
    border-bottom: 1px solid @slate_200;
    width: 100%;

    &.vertical {
        width: auto;
        border-left: 1px solid @slate_200;
        border-bottom: none;
        height: auto;
        min-height: 20px;
    }
}

html.dark hr {
    border-color: @slate_600;
}

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

a {
    color: @slate_800;
    text-decoration: none;
}

a:hover {
    color: @sec_color;
}

span a,
p a {
    color: @sec_color;
    border-bottom: 1px solid transparent;
}

span a:hover,
p a:hover {
    border-bottom-color: @sec_color;
}

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

html.dark a {
    color: @slate_200;
}

html.dark a:hover {
    color: fade(white, 60%);
}

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

a.active-page-link {
    color: @main_color;
    font-weight: 800;
}

html.dark a.active-page-link {
    color: white;
}

header.dark-content nav a.active-page-link {
    color: @slate_400;
}

p {
    max-width: 800px;
}

////////////////////////////////////////
////////////// - General - /////////////
////////////////////////////////////////

.left-border {
    border-left: 1px solid @slate_300;
}

.window-click-hide {
    display: flex;
}

.visible {
    display: flex;
}

.hidden {
    display: none;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.no-pointer-events {
    pointer-events: none;
}

.pointer-events {
    pointer-events: visible;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

////////////////////////////////////////
///////////// - Collapse - /////////////
////////////////////////////////////////

.collapse-block {
    background-image: linear-gradient(
        0deg,
        white,
        fade(white, 90%),
        fade(white, 0%)
    );
    width: 100%;
    padding: 20px;
    justify-content: center;
    position: relative;
    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
}

html.dark .collapse-block {
    background-image: linear-gradient(
        0deg,
        @slate_800,
        fade(@slate_800, 90%),
        fade(@slate_800, 0%)
    );
}

////////////////////////////////////////
////////// - Loading Block - ///////////
////////////////////////////////////////

.general_loader {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border: 4px solid @slate_200;
    border-bottom-color: @main_color;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: @rotation 0.5s linear infinite;
}

html.dark .general_loader {
    border: 4px solid fade(white, 10%);
    border-bottom-color: white;
    background-color: transparent;
}

////////////////////////////////////////
////////// - Form Elements - ///////////
////////////////////////////////////////

input,
textarea,
select {
    border: 1px solid @slate_300;
    padding: 10px 20px;
    font-size: 16px;
    width: 100%;
    border-radius: 3px;
    font-family: inherit;

    &:focus {
        outline-color: @main_color;
    }

    &.warning {
        border: 2px solid @warning_color;
        outline-color: @warning_color;
    }
}

select {
    -webkit-appearance: none;
    padding: 10px 28px 10px 15px;
}

label {
    font-size: 13px;
    color: var(--slate-400);
    white-space: nowrap;
}

html.dark input,
html.dark textarea,
html.dark select {
    border: 1px solid fade(@slate_300, 30%);
    color: white;
    background-color: @slate_700;

    &:focus,
    &:focus-visible {
        outline-color: fade(@slate_300, 60%);
        border-color: fade(@slate_300, 60%);
        background-color: @slate_800;
    }

    &.warning {
        border: 2px solid @warning_color;
        outline-color: @warning_color;
    }

    &::placeholder {
        color: fade(white, 30%);
    }
}

html.dark label {
    font-size: 13px;
    color: var(--slate-400);
}

////////////////////////////////////////
///////////// - Actions - //////////////
////////////////////////////////////////

.fade-side {
    display: flex;
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, white, transparent);
    z-index: 10;
}

html.dark .fade-side {
    background: linear-gradient(0deg, @slate_900, transparent);
}

.box-shadow {
    box-shadow: 0 0 50px -10px fade(@slate_800, 20%);
}

html.dark .box-shadow {
    box-shadow: 0 0 50px -10px fade(@slate_800, 90%);
}

////////////////////////////////////////
/////////////// - Ace - ////////////////
////////////////////////////////////////

.ace_text-input {
    top: 0;
}

.stack {
    .stack;
}
.row {
    .flex;
}

pre[class*="language-"] {
    // .flex;
    overflow: hidden;
    flex-wrap: wrap;

    img {
        opacity: 0.3;
        object-fit: contain;
        position: absolute;
        top: 10px;
        right: 10px;

        &:hover {
            opacity: 1;
        }
    }

    code {
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-overflow: ellipsis;
        text-wrap: wrap;
        text-align: center;
    }

    @media (@media_xl) {
        width: 100%;
        justify-content: center;
    }
}