автоматическое исправление scss
This commit is contained in:
Norbaev
parent
674003ccd9
commit
8c979c7c2a
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"],
|
||||
"rules": {
|
||||
"selector-class-pattern": null
|
||||
"selector-class-pattern": null,
|
||||
"scss/load-partial-extension": "always"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
A Al project
|
||||
|
||||
## Install the dependencies
|
||||
|
||||
```bash
|
||||
yarn
|
||||
# or
|
||||
|
|
@ -10,24 +11,25 @@ npm install
|
|||
```
|
||||
|
||||
### Start the app in development mode (hot-code reloading, error reporting, etc.)
|
||||
|
||||
```bash
|
||||
quasar dev
|
||||
```
|
||||
|
||||
|
||||
### Lint the files
|
||||
|
||||
```bash
|
||||
yarn lint
|
||||
# or
|
||||
npm run lint
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Build the app for production
|
||||
|
||||
```bash
|
||||
quasar build
|
||||
```
|
||||
|
||||
### Customize the configuration
|
||||
|
||||
See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js).
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@ module.exports = (api) => {
|
|||
presets: [
|
||||
[
|
||||
'@quasar/babel-preset-app',
|
||||
api.caller((caller) => caller && caller.target === 'node')
|
||||
? { targets: { node: 'current' } }
|
||||
: {},
|
||||
api.caller((caller) => caller && caller.target === 'node') ? { targets: { node: 'current' } } : {},
|
||||
],
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,38 +2,16 @@
|
|||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"src/*": [
|
||||
"src/*"
|
||||
],
|
||||
"app/*": [
|
||||
"*"
|
||||
],
|
||||
"components/*": [
|
||||
"src/components/*"
|
||||
],
|
||||
"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"
|
||||
]
|
||||
"src/*": ["src/*"],
|
||||
"app/*": ["*"],
|
||||
"components/*": ["src/components/*"],
|
||||
"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": [
|
||||
"dist",
|
||||
".quasar",
|
||||
"node_modules"
|
||||
]
|
||||
"exclude": ["dist", ".quasar", "node_modules"]
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"lint": "eslint --ext .js,.vue ./",
|
||||
"lint:fix": "eslint --ext .js,.vue --fix ./",
|
||||
"lint:fix": "eslint --ext .js,.vue, --fix ./",
|
||||
"lint:css": "stylelint '**/*.scss'",
|
||||
"lint:css:fix": "npm run lint:css -- --fix",
|
||||
"test": "echo \"No test specified\" && exit 0",
|
||||
|
|
|
|||
|
|
@ -4,14 +4,17 @@
|
|||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
@mixin p;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
@mixin h1;
|
||||
}
|
||||
|
|
@ -35,10 +38,12 @@ h2 {
|
|||
|
||||
.title {
|
||||
@mixin p;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
|
||||
font-size: 34px;
|
||||
color: transparent;
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
|
||||
&.m--white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
|
@ -59,21 +64,25 @@ h2 {
|
|||
.a,
|
||||
a {
|
||||
@mixin a;
|
||||
/*@mixin a--color $color-base;*/
|
||||
|
||||
/* @mixin a--color $color-base; */
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: var(--color-black) var(--bg-opacity);
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0 !important;
|
||||
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--base-fz);
|
||||
line-height: var(--base-lh);
|
||||
background: var(--color-black);
|
||||
font-family: var(--font-family-base);
|
||||
color: var(--color-white);
|
||||
padding: 0 !important;
|
||||
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -1,31 +1,29 @@
|
|||
@import "./mixins/responsive.scss";
|
||||
@import "./setting.scss";
|
||||
@import "./lib/reset.css";
|
||||
@import './mixins/responsive.scss';
|
||||
@import './setting.scss';
|
||||
@import './lib/reset.css';
|
||||
@import './lib/fonts.css';
|
||||
@import "./mixins/form.scss";
|
||||
@import "./mixins/text.scss";
|
||||
@import "./common.scss";
|
||||
@import "./module/app.scss";
|
||||
@import "./module/app-header.scss";
|
||||
@import "./module/app-footer.scss";
|
||||
@import "./module/app-breadcrumbs.scss";
|
||||
@import "./module/modal.scss";
|
||||
@import "./module/fiald.scss";
|
||||
@import "./module/pagination.scss";
|
||||
@import "./module/home.scss";
|
||||
@import "./module/team.scss";
|
||||
@import "./module/rubric.scss";
|
||||
@import "./module/blog.scss";
|
||||
@import "./module/authentication.scss";
|
||||
@import "./module/tabs.scss";
|
||||
@import "./module/about.scss";
|
||||
@import "./module/playlists.scss";
|
||||
@import "./module/playlist.scss";
|
||||
@import "./module/contacts.scss";
|
||||
@import "./module/support.scss";
|
||||
@import "./module/player.scss";
|
||||
@import "./module/loader.scss";
|
||||
@import "./module/profile.scss";
|
||||
@import "./module/song.scss";
|
||||
|
||||
|
||||
@import './mixins/form.scss';
|
||||
@import './mixins/text.scss';
|
||||
@import './common.scss';
|
||||
@import './module/app.scss';
|
||||
@import './module/app-header.scss';
|
||||
@import './module/app-footer.scss';
|
||||
@import './module/app-breadcrumbs.scss';
|
||||
@import './module/modal.scss';
|
||||
@import './module/fiald.scss';
|
||||
@import './module/pagination.scss';
|
||||
@import './module/home.scss';
|
||||
@import './module/team.scss';
|
||||
@import './module/rubric.scss';
|
||||
@import './module/blog.scss';
|
||||
@import './module/authentication.scss';
|
||||
@import './module/tabs.scss';
|
||||
@import './module/about.scss';
|
||||
@import './module/playlists.scss';
|
||||
@import './module/playlist.scss';
|
||||
@import './module/contacts.scss';
|
||||
@import './module/support.scss';
|
||||
@import './module/player.scss';
|
||||
@import './module/loader.scss';
|
||||
@import './module/profile.scss';
|
||||
@import './module/song.scss';
|
||||
|
|
|
|||
|
|
@ -68,4 +68,3 @@
|
|||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,84 @@
|
|||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, 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 {
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
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;
|
||||
|
|
@ -18,8 +86,17 @@ time, mark, audio, video {
|
|||
font-size: 100%;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -27,16 +104,20 @@ body {
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
|
@ -45,13 +126,15 @@ table {
|
|||
border-spacing: 0;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,53 +1,66 @@
|
|||
@define-mixin input {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 1rem 1.2rem;
|
||||
|
||||
color: var(--color-white);
|
||||
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-white);
|
||||
border-radius: 40px;
|
||||
padding: 1rem 1.2rem;
|
||||
width: 100%;
|
||||
color: var(--color-white);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@define-mixin button {
|
||||
font-family: var(--font-family-base);
|
||||
|
||||
color: var(--color-white);
|
||||
min-width: 220px;
|
||||
@define-mixin button {
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
min-width: 220px;
|
||||
min-height: 3rem;
|
||||
|
||||
font-family: var(--font-family-base);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 1rem;
|
||||
color: var(--color-white);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
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;
|
||||
vertical-align: middle;
|
||||
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-white);
|
||||
border-radius: 100px;
|
||||
|
||||
transition:
|
||||
border 0.5s ease,
|
||||
background 0.5s ease,
|
||||
color 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
color: var(--color-black);
|
||||
background: var(--color-white);
|
||||
}
|
||||
&-violet{
|
||||
border-color: var(--color-primary);
|
||||
|
||||
&-violet {
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&:active {
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
color: var(--color-black);
|
||||
background: var(--color-white-darker);
|
||||
}
|
||||
|
|
@ -67,9 +80,10 @@
|
|||
&.m--blur {
|
||||
min-width: 0;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
background: var(--bg-opacity);
|
||||
border: none;
|
||||
backdrop-filter: blur(5px);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-white);
|
||||
|
|
@ -84,25 +98,30 @@
|
|||
|
||||
&.m--arrow {
|
||||
&::after {
|
||||
margin-left: 10px;
|
||||
content: '';
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
|
||||
background-size: cover;
|
||||
transition: background 0.3s ease, width 0.3s ease;
|
||||
|
||||
transition:
|
||||
background 0.3s ease,
|
||||
width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
|
||||
width: 45px;
|
||||
height: 20px;
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
|
||||
}
|
||||
|
||||
&.m--active,
|
||||
&:active {
|
||||
background:transparent;
|
||||
color: var(--color-white);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -124,7 +143,9 @@
|
|||
content: '';
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
|
||||
background-size: cover;
|
||||
transition: background 0.3s ease, width 0.3s ease;
|
||||
transition:
|
||||
background 0.3s ease,
|
||||
width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
|
|
@ -132,58 +153,65 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&.m--text-link{
|
||||
border: none;
|
||||
pad: 0;
|
||||
|
||||
&.m--text-link {
|
||||
@mixin a;
|
||||
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
&:hover{
|
||||
|
||||
border: none;
|
||||
|
||||
pad: 0;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
@mixin a;
|
||||
}
|
||||
|
||||
&.m--circle {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
min-width: 0;
|
||||
border-color: var(--color-white-opacity);
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
background: var(--linear-gradient);
|
||||
width: 56px;
|
||||
min-width: 0;
|
||||
height: 56px;
|
||||
|
||||
border-color: var(--color-white-opacity);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
inset: 0;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease;
|
||||
background: var(--linear-gradient);
|
||||
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
inset: 0;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto auto;
|
||||
margin: auto;
|
||||
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#404145FF) no-repeat 100%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
&:hover::before {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
opacity: 1;
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@define-mixin responsive-xl{
|
||||
@define-mixin responsive-xl {
|
||||
@media (max-width: $document-width-xl) {
|
||||
@mixin-content;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -11,31 +10,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@define-mixin responsive-m {
|
||||
@media (max-width: $document-width-m) {
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@define-mixin responsive-s {
|
||||
@media (max-width: $document-width-s) {
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@define-mixin responsive-xs {
|
||||
@media (max-width: $document-width-xs) {
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@define-mixin responsive-xxs {
|
||||
@define-mixin responsive-xxs {
|
||||
@media (max-width: $document-width-xxs) {
|
||||
@mixin-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@define-mixin __p {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -33,67 +34,79 @@
|
|||
@define-mixin h1 {
|
||||
@mixin __p;
|
||||
|
||||
/*margin-top: 32px;*/
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 100px;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
color: var(--color-white);
|
||||
padding-bottom: 6px;
|
||||
@mixin responsive-l {
|
||||
font-size: 84px;
|
||||
}
|
||||
|
||||
@mixin responsive-m {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
@mixin responsive-s {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
/* margin-top: 32px; */
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 6px;
|
||||
|
||||
font-size: 100px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
@define-mixin h2 {
|
||||
@mixin __p;
|
||||
|
||||
margin: 2.5rem 0;
|
||||
font-size: 3.375rem;
|
||||
line-height: 1.3;
|
||||
font-weight: 500;
|
||||
color: transparent;
|
||||
padding-bottom: 6px;
|
||||
background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
text-transform: uppercase;
|
||||
@mixin responsive-l {
|
||||
font-size:40px;
|
||||
font-size: 40px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
@mixin responsive-m {
|
||||
font-size:32px;
|
||||
font-size: 32px;
|
||||
}
|
||||
/*@mixin responsive-s {
|
||||
|
||||
margin: 2.5rem 0;
|
||||
padding-bottom: 6px;
|
||||
|
||||
font-size: 3.375rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
color: transparent;
|
||||
text-transform: uppercase;
|
||||
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
|
||||
/* @mixin responsive-s {
|
||||
font-size: 36px;
|
||||
}*/
|
||||
} */
|
||||
&.m--white {
|
||||
color: var(--color-white);
|
||||
margin: 1.5rem 0;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&.m--border {
|
||||
&:after {
|
||||
margin-top: 10px;
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
background: url("./assets/img/icon/borderLine.svg");
|
||||
max-width: 260px;
|
||||
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
height: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
background: url('./assets/img/icon/borderLine.svg');
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: var(--color-white);
|
||||
text-decoration: none;
|
||||
transition: color 0.5s ease;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -107,8 +120,9 @@
|
|||
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 700;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
|
@ -117,13 +131,15 @@
|
|||
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@define-mixin p {
|
||||
@mixin __p;
|
||||
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -131,13 +147,13 @@
|
|||
@define-mixin ul {
|
||||
@mixin p;
|
||||
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 15px;
|
||||
|
||||
/* &:before {
|
||||
content: '';
|
||||
|
|
@ -150,14 +166,17 @@
|
|||
background-position: center;
|
||||
background-image: svg-load('assets/img/icons/vector.svg', fill=$color-red);
|
||||
background-repeat: no-repeat;
|
||||
}*/
|
||||
&:before {
|
||||
} */
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
top: 7px;
|
||||
|
||||
background: var(--color-white);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -171,11 +190,14 @@
|
|||
li {
|
||||
padding-left: 1rem;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: '•';
|
||||
|
||||
top: 0;
|
||||
height: auto;
|
||||
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -185,18 +207,21 @@
|
|||
@define-mixin ol {
|
||||
@mixin p;
|
||||
|
||||
list-style: none;
|
||||
counter-reset: item;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
counter-increment: item;
|
||||
margin-bottom: 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: counter(item);
|
||||
|
||||
padding-left: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
|
@ -208,18 +233,23 @@
|
|||
}
|
||||
|
||||
@define-mixin a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.5s ease;
|
||||
color: var(--color-white);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&:hover {
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
|
||||
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;
|
||||
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
&.m--link {
|
||||
|
|
@ -228,13 +258,18 @@
|
|||
border-bottom: 1px solid transparent;
|
||||
|
||||
&::after {
|
||||
margin-left: 10px;
|
||||
content: '';
|
||||
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 10px;
|
||||
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
|
||||
background-size: cover;
|
||||
transition: background 0.3s ease, width 0.3s ease;
|
||||
|
||||
transition:
|
||||
background 0.3s ease,
|
||||
width 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -2,16 +2,20 @@
|
|||
display: flex;
|
||||
margin-top: 80px;
|
||||
margin-bottom: var(--space-between-block);
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:last-child:after {
|
||||
|
||||
&::after {
|
||||
content: '/';
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
&:after {
|
||||
margin: 0 10px;
|
||||
content: '/';
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
.footer {
|
||||
padding-bottom: var(--space-between-block);
|
||||
width: 100%;
|
||||
padding-bottom: var(--space-between-block);
|
||||
|
||||
&__top {
|
||||
padding-bottom: 80px;
|
||||
margin-bottom: 80px;
|
||||
padding-bottom: 80px;
|
||||
border-bottom: 1px solid var(--color-white-opacity);
|
||||
}
|
||||
|
||||
&__question {
|
||||
@mixin responsive-xs {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
@mixin responsive-xs {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-button {
|
||||
margin-left: auto;
|
||||
|
|
@ -25,27 +26,30 @@
|
|||
|
||||
&__bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: grid;
|
||||
grid-template-columns: var(--space-between-sections) var(--space-between-sections);
|
||||
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;
|
||||
grid-template-rows: min-content;
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
|
||||
@mixin responsive-s {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
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-rows: fit-content fit-content;
|
||||
|
||||
&-item {
|
||||
@mixin responsive-s {
|
||||
width: 100%;
|
||||
|
|
@ -58,24 +62,26 @@
|
|||
}
|
||||
|
||||
&__social {
|
||||
@mixin responsive-m {
|
||||
grid-row-gap: 10px;
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-between-block);
|
||||
@mixin responsive-m {
|
||||
margin-bottom: var(--space-between-block);
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__connection {
|
||||
@mixin responsive-m {
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
@mixin responsive-m {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
.header {
|
||||
position: sticky;
|
||||
top: -30px;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
backdrop-filter: blur(100px);
|
||||
@mixin responsive-l {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
padding: 40px 20px 10px;
|
||||
position: sticky;
|
||||
z-index: 11;
|
||||
top: -30px;
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
backdrop-filter: blur(100px);
|
||||
|
||||
&__wrapper {
|
||||
@mixin responsive-l {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 40px 20px 10px;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
|
|
@ -25,59 +29,66 @@
|
|||
margin-right: auto;
|
||||
|
||||
&.m--menu {
|
||||
display: none;
|
||||
margin-bottom: var(--space-between-block);
|
||||
@mixin responsive-l {
|
||||
display: block;
|
||||
}
|
||||
|
||||
display: none;
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: transform .3s ease;
|
||||
@mixin responsive-xl {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@mixin responsive-l {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
|
||||
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;
|
||||
|
||||
background: var(--color-black);
|
||||
|
||||
&.m--active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&-item {
|
||||
margin: 0 25px;
|
||||
|
||||
&.m--tools {
|
||||
margin: 0 10px 0 25px;
|
||||
}
|
||||
|
||||
@mixin responsive-xl {
|
||||
margin: 0 10px;
|
||||
|
||||
&.m--tools {
|
||||
margin: 0 5px 0 10px;
|
||||
}
|
||||
}
|
||||
@mixin responsive-l {
|
||||
|
||||
@mixin responsive-l {
|
||||
}
|
||||
|
||||
margin: 0 25px;
|
||||
|
||||
&.m--tools {
|
||||
margin: 0 10px 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,18 +97,21 @@
|
|||
|
||||
&.is-subactive {
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
transition: all .3s ease;
|
||||
|
||||
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%;
|
||||
|
|
@ -125,62 +139,66 @@
|
|||
}
|
||||
|
||||
&__burger {
|
||||
width: 38px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
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 {
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 38px;
|
||||
height: 24px;
|
||||
|
||||
&::after,
|
||||
&::before,
|
||||
span {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
|
||||
background: var(--color-white);
|
||||
border-radius: 20px;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,43 @@
|
|||
.app{
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 100px;
|
||||
&:after{
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: url("./assets/img/bg/bg.svg");
|
||||
z-index: 1;
|
||||
inset: 0;
|
||||
|
||||
background: url('./assets/img/bg/bg.svg');
|
||||
}
|
||||
&__block{
|
||||
|
||||
&__block {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
&__overlay{
|
||||
|
||||
&__overlay {
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
inset: 0;
|
||||
|
||||
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;
|
||||
|
||||
&__content {
|
||||
@mixin responsive-l {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.m--indentation{
|
||||
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding: 0 50px;
|
||||
|
||||
.m--indentation {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,77 +3,94 @@
|
|||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-between-block);
|
||||
row-gap: var(--space-between-block);
|
||||
&-title{
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
|
||||
margin-bottom: var(--space-between-block);
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&-btn{
|
||||
margin-left: auto;
|
||||
|
||||
&-btn {
|
||||
@mixin responsive-xxs {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
@mixin responsive-m {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
width: 100%;
|
||||
max-height: 640px;
|
||||
background: url("./assets/img/bg/blog.svg") no-repeat center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-size: cover;
|
||||
@mixin responsive-m {
|
||||
height: calc(var(--base-content-size) / 2);
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
width: 100%;
|
||||
max-height: 640px;
|
||||
|
||||
background: url('./assets/img/bg/blog.svg') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid var(--color-white-opacity);
|
||||
color: var(--color-white-opacity);
|
||||
padding: 2rem 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
transition: all .3s ease;
|
||||
|
||||
&:after, &:before {
|
||||
position: absolute;
|
||||
padding: 2rem 0;
|
||||
|
||||
color: var(--color-white-opacity);
|
||||
|
||||
border-bottom: 1px solid var(--color-white-opacity);
|
||||
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
left: 0;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: var(--color-white-opacity);
|
||||
height: 1px;
|
||||
left: 0;
|
||||
|
||||
display: none;
|
||||
transition: background .3s ease;
|
||||
|
||||
height: 1px;
|
||||
|
||||
background: var(--color-white-opacity);
|
||||
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
&::after {
|
||||
bottom: -1px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&:before {
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,33 +98,34 @@
|
|||
&:hover {
|
||||
color: var(--color-white);
|
||||
|
||||
&:after, &:before {
|
||||
&::after,
|
||||
&::before {
|
||||
display: block;
|
||||
background: var(--linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &-btn {
|
||||
&:before {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 2rem;
|
||||
width: calc(100% - 56px - 1rem);
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,65 +1,84 @@
|
|||
.contacts{
|
||||
&__content{
|
||||
.contacts {
|
||||
&__content {
|
||||
display: flex;
|
||||
gap: var(--space-between-block);
|
||||
margin-bottom: var(--space-between-sections);
|
||||
}
|
||||
&__info{
|
||||
&:before {
|
||||
|
||||
&__info {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 50px;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 50px;
|
||||
background: url("./assets/img/icon/one-circle.svg") no-repeat center;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
background: url('./assets/img/icon/one-circle.svg') no-repeat center;
|
||||
}
|
||||
}
|
||||
&__item{
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:not(&:last-child){
|
||||
&:not(&:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
&__social{
|
||||
|
||||
&__social {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
&.m--telegram, &.m--vk{
|
||||
|
||||
&.m--telegram,
|
||||
&.m--vk {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
&.m--telegram{
|
||||
background: url("./assets/img/icon/telegram.svg") no-repeat;
|
||||
|
||||
&.m--telegram {
|
||||
background: url('./assets/img/icon/telegram.svg') no-repeat;
|
||||
}
|
||||
&.m--vk{
|
||||
background: url("./assets/img/icon/vk.svg") no-repeat;
|
||||
|
||||
&.m--vk {
|
||||
background: url('./assets/img/icon/vk.svg') no-repeat;
|
||||
}
|
||||
}
|
||||
&__map{
|
||||
|
||||
&__map {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1 1 auto;
|
||||
&-frame{
|
||||
|
||||
&-frame {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&__form{
|
||||
|
||||
&__form {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
&:before {
|
||||
max-width: 360px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 50px;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100px;
|
||||
background: url("./assets/img/icon/two-circle.svg") no-repeat center;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
background: url('./assets/img/icon/two-circle.svg') no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
.field {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 28px;
|
||||
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 28px;
|
||||
padding-bottom: 0;
|
||||
|
||||
&&.m--100 {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -18,7 +20,6 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
&__label {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -26,92 +27,121 @@
|
|||
.input {
|
||||
@mixin input;
|
||||
}
|
||||
&__input{
|
||||
|
||||
&__input {
|
||||
&.m--search {
|
||||
position: relative;
|
||||
&:before{
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
background: svg-load('./assets/img/icon/search-icon.svg') no-repeat 100%;
|
||||
}
|
||||
.input{
|
||||
|
||||
.input {
|
||||
padding: 1rem 1.2rem 1rem 3rem;
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
&.m--hidden{
|
||||
|
||||
&.m--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
&-label{
|
||||
padding-left: 50px;
|
||||
&-label {
|
||||
display: flex;
|
||||
padding-left: 50px;
|
||||
font-size: 1rem;
|
||||
color: var(--color-white-opacity);
|
||||
|
||||
&:hover {
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
&:before{
|
||||
content: "";
|
||||
|
||||
&::before {
|
||||
cursor: pointer;
|
||||
content: '';
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
text-indent: -9999px;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
|
||||
text-indent: -9999px;
|
||||
|
||||
background: var(--color-white-opacity);
|
||||
display: block;
|
||||
border-radius: 100px;
|
||||
transition: all .3s ease;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
&:after{
|
||||
content: "";
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
background: #fff;
|
||||
border-radius: 90px;
|
||||
transition: all .3s ease;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
&-input{
|
||||
|
||||
&-input {
|
||||
display: none;
|
||||
}
|
||||
&-input:checked + &-label{
|
||||
&:before{
|
||||
|
||||
&-input:checked + &-label {
|
||||
&::before {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
&:after{
|
||||
|
||||
&::after {
|
||||
left: 37px;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea{
|
||||
border-radius: 30px !important;
|
||||
|
||||
textarea {
|
||||
resize: none;
|
||||
min-height: 80px;
|
||||
scrollbar-color: var(--color-black) var(--color-white-opacity);
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable;
|
||||
scroll-margin-right: 20px;
|
||||
|
||||
min-height: 80px;
|
||||
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
&__comment{
|
||||
font-size: 1rem;
|
||||
|
||||
&__comment {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,276 +1,335 @@
|
|||
.home {
|
||||
overflow-x: hidden;
|
||||
|
||||
&__meaning {
|
||||
min-height: var(--base-content-size);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&:after, &:before {
|
||||
|
||||
min-height: var(--base-content-size);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
background: url("./assets/img/icon/ellipseGradient.svg") no-repeat 50% 60%;
|
||||
background-size: 100%;
|
||||
z-index: 1;
|
||||
|
||||
background: url('./assets/img/icon/ellipseGradient.svg') no-repeat 50% 60%;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
right: 50vh;
|
||||
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);
|
||||
0% {
|
||||
transform: rotate(360deg) translateX(100%) translateY(100%) scale(1.5);
|
||||
}
|
||||
100%{
|
||||
-webkit-transform: rotate(0deg) translatex(100%) translatey(100%) scale(1.5);
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg) translateX(100%) translateY(100%) scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
bottom: 10vh;
|
||||
left: 10vh;
|
||||
|
||||
width: 250px;
|
||||
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);
|
||||
0% {
|
||||
transform: rotate(360deg) translateX(-100%) translateY(150%) scale(1.5);
|
||||
}
|
||||
100%{
|
||||
-webkit-transform:rotate(0deg) translatex(-100%) translatey(200%) scale(1.5);
|
||||
|
||||
100% {
|
||||
transform: rotate(0deg) translateX(-100%) translateY(200%) scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
@mixin responsive-l {
|
||||
padding: 0 20px;
|
||||
}
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
&:after{
|
||||
|
||||
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: 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);
|
||||
0% {
|
||||
transform: rotate(0) translateX(-400px) translateY(-100px) scale(1.5);
|
||||
}
|
||||
50%{
|
||||
-webkit-transform: rotate(180deg) translatex(-200px) translatey(-200px) scale(1);
|
||||
|
||||
50% {
|
||||
transform: rotate(180deg) translateX(-200px) translateY(-200px) scale(1);
|
||||
}
|
||||
100%{
|
||||
-webkit-transform: rotate(360deg) translatex(-400px) translatey(-100px) scale(1.5);
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg) translateX(-400px) translateY(-100px) scale(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@mixin h1;
|
||||
-webkit-background-clip: text;
|
||||
text-align: center;
|
||||
background-clip: text;
|
||||
background-image: linear-gradient(91.17deg, var(--color-white) -4.01%, var(--color-white) 36.14%, var(--color-white) 77.44%, var(--color-white) 106.11%);
|
||||
|
||||
padding: 0 20px;
|
||||
|
||||
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);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
|
||||
-webkit-text-stroke: 3px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__banner {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url("./assets/img/bg/home-banner.png") no-repeat center;
|
||||
inset: 0;
|
||||
scale: 0.8;
|
||||
|
||||
width: 1920px;
|
||||
max-height: var(--base-content-size);
|
||||
background-size: contain;
|
||||
scale: 0.8;
|
||||
margin-left: calc((100vw + -1 * 1920px) / 2);
|
||||
|
||||
background: url('./assets/img/bg/home-banner.png') no-repeat center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: calc(var(--space-between-sections) / 2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-between-sections);
|
||||
@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 {
|
||||
width: 60%;
|
||||
@mixin responsive-m {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
width: 60%;
|
||||
|
||||
&--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;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
color: transparent;
|
||||
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
|
||||
&.m--circle {
|
||||
align-items: end;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: url("./assets/img/icon/circleGradient.svg") no-repeat center;
|
||||
&::before {
|
||||
@mixin responsive-s {
|
||||
margin-right: auto;
|
||||
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 {
|
||||
font-weight: 400;
|
||||
color: var(--color-white);
|
||||
width: 57%;
|
||||
@mixin responsive-m {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
@mixin responsive-s {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
width: 57%;
|
||||
font-weight: 400;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: 360px;
|
||||
@mixin responsive-m {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: calc(var(--space-between-block) / 2);
|
||||
align-items: flex-start;
|
||||
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
max-width: 360px;
|
||||
|
||||
&--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;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&.m--one-circle:before {
|
||||
&:not(&:last-child) {
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
|
||||
&.m--one-circle::before {
|
||||
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;
|
||||
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;
|
||||
background: url("./assets/img/icon/three-circle.svg") no-repeat center;
|
||||
background: url('./assets/img/icon/three-circle.svg') no-repeat center;
|
||||
}
|
||||
|
||||
span {
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__social {
|
||||
height: var(--base-content-size);
|
||||
max-height: 900px;
|
||||
background: url("./assets/img/bg/bg-social.svg") no-repeat center;
|
||||
padding: 3rem 2.5rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
height: var(--base-content-size);
|
||||
max-height: 900px;
|
||||
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 {
|
||||
|
||||
&::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%);
|
||||
inset: 0;
|
||||
background: linear-gradient(179.74deg, rgb(0 0 0 / 0%) 0.23%, rgb(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);
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&--description {
|
||||
max-width: 45%;
|
||||
@mixin responsive-xs {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
&--btns {
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
grid-template-columns: min-content min-content;
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-column-gap: 8px;
|
||||
grid-row-gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,63 +1,83 @@
|
|||
.loader {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
|
||||
margin: 0.75rem 0;
|
||||
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
|
||||
background-image: var(--linear-gradient);
|
||||
margin: 0.75rem 0;
|
||||
gap: 1rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-clip: text;
|
||||
|
||||
.spinner {
|
||||
position: relative;
|
||||
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
animation: rotate 1s linear infinite;
|
||||
|
||||
&:before, &:after {
|
||||
content: "";
|
||||
box-sizing: border-box;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
border-radius: 50%;
|
||||
inset: 0;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
border: 5px solid var(--color-primary);
|
||||
border-radius: 50%;
|
||||
|
||||
animation: prixClipFix 5s linear infinite;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: var(--color-white);
|
||||
animation: prixClipFix 5s linear infinite, rotate 0.5s linear infinite reverse;
|
||||
&::after {
|
||||
inset: 6px;
|
||||
border-color: var(--color-white);
|
||||
animation:
|
||||
prixClipFix 5s linear infinite,
|
||||
rotate 0.5s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes prixClipFix {
|
||||
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)
|
||||
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%)
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
75% {
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
|
||||
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)
|
||||
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,45 @@
|
|||
.modal {
|
||||
&__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.vfm__overlay {
|
||||
background: var(--bg-wrapper-modal);
|
||||
}
|
||||
|
||||
&.m--right{
|
||||
justify-content: flex-end;
|
||||
&.m--right {
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&__container.m--right &__block{
|
||||
margin: 0;
|
||||
|
||||
&__container.m--right &__block {
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__block {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 1.5rem;
|
||||
padding: 2.5rem;
|
||||
background: var(--color-black);
|
||||
|
||||
min-width: 360px;
|
||||
max-width: 90vw;
|
||||
min-height: 96px;
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
min-width: 360px;
|
||||
&.m--half{
|
||||
max-width: 950px;
|
||||
margin: 0 1.5rem;
|
||||
padding: 2.5rem;
|
||||
|
||||
background: var(--color-black);
|
||||
|
||||
&.m--half {
|
||||
width: 50%;
|
||||
max-width: 950px;
|
||||
}
|
||||
|
||||
&.m--long {
|
||||
width: 100%;
|
||||
max-width: 950px;
|
||||
|
|
@ -48,41 +55,56 @@
|
|||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
&__content{
|
||||
|
||||
&__content {
|
||||
min-width: 360px;
|
||||
}
|
||||
&__title{
|
||||
font-size: 2rem;
|
||||
|
||||
&__title {
|
||||
margin-bottom: 2.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
&__close{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
width: 30px;
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
&:after,&:before{
|
||||
|
||||
background: transparent;
|
||||
border: none;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
background: var(--color-white);
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
left: 5px;
|
||||
|
||||
height: 2px;
|
||||
|
||||
background: var(--color-white);
|
||||
border-radius: 20px;
|
||||
transition: all .3s ease;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&:after{
|
||||
|
||||
&::after {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:before{
|
||||
|
||||
&::before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover:after, &:hover:before{
|
||||
|
||||
&:hover::after,
|
||||
&:hover::before {
|
||||
background: var(--color-black);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,52 +3,58 @@
|
|||
justify-content: center;
|
||||
margin-top: var(--space-between-block);
|
||||
margin-bottom: var(--space-between-sections);
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__item {
|
||||
margin: 0 5px;
|
||||
|
||||
}
|
||||
|
||||
&__link {
|
||||
padding: 0 5px;
|
||||
&.m--current{
|
||||
|
||||
&.m--current {
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-height: 25px;
|
||||
min-width: 25px;
|
||||
position: relative;
|
||||
min-width: 25px;
|
||||
min-height: 25px;
|
||||
border-radius: 50%;
|
||||
&:after {
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset: 0;
|
||||
|
||||
margin: 5px;
|
||||
}
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background: var(--color-white);
|
||||
}
|
||||
&.m--prev:after {
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
|
||||
|
||||
&.m--prev::after {
|
||||
transform: rotate(180deg);
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
|
||||
}
|
||||
&.m--prev:hover:after{
|
||||
|
||||
&.m--prev:hover::after {
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
|
||||
}
|
||||
&.m--next:after {
|
||||
|
||||
&.m--next::after {
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#FFFF) no-repeat 100%;
|
||||
}
|
||||
&.m--next:hover:after{
|
||||
|
||||
&.m--next:hover::after {
|
||||
background: svg-load('./assets/img/icon/ArrowRight.svg', stroke=#232323) no-repeat 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
.player {
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
backdrop-filter: blur(100px);
|
||||
z-index: 3;
|
||||
padding: 10px var(--space-between-block);
|
||||
|
||||
display: flex;
|
||||
gap: var(--space-between-block);
|
||||
|
||||
padding: 10px var(--space-between-block);
|
||||
|
||||
backdrop-filter: blur(100px);
|
||||
|
||||
//display: none;
|
||||
&__cover {
|
||||
width: 80px;
|
||||
|
|
@ -20,20 +24,24 @@
|
|||
}
|
||||
|
||||
&__top {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&__executor {
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
gap: 0.25rem;
|
||||
|
||||
margin-left: 20px;
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
span {
|
||||
color: var(--color-white-opacity);
|
||||
}
|
||||
|
||||
&.m--skeleton {
|
||||
min-width: 135px;
|
||||
}
|
||||
|
|
@ -42,179 +50,204 @@
|
|||
&__favorites {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF)
|
||||
no-repeat 100%;
|
||||
margin-left: var(--space-between-block);
|
||||
background: svg-load('./assets/img/icon/favorites.svg', fill=#404145FF) no-repeat 100%;
|
||||
|
||||
&.m--skeleton {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
|
||||
&.m--active {
|
||||
background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF)
|
||||
no-repeat 100%;
|
||||
background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: 1rem;
|
||||
color: var(--color-white-opacity);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
|
||||
min-width: 105px;
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-white-opacity);
|
||||
|
||||
&.m--ether {
|
||||
padding-right: 10px;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
animation: blink 1s infinite;
|
||||
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
left: 40px;
|
||||
top: 0;
|
||||
left: 40px;
|
||||
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
background: var(--color-emmit);
|
||||
border-radius: 50%;
|
||||
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tools {
|
||||
display: flex;
|
||||
gap: var(--space-between-block);
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
&.m--skeleton {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
&__volume {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
&-on {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat
|
||||
100%;
|
||||
background: svg-load('./assets/img/icon/volume.svg', fill=#FFFF) no-repeat 100%;
|
||||
|
||||
&:hover {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-off {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF)
|
||||
no-repeat 100%;
|
||||
background: svg-load('./assets/img/icon/volume-off.svg', fill=#FFFF) no-repeat 100%;
|
||||
|
||||
&:hover {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
appearance: none;
|
||||
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
width: calc(100% - 34px);
|
||||
height: 5px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
background: var(--color-white-opacity);
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
|
||||
appearance: none;
|
||||
background: var(--color-white-opacity);
|
||||
border-radius: 10px;
|
||||
|
||||
&::-webkit-slider-thumb,
|
||||
&::-webkit-slider-thumb {
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
appearance: none;
|
||||
box-shadow: -100vmax 0 0 100vmax var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb,
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
box-shadow: -100vmax 0 0 100vmax var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__progress {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
appearance: none;
|
||||
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
background: var(--color-white-opacity);
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:hover {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
appearance: none;
|
||||
background: var(--color-white-opacity);
|
||||
border-radius: 10px;
|
||||
|
||||
&::-webkit-slider-thumb,
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
appearance: none;
|
||||
box-shadow: -100vmax 0 0 100vmax var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--color-primary);
|
||||
position: relative;
|
||||
|
||||
width: 50px;
|
||||
min-width: 0;
|
||||
height: 50px;
|
||||
min-height: 0;
|
||||
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
|
||||
&.m--play {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat
|
||||
100%;
|
||||
|
||||
background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
background: svg-load('./assets/img/icon/play.svg', fill=$color-primary)
|
||||
no-repeat 100%;
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.m--pause {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF)
|
||||
no-repeat 100%;
|
||||
|
||||
background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary)
|
||||
no-repeat 100%;
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
|
@ -229,6 +262,7 @@
|
|||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,133 +1,173 @@
|
|||
.playlist {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&__header{
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--space-between-block) / 2);
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
&__title{
|
||||
font-size: 32px;
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
&.m--margin{
|
||||
font-size: 32px;
|
||||
|
||||
&.m--margin {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&__back{
|
||||
|
||||
&__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%;
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
transition: all .3s ease;
|
||||
&:hover{
|
||||
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: svg-load('./assets/img/icon/arrow-right.svg', stroke=$color-primary) no-repeat 100%;
|
||||
}
|
||||
}
|
||||
&__edit{
|
||||
|
||||
&__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%;
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
transition: all .3s ease;
|
||||
&:hover{
|
||||
|
||||
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{
|
||||
|
||||
&-edit {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&__search{
|
||||
|
||||
&__search {
|
||||
margin-bottom: var(--space-between-block);
|
||||
}
|
||||
&__search{
|
||||
min-width: 320px;
|
||||
|
||||
&__search {
|
||||
width: 40%;
|
||||
min-width: 320px;
|
||||
}
|
||||
&__list{
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
gap: var(--space-between-block);
|
||||
}
|
||||
&__item{
|
||||
width: calc(50% - var(--space-between-block) / 2) ;
|
||||
|
||||
&__item {
|
||||
width: calc(50% - var(--space-between-block) / 2);
|
||||
}
|
||||
&__title{
|
||||
color: transparent;
|
||||
font-size: 2rem;
|
||||
background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
|
||||
&__title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
&__upload{
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background-clip: text;
|
||||
|
||||
font-size: 2rem;
|
||||
color: transparent;
|
||||
background-image: var(--linear-gradient-highlight);
|
||||
margin: 0 0 var(--space-between-block);
|
||||
transition: all .3s ease;
|
||||
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
&__upload {
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
&:before{
|
||||
|
||||
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{
|
||||
|
||||
&:hover {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
z-index: 2;
|
||||
cursor: url('./assets/img/icon/cursor.svg'), auto;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
min-width: 220px;
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
|
||||
&__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;
|
||||
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 {
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
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;
|
||||
|
||||
background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white-opacity) no-repeat 100%;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&:hover{
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary);
|
||||
&:after{
|
||||
|
||||
&::after {
|
||||
background: svg-load('./assets/img/icon/playlist-item-create.svg', fill=$color-white) no-repeat 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,43 @@
|
|||
.playlists {
|
||||
&__content {
|
||||
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding-bottom: 1rem;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding-top: 1rem;
|
||||
|
||||
&:after{
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
background: var(--linear-gradient);
|
||||
}
|
||||
}
|
||||
&__time{
|
||||
|
||||
&__time {
|
||||
width: 100px;
|
||||
margin: 0;
|
||||
}
|
||||
&__param{
|
||||
margin: 0;
|
||||
|
||||
&__param {
|
||||
width: 25%;
|
||||
&.m--long{
|
||||
margin: 0;
|
||||
|
||||
&.m--long {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
padding: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
&__tabs{
|
||||
|
||||
&__tabs {
|
||||
margin-top: var(--space-between-block);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,110 +1,142 @@
|
|||
.rubric {
|
||||
&-block {
|
||||
margin-bottom: var(--space-between-sections);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
|
||||
&-title{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__description{
|
||||
max-width: 60%;
|
||||
margin-bottom: 2.5rem;
|
||||
@mixin responsive-xxs {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
max-width: 60%;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
&.m--50{
|
||||
margin-bottom: 0;
|
||||
max-width: 50%;
|
||||
width: 100%;
|
||||
max-width: 50%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__link{
|
||||
@mixin responsive-xxs {
|
||||
order: 1;
|
||||
margin: var(--space-between-block) 0;
|
||||
width: 100%;
|
||||
margin: var(--space-between-block) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__list{
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
&:before{
|
||||
|
||||
&::before{
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
content: '';
|
||||
|
||||
background: url("./assets/img/bg/rubric-list.svg") no-repeat;
|
||||
background-position: 25%;
|
||||
background-size: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
&__item{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
padding: 20px 0;
|
||||
z-index: 2;
|
||||
|
||||
&:hover{
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
}
|
||||
&:after{
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
background: #000;
|
||||
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
background: #000;
|
||||
background: var(--linear-gradient);
|
||||
}
|
||||
}
|
||||
|
||||
&__title{
|
||||
transition: all .3s ease;
|
||||
margin-right: auto;
|
||||
padding-right: 10px;
|
||||
|
||||
color: var(--color-white);
|
||||
text-wrap: nowrap;
|
||||
padding-right: 10px;
|
||||
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
&__btn{
|
||||
transition: all .35s ease, visibility .0s ease;
|
||||
visibility: hidden;
|
||||
text-wrap: nowrap;
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
min-width: 0;
|
||||
|
||||
text-wrap: nowrap;
|
||||
|
||||
visibility: hidden;
|
||||
|
||||
transition: all .35s ease, visibility .0s ease;
|
||||
}
|
||||
|
||||
&__item:hover &__btn{
|
||||
visibility: visible;
|
||||
min-width: 240px;
|
||||
width: 240px;
|
||||
min-width: 240px;
|
||||
margin-left: 20px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&__item:hover &__title{
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
|
||||
&-modal{
|
||||
&__header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&__title{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__close{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__cover{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
&__description{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,34 @@
|
|||
flex-wrap: wrap;
|
||||
gap: 0 var(--space-between-block);
|
||||
}
|
||||
|
||||
.m--column &-item{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-item {
|
||||
width: calc(50% - var(--space-between-block) / 2);
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
border-left: 3px solid transparent;
|
||||
padding: 10px;
|
||||
transition: border .5s ease, background .5s ease;
|
||||
background: transparent;
|
||||
@mixin responsive-m {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: calc(50% - var(--space-between-block) / 2);
|
||||
padding: 10px;
|
||||
|
||||
background: transparent;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
transition: border .5s ease, background .5s ease;
|
||||
|
||||
&.m--select &__selected {
|
||||
margin-right: 20px;
|
||||
width: 35px;
|
||||
height: 33px;
|
||||
margin-right: 20px;
|
||||
|
||||
&.m--stop {
|
||||
path {
|
||||
|
|
@ -33,8 +41,8 @@
|
|||
}
|
||||
|
||||
&__selected {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
transition: all .2s ease;
|
||||
|
||||
path:nth-child(n) {
|
||||
|
|
@ -53,110 +61,133 @@
|
|||
|
||||
&:hover {
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
background: linear-gradient(90deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 0%) 100%);
|
||||
border-color: var(--color-primary);
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
&__btn {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--color-primary);
|
||||
position: relative;
|
||||
|
||||
width: 50px;
|
||||
min-width: 0;
|
||||
height: 50px;
|
||||
min-height: 0;
|
||||
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
|
||||
&.m--small {
|
||||
background: transparent;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.m--favorites {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
|
||||
background: svg-load('./assets/img/icon/favorites.svg', fill=$color-primary) no-repeat 100%;
|
||||
background-size: contain;
|
||||
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/favorites.svg', fill=#FFF) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.m--add {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
|
||||
background: svg-load('./assets/img/icon/add-icon.svg', fill=$color-primary) no-repeat 100%;
|
||||
background-size: contain;
|
||||
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/add-icon.svg', fill=#FFF) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.m--already{
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
|
||||
background: svg-load('./assets/img/icon/icon-trash.svg', stroke=$color-primary) no-repeat 100%;
|
||||
background-size: contain;
|
||||
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/icon-trash.svg', stroke=#FFF) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.m--play {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
|
||||
background: svg-load('./assets/img/icon/play.svg', fill=#FFFF) no-repeat 100%;
|
||||
background-size: contain;
|
||||
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/play.svg', fill=$color-primary) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&.m--pause {
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: auto;
|
||||
|
||||
background: svg-load('./assets/img/icon/pause.svg', fill=#FFFF) no-repeat 100%;
|
||||
background-size: contain;
|
||||
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
&:hover::after {
|
||||
background: svg-load('./assets/img/icon/pause.svg', fill=$color-primary) no-repeat 100%;
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
@ -166,21 +197,23 @@
|
|||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1rem;
|
||||
color: var(--color-white-opacity);
|
||||
line-height: 21px;
|
||||
|
||||
margin-left: 20px;
|
||||
|
||||
font-size: 1rem;
|
||||
line-height: 21px;
|
||||
color: var(--color-white-opacity);
|
||||
|
||||
span {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&__tools {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -189,9 +222,11 @@
|
|||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,46 @@
|
|||
.support{
|
||||
&-block{
|
||||
margin-bottom: var(--space-between-sections);
|
||||
|
||||
&__item {
|
||||
width: calc(100% / 3);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
font-size: 16px;
|
||||
|
||||
width: calc(100% / 3);
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.m--one-circle:before {
|
||||
&.m--one-circle::before {
|
||||
width: 50px;
|
||||
background: url("./assets/img/icon/one-circle.svg") no-repeat center;
|
||||
}
|
||||
|
||||
&.m--two-circle:before {
|
||||
&.m--two-circle::before {
|
||||
width: 100px;
|
||||
background: url("./assets/img/icon/two-circle.svg") no-repeat center;
|
||||
}
|
||||
|
||||
&.m--three-circle:before {
|
||||
&.m--three-circle::before {
|
||||
width: 150px;
|
||||
background: url("./assets/img/icon/three-circle.svg") no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&__list{
|
||||
display: flex;
|
||||
gap: var(--space-between-block);
|
||||
|
|
|
|||
|
|
@ -2,50 +2,61 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--space-between-block);
|
||||
|
||||
&.m--btns{
|
||||
gap: 10px;
|
||||
@mixin responsive-xs {
|
||||
.button{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
&__item {
|
||||
border: none;
|
||||
background: none;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
|
||||
font-size: 2rem;
|
||||
color: var(--color-white);
|
||||
text-transform: uppercase;
|
||||
font-size: 2rem;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
margin-left: 10px;
|
||||
|
||||
background: var(--color-white);
|
||||
border-radius: 20px;
|
||||
height: 100%;
|
||||
width: 3px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active, &:hover {
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-image: var(--linear-gradient);
|
||||
cursor: url("./assets/img/icon/cursor.svg"), auto;
|
||||
color: transparent;
|
||||
background-image: var(--linear-gradient);
|
||||
background-clip: text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,36 @@
|
|||
.team {
|
||||
margin-left: auto;
|
||||
max-width: calc(100vw - ((100vw - var(--container)) / 2));
|
||||
margin-bottom: var(--space-between-sections);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@mixin responsive-xl {
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
max-width: calc(100vw - ((100vw - var(--container)) / 2));
|
||||
margin-bottom: var(--space-between-sections);
|
||||
margin-left: auto;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
max-width: var(--container);
|
||||
margin-right: auto;
|
||||
padding: 0 50px 0;
|
||||
margin-bottom: var(--space-between-block);
|
||||
@mixin responsive-xl {
|
||||
padding: 0 40px 0 0;
|
||||
column-gap: var(--space-between-block);
|
||||
padding: 0 40px 0 0;
|
||||
}
|
||||
|
||||
@mixin responsive-s {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
|
||||
max-width: var(--container);
|
||||
margin-right: auto;
|
||||
margin-bottom: var(--space-between-block);
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -44,79 +49,93 @@
|
|||
}
|
||||
|
||||
&__tools {
|
||||
margin-top: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
max-width: var(--container);
|
||||
margin-right: auto;
|
||||
row-gap: 1.5rem;
|
||||
padding: 0 50px 0;
|
||||
@mixin responsive-xl {
|
||||
padding: 0 80px 0 35px;
|
||||
}
|
||||
|
||||
@mixin responsive-l {
|
||||
padding: 0 40px 0 0;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
max-width: var(--container);
|
||||
margin-top: 65px;
|
||||
margin-right: auto;
|
||||
padding: 0 50px;
|
||||
|
||||
.m--link{
|
||||
@mixin responsive-s {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
max-width: 460px;
|
||||
background: var(--color-white-opacity);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
@mixin responsive-s {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
height: 4px;
|
||||
|
||||
background: var(--color-white-opacity);
|
||||
border-radius: 20px;
|
||||
|
||||
span {
|
||||
background: var(--color-white);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: left top;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: left top;
|
||||
|
||||
background: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&__cover {
|
||||
margin-bottom: 0.5rem;
|
||||
height: 450px;
|
||||
overflow: hidden;
|
||||
height: 450px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
|
||||
span {
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 820px;
|
||||
@mixin responsive-xl {
|
||||
max-width: calc(100% - var(--space-between-block));
|
||||
}
|
||||
|
||||
@mixin responsive-s {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
max-width: 820px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@ $document-width-s: 730px;
|
|||
$document-width-xs: 640px;
|
||||
$document-width-xxs: 480px;
|
||||
$color-primary: #5e5bfc;
|
||||
$color-white: #ffffff;
|
||||
$color-white: #fff;
|
||||
$color-white-opacity: #bbb9ca;
|
||||
|
||||
:root {
|
||||
--color-black: #232323;
|
||||
--color-white: $color-white;
|
||||
|
|
@ -14,7 +15,7 @@ $color-white-opacity: #bbb9ca;
|
|||
--color-white-opacity: $color-white-opacity;
|
||||
--bg-wrapper-modal: #000000e5;
|
||||
--color-primary: $color-primary;
|
||||
--color-black-cc: #000000cc;
|
||||
--color-black-cc: #000c;
|
||||
--color-emmit: #e81717;
|
||||
--bg-opacity: #74767d;
|
||||
--base-fz: 18px;
|
||||
|
|
@ -30,13 +31,16 @@ $color-white-opacity: #bbb9ca;
|
|||
@media (max-width: $document-width-xl) {
|
||||
--container: $document-width-l;
|
||||
}
|
||||
|
||||
@media (max-width: $document-width-l) {
|
||||
--container: $document-width-m;
|
||||
}
|
||||
|
||||
@media (max-width: $document-width-m) {
|
||||
--container: $document-width-s;
|
||||
--space-between-sections: calc(var(--base-fz) * 2.7);
|
||||
}
|
||||
|
||||
@media (max-width: $document-width-s) {
|
||||
--container: $document-width-xs;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
/* eslint-disable */
|
||||
// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
|
||||
// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
|
||||
import "quasar/dist/types/feature-flag";
|
||||
import 'quasar/dist/types/feature-flag';
|
||||
|
||||
declare module "quasar/dist/types/feature-flag" {
|
||||
declare module 'quasar/dist/types/feature-flag' {
|
||||
interface QuasarFeatureFlags {
|
||||
store: true;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue