Students
/
ITRadio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Norbaev 2024-07-19 17:27:05 +05:00
parent 674003ccd9
commit 8c979c7c2a
34 changed files with 2093 additions and 1572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/.stylelintrc.json
View File

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

8
client/README.md
View File

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

4
client/babel.config.cjs
View File

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

42
client/jsconfig.json
View File

@ -2,38 +2,16 @@
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "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"
]
} }

2
client/package.json
View File

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

27
client/src/assets/css/common.scss
View File

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

58
client/src/assets/css/index.scss
View File

@ -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 './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';

85
client/src/assets/css/lib/fonts.css
View File

@ -1,71 +1,70 @@
@font-face { @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.woff2') format('woff2'),
url('assets/fonts/Manrope-ExtraLight.ttf') format('truetype');*/ 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-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.woff2') format('woff2'),
url('assets/fonts/Manrope-Light.ttf') format('truetype');*/ 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-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.woff2') format('woff2'),
url('assets/fonts/Manrope-Regular.ttf') format('truetype');*/ 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-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.woff2') format('woff2'),
url('assets/fonts/Manrope-Medium.ttf') format('truetype');*/ 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-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.woff2') format('woff2'),
url('assets/fonts/Manrope-SemiBold.ttf') format('truetype');*/ 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-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.woff2') format('woff2'),
url('assets/fonts/Manrope-Bold.ttf') format('truetype');*/ 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-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.woff2') format('woff2'),
url('assets/fonts/Manrope-ExtraBold.ttf') format('truetype');*/ 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;
} }

159
client/src/assets/css/lib/reset.css
View File

@ -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 { 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 { 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%;
} }

144
client/src/assets/css/mixins/form.scss
View File

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

46
client/src/assets/css/mixins/responsive.scss
View File

@ -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 { @define-mixin responsive-l {
@media (max-width: $document-width-l) { @media (max-width: $document-width-l) {
@mixin-content; @mixin-content;
} }
} }
@define-mixin responsive-m { @define-mixin responsive-m {
@media (max-width: $document-width-m) { @media (max-width: $document-width-m) {
@mixin-content; @mixin-content;
} }
} }
@define-mixin responsive-s { @define-mixin responsive-s {
@media (max-width: $document-width-s) { @media (max-width: $document-width-s) {
@mixin-content; @mixin-content;
} }
} }
@define-mixin responsive-xs { @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; }
}
} }

509
client/src/assets/css/mixins/text.scss
View File

@ -1,145 +1,161 @@
@define-mixin __p { @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 { @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 { @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; 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 { @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 { @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 { @define-mixin p {
@mixin __p; @mixin __p;
margin-top: 8px;
margin-bottom: 8px; margin-top: 8px;
margin-bottom: 8px;
} }
@define-mixin ul { @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: ''; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
@ -150,187 +166,206 @@
background-position: center; background-position: center;
background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red); background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
background-repeat: no-repeat; 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 { @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 { @define-mixin hr {
@mixin p; @mixin p;
} }
@define-mixin a { @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; 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 { &: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 { @define-mixin a--color $color {
color: $color; color: $color;
border-color: rgba($color, 0.5); border-color: rgba($color, 0.5);
} }
@define-mixin table { @define-mixin table {
/* dummy */ /* dummy */
} }
@define-mixin base { @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 { @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 { @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;
} }

14
client/src/assets/css/module/app-breadcrumbs.scss
View File

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

136
client/src/assets/css/module/app-footer.scss
View File

@ -1,81 +1,87 @@
.footer { .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;
}
} }

338
client/src/assets/css/module/app-header.scss
View File

@ -1,186 +1,204 @@
.header { .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 { @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 { &: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; 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;
}
}
} }

74
client/src/assets/css/module/app.scss
View File

@ -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; 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{
}
} }
}
} }

88
client/src/assets/css/module/blog.scss
View File

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

137
client/src/assets/css/module/contacts.scss
View File

@ -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;
}
}
} }

102
client/src/assets/css/module/fiald.scss
View File

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

569
client/src/assets/css/module/home.scss
View File

@ -1,276 +1,335 @@
.home { .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; 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; position: relative;
z-index: 2; 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-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;
}
}
} }

122
client/src/assets/css/module/loader.scss
View File

@ -1,63 +1,83 @@
.loader { .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; 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 { @keyframes rotate {
0% { 0% {
transform: rotate(0deg) transform: rotate(0deg);
} }
100% {
transform: rotate(360deg) 100% {
} transform: rotate(360deg);
}
} }
@keyframes prixClipFix { @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);
}
} }

80
client/src/assets/css/module/modal.scss
View File

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

38
client/src/assets/css/module/pagination.scss
View File

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

162
client/src/assets/css/module/player.scss
View File

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

298
client/src/assets/css/module/playlist.scss
View File

@ -1,136 +1,176 @@
.playlist { .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; position: relative;
z-index: 2; 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%;
}
}
}
}
} }

34
client/src/assets/css/module/playlists.scss
View File

@ -1,38 +1,44 @@
.playlists { .playlists {
&__content { &__content {
} }
&__list { &__list {
} }
&__item { &__item {
display: flex;
position: relative; 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; position: absolute;
bottom: 0; bottom: 0;
content: '';
width: 100%; width: 100%;
height: 1px; height: 1px;
background: var(--linear-gradient); background: var(--linear-gradient);
} }
} }
&__time{
&__time {
width: 100px; width: 100px;
margin: 0; margin: 0;
} }
&__param{
margin: 0; &__param {
width: 25%; width: 25%;
&.m--long{ margin: 0;
flex: 1 1 auto;
&.m--long {
flex: 1 1 auto;
} }
} }
} }

17
client/src/assets/css/module/profile.scss
View File

@ -1,10 +1,11 @@
.profile { .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);
}
} }

82
client/src/assets/css/module/rubric.scss
View File

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

105
client/src/assets/css/module/song.scss
View File

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

28
client/src/assets/css/module/support.scss
View File

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

43
client/src/assets/css/module/tabs.scss
View File

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

97
client/src/assets/css/module/team.scss
View File

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

8
client/src/assets/css/setting.scss
View File

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

4
client/src/store/store-flag.d.ts vendored
View File

@ -1,9 +1,9 @@
/* eslint-disable */ /* eslint-disable */
// THIS FEATURE-FLAG FILE IS AUTOGENERATED, // THIS FEATURE-FLAG FILE IS AUTOGENERATED,
// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING // 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 { interface QuasarFeatureFlags {
store: true; store: true;
} }