90 lines
1.6 KiB
SCSS
90 lines
1.6 KiB
SCSS
@use "@angular/material" as mat;
|
|
|
|
@include mat.core();
|
|
|
|
$my-app-primary: mat.m2-define-palette(mat.$m2-orange-palette);
|
|
$my-app-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
|
|
$my-app-warn: mat.m2-define-palette(mat.$m2-red-palette);
|
|
|
|
$my-app-theme: mat.m2-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;
|
|
}
|
|
|
|
.form-card {
|
|
min-width: 120px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.col {
|
|
flex: 1;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.col:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
input[disabled] {
|
|
color: black;
|
|
-webkit-text-fill-color: black;
|
|
} |