Facti13.Frontend.Angular/src/styles.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// 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.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$f13_ang_web-primary: mat.define-palette(mat.$red-palette);
$f13_ang_web-accent: mat.define-palette(mat.$red-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$f13_ang_web-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$f13_ang_web-theme: mat.define-light-theme((
  color: (
    primary: $f13_ang_web-primary,
    accent: $f13_ang_web-accent,
    warn: $f13_ang_web-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($f13_ang_web-theme);

/* You can add global styles to this file, and also import other style files */

@font-face {
  font-family: Lato;
  src: url('assets/fonts/Lato-Regular.ttf') format('truetype');
}

@font-face {
  font-family: LatoBlack;
  src: url('assets/fonts/Lato-Black.ttf') format('truetype');
}

@font-face {
  font-family: LatoThin;
  src: url('assets/fonts/Lato-Thin.ttf') format('truetype');
}

@font-face {
  font-family: LatoRegular;
  src: url('assets/fonts/Lato-Regular.ttf') format('truetype');
}


html, body { height: 100%; }
body { margin: 0; font-family: Lato, Roboto, "Helvetica Neue", sans-serif; }

h1,h2,h3,h4,h5,h6 {
  font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif;
  color: #fbf1d7;
}

span {
  font-family: LatoRegular, Roboto, "Helvetica Neue", sans-serif;
}

.lato {
  font-family: LatoBlack, Roboto, "Helvetica Neue", sans-serif;
}

.mat-card-subtitle, mat-card-content {
  font-family: LatoRegular, Roboto, "Helvetica Neue", sans-serif;
}

.spacer {
  flex: 1 1 auto;
}

.f13_color_primary {
  color: #ef7f41;
}

.f13_color_secondary {
  color: #d6473c;
}

.f13_color_extra {
  color: #5e7edf;
}

//размеры говна начало

.content-in-center {
  width: 66%; margin: 0 auto
}

.content-in-center-header {
  display: flex;
  width: 66%;
  padding-left: calc((100% - 66%)/2);
  padding-right: calc((100% - 66%)/2);
  margin: 0 auto;
  background: linear-gradient(to top, #f2a998, #e65e11);
}

.f13_l {
  padding-left: calc((100% - 66%)/2);
  cursor: pointer
}

.f13_r {
  padding-right: calc((100% - 66%)/2);
}

.container {
  padding: 24px;
}

.mat-expansion-panel-body {
  padding: 0 24px 16px !important;
}

@media only screen and (max-width: 600px) {
  $screen-width: 95%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }

  .f13_l {
    padding-left: calc((100% - $screen-width)/2);
  }

  .f13_r {
    padding-right: calc((100% - $screen-width)/2);
  }

  .container {
    padding: 1px;
  }

  .mat-expansion-panel-body {
    padding: 0 1px 1px !important;
  }
}

@media only screen and (min-width: 600px) {
  $screen-width: 90%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }

  .f13_l {
    padding-left: calc((100% - $screen-width)/2);
  }

  .f13_r {
    padding-right: calc((100% - $screen-width)/2);
  }

  .container {
    padding: 4px;
  }

  .mat-expansion-panel-body {
    padding: 0 4px 2px !important;
  }
}

@media only screen and (min-width: 768px) {
  $screen-width: 80%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }

  .f13_l {
    padding-left: calc((100% - $screen-width)/2);
  }

  .f13_r {
    padding-right: calc((100% - $screen-width)/2);
  }

  .container {
    padding: 8px;
  }

  .mat-expansion-panel-body {
    padding: 0 8px 4px !important;
  }
}

@media only screen and (min-width: 992px) {
  $screen-width: 80%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }

  .f13_l {
    padding-left: calc((100% - $screen-width)/2);
  }

  .f13_r {
    padding-right: calc((100% - $screen-width)/2);
  }

  .container {
    padding: 16px;
  }

  .mat-expansion-panel-body {
    padding: 0 16px 12px !important;
  }
}

@media only screen and (min-width: 1200px) {
  $screen-width: 70%;

  .content-in-center {
    width: $screen-width;
  }

  .content-in-center-header {
    width: $screen-width;
    padding-left: calc((100% - $screen-width)/2);
    padding-right: calc((100% - $screen-width)/2);
  }

  .f13_l {
    padding-left: calc((100% - $screen-width)/2);
  }

  .f13_r {
    padding-right: calc((100% - $screen-width)/2);
  }

  .container {
    padding: 24px;
  }

  .mat-expansion-panel-body {
    padding: 0 24px 16px !important;
  }
}

//размеры говна конец

.content-in-border {
  border-radius: 15px;
  background-color: #f5f5f5;
  padding: 15px;
  margin-top: 15px
}


.responsive-grid-100 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 24px;
}

.responsive-grid-250 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 24px;
}

.responsive-grid-100 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 24px;
}

.responsive-grid-300 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

.responsive-grid-400 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.loading-shade {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.err {
  max-width: 360px;
  text-align: center;
  background: white;
  border-radius: 15px;
  border: 0px solid black;
}

.img-in-header {
  width: 15%;
}

.main-content-in-header {
  width: 65%
}

@media only screen and (max-width: 600px) {
  .img-in-header {
    display: none;
  }

  .main-content-in-header {
    width: 100%;
  }
}

@media only screen and (min-width: 600px) {
  .img-in-header {
    display: none;
  }

  .main-content-in-header {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .img-in-header {
    display: none;
  }

  .main-content-in-header {
    width: 100%;
  }
}

@media only screen and (min-width: 992px) {
  .img-in-header {
    display: unset;
    width: 15%;
  }

  .main-content-in-header {
    width: 75%;
  }
}

@media only screen and (min-width: 1200px) {
  .img-in-header {
    display: unset;
    width: 15%;
  }

  .main-content-in-header {
    width: 65%;
  }
}

.mat-dialog-content {
  padding-bottom: 1% !important;
}

.clickable {
  cursor: pointer
}

mat-card + .clickable:hover {
  background: linear-gradient(to top, #f2a998, #e65e11);;
}