Test avec le thème  pour récupérer les icones
This commit is contained in:
2026-01-16 17:43:29 +01:00
parent 6a08486f14
commit ebfd339343
29 changed files with 203 additions and 387 deletions

View File

@@ -35,8 +35,7 @@
"styles": [
"src/assets/css/styles-app-loading.scss",
"src/assets/css/styles.css",
"src/assets/css/new-theme.scss",
"@angular/material/prebuilt-themes/pink-bluegrey.css"
"src/assets/css/new-theme.scss"
],
"scripts": []
},

View File

@@ -27,7 +27,11 @@
<mat-sidenav-container>
<mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Summary"
fontIcon="timeline"
></mat-icon>
<a
routerLink="/summary"
routerLinkActive="active"
@@ -38,9 +42,11 @@
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="List of jumps"
>list_alt</mat-icon
>
<mat-icon
aria-hidden="false"
aria-label="List of jumps"
fontIcon="list_alt"
></mat-icon>
<a
routerLink="/jumps"
routerLinkActive="active"
@@ -50,7 +56,11 @@
>
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Add jumps"
fontIcon="add_circle"
></mat-icon>
<a
routerLink="/newjump"
routerLinkActive="active"
@@ -61,9 +71,11 @@
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="List of tunnel flights"
>list_alt</mat-icon
>
<mat-icon
aria-hidden="false"
aria-label="List of tunnel flights"
fontIcon="list_alt"
></mat-icon>
<a
routerLink="/tunnelFlights"
routerLinkActive="active"
@@ -73,9 +85,11 @@
>
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="Add flights in tunnel"
>add_circle</mat-icon
>
<mat-icon
aria-hidden="false"
aria-label="Add flights in tunnel"
fontIcon="add_circle"
></mat-icon>
<a
routerLink="/newTunnelFlight"
routerLinkActive="active"
@@ -86,7 +100,11 @@
<hr class="splitter" />
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon>
<mat-icon
aria-hidden="false"
aria-label="Dropzones"
fontIcon="store"
></mat-icon>
<a
routerLink="/dzs"
routerLinkActive="active"
@@ -96,9 +114,11 @@
>
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="Aircrafts"
>airplanemode_active</mat-icon
>
<mat-icon
aria-hidden="false"
aria-label="Aircrafts"
fontIcon="airplanemode_active"
></mat-icon>
<a
routerLink="/aircrafts"
routerLinkActive="active"
@@ -108,9 +128,11 @@
>
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="List of jump types"
>flight_land</mat-icon
>
<mat-icon
aria-hidden="false"
aria-label="List of jump types"
fontIcon="flight_land"
></mat-icon>
<a
routerLink="/jumpTypes"
routerLinkActive="active"
@@ -120,9 +142,11 @@
>
</mat-nav-list>
<mat-nav-list>
<mat-icon aria-hidden="false" aria-label="List of gears"
>settings_input_antenna</mat-icon
>
<mat-icon
aria-hidden="false"
aria-label="List of gears"
fontIcon="settings_input_antenna"
></mat-icon>
<a
routerLink="/gears"
routerLinkActive="active"
@@ -133,9 +157,11 @@
</mat-nav-list>
<mat-nav-list *ngIf="currentUser">
<hr class="splitter" />
<mat-icon aria-hidden="false" aria-label="User account"
>account_box</mat-icon
>
<mat-icon
aria-hidden="false"
aria-label="User account"
fontIcon="account_box"
></mat-icon>
<a
routerLink="/user"
routerLinkActive="active"
@@ -146,7 +172,11 @@
</a>
</mat-nav-list>
<mat-nav-list *ngIf="currentUser">
<mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
<mat-icon
aria-hidden="false"
aria-label="To logout"
fontIcon="logout"
></mat-icon>
<span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
"App_Nav_Logout" | translate
}}</span>

View File

