92 lines
2.5 KiB
SCSS
92 lines
2.5 KiB
SCSS
@use 'sass:map';
|
|
@use '/node_modules/@angular/material' as mat;
|
|
@import "/node_modules/@angular/material/theming";
|
|
@include mat.core();
|
|
|
|
@function modify-background($theme, $background-color) {
|
|
// Replace the background in the color object's background palette.
|
|
$theme-color: map-get($theme, color);
|
|
$color-background-palette: map-get($theme-color, background);
|
|
$color-background-palette: map-merge($color-background-palette, (background: $background-color));
|
|
$color-background-palette: map-merge($color-background-palette, (raised-button: $background-color));
|
|
|
|
// Replace the background in the background palette.
|
|
$background-palette: map-get($theme, background);
|
|
$background-palette: map-merge($background-palette, (background: $background-color));
|
|
$background-palette: map-merge($background-palette, (raised-button: $background-color));
|
|
|
|
// Merge the changes into a new theme.
|
|
$modified-theme-color: map-merge($theme-color, (background: $color-background-palette));
|
|
$modified-theme: map-merge($theme, (color: $modified-theme-color));
|
|
$modified-theme: map-merge($modified-theme, (background: $background-palette));
|
|
|
|
@return $modified-theme;
|
|
}
|
|
|
|
$angular-primary: mat.define-palette(mat.$blue-palette, 500, 100, 900);
|
|
$angular-accent: mat.define-palette(mat.$green-palette, A200, A100, A400);
|
|
$angular-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
$angular-theme: mat.define-dark-theme(
|
|
(
|
|
color: (
|
|
primary: $angular-primary,
|
|
accent: $angular-accent,
|
|
warn: $angular-warn
|
|
),
|
|
)
|
|
);
|
|
|
|
$angular-theme: modify-background($angular-theme, #0f1724);
|
|
|
|
@include mat.all-component-themes($angular-theme);
|
|
|
|
$primary: #8e5bd2;
|
|
$secondary: #11a8bd;
|
|
|
|
$gradient: linear-gradient(90deg, $primary, $secondary);
|
|
$gradient-angled: linear-gradient(135deg, $primary, $secondary);
|
|
$gradient-straight: linear-gradient($primary, $secondary);
|
|
|
|
$padding: 12.5vw;
|
|
$padding-small: 5vw;
|
|
|
|
$desc-color: #7c8393;
|
|
$border-color: #2d2d2d;
|
|
|
|
$color-config: mat.get-color-config($angular-theme);
|
|
$background: map.get($color-config, 'background');
|
|
$text: map.get($color-config, 'foreground');
|
|
|
|
body {
|
|
background-color: map.get($background, 'background');
|
|
}
|
|
|
|
* {
|
|
color: map.get($text, 'text');
|
|
}
|
|
|
|
.title {
|
|
font-size: 35px;
|
|
display: inline;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.home-section {
|
|
padding-inline: $padding;
|
|
user-select: none;
|
|
margin-bottom: 100px;
|
|
|
|
&.mobile {
|
|
padding-inline: $padding-small;
|
|
|
|
.title {
|
|
font-size: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-mdc-text-field-wrapper {
|
|
background-color: map.get($background, 'background') !important;
|
|
}
|