TheLanc3/YoutubeDL-Material
1
0
Fork 0
mirror of https://github.com/Tzahi12345/YoutubeDL-Material.git synced 2026-04-19 00:31:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed styles.scss

Browse Source
This commit is contained in:
Isaac Abadi
2022-04-22 22:07:50 -04:00
parent 5025b235b7
commit 5a44229e24
1 changed files with 20 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/styles.scss
View File

@@ -1,7 +1,4 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@use '~@angular/material' as mat;
@import '~material-icons/iconfont/material-icons.css';
@import '@angular/material/prebuilt-themes/indigo-pink.css'; @import '@angular/material/prebuilt-themes/indigo-pink.css';
@@ -17,45 +14,41 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
// Plus imports for other components in your app. // Plus imports for other components in your app.
/*// Typography /*// Typography
$custom-typography: mat.define-typography-config( $custom-typography: mat-typography-config(
$font-family: Raleway, $font-family: Raleway,
$headline: mat.define-typography-level(24px, 48px, 400), $headline: mat-typography-level(24px, 48px, 400),
$body-1: mat.define-typography-level(16px, 24px, 400) $body-1: mat-typography-level(16px, 24px, 400)
); );
@include mat.all-component-typographies($custom-typography); @include angular-material-typography($custom-typography);
*/ */
// Default colors // Default colors
$my-app-primary: mat.define-palette(mat.$light-blue-palette, 700, 100, 800); $my-app-primary: mat-palette($mat-light-blue, 700, 100, 800);
$my-app-accent: mat.define-palette(mat.$blue-palette, 700, 100, 800); $my-app-accent: mat-palette($mat-blue, 700, 100, 800);
$my-app-warn: mat.define-palette(mat.$red-palette, 700, 100, 800); $my-app-warn: mat-palette($mat-red, 700, 100, 800);
$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent, $my-app-warn); $my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include mat.all-component-themes($my-app-theme); @include angular-material-theme($my-app-theme);
// Dark theme // Dark theme
$dark-primary: mat.define-palette(mat.$light-blue-palette, 700, 100, 800); $dark-primary: mat-palette($mat-indigo);
$dark-accent: mat.define-palette(mat.$blue-palette); $dark-accent: mat-palette($mat-blue);
$dark-warn: mat.define-palette(mat.$deep-orange-palette); $dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn); $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
.dark-theme { .dark-theme {
@include mat.all-component-themes($dark-theme); @include angular-material-theme($dark-theme);
}
.mat-stroked-button, .mat-raised-button, .mat-flat-button {
border-radius: 24px !important
} }
// Light theme // Light theme
$light-primary: mat.define-palette(mat.$grey-palette, 200, 500, 300); $light-primary: mat-palette($mat-grey, 200, 500, 300);
$light-accent: mat.define-palette(mat.$brown-palette, 200); $light-accent: mat-palette($mat-brown, 200);
$light-warn: mat.define-palette(mat.$deep-orange-palette, 200); $light-warn: mat-palette($mat-deep-orange, 200);
$light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn); $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);
.light-theme { .light-theme {
@include mat.all-component-themes($light-theme); @include angular-material-theme($light-theme)
} }
.no-outline { .no-outline {
@@ -66,7 +59,7 @@ $light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn)
// Include the common styles for Angular Material. We include this here so that you only // Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app. // have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once! // Be sure that you only ever include this mixin once!
@include mat.core(); @include mat-core();
// @import '../node_modules/@angular/material/theming'; // @import '../node_modules/@angular/material/theming';