автоматическое исправление scss

client/.stylelintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
   "rules": {
-    "selector-class-pattern": null
+    "selector-class-pattern": null,
+    "scss/load-partial-extension": "always"
   }
 }

client/README.md

@@ -3,6 +3,7 @@
 A Al project
 
 ## Install the dependencies
+
 ```bash
 yarn
 # or
@@ -10,24 +11,25 @@ npm install
 ```
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
+
 ```bash
 quasar dev
 ```
 
-
 ### Lint the files
+
 ```bash
 yarn lint
 # or
 npm run lint
 ```
 
-
-
 ### Build the app for production
+
 ```bash
 quasar build
 ```
 
 ### Customize the configuration
+
 See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).

client/babel.config.cjs

@@ -5,9 +5,7 @@ module.exports = (api) => {
     presets: [
       [
         '@quasar/babel-preset-app',
-        api.caller((caller) => caller && caller.target === 'node')
+        api.caller((caller) => caller && caller.target === 'node') ? { targets: { node: 'current' } } : {},
-          ? { targets: { node: 'current' } }
-          : {},
       ],
     ],
   };

client/jsconfig.json

@@ -2,38 +2,16 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "src/*": [
+      "src/*": ["src/*"],
-        "src/*"
+      "app/*": ["*"],
-      ],
+      "components/*": ["src/components/*"],
-      "app/*": [
+      "layouts/*": ["src/layouts/*"],
-        "*"
+      "pages/*": ["src/pages/*"],
-      ],
+      "assets/*": ["src/assets/*"],
-      "components/*": [
+      "boot/*": ["src/boot/*"],
-        "src/components/*"
+      "stores/*": ["src/stores/*"],
-      ],
+      "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
-      "layouts/*": [
-        "src/layouts/*"
-      ],
-      "pages/*": [
-        "src/pages/*"
-      ],
-      "assets/*": [
-        "src/assets/*"
-      ],
-      "boot/*": [
-        "src/boot/*"
-      ],
-      "stores/*": [
-        "src/stores/*"
-      ],
-      "vue$": [
-        "node_modules/vue/dist/vue.runtime.esm-bundler.js"
-      ]
     }
   },
-  "exclude": [
+  "exclude": ["dist", ".quasar", "node_modules"]
-    "dist",
+}
-    ".quasar",
-    "node_modules"
-  ]
-}

client/package.json

@@ -7,7 +7,7 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.vue ./",
-    "lint:fix": "eslint --ext .js,.vue --fix ./",
+    "lint:fix": "eslint --ext .js,.vue, --fix ./",
     "lint:css": "stylelint '**/*.scss'",
     "lint:css:fix": "npm run lint:css -- --fix",
     "test": "echo \"No test specified\" && exit 0",

client/src/assets/css/common.scss

@@ -4,14 +4,17 @@
   box-sizing: border-box;
   outline: none !important;
 }
+
 h1 {
-  margin: 0;
   position: relative;
   z-index: 2;
+  margin: 0;
 }
+
 .text {
   @mixin p;
 }
+
 .h1 {
   @mixin h1;
 }
