adastra_app/src/styles/app.scss

/*
Template Name: Material Ad Astra
Author: UnEspace
Email: rampeur@gmail.com
File: scss
*/
@use 'sass:color';

html {
    --mat-expansion-header-collapsed-state-height: 48px;
    --mat-expansion-header-expanded-state-height: 48px;
    height: 100%;
    position: relative;
    min-height: 100%;
    background: $white;
    .page-wrapper{
        height:calc(100vh - 64px);
        padding: 1.5rem;
    }
}
body {
    height: 100%;
    margin: 0;
    font-family: $bodyfont;
    overflow-x: hidden;
    font-weight: 300;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    outline: none;
}

a:hover,
a:focus,
a {
    text-decoration: none;
}
a.link {
    color: $headingtext;
    text-decoration: none;
    &:hover,
    &:focus {
        color: $primary;
    }
}
a.warn {
    color: $warn;
}
a.warn:hover {
    color: color.adjust($warn, $alpha: -0.3);
}
a.accent {
    color: $accent;
}
a.accent:hover {
    color: color.adjust($accent, $alpha: -0.3);
}

.no-shrink {
    flex-shrink: 0;
}
.flex-spacer {
    flex: 1 1 auto;
}

.error-messages {
    color: $error !important;
    font-weight: 500;
}
.footer {
    background-color: $sidebar-footer;
    font-size: 0.88em;
    padding: 5px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    a {
        color: $sidebar-light;
    }
    .copyright {
        color: $sidebar-light;
    }
}
.img-responsive {
    width: 100%;
    height: auto;
    display: inline-block;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.shadow-none {
    box-shadow: none !important;
}
.pointer {
    cursor: pointer;
}
.font-monospace.fw-lighter,
.font-monospace .fw-lighter {
    font-weight: 200 !important;
}

.banner {
    background-color: $white;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    .banner-content {
        padding: 1.3rem 1.1rem 1.1rem 1.1rem;
    }
    .user-img {
        width: $user-img-size;
        height: $user-img-size;
        border-radius: $user-img-size;
    }
    h4 {
        font-weight: 500;
        margin-bottom: 0.75rem;
    }
    p {
        margin: 0 auto .5rem;
        color: $muted;
        max-width: 450px;
        font-weight: 300;
    }
}
.dark-theme,
.primary-theme {
    dl.dl-horizontal dt {
        color: $light;
    }
}
.primary-theme {
    app-full-layout {
        /*--mat-sidenav-content-background-color: $sidenav-content;*/
        .mat-drawer-content {
            background-color: color.scale($sidebar, $lightness: 4%);
        }
        .mat-expansion-panel {
            background-color: color.scale($sidebar, $lightness: 14%);
        }
        .mat-mdc-card {
            background-color: color.scale($sidebar, $lightness: 8%);
            .mat-mdc-paginator {
                background-color: color.scale($sidebar, $lightness: 8%);
            }
        }
        .banner {
            background-color: color.scale($sidebar, $lightness: 90%);
        }
    }
}
app-full-layout {
    --mat-card-title-text-size: 22px;
    --mat-card-subtitle-text-line-height: 24px;
    --mat-card-subtitle-text-size: 16px;
    .mat-mdc-form-field,
    .mdc-text-field--filled .mdc-floating-label {
        font-size: initial;
    }
    .mat-mdc-form-field-infix {
        min-height: 40px;
    }
    .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
        .mat-mdc-form-field-infix {
            padding-top: 8px;
            padding-bottom: 8px;
        }
    }
    .mat-mdc-icon-button {
        .mat-icon {
            line-height: 0.87;
        }
    }
    .mat-mdc-table {
        background-color: initial;
    }
    [class^="text-bg-"], [class*=" text-bg-"]{
        .mat-mdc-card-subtitle {
            color: inherit;
        }
    }
}
.mat-icon.mini {
    --mat-menu-item-icon-size: 22px;
    &.material-icons {
        font-size: var(--mat-menu-item-icon-size);
    }
}
.badge .mat-icon {
    width: 0.76rem;
    height: 0.76rem;
    font-size: 0.76rem;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/****************
*  Definitions  *
****************/
dl.dl-horizontal {
    margin-bottom: 0;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 20px;
    dt {
        float: left;
        width: 120px;
        overflow: hidden;
        clear: left;
        font-weight: 500;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    dt,
    dd {
        line-height: 1.42857143;
        min-height: 1.42857143em;
    }
    dd {
        margin-left: 140px;
        /* color: $extra-light; */
    }
    &.dl-large dt {
        width: 160px;
    }
    &.dl-large dd {
        margin-left: 180px;
    }
    &.dl-xlarge dt {
        width: 200px;
    }
    &.dl-xlarge dd {
        margin-left: 220px;
    }
}

/**********************
*  Extra Text Colors  *
**********************/
.text-error {
    color: $error !important;
}

/****************************
*  Extra Background Colors  *
****************************/
.bg-crystal,
.bg-crystal .mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: transparent !important;
}
.bg-dark-transparent {
    background-color: $dark-transparent !important;
}

/*****************************
*         Icon Sizes         *
*****************************/
mat-icon {
    &.icon-xxsmall {
        font-size: 12px;
        height: 12px;
        width: 12px;
    }
    &.icon-xsmall {
        font-size: 16px;
        height: 16px;
        width: 16px;
    }
    &.icon-small {
        font-size: 18px;
        height: 18px;
        width: 18px;
    }
    &.icon-medium {
        font-size: 20px;
        height: 20px;
        width: 20px;
    }
}