@@ -1,23 +1,61 @@
<div class="content">
<p>
<a class="nostyle" routerLink="/summary" routerLinkActive="active" skipLocationChange>
<mat-icon aria-hidden="false" aria-label="Summary" style="width: 128px; height:128px; font-size: 128px;">timeline</mat-icon>
</a>
</p>
<p>
<a class="nostyle" routerLink="/newjump" routerLinkActive="active" skipLocationChange>
<mat-icon aria-hidden="false" aria-label="Add jumps" style="width: 128px; height:128px; font-size: 128px;">add_circle</mat-icon>
</a>
</p>
<p>
<a class="nostyle" routerLink="/jumps" routerLinkActive="active" skipLocationChange>
<mat-icon aria-hidden="false" aria-label="List of jumps" style="width: 128px; height:128px; font-size: 128px;">list_alt</mat-icon>
</a>
</p>
<p>
<a class="nostyle" routerLink="/tunnelFlights" routerLinkActive="active" skipLocationChange>
<img src="assets/img/tunnel.jpg" alt="Tunnel flights" style="width: 128px; height:128px; font-size: 128px;" />
</a>
</p>
<p>
<a
class="nostyle"
routerLink="/summary"
routerLinkActive="active"
skipLocationChange
>
<mat-icon
aria-hidden="false"
aria-label="Summary"
style="width: 128px; height: 128px; font-size: 128px"
fontIcon="timeline"
></mat-icon>
</a>
</p>
<p>
<a
class="nostyle"
routerLink="/newjump"
routerLinkActive="active"
skipLocationChange
>
<mat-icon
aria-hidden="false"
aria-label="Add jumps"
style="width: 128px; height: 128px; font-size: 128px"
fontIcon="add_circle"
></mat-icon>
</a>
</p>
<p>
<a
class="nostyle"
routerLink="/jumps"
routerLinkActive="active"
skipLocationChange
>
<mat-icon
aria-hidden="false"
aria-label="List of jumps"
style="width: 128px; height: 128px; font-size: 128px"
fontIcon="list_alt"
></mat-icon>
</a>
</p>
<p>
<a
class="nostyle"
routerLink="/tunnelFlights"
routerLinkActive="active"
skipLocationChange
>
<img
src="assets/img/tunnel.jpg"
alt="Tunnel flights"
style="width: 128px; height: 128px; font-size: 128px"
/>
</a>
</p>
</div>

View File

@@ -5,11 +5,13 @@ import {
Validators,
ReactiveFormsModule,
} from "@angular/forms";
import { AuthenticationService } from "../../services/authentication.service";
import { User } from "../../models/user";
import { ListOfImagesComponent } from "../list-of-images/list-of-images.component";
import { MatLabel, MatFormFieldModule } from "@angular/material/form-field";
import { TranslateModule } from "@ngx-translate/core";
import { TranslateModule, TranslatePipe } from "@ngx-translate/core";
import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";
import { AuthenticationService } from "../../services/authentication.service";
import { ListOfImagesComponent } from "../list-of-images/list-of-images.component";
@Component({
selector: "app-user-profile",
@@ -17,10 +19,12 @@ import { TranslateModule } from "@ngx-translate/core";
styleUrls: ["./user-profile.component.css"],
imports: [
ListOfImagesComponent,
ReactiveFormsModule,
MatLabel,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
TranslateModule,
ReactiveFormsModule,
],
})
export class UserProfileComponent implements OnInit {

View File

@@ -1,48 +0,0 @@
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../font/Material-Icons-Fallback.woff2) format('woff2');
}
/* .material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
} */
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

View File