@@ -35,10 +38,12 @@ h2 {
 
 .title {
   @mixin p;
-  color: transparent;
+
-  background-clip: text;
-  background-image: var(--linear-gradient);
   font-size: 34px;
+  color: transparent;
+  background-image: var(--linear-gradient);
+  background-clip: text;
+
   &.m--white {
     color: var(--color-white);
   }
@@ -59,21 +64,25 @@ h2 {
 .a,
 a {
   @mixin a;
-  /*@mixin a--color $color-base;*/
+
+  /* @mixin a--color $color-base; */
 }
 
 html {
   scrollbar-color: var(--color-black) var(--bg-opacity);
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
+  scrollbar-gutter: stable;
 }
+
 body {
+  padding: 0 !important;
+
+  font-family: var(--font-family-base);
   font-size: var(--base-fz);
   line-height: var(--base-lh);
-  background: var(--color-black);
-  font-family: var(--font-family-base);
   color: var(--color-white);
-  padding: 0 !important;
+
+  background: var(--color-black);
 }
 
 .button {

client/src/assets/css/index.scss

@@ -1,31 +1,29 @@
-@import "./mixins/responsive.scss";
+@import './mixins/responsive.scss';
-@import "./setting.scss";
+@import './setting.scss';
-@import "./lib/reset.css";
+@import './lib/reset.css';
 @import './lib/fonts.css';
-@import "./mixins/form.scss";
+@import './mixins/form.scss';
-@import "./mixins/text.scss";
+@import './mixins/text.scss';
-@import "./common.scss";
+@import './common.scss';
-@import "./module/app.scss";
+@import './module/app.scss';
-@import "./module/app-header.scss";
+@import './module/app-header.scss';
-@import "./module/app-footer.scss";
+@import './module/app-footer.scss';
-@import "./module/app-breadcrumbs.scss";
+@import './module/app-breadcrumbs.scss';
-@import "./module/modal.scss";
+@import './module/modal.scss';
-@import "./module/fiald.scss";
+@import './module/fiald.scss';
-@import "./module/pagination.scss";
+@import './module/pagination.scss';
-@import "./module/home.scss";
+@import './module/home.scss';
-@import "./module/team.scss";
+@import './module/team.scss';
-@import "./module/rubric.scss";
+@import './module/rubric.scss';
-@import "./module/blog.scss";
+@import './module/blog.scss';
-@import "./module/authentication.scss";
+@import './module/authentication.scss';
-@import "./module/tabs.scss";
+@import './module/tabs.scss';
-@import "./module/about.scss";
+@import './module/about.scss';
-@import "./module/playlists.scss";
+@import './module/playlists.scss';
-@import "./module/playlist.scss";
+@import './module/playlist.scss';
-@import "./module/contacts.scss";
+@import './module/contacts.scss';
-@import "./module/support.scss";
+@import './module/support.scss';
-@import "./module/player.scss";
+@import './module/player.scss';
-@import "./module/loader.scss";
+@import './module/loader.scss';
-@import "./module/profile.scss";
+@import './module/profile.scss';
-@import "./module/song.scss";
+@import './module/song.scss';
-
-

client/src/assets/css/lib/fonts.css

@@ -1,71 +1,70 @@
 @font-face {
-    font-family: 'Manrope';
+  font-family: 'Manrope';
-    /* src: url('assets/fonts/Manrope-ExtraLight.woff') format('woff'),
+  /* src: url('assets/fonts/Manrope-ExtraLight.woff') format('woff'),
         url('assets/fonts/Manrope-ExtraLight.woff2') format('woff2'),
         url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');
+  src: url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');
-    font-weight: 200;
+  font-weight: 200;
-    font-style: normal;
+  font-style: normal;
-    font-display: swap;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
+  font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Light.woff') format('woff'),
+  /*src: url('assets/fonts/Manrope-Light.woff') format('woff'),
         url('assets/fonts/Manrope-Light.woff2') format('woff2'),
         url('assets/fonts/Manrope-Light.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Light.ttf') format('truetype');
+  src: url('assets/fonts/Manrope-Light.ttf') format('truetype');
-    font-weight: 300;
+  font-weight: 300;
-    font-style: normal;
+  font-style: normal;
-    font-display: swap;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
+  font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Regular.ttf.woff') format('woff'),
+  /*src: url('assets/fonts/Manrope-Regular.ttf.woff') format('woff'),
         url('assets/fonts/Manrope-Regular.ttf.woff2') format('woff2'),
         url('assets/fonts/Manrope-Regular.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Regular.ttf') format('truetype');
+  src: url('assets/fonts/Manrope-Regular.ttf') format('truetype');
-    font-weight: 400;
+  font-weight: 400;
-    font-style: normal;
+  font-style: normal;
-    font-display: swap;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
+  font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Medium.woff') format('woff'),
+  /*src: url('assets/fonts/Manrope-Medium.woff') format('woff'),
         url('assets/fonts/Manrope-Medium.woff2') format('woff2'),
         url('assets/fonts/Manrope-Medium.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Medium.ttf') format('truetype');
+  src: url('assets/fonts/Manrope-Medium.ttf') format('truetype');
-    font-weight: 500;
+  font-weight: 500;
-    font-style: normal;
+  font-style: normal;
-    font-display: swap;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
+  font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-SemiBold.woff') format('woff'),
+  /*src: url('assets/fonts/Manrope-SemiBold.woff') format('woff'),
         url('assets/fonts/Manrope-SemiBold.woff2') format('woff2'),
         url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');
+  src: url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');
-    font-weight: 600;
+  font-weight: 600;
-    font-style: normal;
+  font-style: normal;
-    font-display: swap;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
+  font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-Bold.woff') format('woff'),
+  /*src: url('assets/fonts/Manrope-Bold.woff') format('woff'),
         url('assets/fonts/Manrope-Bold.woff2') format('woff2'),
         url('assets/fonts/Manrope-Bold.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-Bold.ttf') format('truetype');
+  src: url('assets/fonts/Manrope-Bold.ttf') format('truetype');
-    font-weight: 700;
+  font-weight: 700;
-    font-style: normal;
+  font-style: normal;
-    font-display: swap;
+  font-display: swap;
 }
 @font-face {
-    font-family: 'Manrope';
+  font-family: 'Manrope';
-    /*src: url('assets/fonts/Manrope-ExtraBold.woff') format('woff'),
+  /*src: url('assets/fonts/Manrope-ExtraBold.woff') format('woff'),
         url('assets/fonts/Manrope-ExtraBold.woff2') format('woff2'),
         url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');*/
-    src:  url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');
+  src: url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');
-    font-weight: 800;
+  font-weight: 800;
-    font-style: normal;
+  font-style: normal;
-    font-display: swap;
+  font-display: swap;
 }
-

client/src/assets/css/lib/reset.css

@@ -1,57 +1,140 @@
-html, body, div, span, applet, object, iframe,
+html,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+body,
-a, abbr, acronym, address, big, cite, code,
+div,
-del, dfn, em, img, ins, kbd, q, s, samp,
+span,
-small, strike, strong, sub, sup, tt, var,
+applet,
-b, u, i, center,
+object,
-dl, dt, dd, ol, ul, li,
+iframe,
-fieldset, form, label, legend,
+h1,
-table, caption, tbody, tfoot, thead, tr, th, td,
+h2,
-article, aside, canvas, details, embed,
+h3,
-figure, figcaption, footer, header, hgroup,
+h4,
-menu, nav, output, ruby, section, summary,
+h5,
-time, mark, audio, video {
+h6,
-    margin: 0;
+p,
-    padding: 0;
+blockquote,
-    border: 0;
+pre,
-    font: inherit;
+a,
-    font-size: 100%;
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
 }
 
-article, aside, details, figcaption, figure,
+article,
-footer, header, hgroup, menu, nav, section {
+aside,
-    display: block;
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 
 body {
-    line-height: 1;
+  line-height: 1;
 }
 
-ol, ul {
+ol,
-    list-style: none;
+ul {
+  list-style: none;
 }
 
-blockquote, q {
+blockquote,
-    quotes: none;
+q {
+  quotes: none;
 }
 
-blockquote:before, blockquote:after,
+blockquote:before,
-q:before, q:after {
+blockquote:after,
-    content: none;
+q:before,
+q:after {
+  content: none;
 }
 
 table {
-    border-collapse: collapse;
+  border-collapse: collapse;
-    border-spacing: 0;
+  border-spacing: 0;
 }
 
-input, textarea, select {
+input,
-    font-family: inherit;
+textarea,
-    font-size: inherit;
+select {
-    font-weight: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
 }
 
-img{
+img {
-    width: 100%;
+  width: 100%;
-    max-width: 100%;
+  max-width: 100%;
 }

client/src/assets/css/mixins/form.scss

@@ -1,53 +1,66 @@
 @define-mixin input {
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 1rem 1.2rem;
+
+  color: var(--color-white);
+
   background: transparent;
   border: 1px solid var(--color-white);
   border-radius: 40px;
-  padding: 1rem 1.2rem;
-  width: 100%;
-  color: var(--color-white);
-  margin-bottom: 10px;
 }
-@define-mixin button {
-  font-family: var(--font-family-base);
 
-  color: var(--color-white);
+@define-mixin button {
-  min-width: 220px;
+  cursor: pointer;
+
+  position: relative;
+  z-index: 2;
+
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
+
   box-sizing: border-box;
-  vertical-align: middle;
+  min-width: 220px;
+  min-height: 3rem;
+
+  font-family: var(--font-family-base);
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--color-white);
   text-align: center;
   text-decoration: none;
-  font-weight: 500;
+  vertical-align: middle;
-  font-size: 1rem;
-  line-height: 1rem;
-  border-radius: 100px;
-  cursor: pointer;
-  border: 1px solid var(--color-white);
-  min-height: 3rem;
-  transition: border 0.5s ease, background 0.5s ease, color 0.5s ease;
-  background: transparent;
-  position: relative;
-  z-index: 2;
 
+  background: transparent;
+  border: 1px solid var(--color-white);
+  border-radius: 100px;
+
+  transition:
+    border 0.5s ease,
+    background 0.5s ease,
+    color 0.5s ease;
 
   &:hover {
-    cursor: url("./assets/img/icon/cursor.svg"), auto;
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
     color: var(--color-black);
     background: var(--color-white);
   }
-  &-violet{
+
-    border-color: var(--color-primary);
+  &-violet {
     color: var(--color-primary);
+    border-color: var(--color-primary);
+
     &:hover {
-     border-color: transparent;
+      border-color: transparent;
     }
   }
+
   &.is-active,
   &:active {
-    cursor: url("./assets/img/icon/cursor.svg"), auto;
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
     color: var(--color-black);
     background: var(--color-white-darker);
   }
@@ -67,9 +80,10 @@
   &.m--blur {
     min-width: 0;
     padding: 1rem 1.5rem;
+
     background: var(--bg-opacity);
-    border: none;
     backdrop-filter: blur(5px);
+    border: none;
 
     &:hover {
       background: var(--color-white);
@@ -84,25 +98,30 @@
 
   &.m--arrow {
     &::after {
-      margin-left: 10px;
       content: '';
+
       width: 20px;
       height: 20px;
+      margin-left: 10px;
+
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
       background-size: cover;
-      transition: background 0.3s ease, width 0.3s ease;
+
+      transition:
+        background 0.3s ease,
+        width 0.3s ease;
     }
 
     &:hover::after {
-      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
       width: 45px;
       height: 20px;
+      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
     }
 
     &.m--active,
     &:active {
-      background:transparent;
       color: var(--color-white);
+      background: transparent;
     }
   }
 
@@ -124,7 +143,9 @@
         content: '';
         background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
         background-size: cover;
-        transition: background 0.3s ease, width 0.3s ease;
+        transition:
+          background 0.3s ease,
+          width 0.3s ease;
       }
 
       &:hover::after {
@@ -132,58 +153,65 @@
       }
     }
   }
-  &.m--text-link{
+
-    border: none;
+  &.m--text-link {
-    pad: 0;
+    @mixin a;
+
     min-width: 0;
     min-height: 0;
     padding: 0;
-    &:hover{
+
+    border: none;
+
+    pad: 0;
+
+    &:hover {
       background: transparent;
     }
-    @mixin a;
   }
+
   &.m--circle {
-    width: 56px;
-    height: 56px;
-    min-width: 0;
-    border-color: var(--color-white-opacity);
     overflow: hidden;
 
-    &:before {
+    width: 56px;
-      background: var(--linear-gradient);
+    min-width: 0;
+    height: 56px;
+
+    border-color: var(--color-white-opacity);
+
+    &::before {
       content: '';
+
       position: absolute;
-      top: 0;
+      inset: 0;
-      left: 0;
+
-      bottom: 0;
-      right: 0;
       opacity: 0;
-      transition: opacity .3s ease;
+      background: var(--linear-gradient);
+
+      transition: opacity 0.3s ease;
     }
 
-    &:after {
+    &::after {
       content: '';
+
       position: absolute;
-      top: 0;
+      inset: 0;
-      left: 0;
+      transform: rotate(-45deg);
-      bottom: 0;
+
-      right: 0;
       width: 18px;
       height: 18px;
-      margin: auto auto;
+      margin: auto;
+
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#404145FF) no-repeat 100%;
-      transform: rotate(-45deg);
     }
 
-    &:hover:before {
+    &:hover::before {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
       opacity: 1;
-      cursor: url("./assets/img/icon/cursor.svg"), auto;
     }
 
-    &:hover:after {
+    &:hover::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
     }
-
   }
 }

client/src/assets/css/mixins/responsive.scss

@@ -1,41 +1,35 @@
-@define-mixin responsive-xl{
+@define-mixin responsive-xl {
-    @media (max-width: $document-width-xl) {
+  @media (max-width: $document-width-xl) {
-        @mixin-content;
+    @mixin-content;
-
+  }
-    }
 }
 
 @define-mixin responsive-l {
-    @media (max-width: $document-width-l) {
+  @media (max-width: $document-width-l) {
-        @mixin-content;
+    @mixin-content;
-    }
+  }
 }
 
-
 @define-mixin responsive-m {
-    @media (max-width: $document-width-m) {
+  @media (max-width: $document-width-m) {
-        @mixin-content;
+    @mixin-content;
-    }
+  }
 }
 
-
 @define-mixin responsive-s {
-    @media (max-width: $document-width-s) {
+  @media (max-width: $document-width-s) {
-        @mixin-content;
+    @mixin-content;
-    }
+  }
 }
 
-
 @define-mixin responsive-xs {
-    @media (max-width: $document-width-xs) {
+  @media (max-width: $document-width-xs) {
-        @mixin-content;
+    @mixin-content;
-    }
+  }
 }
 
-
+@define-mixin responsive-xxs {
-    @define-mixin responsive-xxs {
+  @media (max-width: $document-width-xxs) {
-    @media (max-width: $document-width-xxs) {
+    @mixin-content;
-        @mixin-content;
+  }
-    }
 }
-

client/src/assets/css/mixins/text.scss

@@ -1,145 +1,161 @@
 @define-mixin __p {
-    position: relative;
+  position: relative;
-    z-index: 2;
+  z-index: 2;
-    &:first-child {
-        margin-top: 0;
-    }
 
-    &:last-child {
+  &:first-child {
-        margin-bottom: 0;
+    margin-top: 0;
-    }
+  }
 
-    &.m--mb-1 {
+  &:last-child {
-        margin-bottom: 1rem;
+    margin-bottom: 0;
-    }
+  }
 
-    &.m--mb-2 {
+  &.m--mb-1 {
-        margin-bottom: 2rem;
+    margin-bottom: 1rem;
-    }
+  }
 
-    &.m--mb-3 {
+  &.m--mb-2 {
-        margin-bottom: 3rem;
+    margin-bottom: 2rem;
-    }
+  }
 
-    &.m--mb-4 {
+  &.m--mb-3 {
-        margin-bottom: 4rem;
+    margin-bottom: 3rem;
-    }
+  }
 
-    &.m--mb-5 {
+  &.m--mb-4 {
-        margin-bottom: 5rem;
+    margin-bottom: 4rem;
-    }
+  }
+
+  &.m--mb-5 {
+    margin-bottom: 5rem;
+  }
 }
 
 @define-mixin h1 {
-    @mixin __p;
+  @mixin __p;
 
-    /*margin-top: 32px;*/
+  @mixin responsive-l {
-    margin-bottom: 1.5rem;
+    font-size: 84px;
-    font-size: 100px;
+  }
-    line-height: 1.2;
+
-    font-weight: 500;
+  @mixin responsive-m {
-    color: var(--color-white);
+    font-size: 48px;
-    padding-bottom: 6px;
+  }
-    @mixin responsive-l {
+
-        font-size: 84px;
+  @mixin responsive-s {
-    }
+    font-size: 36px;
-    @mixin responsive-m {
+  }
-        font-size: 48px;
+
-    }
+  /* margin-top: 32px; */
-    @mixin responsive-s {
+  margin-bottom: 1.5rem;
-        font-size: 36px;
+  padding-bottom: 6px;
-    }
+
+  font-size: 100px;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--color-white);
 }
 
 @define-mixin h2 {
-    @mixin __p;
+  @mixin __p;
 
-    margin: 2.5rem 0;
+  @mixin responsive-l {
-    font-size: 3.375rem;
+    font-size: 40px;
-    line-height: 1.3;
+    line-height: 1.1;
-    font-weight: 500;
+  }
-    color: transparent;
+
-    padding-bottom: 6px;
+  @mixin responsive-m {
-    background-clip: text;
+    font-size: 32px;
-    background-image: var(--linear-gradient);
+  }
-    text-transform: uppercase;
+
-    @mixin responsive-l {
+  margin: 2.5rem 0;
-        font-size:40px;
+  padding-bottom: 6px;
-        line-height: 1.1;
+
-    }
+  font-size: 3.375rem;
-    @mixin responsive-m {
+  font-weight: 500;
-        font-size:32px;
+  line-height: 1.3;
-    }
+  color: transparent;
-    /*@mixin responsive-s {
+  text-transform: uppercase;
+
+  background-image: var(--linear-gradient);
+  background-clip: text;
+
+  /* @mixin responsive-s {
         font-size: 36px;
-    }*/
+    } */
-    &.m--white {
+  &.m--white {
-        color: var(--color-white);
+    margin: 1.5rem 0;
-        margin: 1.5rem 0;
+    color: var(--color-white);
-    }
+  }
 
-    &.m--border {
+  &.m--border {
-        &:after {
+    &::after {
-            margin-top: 10px;
+      content: '';
-            content: '';
-            display: block;
-            background: url("./assets/img/icon/borderLine.svg");
-            max-width: 260px;
-            width: 100%;
-            height: 10px;
-        }
-    }
 
-    a {
+      display: block;
-        text-decoration: none;
-        font-weight: 500;
-        color: var(--color-white);
-        transition: color 0.5s ease;
 
-        &:hover {
+      width: 100%;
-            color: var(--color-white);
+      max-width: 260px;
-        }
+      height: 10px;
+      margin-top: 10px;
+
+      background: url('./assets/img/icon/borderLine.svg');
     }
+  }
+
+  a {
+    font-weight: 500;
+    color: var(--color-white);
+    text-decoration: none;
+    transition: color 0.5s ease;
+
+    &:hover {
+      color: var(--color-white);
+    }
+  }
 }
 
 @define-mixin h3 {
-    @mixin __p;
+  @mixin __p;
 
-    margin-top: 24px;
+  margin-top: 24px;
-    margin-bottom: 16px;
+  margin-bottom: 16px;
-    font-weight: 700;
+
-    font-size: 20px;
+  font-size: 20px;
-    line-height: 1.2;
+  font-weight: 700;
+  line-height: 1.2;
 }
 
 @define-mixin h4 {
-    @mixin __p;
+  @mixin __p;
 
-    margin-top: 16px;
+  margin-top: 16px;
-    margin-bottom: 8px;
+  margin-bottom: 8px;
-    font-weight: 500;
+
-    font-size: 18px;
+  font-size: 18px;
-    line-height: 1.2;
+  font-weight: 500;
+  line-height: 1.2;
 }
 
 @define-mixin p {
-    @mixin __p;
+  @mixin __p;
-    margin-top: 8px;
+
-    margin-bottom: 8px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 
 @define-mixin ul {
-    @mixin p;
+  @mixin p;
 
-    list-style: none;
+  padding: 0;
-    padding: 0;
+  list-style: none;
 
-    li {
+  li {
-        padding-left: 15px;
+    position: relative;
-        position: relative;
+    margin-bottom: 16px;
-        margin-bottom: 16px;
+    padding-left: 15px;
 
-        /* &:before {
+    /* &:before {
              content: '';
              position: absolute;
              left: 0;
@@ -150,187 +166,206 @@
              background-position: center;
              background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
              background-repeat: no-repeat;
-         }*/
+         } */
-        &:before {
+    &::before {
-            content: '';
+      content: '';
-            position: absolute;
-            left: 0;
-            width: 5px;
-            height: 5px;
-            top: 7px;
-            background: var(--color-white);
-            border-radius: 50%;
-        }
 
-        &:last-child {
+      position: absolute;
-            margin-bottom: 0;
+      top: 7px;
-        }
+      left: 0;
+
+      width: 5px;
+      height: 5px;
+
+      background: var(--color-white);
+      border-radius: 50%;
     }
 
-    &.m--dots {
+    &:last-child {
-        li {
+      margin-bottom: 0;
-            padding-left: 1rem;
-
-            &:before {
-                content: '•';
-                top: 0;
-                height: auto;
-                width: auto;
-                background: none;
-            }
-        }
     }
+  }
+
+  &.m--dots {
+    li {
+      padding-left: 1rem;
+
+      &::before {
+        content: '•';
+
+        top: 0;
+
+        width: auto;
+        height: auto;
+
+        background: none;
+      }
+    }
+  }
 }
 
 @define-mixin ol {
-    @mixin p;
+  @mixin p;
 
-    list-style: none;
+  counter-reset: item;
-    counter-reset: item;
+  list-style: none;
-    li {
-        counter-increment: item;
-        margin-bottom: 16px;
-        vertical-align: middle;
 
-        &:before {
+  li {
-            content: counter(item);
+    counter-increment: item;
-            padding-left: 12px;
+    margin-bottom: 16px;
-            font-weight: 500;
+    vertical-align: middle;
-            font-size: 18px;
+
-            line-height: 24px;
+    &::before {
-            color: var(--color-white);
+      content: counter(item);
-        }
+
+      padding-left: 12px;
+
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 24px;
+      color: var(--color-white);
     }
+  }
 }
 
 @define-mixin hr {
-    @mixin p;
+  @mixin p;
 }
 
 @define-mixin a {
+  position: relative;
+  z-index: 2;
+
+  font-weight: 500;
+  color: var(--color-white);
+  text-decoration: none;
+
+  transition: all 0.5s ease;
+
+  &:hover {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    color: transparent;
     text-decoration: none;
-    font-weight: 500;
+
-    transition: all 0.5s ease;
+    background-image: var(--linear-gradient);
-    color: var(--color-white);
+    background-clip: text;
-    position: relative;
+  }
-    z-index: 2;
+
+  &.m--link {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid transparent;
+
+    &::after {
+      content: '';
+
+      width: 20px;
+      height: 20px;
+      margin-left: 10px;
+
+      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
+      background-size: cover;
+
+      transition:
+        background 0.3s ease,
+        width 0.3s ease;
+    }
+
     &:hover {
-        color: transparent;
+      color: var(--color-white);
-        -webkit-background-clip: text;
+      border-bottom: 1px solid var(--color-white);
-        background-image: var(--linear-gradient);
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-        text-decoration: none;
     }
 
-    &.m--link {
+    &:hover::after {
-        display: flex;
+      width: 40px;
-        align-items: center;
-        border-bottom: 1px solid transparent;
-
-        &::after {
-            margin-left: 10px;
-            content: '';
-            width: 20px;
-            height: 20px;
-            background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
-            background-size: cover;
-            transition: background 0.3s ease, width 0.3s ease;
-        }
-
-        &:hover {
-            color: var(--color-white);
-            border-bottom: 1px solid var(--color-white);
-        }
-
-        &:hover::after {
-            width: 40px;
-        }
     }
+  }
 
-    &.m--underline {
+  &.m--underline {
-        text-decoration: underline;
+    text-decoration: underline;
-    }
+  }
 }
 
 @define-mixin a--color $color {
-    color: $color;
+  color: $color;
-    border-color: rgba($color, 0.5);
+  border-color: rgba($color, 0.5);
 }
 
 @define-mixin table {
-    /* dummy */
+  /* dummy */
 }
 
 @define-mixin base {
-    font: $font-size-base/$line-height-base $font-family-base;
+  font: $font-size-base/$line-height-base $font-family-base;
-    color: $color-base;
+  color: $color-base;
 }
 
 @define-mixin format {
-    h1:not(.nostyle) {
+  h1:not(.nostyle) {
-        @mixin h1;
+    @mixin h1;
-    }
+  }
 
-    h2:not(.nostyle) {
+  h2:not(.nostyle) {
-        @mixin h2;
+    @mixin h2;
-    }
+  }
 
-    h3:not(.nostyle) {
+  h3:not(.nostyle) {
-        @mixin h3;
+    @mixin h3;
-    }
+  }
 
-    h4:not(.nostyle) {
+  h4:not(.nostyle) {
-        @mixin h4;
+    @mixin h4;
-    }
+  }
 
-    p:not(.nostyle) {
+  p:not(.nostyle) {
-        @mixin p;
+    @mixin p;
-    }
+  }
 
-    ul:not(.nostyle) {
+  ul:not(.nostyle) {
-        @mixin ul;
+    @mixin ul;
-    }
+  }
 
-    ol:not(.nostyle) {
+  ol:not(.nostyle) {
-        @mixin ol;
+    @mixin ol;
-    }
+  }
 
-    hr:not(.nostyle) {
+  hr:not(.nostyle) {
-        @mixin hr;
+    @mixin hr;
-    }
+  }
 
-    a:not(.nostyle) {
+  a:not(.nostyle) {
-        @mixin a;
+    @mixin a;
-    }
+  }
 
-    table:not(.nostyle) {
+  table:not(.nostyle) {
-        @mixin table;
+    @mixin table;
-    }
+  }
 
-    b:not(.nostyle),
+  b:not(.nostyle),
-    strong:not(.nostyle) {
+  strong:not(.nostyle) {
-        font-weight: bold;
+    font-weight: bold;
-    }
+  }
 
-    i:not(.nostyle),
+  i:not(.nostyle),
-    em:not(.nostyle) {
+  em:not(.nostyle) {
-        font-style: italic;
+    font-style: italic;
-    }
+  }
 
-    u:not(.nostyle),
+  u:not(.nostyle),
-    ins:not(.nostyle) {
+  ins:not(.nostyle) {
-        text-decoration: underline;
+    text-decoration: underline;
-    }
+  }
 
-    strike:not(.nostyle),
+  strike:not(.nostyle),
-    del:not(.nostyle) {
+  del:not(.nostyle) {
-        text-decoration: line-through;
+    text-decoration: line-through;
-    }
+  }
 }
 
 @define-mixin text {
-    @mixin format;
+  @mixin format;
 
-    font: $font-size-text/$line-height-text $font-family-text;
+  font: $font-size-text/$line-height-text $font-family-text;
-    color: $color-text;
+  color: $color-text;
 }

client/src/assets/css/module/app-breadcrumbs.scss

@@ -2,16 +2,20 @@
   display: flex;
   margin-top: 80px;
   margin-bottom: var(--space-between-block);
+
   &__item {
     display: flex;
     align-items: center;
-    &:last-child:after {
+
+    &::after {
+      content: '/';
+      margin: 0 10px;
+    }
+
+    &:last-child::after {
       display: none;
     }
-    &:after {
+
-      margin: 0 10px;
-      content: '/';
-    }
     &-link {
       font-size: 0.875rem;
     }

client/src/assets/css/module/app-footer.scss

@@ -1,81 +1,87 @@
 .footer {
-    padding-bottom: var(--space-between-block);
+  width: 100%;
-    width: 100%;
+  padding-bottom: var(--space-between-block);
 
-    &__top {
+  &__top {
-        padding-bottom: 80px;
+    margin-bottom: 80px;
-        margin-bottom: 80px;
+    padding-bottom: 80px;
-        border-bottom: 1px solid var(--color-white-opacity);
+    border-bottom: 1px solid var(--color-white-opacity);
+  }
+
+  &__question {
+    @mixin responsive-xs {
+      flex-direction: column;
+      align-items: flex-start;
     }
 
-    &__question {
+    display: flex;
-        display: flex;
+    gap: 10px;
-        align-items: center;
+    align-items: center;
-        justify-content: space-between;
+    justify-content: space-between;
-        gap: 10px;
-        @mixin responsive-xs {
-            align-items: flex-start;
-            flex-direction: column;
-        }
 
-        &-button {
+    &-button {
-            margin-left: auto;
+      margin-left: auto;
-        }
+    }
+  }
+
+  &__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  &__menu {
+    @mixin responsive-m {
+      grid-row-gap: 10px;
+      grid-template-columns: min-content min-content min-content;
+      grid-template-rows: min-content;
+
+      width: 100%;
+      margin-bottom: var(--space-between-block);
     }
 
-    &__bottom {
+    @mixin responsive-s {
-        display: flex;
+      display: flex;
-        justify-content: space-between;
+      flex-wrap: wrap;
-        flex-wrap: wrap;
     }
 
-    &__menu {
+    display: grid;
-        display: grid;
+    grid-gap: var(--space-between-block) var(--space-between-sections);
-        grid-template-columns: var(--space-between-sections) var(--space-between-sections);
+    grid-template-columns: var(--space-between-sections) var(--space-between-sections);
-        grid-template-rows: fit-content fit-content;
+    grid-template-rows: fit-content fit-content;
-        grid-column-gap: var(--space-between-sections);
-        grid-row-gap: var(--space-between-block);
-        @mixin responsive-m {
-            width: 100%;
-            grid-row-gap: 10px;
-            grid-template-rows: min-content;
-            grid-template-columns: min-content min-content min-content;
-            margin-bottom: var(--space-between-block);
-        }
-        @mixin responsive-s {
-            display: flex;
-            flex-wrap: wrap;
-        }
-        &-item {
-            @mixin responsive-s {
-                width: 100%;
-            }
-        }
 
-        &-link {
+    &-item {
-            font-size: 1.2rem;
+      @mixin responsive-s {
-        }
+        width: 100%;
+      }
     }
 
-    &__social {
+    &-link {
-        display: flex;
+      font-size: 1.2rem;
-        flex-wrap: wrap;
+    }
-        gap: var(--space-between-block);
+  }
-        @mixin responsive-m {
+
-            margin-bottom: var(--space-between-block);
+  &__social {
-            grid-row-gap: 10px;
+    @mixin responsive-m {
-        }
+      grid-row-gap: 10px;
+      margin-bottom: var(--space-between-block);
     }
 
-    &__connection {
+    display: flex;
-        display: flex;
+    flex-wrap: wrap;
-        flex-direction: column;
+    gap: var(--space-between-block);
-        align-items: flex-end;
+  }
-        justify-content: space-between;
+
-        gap: 1rem;
+  &__connection {
-        @mixin responsive-m {
+    @mixin responsive-m {
-            width: 100%;
+      align-items: flex-start;
-            align-items: flex-start;
+      width: 100%;
-        }
     }
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
 }

client/src/assets/css/module/app-header.scss

@@ -1,186 +1,204 @@
 .header {
-    position: sticky;
+  @mixin responsive-l {
-    top: -30px;
+    top: 0;
-    z-index: 11;
+  }
-    width: 100%;
+
-    backdrop-filter: blur(100px);
+  position: sticky;
+  z-index: 11;
+  top: -30px;
+
+  width: 100%;
+
+  backdrop-filter: blur(100px);
+
+  &__wrapper {
     @mixin responsive-l {
-        top: 0;
+      padding: 10px 20px;
     }
 
-    &__wrapper {
+    display: flex;
-        padding: 40px 20px 10px;
+    align-items: center;
-        width: 100%;
+    width: 100%;
-        display: flex;
+    padding: 40px 20px 10px;
-        align-items: center;
+  }
-        @mixin responsive-l {
+
-            padding: 10px 20px;
+  &__logo {
-        }
+    position: relative;
+    width: 220px;
+    height: 43px;
+    margin-right: auto;
+
+    &.m--menu {
+      @mixin responsive-l {
+        display: block;
+      }
+
+      display: none;
+      margin-bottom: var(--space-between-block);
     }
 
-    &__logo {
+    &:hover {
-        position: relative;
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
-        width: 220px;
+    }
-        height: 43px;
+  }
-        margin-right: auto;
 
-        &.m--menu {
+  &__menu {
-            display: none;
+    @mixin responsive-xl {
-            margin-bottom: var(--space-between-block);
+      gap: 20px;
-            @mixin responsive-l {
+    }
-                display: block;
+
-            }
+    @mixin responsive-l {
+      position: fixed;
+      z-index: 10;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+
+      flex-direction: column;
+      align-items: start;
+
+      width: 320px;
+      min-height: calc(100vh + 30px);
+      padding: 40px 20px 0;
+
+      background: var(--color-black);
+
+      &.m--active {
+        transform: translateX(0);
+      }
+    }
+
+    display: flex;
+    align-items: center;
+    transition: transform 0.3s ease;
+
+    &-item {
+      @mixin responsive-xl {
+        margin: 0 10px;
+
+        &.m--tools {
+          margin: 0 5px 0 10px;
         }
+      }
+
+      @mixin responsive-l {
+      }
+
+      margin: 0 25px;
+
+      &.m--tools {
+        margin: 0 10px 0 25px;
+      }
+    }
+
+    &-link {
+      text-transform: uppercase;
+
+      &.is-subactive {
+        color: transparent;
+        background-image: var(--linear-gradient);
+        background-clip: text;
+      }
+    }
+
+    &-icon {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+      width: 24px;
+      height: 24px;
+
+      background: none;
+      border: none;
+
+      transition: all 0.3s ease;
+
+      &.m--profile {
+        background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%;
 
         &:hover {
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
+          background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-white) no-repeat 100%;
         }
+      }
+
+      &.m--exit {
+        background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-primary) no-repeat 100%;
+
+        &:hover {
+          background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-white) no-repeat 100%;
+        }
+      }
+    }
+  }
+
+  &__btn {
+    @mixin responsive-l {
+      margin-top: auto;
+      margin-bottom: 60px;
+    }
+  }
+
+  &__burger {
+    @mixin responsive-l {
+      display: block;
     }
 
-    &__menu {
+    position: relative;
-        display: flex;
+    display: none;
-        align-items: center;
+    width: 38px;
-        transition: transform .3s ease;
+    height: 24px;
-        @mixin responsive-xl {
-            gap: 20px;
-        }
-        @mixin responsive-l {
-            position: fixed;
-            flex-direction: column;
-            align-items: start;
-            top: 0;
-            left: 0;
-            width: 320px;
-            bottom: 0;
-            min-height: calc(100vh + 30px);
-            transform: translateX(-100%);
-            background: var(--color-black);
-            padding: 40px 20px 0;
-            z-index: 10;
-            &.m--active {
-                transform: translateX(0);
-            }
-        }
 
+    &::after,
+    &::before,
+    span {
+      content: '';
 
-        &-item {
+      position: absolute;
-            margin: 0 25px;
 
-            &.m--tools {
+      width: 100%;
-                margin: 0 10px 0 25px;
+      height: 4px;
-            }
 
-            @mixin responsive-xl {
+      background: var(--color-white);
-                margin: 0 10px;
+      border-radius: 20px;
-                &.m--tools {
-                    margin: 0 5px 0 10px;
-                }
-            }
-            @mixin responsive-l {
 
-            }
+      transition: all 0.3s ease;
-        }
-
-        &-link {
-            text-transform: uppercase;
-
-            &.is-subactive {
-                color: transparent;
-                -webkit-background-clip: text;
-                background-image: var(--linear-gradient);
-            }
-        }
-
-        &-icon {
-            background: none;
-            border: none;
-            width: 24px;
-            height: 24px;
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
-            transition: all .3s ease;
-
-            &.m--profile {
-                background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-primary) no-repeat 100%;
-
-                &:hover {
-                    background: svg-load('./assets/img/icon/user-icon.svg', stroke=$color-white) no-repeat 100%;
-                }
-            }
-
-            &.m--exit {
-                background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-primary) no-repeat 100%;
-
-                &:hover {
-                    background: svg-load('./assets/img/icon/exit-icon.svg', fill=$color-white) no-repeat 100%;
-                }
-            }
-        }
     }
 
-    &__btn {
+    &::before {
-        @mixin responsive-l {
+      top: 0;
-            margin-top: auto;
-            margin-bottom: 60px;
-        }
     }
 
-    &__burger {
+    &::after {
-        width: 38px;
+      bottom: 0;
-        height: 24px;
+    }
-        position: relative;
+
+    &:hover {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
+    }
+
+    &.m--menu {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+    }
+
+    &.m--active {
+      &::after {
+        bottom: 10px;
+        transform: rotate(45deg);
+      }
+
+      &::before {
+        top: 10px;
+        transform: rotate(-45deg);
+      }
+      span {
         display: none;
-
+      }
-        &:hover {
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
-        }
-
-        &.m--menu {
-            position: absolute;
-            right: 15px;
-            top: 15px;
-        }
-
-        &.m--active {
-            span {
-                display: none;
-            }
-
-            &:after {
-                transform: rotate(45deg);
-                bottom: 10px;
-            }
-
-            &:before {
-                transform: rotate(-45deg);
-                top: 10px;
-            }
-        }
-
-        @mixin responsive-l {
-            display: block;
-        }
-
-        &:after, &:before, span {
-            content: '';
-            position: absolute;
-            width: 100%;
-            height: 4px;
-            background: var(--color-white);
-            border-radius: 20px;
-            transition: all 0.3s ease;
-        }
-
-        &:before {
-            top: 0;
-        }
-
-        span {
-            top: 10px;
-        }
-
-        &:after {
-            bottom: 0;
-        }
     }
 
+    span {
+      top: 10px;
+    }
+  }
 }

client/src/assets/css/module/app.scss

@@ -1,39 +1,43 @@
-.app{
+.app {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
+  min-height: 100vh;
+  padding-bottom: 100px;
+
+  &::after {
+    content: '';
+
+    position: fixed;
+    z-index: 1;
+    inset: 0;
+
+    background: url('./assets/img/bg/bg.svg');
+  }
+
+  &__block {
+    flex: 1 1 auto;
+  }
+
+  &__overlay {
+    position: fixed;
+    z-index: 5;
+    inset: 0;
+
     min-height: 100vh;
-    padding-bottom: 100px;
+
-    &:after{
+    background: var(--color-black-cc);
-        content: '';
+  }
-        position: fixed;
+
-        top: 0;
+  &__content {
-        left: 0;
+    @mixin responsive-l {
-        bottom: 0;
+      padding: 0 20px;
-        right: 0;
-        background: url("./assets/img/bg/bg.svg");
-        z-index: 1;
     }
-    &__block{
+
-        flex: 1 1 auto;
+    max-width: var(--container);
-    }
+    margin: 0 auto;
-    &__overlay{
+    padding: 0 50px;
-        position: fixed;
+
-        z-index: 5;
+    .m--indentation {
-        min-height: 100vh;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--color-black-cc);
-    }
-    &__content{
-        max-width: var(--container);
-        margin: 0 auto;
-        padding: 0 50px;
-        @mixin responsive-l {
-            padding: 0 20px;
-        }
-        .m--indentation{
-        }
     }
+  }
 }

client/src/assets/css/module/blog.scss

@@ -3,77 +3,94 @@
 
   &__header {
     display: flex;
-    justify-content: space-between;
-    align-items: start;
     flex-wrap: wrap;
-    margin-bottom: var(--space-between-block);
     row-gap: var(--space-between-block);
-    &-title{
+    align-items: start;
+    justify-content: space-between;
+
+    margin-bottom: var(--space-between-block);
+
+    &-title {
       margin-bottom: 0;
     }
-    &-btn{
+
-      margin-left: auto;
+    &-btn {
       @mixin responsive-xxs {
         width: 100%;
       }
+
+      margin-left: auto;
     }
   }
 
   &__content {
-    display: flex;
-    gap: 80px;
     @mixin responsive-m {
       flex-direction: column;
     }
+
+    display: flex;
+    gap: 80px;
   }
 
   &__cover {
-    width: 100%;
-    max-height: 640px;
-    background: url("./assets/img/bg/blog.svg") no-repeat center;
-    position: relative;
-    z-index: 2;
-    background-size: cover;
     @mixin responsive-m {
       height: calc(var(--base-content-size) / 2);
       max-height: none;
     }
+
+    position: relative;
+    z-index: 2;
+
+    width: 100%;
+    max-height: 640px;
+
+    background: url('./assets/img/bg/blog.svg') no-repeat center;
+    background-size: cover;
   }
 
   &__list {
-
   }
 
   &__item {
-    border-bottom: 1px solid var(--color-white-opacity);
-    color: var(--color-white-opacity);
-    padding: 2rem 0;
     position: relative;
     z-index: 2;
-    transition: all .3s ease;
 
-    &:after, &:before {
+    padding: 2rem 0;
-      position: absolute;
+
+    color: var(--color-white-opacity);
+
+    border-bottom: 1px solid var(--color-white-opacity);
+
+    transition: all 0.3s ease;
+
+    &::after,
+    &::before {
       content: '';
-      left: 0;
+
+      position: absolute;
       right: 0;
-      background: var(--color-white-opacity);
+      left: 0;
-      height: 1px;
+
       display: none;
-      transition: background .3s ease;
+
+      height: 1px;
+
+      background: var(--color-white-opacity);
+
+      transition: background 0.3s ease;
     }
 
-    &:before {
+    &::before {
       top: -1px;
     }
 
-    &:after {
+    &::after {
-      display: block;
       bottom: -1px;
+      display: block;
     }
 
     &:first-child {
-      &:before {
+      &::before {
         display: block;
       }
     }
@@ -81,33 +98,34 @@
     &:hover {
       color: var(--color-white);
 
-      &:after, &:before {
+      &::after,
+      &::before {
         display: block;
         background: var(--linear-gradient);
       }
     }
 
     &:hover &-btn {
-      &:before {
+      &::before {
         opacity: 1;
       }
 
-      &:after {
+      &::after {
         background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
       }
     }
 
     &-header {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
       gap: 1rem;
+      align-items: center;
+      justify-content: space-between;
     }
 
     &-title {
-      font-size: 2rem;
       width: calc(100% - 56px - 1rem);
       margin-bottom: 2rem;
+      font-size: 2rem;
     }
   }
 

client/src/assets/css/module/contacts.scss

@@ -1,65 +1,84 @@
-.contacts{
+.contacts {
-    &__content{
+  &__content {
-        display: flex;
+    display: flex;
-        gap: var(--space-between-block);
+    gap: var(--space-between-block);
-        margin-bottom: var(--space-between-sections);
+    margin-bottom: var(--space-between-sections);
-    }
+  }
-    &__info{
-        &:before {
-            content: '';
-            display: block;
-            height: 50px;
-            position: relative;
-            z-index: 2;
-            width: 50px;
-            background: url("./assets/img/icon/one-circle.svg") no-repeat center;
-            margin-bottom: 20px;
-        }
-    }
-    &__item{
-        display: flex;
-        flex-direction: column;
 
-        &:not(&:last-child){
+  &__info {
-            margin-bottom: 20px;
+    &::before {
-        }
+      content: '';
+
+      position: relative;
+      z-index: 2;
+
+      display: block;
+
+      width: 50px;
+      height: 50px;
+      margin-bottom: 20px;
+
+      background: url('./assets/img/icon/one-circle.svg') no-repeat center;
     }
-    &__social{
+  }
-        display: flex;
+
-        gap: 10px;
+  &__item {
-        &.m--telegram, &.m--vk{
+    display: flex;
-            width: 25px;
+    flex-direction: column;
-            height: 25px;
+
-        }
+    &:not(&:last-child) {
-        &.m--telegram{
+      margin-bottom: 20px;
-            background: url("./assets/img/icon/telegram.svg") no-repeat;
-        }
-        &.m--vk{
-            background: url("./assets/img/icon/vk.svg") no-repeat;
-        }
     }
-    &__map{
+  }
-        position: relative;
+
-        z-index: 2;
+  &__social {
-        flex: 1 1 auto;
+    display: flex;
-        &-frame{
+    gap: 10px;
-            height: 100%;
+
-        }
+    &.m--telegram,
+    &.m--vk {
+      width: 25px;
+      height: 25px;
     }
-    &__form{
+
-        position: relative;
+    &.m--telegram {
-        z-index: 2;
+      background: url('./assets/img/icon/telegram.svg') no-repeat;
-        max-width: 360px;
-        width: 100%;
-        &:before {
-            content: '';
-            display: block;
-            height: 50px;
-            position: relative;
-            z-index: 2;
-            width: 100px;
-            background: url("./assets/img/icon/two-circle.svg") no-repeat center;
-            margin-bottom: 20px;
-        }
     }
+
+    &.m--vk {
+      background: url('./assets/img/icon/vk.svg') no-repeat;
+    }
+  }
+
+  &__map {
+    position: relative;
+    z-index: 2;
+    flex: 1 1 auto;
+
+    &-frame {
+      height: 100%;
+    }
+  }
+
+  &__form {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    max-width: 360px;
+
+    &::before {
+      content: '';
+
+      position: relative;
+      z-index: 2;
+
+      display: block;
+
+      width: 100px;
+      height: 50px;
+      margin-bottom: 20px;
+
+      background: url('./assets/img/icon/two-circle.svg') no-repeat center;
+    }
+  }
 }

client/src/assets/css/module/fiald.scss

@@ -1,16 +1,18 @@
 .field {
   position: relative;
+
   display: flex;
   flex-direction: column;
-  padding-bottom: 28px;
+
   margin-bottom: 8px;
+  padding-bottom: 28px;
   padding-bottom: 0;
+
   &&.m--100 {
     width: 100%;
     margin-right: 0;
   }
 
-
   &__inner {
     display: flex;
     flex-direction: column;
@@ -18,7 +20,6 @@
     height: 100%;
   }
 
-
   &__label {
     display: none;
   }
@@ -26,92 +27,121 @@
   .input {
     @mixin input;
   }
-  &__input{
+
+  &__input {
     &.m--search {
       position: relative;
-      &:before{
+
+      &::before {
         content: '';
-        width: 24px;
+
-        height: 24px;
+        position: absolute;
         top: 16px;
         left: 16px;
-        position: absolute;
+
+        width: 24px;
+        height: 24px;
+
         background: svg-load('./assets/img/icon/search-icon.svg') no-repeat 100%;
       }
-      .input{
+
+      .input {
         padding: 1rem 1.2rem 1rem 3rem;
         border: 1px solid var(--color-primary);
       }
     }
-    &.m--hidden{
+
+    &.m--hidden {
       display: none;
     }
   }
+
   &__checkbox {
-    &-label{
+    &-label {
-      padding-left: 50px;
       display: flex;
+      padding-left: 50px;
       font-size: 1rem;
       color: var(--color-white-opacity);
+
       &:hover {
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
       }
-      &:before{
+
-        content: "";
+      &::before {
         cursor: pointer;
+        content: '';
+        user-select: none;
+        user-select: none;
+        user-select: none;
+        user-select: none;
+        user-select: none;
+
         position: absolute;
         left: 0;
-        text-indent: -9999px;
+
+        display: block;
+
         width: 40px;
         height: 24px;
+
+        text-indent: -9999px;
+
         background: var(--color-white-opacity);
-        display: block;
         border-radius: 100px;
-        transition: all .3s ease;
+
+        transition: all 0.3s ease;
+
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
       }
-      &:after{
+
-        content: "";
+      &::after {
+        content: '';
+
         position: absolute;
         top: 3px;
         left: 3px;
+
         width: 18px;
         height: 18px;
+
         background: #fff;
         border-radius: 90px;
-        transition: all .3s ease;
+
+        transition: all 0.3s ease;
       }
     }
-    &-input{
+
+    &-input {
       display: none;
     }
-    &-input:checked + &-label{
+
-      &:before{
+    &-input:checked + &-label {
+      &::before {
         background: var(--color-primary);
       }
-      &:after{
+
+      &::after {
         left: 37px;
         transform: translateX(-100%);
       }
     }
   }
-  textarea{
+
-    border-radius: 30px !important;
+  textarea {
     resize: none;
-    min-height: 80px;
     scrollbar-color: var(--color-black) var(--color-white-opacity);
-    scrollbar-gutter: stable;
     scrollbar-width: thin;
+    scrollbar-gutter: stable;
     scroll-margin-right: 20px;
+
+    min-height: 80px;
+
+    border-radius: 30px !important;
   }
-  &__comment{
+
-    font-size: 1rem;
+  &__comment {
     margin-bottom: 1rem;
+    font-size: 1rem;
   }
 }

client/src/assets/css/module/home.scss

@@ -1,276 +1,335 @@
 .home {
-    overflow-x: hidden;
+  overflow-x: hidden;
-    &__meaning {
+
-        min-height: var(--base-content-size);
+  &__meaning {
-        display: flex;
+    position: relative;
+    z-index: 2;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    min-height: var(--base-content-size);
+
+    &::after,
+    &::before {
+      content: '';
+
+      position: absolute;
+      z-index: 1;
+
+      background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%;
+      background-size: 100%;
+    }
+
+    &::after {
+      right: 50vh;
+      bottom: 10vh;
+
+      width: 300px;
+      height: 300px;
+
+      animation: moving-circle-2 9s infinite linear;
+
+      @keyframes moving-circle-2 {
+        0% {
+          transform: rotate(360deg) translateX(100%) translateY(100%) scale(1.5);
+        }
+
+        100% {
+          transform: rotate(0deg) translateX(100%) translateY(100%) scale(1.5);
+        }
+      }
+    }
+
+    &::before {
+      bottom: 10vh;
+      left: 10vh;
+
+      width: 250px;
+      height: 250px;
+
+      animation: moving-circle-3 8s infinite linear;
+
+      @keyframes moving-circle-3 {
+        0% {
+          transform: rotate(360deg) translateX(-100%) translateY(150%) scale(1.5);
+        }
+
+        100% {
+          transform: rotate(0deg) translateX(-100%) translateY(200%) scale(1.5);
+        }
+      }
+    }
+  }
+
+  &__subtitle {
+    @mixin responsive-l {
+      padding: 0 20px;
+    }
+
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      z-index: -1;
+      top: 0;
+
+      width: 400px;
+      height: 400px;
+
+      background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%;
+      background-size: 100%;
+
+      animation: moving-circle 10s infinite linear;
+
+      @keyframes moving-circle {
+        0% {
+          transform: rotate(0) translateX(-400px) translateY(-100px) scale(1.5);
+        }
+
+        50% {
+          transform: rotate(180deg) translateX(-200px) translateY(-200px) scale(1);
+        }
+
+        100% {
+          transform: rotate(360deg) translateX(-400px) translateY(-100px) scale(1.5);
+        }
+      }
+    }
+
+    span {
+      font-weight: 700;
+    }
+  }
+
+  &__title {
+    @mixin h1;
+
+    padding: 0 20px;
+
+    text-align: center;
+
+    background-image: linear-gradient(
+      91.17deg,
+      var(--color-white) -4.01%,
+      var(--color-white) 36.14%,
+      var(--color-white) 77.44%,
+      var(--color-white) 106.11%
+    );
+    background-clip: text;
+    background-clip: text;
+
+    span {
+      color: var(--color-black);
+      background-clip: text;
+
+      -webkit-text-stroke: 3px transparent;
+    }
+  }
+
+  &__banner {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    scale: 0.8;
+
+    width: 1920px;
+    max-height: var(--base-content-size);
+    margin-left: calc((100vw + -1 * 1920px) / 2);
+
+    background: url('./assets/img/bg/home-banner.png') no-repeat center;
+    background-size: contain;
+  }
+
+  &__description {
+    @mixin responsive-m {
+      gap: var(--space-between-block);
+    }
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    margin-top: calc(var(--space-between-sections) / 2);
+    margin-bottom: var(--space-between-sections);
+  }
+
+  &__info {
+    @mixin responsive-m {
+      width: 100%;
+    }
+
+    width: 60%;
+
+    &--item {
+      @mixin responsive-s {
         flex-direction: column;
-        align-items: center;
+        gap: 10px;
-        justify-content: center;
+      }
+
+      display: flex;
+      justify-content: space-between;
+
+      color: transparent;
+
+      background-image: var(--linear-gradient);
+      background-clip: text;
+
+      &.m--circle {
+        align-items: end;
+
+        &::before {
+          @mixin responsive-s {
+            width: 80px;
+            height: 80px;
+            margin-right: auto;
+            background-size: contain;
+          }
+
+          content: '';
+
+          display: block;
+
+          width: 130px;
+          height: 130px;
+
+          background: url('./assets/img/icon/circleGradient.svg') no-repeat center;
+        }
+      }
+
+      span {
+        @mixin responsive-m {
+          width: 75%;
+        }
+
+        @mixin responsive-s {
+          width: 100%;
+        }
+
+        width: 57%;
+        font-weight: 400;
+        color: var(--color-white);
+      }
+    }
+  }
+
+  &__content {
+    @mixin responsive-m {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc(var(--space-between-block) / 2);
+      align-items: flex-start;
+
+      max-width: none;
+    }
+
+    max-width: 360px;
+
+    &--item {
+      @mixin responsive-m {
+        width: calc((100% - var(--space-between-block)) / 3);
+      }
+
+      @mixin responsive-s {
+        width: 100%;
+      }
+
+      position: relative;
+      z-index: 2;
+
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      font-size: 16px;
+
+      &::before {
+        content: '';
+
         position: relative;
         z-index: 2;
-        &:after, &:before {
-            content: '';
-            position: absolute;
-            background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
-            background-size: 100%;
-            z-index: 1;
-        }
 
-        &:after {
+        height: 50px;
-            right: 50vh;
+        margin-bottom: 10px;
-            bottom: 10vh;
+      }
-            width: 300px;
-            height: 300px;
-            animation: moving-circle-2 9s infinite linear;
-            @keyframes moving-circle-2 {
-                0%{
-                    -webkit-transform: rotate(360deg) translatex(100%) translatey(100%) scale(1.5);
-                }
-                100%{
-                    -webkit-transform: rotate(0deg) translatex(100%) translatey(100%) scale(1.5);
-                }
-            }
-        }
 
-        &:before {
+      &:not(&:last-child) {
-            width: 250px;
+        margin-bottom: var(--space-between-block);
-            height: 250px;
+      }
-            left: 10vh;
-            bottom: 10vh;
-            animation: moving-circle-3 8s infinite linear;
-            @keyframes moving-circle-3 {
-                0%{
-                    -webkit-transform: rotate(360deg) translatex(-100%) translatey(150%) scale(1.5);
-                }
-                100%{
-                    -webkit-transform:rotate(0deg) translatex(-100%) translatey(200%) scale(1.5);
-                }
-            }
-        }
-    }
 
-    &__subtitle {
+      &.m--one-circle::before {
-        text-align: center;
+        width: 50px;
-        max-width: 600px;
+        background: url('./assets/img/icon/one-circle.svg') no-repeat center;
-        margin: 0 auto;
+      }
 
-        @mixin responsive-l {
+      &.m--two-circle::before {
-            padding: 0 20px;
+        width: 100px;
-        }
+        background: url('./assets/img/icon/two-circle.svg') no-repeat center;
-        span {
+      }
-            font-weight: 700;
-        }
-        &:after{
-            content: '';
-            position: absolute;
-            top: 0;
-            width: 400px;
-            height: 400px;
-            background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
-            background-size: 100%;
-            animation: moving-circle 10s infinite linear;
-            z-index: -1;
-            @keyframes moving-circle {
-                0%{
-                    -webkit-transform: rotate(0) translatex(-400px) translatey(-100px) scale(1.5);
-                }
-                50%{
-                    -webkit-transform: rotate(180deg) translatex(-200px) translatey(-200px) scale(1);
-                }
-                100%{
-                    -webkit-transform: rotate(360deg) translatex(-400px) translatey(-100px) scale(1.5);
-                }
-            }
-        }
 
-    }
+      &.m--three-circle::before {
+        width: 150px;
+        background: url('./assets/img/icon/three-circle.svg') no-repeat center;
+      }
 
-    &__title {
+      span {
-        @mixin h1;
+        color: transparent;
-        -webkit-background-clip: text;
+        background-image: var(--linear-gradient);
-        text-align: center;
         background-clip: text;
-        background-image: linear-gradient(91.17deg, var(--color-white) -4.01%, var(--color-white) 36.14%, var(--color-white) 77.44%, var(--color-white) 106.11%);
+      }
-        padding: 0 20px;
-        span {
-            color: var(--color-black);
-            -webkit-background-clip: text;
-            -webkit-text-stroke: 3px transparent;
-        }
     }
-    &__banner {
+  }
-        position: absolute;
+
-        z-index: 0;
+  &__social {
-        top: 0;
+    position: relative;
-        left: 0;
+    z-index: 2;
-        right: 0;
+
-        bottom: 0;
+    display: flex;
-        background: url("./assets/img/bg/home-banner.png") no-repeat center;
+    align-items: flex-end;
-        width: 1920px;
+    justify-content: center;
-        max-height: var(--base-content-size);
+
-        background-size: contain;
+    height: var(--base-content-size);
-        scale: 0.8;
+    max-height: 900px;
-        margin-left: calc((100vw + -1 * 1920px) / 2);
+    margin-bottom: var(--space-between-sections);
+    padding: 3rem 2.5rem;
+
+    background: url('./assets/img/bg/bg-social.svg') no-repeat center;
+    background-size: cover;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(179.74deg, rgb(0 0 0 / 0%) 0.23%, rgb(0 0 0 / 66%) 99.77%);
     }
 
-    &__description {
+    &--tools {
-        margin-top: calc(var(--space-between-sections) / 2);
+      display: flex;
-        display: flex;
+      flex-wrap: wrap;
-        justify-content: space-between;
+      row-gap: var(--space-between-block);
-        flex-wrap: wrap;
+      align-items: flex-end;
-            margin-bottom: var(--space-between-sections);
+      justify-content: space-between;
-        @mixin responsive-m {
-            gap: var(--space-between-block);
-        }
     }
 
-    &__info {
+    &--description {
-        width: 60%;
+      @mixin responsive-xs {
-        @mixin responsive-m {
+        max-width: 100%;
-            width: 100%;
+      }
-        }
-        &--item {
-            display: flex;
-            justify-content: space-between;
-            color: transparent;
-            background-clip: text;
-            background-image: var(--linear-gradient);
-            @mixin responsive-s {
-                flex-direction: column;
-                gap: 10px;
-            }
-            &.m--circle {
-                align-items: end;
 
-                &:before {
+      max-width: 45%;
-                    content: '';
-                    display: block;
-                    width: 130px;
-                    height: 130px;
-                    background: url("./assets/img/icon/circleGradient.svg") no-repeat center;
-                    @mixin responsive-s {
-                        margin-right: auto;
-                        width: 80px;
-                        height: 80px;
-                        background-size: contain;
-                    }
-                }
-            }
-
-            span {
-                font-weight: 400;
-                color: var(--color-white);
-                width: 57%;
-                @mixin responsive-m {
-                    width: 75%;
-                }
-                @mixin responsive-s {
-                    width: 100%;
-                }
-            }
-        }
     }
 
-    &__content {
+    &--btns {
-        max-width: 360px;
+      display: grid;
-        @mixin responsive-m {
+      grid-gap: 8px;
-            display: flex;
+      grid-template-columns: min-content min-content;
-            align-items: flex-start;
+      grid-template-rows: min-content min-content;
-            flex-wrap: wrap;
-            gap: calc(var(--space-between-block) / 2);
-            max-width: none;
-        }
-        &--item {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            font-size: 16px;
-            position: relative;
-            z-index: 2;
-            &:not(&:last-child){
-                margin-bottom: var(--space-between-block);
-            }
-            @mixin responsive-m {
-               width: calc((100% - var(--space-between-block)) / 3);
-            }
-            @mixin responsive-s {
-                width: 100%;
-            }
-            &:before {
-                content: '';
-                height: 50px;
-                margin-bottom: 10px;
-                position: relative;
-                z-index: 2;
-            }
-
-            &.m--one-circle:before {
-                width: 50px;
-                background: url("./assets/img/icon/one-circle.svg") no-repeat center;
-            }
-
-            &.m--two-circle:before {
-                width: 100px;
-                background: url("./assets/img/icon/two-circle.svg") no-repeat center;
-            }
-
-            &.m--three-circle:before {
-                width: 150px;
-                background: url("./assets/img/icon/three-circle.svg") no-repeat center;
-            }
-
-            span {
-                color: transparent;
-                background-clip: text;
-                background-image: var(--linear-gradient);
-            }
-        }
     }
-
+  }
-    &__social {
-        height: var(--base-content-size);
-        max-height: 900px;
-        background: url("./assets/img/bg/bg-social.svg") no-repeat center;
-        padding: 3rem 2.5rem;
-        display: flex;
-        align-items: flex-end;
-        justify-content: center;
-        position: relative;
-        z-index: 2;
-        margin-bottom: var(--space-between-sections);
-        background-size: cover;
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(179.74deg, rgba(0, 0, 0, 0) 0.23%, rgba(0, 0, 0, 0.66) 99.77%);
-        }
-
-        &--tools {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-            flex-wrap: wrap;
-            row-gap: var(--space-between-block);
-        }
-
-        &--description {
-            max-width: 45%;
-            @mixin responsive-xs {
-                max-width: 100%;
-            }
-        }
-
-        &--btns {
-            display: grid;
-            grid-template-columns: min-content min-content;
-            grid-template-rows: min-content min-content;
-            grid-column-gap: 8px;
-            grid-row-gap: 8px;
-        }
-    }
-
 }

client/src/assets/css/module/loader.scss

@@ -1,63 +1,83 @@
 .loader {
-    display: flex;
+  position: relative;
-    align-items: center;
+  z-index: 2;
-    font-size: 1.25rem;
+
-    font-weight: 600;
+  display: flex;
-    color: transparent;
+  gap: 1rem;
-    background-clip: text;
+  align-items: center;
-    background-image: var(--linear-gradient);
+
-    margin: 0.75rem 0;
+  margin: 0.75rem 0;
-    gap: 1rem;
+
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: transparent;
+
+  background-image: var(--linear-gradient);
+  background-clip: text;
+
+  .spinner {
     position: relative;
-    z-index: 2;
-    .spinner {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        position: relative;
-        animation: rotate 1s linear infinite;
 
-        &:before, &:after {
+    width: 48px;
-            content: "";
+    height: 48px;
-            box-sizing: border-box;
-            position: absolute;
-            inset: 0px;
-            border-radius: 50%;
-            border: 5px solid var(--color-primary);
-            animation: prixClipFix 5s linear infinite;
-        }
 
-        &:after {
+    border-radius: 50%;
-            border-color: var(--color-white);
+
-            animation: prixClipFix 5s linear infinite, rotate 0.5s linear infinite reverse;
+    animation: rotate 1s linear infinite;
-            inset: 6px;
+
-        }
+    &::before,
+    &::after {
+      content: '';
+
+      position: absolute;
+      inset: 0;
+
+      box-sizing: border-box;
+
+      border: 5px solid var(--color-primary);
+      border-radius: 50%;
+
+      animation: prixClipFix 5s linear infinite;
     }
+
+    &::after {
+      inset: 6px;
+      border-color: var(--color-white);
+      animation:
+        prixClipFix 5s linear infinite,
+        rotate 0.5s linear infinite reverse;
+    }
+  }
 }
 
 @keyframes rotate {
-    0% {
+  0% {
-        transform: rotate(0deg)
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+
-        transform: rotate(360deg)
+  100% {
-    }
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes prixClipFix {
-    0% {
+  0% {
-        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-    }
+  }
-    25% {
+
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+  25% {
-    }
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-    50% {
+  }
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+
-    }
+  50% {
-    75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+  }
-    }
+
-    100% {
+  75% {
-        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-    }
+  }
+
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
 }

client/src/assets/css/module/modal.scss

@@ -1,38 +1,45 @@
 .modal {
   &__container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .vfm__overlay {
       background: var(--bg-wrapper-modal);
     }
 
-    &.m--right{
+    &.m--right {
-      justify-content: flex-end;
       align-items: stretch;
+      justify-content: flex-end;
     }
   }
-  &__container.m--right &__block{
+
-    margin: 0;
+  &__container.m--right &__block {
     max-height: none;
+    margin: 0;
   }
+
   &__block {
     position: relative;
+
     display: flex;
     flex-direction: column;
-    margin: 0 1.5rem;
+
-    padding: 2.5rem;
+    min-width: 360px;
-    background: var(--color-black);
+    max-width: 90vw;
     min-height: 96px;
     max-height: 90vh;
-    max-width: 90vw;
+    margin: 0 1.5rem;
-    min-width: 360px;
+    padding: 2.5rem;
-    &.m--half{
+
-      max-width: 950px;
+    background: var(--color-black);
+
+    &.m--half {
       width: 50%;
+      max-width: 950px;
     }
+
     &.m--long {
       width: 100%;
       max-width: 950px;
@@ -48,41 +55,56 @@
       max-width: 420px;
     }
   }
-  &__content{
+
+  &__content {
     min-width: 360px;
   }
-  &__title{
+
-    font-size: 2rem;
+  &__title {
     margin-bottom: 2.5rem;
+    font-size: 2rem;
   }
-  &__close{
+
-    width: 30px;
+  &__close {
-    height: 30px;
     position: absolute;
     top: 5px;
     right: 5px;
-    background: transparent;
+
-    border: none;
+    width: 30px;
     min-width: 0;
+    height: 30px;
     min-height: 0;
     padding: 0;
-    &:after,&:before{
+
+    background: transparent;
+    border: none;
+
+    &::after,
+    &::before {
       content: '';
+
       position: absolute;
-      background: var(--color-white);
-      left: 5px;
       right: 5px;
+      left: 5px;
+
       height: 2px;
+
+      background: var(--color-white);
       border-radius: 20px;
-      transition: all .3s ease;
+
+      transition: all 0.3s ease;
     }
-    &:after{
+
+    &::after {
       transform: rotate(45deg);
     }
-    &:before{
+
+    &::before {
       transform: rotate(-45deg);
     }
-    &:hover:after, &:hover:before{
+
+    &:hover::after,
+    &:hover::before {
       background: var(--color-black);
     }
   }

client/src/assets/css/module/pagination.scss

@@ -3,52 +3,58 @@
   justify-content: center;
   margin-top: var(--space-between-block);
   margin-bottom: var(--space-between-sections);
+
   &__list {
     display: flex;
   }
 
   &__item {
     margin: 0 5px;
-
   }
 
   &__link {
     padding: 0 5px;
-    &.m--current{
+
+    &.m--current {
       color: transparent;
-      -webkit-background-clip: text;
       background-image: var(--linear-gradient);
+      background-clip: text;
     }
   }
 
   &__btn {
-    min-height: 25px;
-    min-width: 25px;
     position: relative;
+    min-width: 25px;
+    min-height: 25px;
     border-radius: 50%;
-    &:after {
+
+    &::after {
       content: '';
+
       position: absolute;
-      top: 0;
+      inset: 0;
-      bottom: 0;
+
-      left: 0;
-      right: 0;
       margin: 5px;
     }
-    &:hover{
+
+    &:hover {
       background: var(--color-white);
     }
-    &.m--prev:after {
+
-      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
+    &.m--prev::after {
       transform: rotate(180deg);
+      background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
     }
-    &.m--prev:hover:after{
+
+    &.m--prev:hover::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
     }
-    &.m--next:after {
+
+    &.m--next::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
     }
-    &.m--next:hover:after{
+
+    &.m--next:hover::after {
       background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
     }
   }

client/src/assets/css/module/player.scss

@@ -1,13 +1,17 @@
 .player {
   position: fixed;
+  z-index: 3;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
+
-  backdrop-filter: blur(100px);
-  z-index: 3;
-  padding: 10px var(--space-between-block);
   display: flex;
   gap: var(--space-between-block);
+
+  padding: 10px var(--space-between-block);
+
+  backdrop-filter: blur(100px);
+
   //display: none;
   &__cover {
     width: 80px;
@@ -20,20 +24,24 @@
   }
 
   &__top {
-    margin-bottom: 10px;
     display: flex;
     align-items: center;
+    margin-bottom: 10px;
   }
 
   &__executor {
-    font-size: 1rem;
     display: flex;
     flex-direction: column;
-    margin-left: 20px;
     gap: 0.25rem;
+
+    margin-left: 20px;
+
+    font-size: 1rem;
+
     span {
       color: var(--color-white-opacity);
     }
+
     &.m--skeleton {
       min-width: 135px;
     }
@@ -42,179 +50,204 @@
   &__favorites {
     width: 27px;
     height: 27px;
-    background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF)
-      no-repeat 100%;
     margin-left: var(--space-between-block);
+    background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) no-repeat 100%;
+
     &.m--skeleton {
       background: none;
     }
+
     &:hover {
       cursor: url('./assets/img/icon/cursor.svg'), auto;
     }
+
     &.m--active {
-      background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF)
+      background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
-        no-repeat 100%;
     }
   }
 
   &__bottom {
     display: flex;
-    align-items: center;
     gap: 20px;
+    align-items: center;
   }
 
   &__time {
-    font-size: 1rem;
-    color: var(--color-white-opacity);
-    font-weight: 500;
     position: relative;
+
     min-width: 105px;
+
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--color-white-opacity);
+
     &.m--ether {
       padding-right: 10px;
 
-      &:after {
+      &::after {
         content: '';
-        animation: blink 1s infinite;
+
         position: absolute;
-        border-radius: 50%;
-        left: 40px;
         top: 0;
+        left: 40px;
+
         width: 5px;
         height: 5px;
+
         background: var(--color-emmit);
+        border-radius: 50%;
+
+        animation: blink 1s infinite;
       }
     }
   }
+
   &__tools {
     display: flex;
     gap: var(--space-between-block);
     align-items: center;
     margin-left: auto;
+
     &.m--skeleton {
       min-width: 200px;
     }
   }
+
   &__volume {
-    display: flex;
-    align-items: center;
     position: relative;
+    display: flex;
     gap: 10px;
+    align-items: center;
+
     &-on {
       width: 24px;
       height: 24px;
-      background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat
+      background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat 100%;
-        100%;
+
       &:hover {
         cursor: url('./assets/img/icon/cursor.svg'), auto;
       }
     }
+
     &-off {
       width: 24px;
       height: 24px;
-      background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF)
+      background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF) no-repeat 100%;
-        no-repeat 100%;
+
       &:hover {
         cursor: url('./assets/img/icon/cursor.svg'), auto;
       }
     }
+
     input {
       position: relative;
-      appearance: none;
+
+      overflow: hidden;
+      display: block;
+
       width: calc(100% - 34px);
       height: 5px;
-      border-radius: 10px;
-      display: block;
-      background: var(--color-white-opacity);
-      overflow: hidden;
       margin: 0;
 
-      &:hover {
+      appearance: none;
-        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      background: var(--color-white-opacity);
-      }
+      border-radius: 10px;
 
       &::-webkit-slider-thumb,
       &::-webkit-slider-thumb {
-        -webkit-appearance: none;
         width: 1px;
         height: 5px;
+        appearance: none;
         box-shadow: -100vmax 0 0 100vmax var(--color-white);
       }
+
+      &:hover {
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      }
     }
   }
+
   &__progress {
-    flex: 1 1 auto;
     position: relative;
+    flex: 1 1 auto;
 
     input {
       position: relative;
-      appearance: none;
+
+      overflow: hidden;
+      display: block;
+
       width: 100%;
       height: 5px;
-      border-radius: 10px;
-      display: block;
-      background: var(--color-white-opacity);
-      margin-bottom: 20px;
-      overflow: hidden;
       margin: 0;
+      margin-bottom: 20px;
 
-      &:hover {
+      appearance: none;
-        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      background: var(--color-white-opacity);
-      }
+      border-radius: 10px;
 
       &::-webkit-slider-thumb,
       &::-webkit-slider-thumb {
-        -webkit-appearance: none;
         width: 1px;
         height: 5px;
+        appearance: none;
         box-shadow: -100vmax 0 0 100vmax var(--color-primary);
       }
+
+      &:hover {
+        cursor: url('./assets/img/icon/cursor.svg'), auto;
+      }
     }
   }
 
   &__btn {
-    min-height: 0;
-    min-width: 0;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    border: none;
-    background: var(--color-primary);
     position: relative;
 
+    width: 50px;
+    min-width: 0;
+    height: 50px;
+    min-height: 0;
+
+    background: var(--color-primary);
+    border: none;
+    border-radius: 50%;
+
     &.m--play {
-      &:after {
+      &::after {
         content: '';
+
         position: absolute;
+
         width: 18px;
         height: 18px;
         margin: auto;
-        background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat
+
-          100%;
+        background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
         background-size: contain;
       }
 
-      &:hover:after {
+      &:hover::after {
-        background: svg-load('./assets/img/icon/play.svg', fill=$color-primary)
+        background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
-          no-repeat 100%;
         background-size: contain;
       }
     }
 
     &.m--pause {
-      &:after {
+      &::after {
         content: '';
+
         position: absolute;
+
         width: 18px;
         height: 18px;
         margin: auto;
-        background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF)
+
-          no-repeat 100%;
+        background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
         background-size: contain;
       }
 
-      &:hover:after {
+      &:hover::after {
-        background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary)
+        background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
-          no-repeat 100%;
         background-size: contain;
       }
     }
@@ -229,6 +262,7 @@
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }

client/src/assets/css/module/playlist.scss

@@ -1,136 +1,176 @@
 .playlist {
+  position: relative;
+  z-index: 2;
+
+  &__header {
+    display: flex;
+    gap: calc(var(--space-between-block) / 2);
+    align-items: center;
+    margin-bottom: var(--space-between-block);
+  }
+
+  &__title {
+    margin: 0;
+    padding: 0;
+    font-size: 32px;
+
+    &.m--margin {
+      margin-bottom: 1rem;
+    }
+  }
+
+  &__back {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    width: 30px;
+    height: 30px;
+
+    background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%;
+
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%;
+    }
+  }
+
+  &__edit {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    width: 30px;
+    height: 30px;
+
+    background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%;
+
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%;
+    }
+  }
+
+  &-roster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--space-between-block) / 2);
+    width: 100%;
+  }
+
+  &-edit {
     position: relative;
     z-index: 2;
-    &__header{
+
-        display: flex;
+    &__search {
-        align-items: center;
+      margin-bottom: var(--space-between-block);
-        gap: calc(var(--space-between-block) / 2);
-        margin-bottom: var(--space-between-block);
-    }
-    &__title{
-        font-size: 32px;
-        margin: 0;
-        padding: 0;
-        &.m--margin{
-            margin-bottom: 1rem;
-        }
-    }
-    &__back{
-        width: 30px;
-        height: 30px;
-        background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-white) no-repeat 100%;
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-        transition: all .3s ease;
-        &:hover{
-            background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%;
-        }
-    }
-    &__edit{
-        width: 30px;
-        height: 30px;
-        background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-white) no-repeat 100%;
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-        transition: all .3s ease;
-        &:hover{
-            background: svg-load('./assets/img/icon/ellipsis.svg', fill=$color-primary) no-repeat 100%;
-        }
-    }
-    &-roster {
-        display: flex;
-        flex-wrap: wrap;
-        gap: calc(var(--space-between-block) / 2);
-        width: 100%;
-    }
-    &-edit{
-        position: relative;
-        z-index: 2;
-        &__search{
-            margin-bottom: var(--space-between-block);
-        }
-        &__search{
-            min-width: 320px;
-            width: 40%;
-        }
-        &__list{
-            display: flex;
-            gap: var(--space-between-block);
-        }
-        &__item{
-            width: calc(50% - var(--space-between-block) / 2) ;
-        }
-        &__title{
-            color: transparent;
-            font-size: 2rem;
-            background-clip: text;
-            background-image: var(--linear-gradient);
-            margin-bottom: 1rem;
-        }
-        &__upload{
-            cursor: url("./assets/img/icon/cursor.svg"), auto;
-            border: none;
-            padding: 0;
-            background-clip: text;
-            color: transparent;
-            background-image: var(--linear-gradient-highlight);
-            margin: 0 0 var(--space-between-block);
-            transition: all .3s ease;
-            display: flex;
-            gap: 10px;
-            &:before{
-                content: '';
-                width: 20px;
-                height: 20px;
-                background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%;
-            }
-            &:hover{
-                color: var(--color-white);
-            }
-        }
     }
 
-    &-item {
+    &__search {
-        z-index: 2;
+      width: 40%;
-        position: relative;
+      min-width: 320px;
-        display: flex;
-        flex-direction: column;
-        min-width: 220px;
-        cursor: url("./assets/img/icon/cursor.svg"), auto;
-
-        &__cover {
-            background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%;
-            border-radius: 10px;
-            margin-bottom: 10px;
-            transition: all .3s ease;
-            min-height: 220px;
-            &:hover{
-                background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%;
-                border-radius: 10px;
-                margin-bottom: 10px;
-            }
-        }
-
-        &.m--create &__cover {
-            position: relative;
-            background: var(--bg-opacity);
-            &:after {
-                content: '';
-                width: 63px;
-                height: 63px;
-                background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;
-                transition: all .3s ease;
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                margin: auto;
-            }
-            &:hover{
-                background: var(--color-primary);
-                &:after{
-                    background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%;
-                }
-            }
-        }
     }
+
+    &__list {
+      display: flex;
+      gap: var(--space-between-block);
+    }
+
+    &__item {
+      width: calc(50% - var(--space-between-block) / 2);
+    }
+
+    &__title {
+      margin-bottom: 1rem;
+
+      font-size: 2rem;
+      color: transparent;
+
+      background-image: var(--linear-gradient);
+      background-clip: text;
+    }
+
+    &__upload {
+      cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+      display: flex;
+      gap: 10px;
+
+      margin: 0 0 var(--space-between-block);
+      padding: 0;
+
+      color: transparent;
+
+      background-image: var(--linear-gradient-highlight);
+      background-clip: text;
+      border: none;
+
+      transition: all 0.3s ease;
+
+      &::before {
+        content: '';
+        width: 20px;
+        height: 20px;
+        background: svg-load('./assets/img/icon/paper-clip.svg', fill=$color-primary) no-repeat 100%;
+      }
+
+      &:hover {
+        color: var(--color-white);
+      }
+    }
+  }
+
+  &-item {
+    cursor: url('./assets/img/icon/cursor.svg'), auto;
+
+    position: relative;
+    z-index: 2;
+
+    display: flex;
+    flex-direction: column;
+
+    min-width: 220px;
+
+    &__cover {
+      min-height: 220px;
+      margin-bottom: 10px;
+
+      background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white) no-repeat 100%;
+      border-radius: 10px;
+
+      transition: all 0.3s ease;
+
+      &:hover {
+        margin-bottom: 10px;
+        background: svg-load('./assets/img/icon/playlist-item.svg', fill=$color-white-opacity) no-repeat 100%;
+        border-radius: 10px;
+      }
+    }
+
+    &.m--create &__cover {
+      position: relative;
+      background: var(--bg-opacity);
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        inset: 0;
+
+        width: 63px;
+        height: 63px;
+        margin: auto;
+
+        background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;
+
+        transition: all 0.3s ease;
+      }
+
+      &:hover {
+        background: var(--color-primary);
+
+        &::after {
+          background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%;
+        }
+      }
+    }
+  }
 }

client/src/assets/css/module/playlists.scss

@@ -1,38 +1,44 @@
 .playlists {
   &__content {
-
   }
 
   &__list {
-
   }
 
   &__item {
-    display: flex;
     position: relative;
-    padding-bottom: 1rem;
-    align-items: center;
-    gap: 20px;
-    padding-top: 1rem;
 
-    &:after{
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+
+    &::after {
+      content: '';
+
       position: absolute;
       bottom: 0;
-      content: '';
+
       width: 100%;
       height: 1px;
+
       background: var(--linear-gradient);
     }
   }
-  &__time{
+
+  &__time {
     width: 100px;
     margin: 0;
   }
-  &__param{
+
-    margin: 0;
+  &__param {
     width: 25%;
-    &.m--long{
+    margin: 0;
-        flex: 1 1 auto;
+
+    &.m--long {
+      flex: 1 1 auto;
     }
   }
 }

client/src/assets/css/module/profile.scss

@@ -1,10 +1,11 @@
 .profile {
-    &__title {
+  &__title {
-        margin-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
-        padding: 0;
+    padding: 0;
-        font-size: 1.5rem;
+    font-size: 1.5rem;
-    }
+  }
-    &__tabs{
+
-        margin-top: var(--space-between-block);
+  &__tabs {
-    }
+    margin-top: var(--space-between-block);
+  }
 }

client/src/assets/css/module/rubric.scss

@@ -1,110 +1,142 @@
 .rubric {
   &-block {
     margin-bottom: var(--space-between-sections);
+
     &__header {
       display: flex;
-      justify-content: space-between;
-      align-items: start;
       flex-wrap: wrap;
+      align-items: start;
+      justify-content: space-between;
+
       &-title{
         margin-bottom: 0;
       }
     }
 
     &__description{
-      max-width: 60%;
-      margin-bottom: 2.5rem;
       @mixin responsive-xxs {
         max-width: none;
       }
+
+      max-width: 60%;
+      margin-bottom: 2.5rem;
+
       &.m--50{
-        margin-bottom: 0;
-        max-width: 50%;
         width: 100%;
+        max-width: 50%;
+        margin-bottom: 0;
       }
     }
+
     &__link{
       @mixin responsive-xxs {
         order: 1;
-        margin: var(--space-between-block) 0;
         width: 100%;
+        margin: var(--space-between-block) 0;
       }
     }
+
     &__list{
       position: relative;
       padding-bottom: 10px;
-      &:before{
+
+      &::before{
+        content: '';
+
+        position: absolute;
         top: 0;
         bottom: 0;
+
         width: 100%;
-        position: absolute;
+
-        content: '';
         background: url("./assets/img/bg/rubric-list.svg") no-repeat;
         background-position: 25%;
         background-size: 35%;
       }
     }
+
     &__item{
+      position: relative;
+      z-index: 2;
+
       display: flex;
       align-items: center;
-      position: relative;
+
       padding: 20px 0;
-      z-index: 2;
+
       &:hover{
         cursor: url("./assets/img/icon/cursor.svg"), auto;
       }
-      &:after{
+
+      &::after{
+        content: '';
+
         position: absolute;
         bottom: 0;
-        content: '';
+
-        background: #000;
         width: 100%;
         height: 1px;
+
+        background: #000;
         background: var(--linear-gradient);
       }
     }
+
     &__title{
-      transition: all .3s ease;
       margin-right: auto;
+      padding-right: 10px;
+
       color: var(--color-white);
       text-wrap: nowrap;
-      padding-right: 10px;
+
+      transition: all .3s ease;
     }
+
     &__btn{
-      transition: all .35s ease, visibility .0s ease;
-      visibility: hidden;
-      text-wrap: nowrap;
-      min-width: 0;
       width: 0;
+      min-width: 0;
+
+      text-wrap: nowrap;
+
+      visibility: hidden;
+
+      transition: all .35s ease, visibility .0s ease;
     }
+
     &__item:hover &__btn{
-      visibility: visible;
-      min-width: 240px;
       width: 240px;
+      min-width: 240px;
       margin-left: 20px;
+      visibility: visible;
     }
+
     &__item:hover &__title{
       color: transparent;
-      background-clip: text;
       background-image: var(--linear-gradient);
+      background-clip: text;
     }
   }
+
   &-modal{
     &__header{
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
       margin-bottom: 1rem;
     }
+
     &__title{
       margin-bottom: 0;
     }
+
     &__close{
       position: relative;
     }
+
     &__cover{
       margin-bottom: 1.5rem;
     }
+
     &__description{
       margin-bottom: 1.5rem;
     }

client/src/assets/css/module/song.scss

@@ -4,26 +4,34 @@
         flex-wrap: wrap;
         gap: 0 var(--space-between-block);
     }
+
     .m--column &-item{
         width: 100%;
     }
+
     &-item {
-        width: calc(50% - var(--space-between-block) / 2);
-        position: relative;
-        display: flex;
-        align-items: center;
-        z-index: 2;
-        border-left: 3px solid transparent;
-        padding: 10px;
-        transition: border .5s ease, background .5s ease;
-        background: transparent;
         @mixin responsive-m {
             width: 100%;
         }
+
+        position: relative;
+        z-index: 2;
+
+        display: flex;
+        align-items: center;
+
+        width: calc(50% - var(--space-between-block) / 2);
+        padding: 10px;
+
+        background: transparent;
+        border-left: 3px solid transparent;
+
+        transition: border .5s ease, background .5s ease;
+
         &.m--select &__selected {
-            margin-right: 20px;
             width: 35px;
             height: 33px;
+            margin-right: 20px;
 
             &.m--stop {
                 path {
@@ -33,8 +41,8 @@
         }
 
         &__selected {
-            width: 0;
             overflow: hidden;
+            width: 0;
             transition: all .2s ease;
 
             path:nth-child(n) {
@@ -53,110 +61,133 @@
 
         &:hover {
             cursor: url("./assets/img/icon/cursor.svg"), auto;
+            background: linear-gradient(90deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 0%) 100%);
             border-color: var(--color-primary);
-            background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
         }
 
         &__btn {
-            min-height: 0;
-            min-width: 0;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: none;
-            background: var(--color-primary);
             position: relative;
 
+            width: 50px;
+            min-width: 0;
+            height: 50px;
+            min-height: 0;
+
+            background: var(--color-primary);
+            border: none;
+            border-radius: 50%;
+
             &.m--small {
-                background: transparent;
                 width: 25px;
                 height: 25px;
+                background: transparent;
             }
 
             &.m--favorites {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 25px;
                     height: 25px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/favorites.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
                     background-size: contain;
                 }
             }
 
             &.m--add {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 25px;
                     height: 25px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/add-icon.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/add-icon.svg', fill=#FFF) no-repeat 100%;
                     background-size: contain;
                 }
             }
+
             &.m--already{
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 25px;
                     height: 25px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/icon-trash.svg', stroke=$color-primary) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/icon-trash.svg', stroke=#FFF) no-repeat 100%;
                     background-size: contain;
                 }
             }
 
             &.m--play {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 18px;
                     height: 18px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
                 }
             }
 
             &.m--pause {
-                &:after {
+                &::after {
                     content: '';
+
                     position: absolute;
+
                     width: 18px;
                     height: 18px;
                     margin: auto;
+
                     background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
                     background-size: contain;
+
                     transition: all .3s ease;
                 }
 
-                &:hover:after {
+                &:hover::after {
                     background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
                     background-size: contain;
                 }
@@ -166,21 +197,23 @@
         &__info {
             display: flex;
             flex-direction: column;
-            font-size: 1rem;
+
-            color: var(--color-white-opacity);
-            line-height: 21px;
             margin-left: 20px;
 
+            font-size: 1rem;
+            line-height: 21px;
+            color: var(--color-white-opacity);
+
             span {
                 color: var(--color-white);
             }
         }
 
         &__tools {
-            margin-left: auto;
             display: flex;
-            align-items: center;
             gap: 20px;
+            align-items: center;
+            margin-left: auto;
         }
     }
 }
@@ -189,9 +222,11 @@
     0% {
         transform: translateY(0);
     }
+
     50% {
         transform: translateY(50%);
     }
+
     100% {
         transform: translateY(0);
     }

client/src/assets/css/module/support.scss

@@ -1,38 +1,46 @@
 .support{
     &-block{
         margin-bottom: var(--space-between-sections);
+
         &__item {
-            width: calc(100% / 3);
+            position: relative;
+            z-index: 2;
+
             display: flex;
             flex-direction: column;
             align-items: flex-start;
-            font-size: 16px;
+
+            width: calc(100% / 3);
             margin-bottom: 2.5rem;
-            position: relative;
+
-            z-index: 2;
+            font-size: 16px;
-            &:before {
+
+            &::before {
                 content: '';
-                height: 50px;
+
-                margin-bottom: 10px;
                 position: relative;
                 z-index: 2;
+
+                height: 50px;
+                margin-bottom: 10px;
             }
 
-            &.m--one-circle:before {
+            &.m--one-circle::before {
                 width: 50px;
                 background: url("./assets/img/icon/one-circle.svg") no-repeat center;
             }
 
-            &.m--two-circle:before {
+            &.m--two-circle::before {
                 width: 100px;
                 background: url("./assets/img/icon/two-circle.svg") no-repeat center;
             }
 
-            &.m--three-circle:before {
+            &.m--three-circle::before {
                 width: 150px;
                 background: url("./assets/img/icon/three-circle.svg") no-repeat center;
             }
         }
+
         &__list{
             display: flex;
             gap: var(--space-between-block);

client/src/assets/css/module/tabs.scss

@@ -2,50 +2,61 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--space-between-block);
+
   &.m--btns{
-    gap: 10px;
     @mixin responsive-xs {
       .button{
         width: 100%;
       }
     }
 
+    gap: 10px;
+
   }
+
   &__item {
-    border: none;
+    position: relative;
-    background: none;
+
+    display: flex;
+
+    margin-right: 10px;
+    padding: 0;
+
+    font-size: 2rem;
     color: var(--color-white);
     text-transform: uppercase;
-    font-size: 2rem;
+
-    margin-right: 10px;
+    background: none;
-    position: relative;
+    border: none;
-    display: flex;
+
-    padding: 0;
     transition: all 0.5s ease;
 
-    &:after {
+    &::after {
       content: '';
+
       display: block;
+
+      width: 3px;
+      height: 100%;
+      margin-left: 10px;
+
       background: var(--color-white);
       border-radius: 20px;
-      height: 100%;
-      width: 3px;
-      margin-left: 10px;
     }
 
     &:last-child {
       margin: 0;
 
-      &:after {
+      &::after {
         display: none;
       }
     }
 
     &.is-active, &:hover {
-      color: transparent;
-      -webkit-background-clip: text;
-      background-image: var(--linear-gradient);
       cursor: url("./assets/img/icon/cursor.svg"), auto;
+      color: transparent;
+      background-image: var(--linear-gradient);
+      background-clip: text;
     }
   }
 }

client/src/assets/css/module/team.scss

@@ -1,31 +1,36 @@
 .team {
-    margin-left: auto;
-    max-width: calc(100vw - ((100vw - var(--container)) / 2));
-    margin-bottom: var(--space-between-sections);
-    position: relative;
-    z-index: 2;
     @mixin responsive-xl {
         padding: 0 0 0 20px;
     }
 
+    position: relative;
+    z-index: 2;
+
+    max-width: calc(100vw - ((100vw - var(--container)) / 2));
+    margin-bottom: var(--space-between-sections);
+    margin-left: auto;
+
     &__header {
-        display: flex;
-        max-width: var(--container);
-        margin-right: auto;
-        padding: 0 50px 0;
-        margin-bottom: var(--space-between-block);
         @mixin responsive-xl {
-            padding: 0 40px 0 0;
             column-gap: var(--space-between-block);
+            padding: 0 40px 0 0;
         }
+
         @mixin responsive-s {
             flex-wrap: wrap;
         }
+
+        display: flex;
+
+        max-width: var(--container);
+        margin-right: auto;
+        margin-bottom: var(--space-between-block);
+        padding: 0 50px;
     }
 
     &__title {
-        margin-bottom: 0;
         margin-right: auto;
+        margin-bottom: 0;
         text-wrap: nowrap;
     }
 
@@ -44,79 +49,93 @@
     }
 
     &__tools {
-        margin-top: 65px;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        max-width: var(--container);
-        margin-right: auto;
-        row-gap: 1.5rem;
-        padding: 0 50px 0;
         @mixin responsive-xl {
             padding: 0 80px 0 35px;
         }
+
         @mixin responsive-l {
             padding: 0 40px 0 0;
         }
+
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 1.5rem;
+        align-items: center;
+        justify-content: space-between;
+
+        max-width: var(--container);
+        margin-top: 65px;
+        margin-right: auto;
+        padding: 0 50px;
+
         .m--link{
             @mixin responsive-s {
-                width: 100%;
                 display: flex;
                 justify-content: flex-end;
+                width: 100%;
             }
         }
     }
 
     &__progress {
-        width: 100%;
-        height: 4px;
-        position: relative;
-        max-width: 460px;
-        background: var(--color-white-opacity);
-        border-radius: 20px;
-        overflow: hidden;
         @mixin responsive-s {
             max-width: none;
         }
+
+        position: relative;
+
+        overflow: hidden;
+
+        width: 100%;
+        max-width: 460px;
+        height: 4px;
+
+        background: var(--color-white-opacity);
+        border-radius: 20px;
+
         span {
-            background: var(--color-white);
             position: absolute;
-            left: 0;
             top: 0;
+            left: 0;
+            transform-origin: left top;
+
             width: 100%;
             height: 100%;
-            transform-origin: left top;
+
+            background: var(--color-white);
         }
     }
 
     &__cover {
-        margin-bottom: 0.5rem;
-        height: 450px;
         overflow: hidden;
+        height: 450px;
+        margin-bottom: 0.5rem;
     }
 
     &__name {
-        font-weight: 500;
-        font-size: 1.5rem;
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
 
+        font-size: 1.5rem;
+        font-weight: 500;
+
         span {
-            font-weight: 400;
             font-size: 1.125rem;
+            font-weight: 400;
         }
     }
 
     &__description {
-        max-width: 820px;
         @mixin responsive-xl {
             max-width: calc(100% - var(--space-between-block));
         }
+
         @mixin responsive-s {
-            max-width: none;
             width: 100%;
+            max-width: none;
         }
+
+        max-width: 820px;
     }
 }

client/src/assets/css/setting.scss

@@ -5,8 +5,9 @@ $document-width-s: 730px;
 $document-width-xs: 640px;
 $document-width-xxs: 480px;
 $color-primary: #5e5bfc;
-$color-white: #ffffff;
+$color-white: #fff;
 $color-white-opacity: #bbb9ca;
+
 :root {
   --color-black: #232323;
   --color-white: $color-white;
@@ -14,7 +15,7 @@ $color-white-opacity: #bbb9ca;
   --color-white-opacity: $color-white-opacity;
   --bg-wrapper-modal: #000000e5;
   --color-primary: $color-primary;
-  --color-black-cc: #000000cc;
+  --color-black-cc: #000c;
   --color-emmit: #e81717;
   --bg-opacity: #74767d;
   --base-fz: 18px;
@@ -30,13 +31,16 @@ $color-white-opacity: #bbb9ca;
   @media (max-width: $document-width-xl) {
     --container: $document-width-l;
   }
+
   @media (max-width: $document-width-l) {
     --container: $document-width-m;
   }
+
   @media (max-width: $document-width-m) {
     --container: $document-width-s;
     --space-between-sections: calc(var(--base-fz) * 2.7);
   }
+
   @media (max-width: $document-width-s) {
     --container: $document-width-xs;
   }

client/src/store/store-flag.d.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
 // THIS FEATURE-FLAG FILE IS AUTOGENERATED,
 //  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
-import "quasar/dist/types/feature-flag";
+import 'quasar/dist/types/feature-flag';
 
-declare module "quasar/dist/types/feature-flag" {
+declare module 'quasar/dist/types/feature-flag' {
   interface QuasarFeatureFlags {
     store: true;
   }