59 lines
1.4 KiB
SCSS
59 lines
1.4 KiB
SCSS
@use "@angular/material" as mat;
|
|
|
|
@include mat.core();
|
|
|
|
$my-app-primary: mat.define-palette(mat.$orange-palette);
|
|
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
|
|
$my-app-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
$my-app-theme: mat.define-light-theme(
|
|
(
|
|
color: (
|
|
primary: $my-app-primary,
|
|
accent: $my-app-accent,
|
|
warn: $my-app-warn,
|
|
),
|
|
)
|
|
);
|
|
|
|
@include mat.all-component-themes($my-app-theme);
|
|
|
|
|
|
html, body { height: 100%; }
|
|
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
|
|
|
/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
|
|
.AppLoading {
|
|
margin-top: -10px;
|
|
margin-left: -10px;
|
|
opacity: 0;
|
|
transition: opacity .8s ease-in-out;
|
|
position: fixed;
|
|
height: 105%;
|
|
width: 105%;
|
|
z-index: -1;
|
|
background-color: lightgrey;
|
|
background-image: url('./assets/loader.gif');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
|
|
app-root:empty + .AppLoading {
|
|
opacity: 1;
|
|
z-index: 100;
|
|
}
|
|
|
|
:root {
|
|
--avatar-size: 30px;
|
|
}
|
|
|
|
.avatar {
|
|
background-color: #ccc;
|
|
border-radius: 50%;
|
|
height: var(--avatar-size);
|
|
text-align: center;
|
|
width: var(--avatar-size);
|
|
vertical-align: middle;
|
|
margin-right: 10px;
|
|
} |