@@ -1,168 +0,0 @@
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(../font/300/Cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(../font/300/Cyrillic.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(../font/300/Greek-ext.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(../font/300/Greek.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(../font/300/Vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(../font/300/Latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(../font/300/Latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/400/Cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/400/Cyrillic.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/400/Greek-ext.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/400/Greek.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/400/Vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/400/Latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/400/Latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../font/500/Cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../font/500/Cyrillic.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../font/500/Greek-ext.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../font/500/Greek.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../font/500/Vietnamese.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../font/500/Latin-ext.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../font/500/Latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

View File

@@ -1,6 +1,18 @@
/* These tokens are generated using https://themes.angular-material.dev/ */
/* Preview: https://themes.angular-material.dev/?seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
/* Preview: https://themes.angular-material.dev/?bold-font-weight=700&brand-font-family=Roboto&medium-font-weight=500&plain-font-family=Roboto&regular-font-weight=400&seed-error=%23FF5449&seed-neutral=%23938F94&seed-neutral-variant=%23948F99&seed-primary=%236750A4&seed-secondary=%23958DA4&seed-tertiary=%23B58392 */
/* Seed Colors: primary: #6750A4, secondary: #958DA4, tertiary: #B58392, error: #FF5449, neutral: #938F94, neutral-variant: #948F99 */
/* Seed Typography: plain-font-family: Roboto, brand-font-family: Roboto, bold-font-weight: 700, medium-font-weight: 500, regular-font-weight: 400 */
/* Make sure to import fonts in `<head>` of html */
/*
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap');
</style>
OR
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap">
*/
@use "@angular/material" as mat;
@@ -127,122 +139,67 @@
));
}
/* Typography */
:root, :host {
/* core typography tokens are not generating css variables, hence below */
--mat-sys-brand-font-family: Roboto;
--mat-sys-plain-font-family: Roboto;
--mat-sys-bold-font-weight: 700;
--mat-sys-medium-font-weight: 500;
--mat-sys-regular-font-weight: 400;
// https://theme-builder-1623190217839.web.app/
// @use '@angular/material' as mat;
// @import "Material-Icons";
// @import "Roboto";
/*
// Be sure that you only ever include this mixin once!
@include mat.core();
// Define your theme with color palettes, typography and density
$mat-theme-primary-palette: map-merge(mat.$cyan-palette, ( contrast: (100: #150c4a,)));
$mat-theme-primary: mat.define-palette(
$mat-theme-primary-palette,
$default: 100,
$lighter: 100,
$darker: 700,
$text: 500
);
$mat-theme-accent-palette: map-merge(mat.$teal-palette, ( 501: #4d77b6,contrast: (501: white,A100: white,A200: white,)));
$mat-theme-accent: mat.define-palette(
$mat-theme-accent-palette,
$default: 501,
$lighter: A100,
$darker: A200,
$text: 600
);
$mat-theme-warn-palette: map-merge(mat.$pink-palette, ( ));
$mat-theme-warn: mat.define-palette(
$mat-theme-warn-palette,
$default: A200,
$lighter: 500,
$darker: 500,
$text: A700
);
$mat-dark-theme-primary-palette: map-merge(mat.$lime-palette, ( contrast: (200: #030844,A100: rgba(0,0,0, 0.87),A700: rgba(0,0,0, 0.87),)));
$mat-dark-theme-primary: mat.define-palette(
$mat-dark-theme-primary-palette,
$default: 200,
$lighter: A100,
$darker: A700,
$text: 700
);
$mat-dark-theme-accent-palette: map-merge(mat.$green-palette, ( contrast: (A200: black,50: black,A400: black,)));
$mat-dark-theme-accent: mat.define-palette(
$mat-dark-theme-accent-palette,
$default: A200,
$lighter: 50,
$darker: A400,
$text: A100
);
$mat-dark-theme-warn-palette: map-merge(mat.$pink-palette, ( contrast: (A100: black,100: white,)));
$mat-dark-theme-warn: mat.define-palette(
$mat-dark-theme-warn-palette,
$default: A100,
$lighter: 100,
$darker: A700,
$text: 100
);
// @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
$mat-typography: mat.define-typography-config(
$font-family: 'Rubik',
$display-4: mat.define-typography-level($font-size: 96px, $font-weight: 300, $font-family: Rubik),
$display-3: mat.define-typography-level($font-size: 60px, $font-weight: 500, $font-family: Rubik),
$display-2: mat.define-typography-level($font-size: 48px, $font-weight: 500, $font-family: Rubik),
$display-1: mat.define-typography-level($font-size: 34px, $font-weight: 500, $font-family: Rubik),
$headline: mat.define-typography-level($font-size: 24px, $font-weight: 500, $font-family: Rubik),
$title: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: Rubik),
$subheading-2: mat.define-typography-level($font-size: 18px, $font-weight: 500, $font-family: Rubik),
$subheading-1: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: Rubik),
$body-2: mat.define-typography-level($font-size: 16px, $font-weight: 400, $font-family: Rubik),
$body-1: mat.define-typography-level($font-size: 18px, $font-weight: 400, $font-family: Rubik),
$caption: mat.define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: Rubik),
$button: mat.define-typography-level($font-size: 16px, $font-weight: 500, $font-family: Rubik),
// Line-height must be unit-less fraction of the font-size.
$input: mat.define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: Rubik),
);
$mat-density: 0;
// @include mat.elevation(
// $zValue: 12,
// $color: #000,
// $opacity: 0.5
// );
$mat-core-theme: mat.define-light-theme((
color: (
primary: $mat-theme-primary,
accent: $mat-theme-accent,
warn: $mat-theme-warn
),
typography: $mat-typography,
density: $mat-density
@include mat.theme-overrides((
brand-family: Roboto,
plain-family: Roboto,
bold-weight: 700,
medium-weight: 500,
regular-weight: 400,
headline-large-font: var(--mat-sys-brand-font-family),
headline-medium-font: var(--mat-sys-brand-font-family),
headline-small-font: var(--mat-sys-brand-font-family),
display-large-font: var(--mat-sys-brand-font-family),
display-medium-font: var(--mat-sys-brand-font-family),
display-small-font: var(--mat-sys-brand-font-family),
title-large-font: var(--mat-sys-brand-font-family),
body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font),
body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font),
body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font),
label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font),
label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font),
label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font),
title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font),
title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font),
title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font),
headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font),
headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font),
headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font),
display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font),
display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font),
display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font),
body-large-font: var(--mat-sys-plain-font-family),
body-medium-font: var(--mat-sys-plain-font-family),
body-small-font: var(--mat-sys-plain-font-family),
label-large-font: var(--mat-sys-plain-font-family),
label-medium-font: var(--mat-sys-plain-font-family),
label-small-font: var(--mat-sys-plain-font-family),
title-medium-font: var(--mat-sys-plain-font-family),
title-small-font: var(--mat-sys-plain-font-family),
label-large-weight-prominent: var(--mat-sys-bold-font-weight),
label-medium-weight-prominent: var(--mat-sys-bold-font-weight),
label-large-weight: var(--mat-sys-medium-font-weight),
label-medium-weight: var(--mat-sys-medium-font-weight),
label-small-weight: var(--mat-sys-medium-font-weight),
title-medium-weight: var(--mat-sys-medium-font-weight),
title-small-weight: var(--mat-sys-medium-font-weight),
body-large-weight: var(--mat-sys-regular-font-weight),
body-medium-weight: var(--mat-sys-regular-font-weight),
body-small-weight: var(--mat-sys-regular-font-weight),
display-large-weight: var(--mat-sys-regular-font-weight),
display-medium-weight: var(--mat-sys-regular-font-weight),
display-small-weight: var(--mat-sys-regular-font-weight),
headline-large-weight: var(--mat-sys-regular-font-weight),
headline-medium-weight: var(--mat-sys-regular-font-weight),
headline-small-weight: var(--mat-sys-regular-font-weight),
title-large-weight: var(--mat-sys-regular-font-weight),
));
$mat-dark-theme: mat.define-dark-theme((
color: (
primary: $mat-dark-theme-primary,
accent: $mat-dark-theme-accent,
warn: $mat-dark-theme-warn,
)
));
@include mat.all-component-themes($mat-core-theme);
.dark-theme {
@include mat.all-component-colors($mat-dark-theme);
}
*/
}

View File

@@ -9,6 +9,10 @@
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Roboto&display=swap");
</style>
</head>
<body class="mat-app-background">