lucent-laravel/front/sass/app.scss

// Include any default variable overrides here (though functions won't be available)

/* SCSS HEX */
$green-crayola: #0dab76ff;
$green-pigment: #139a43ff;
$lincoln-green: #0b5d1eff;
$forest-green-traditional: #053b06ff;
$black: #000000ff;
$dark: #000000ff;
$white: #ffffff;
$light: #eee;
$danger: red;

/* SCSS Gradient */
$gradient-top: linear-gradient(
    0deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-right: linear-gradient(
    90deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-bottom: linear-gradient(
    180deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-left: linear-gradient(
    270deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-top-right: linear-gradient(
    45deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-bottom-right: linear-gradient(
    135deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-top-left: linear-gradient(
    225deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-bottom-left: linear-gradient(
    315deg,
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);
$gradient-radial: radial-gradient(
    #0dab76ff,
    #139a43ff,
    #0b5d1eff,
    #053b06ff,
    #000000ff
);

$primary: #5b86be;
$secondary: #d9cca1;
$success: #80c671;
$background: #f4f6fa;
$table-striped-bg-factor: 0.03;
$dropdown-bg: rgb(206, 223, 210);


//https://www.realtimecolors.com/?colors=04060b-f4f6fa-5b86be-d9cca1-80c671&fonts=Anek Telugu-Anek Telugu
$themes: (
        light: (
                text: #04060b,
                background: #f4f6fa,
                primary: #5b86be,
                secondary: #d9cca1,
                accent: #80c671,
        ),
        dark: (
                text: #f4f6fb,
                background: #05070a,
                primary: #416ca4,
                secondary: #5e5126,
                accent: #488e39,
        ),
);
:root{
    --linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
    --linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
    --linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
    --radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
    --radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
    --radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
    --border-color: #ccc;
    --main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
    --main-font-color: #444;
    --input-bg: rgb(245,245,249);
    --text: #010b05;
    --background: #f7fefa;
    --primary: #1ce776;
    --secondary: #7bc8f1;
    --accent: #5086ed;
    --success: #80c671;

}


//@import "../node_modules/bootstrap/scss/bootstrap";
@import "./reset";
@import "./helpers";
@import "./notice";
@import "./auth";
@import "./typography";
@import "./sidebar";
@import "./form";
@import "./table";
@import "./avatar";
@import "./codemirror";
@import "./layout";
@import "./wrappers";
@import "./toolbar";
@import "./dropdown";
@import "./button";
@import "./checkbox";
@import "./pagination";
@import "./record-edit";
@import "./tabs";
@import "./switch";
@import "./preview";
@import "./modal";

body {
    background-color: var(--background);
    font-family: var(--main-font), sans-serif;
}

.btn-spinner .spinner-border {
    display: none;
}
.btn-spinner.spinner-on .spinner-border {
    display: inline-block;
}

.cursor-pointer {
    cursor: pointer;
}


a{
    color: var(--text);
    text-decoration: none;
}

.spinner-border {
    width: 9px;
    height: 9px;
    border: 2px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}