179 lines
2.8 KiB
SCSS
179 lines
2.8 KiB
SCSS
[data-theme='light'] {
|
|
--neutral-50: #F6F7F6;
|
|
--neutral-100: #E9EAE8;
|
|
--neutral-200: #C9CBC4;
|
|
--neutral-300: #A6A99F;
|
|
--neutral-400: #81867B;
|
|
--neutral-500: #686C60;
|
|
--neutral-600: #51554C;
|
|
--neutral-700: #42463F;
|
|
--neutral-800: #373A35;
|
|
--neutral-900: #2A2B28;
|
|
--neutral-950: #111210;
|
|
|
|
|
|
--primary-50: #FFF0F3;
|
|
--primary-100: #FFE2E8;
|
|
--primary-200: #FFC9D7;
|
|
--primary-300: #FF9CB6;
|
|
--primary-400: #FF6591;
|
|
--primary-500: #FF306F;
|
|
--primary-600: #ED0C5B;
|
|
--primary-700: #CD034F;
|
|
--primary-800: #AB064A;
|
|
--primary-900: #920945;
|
|
--primary-950: #520021;
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--neutral-50: #111210;
|
|
--neutral-100: #2A2B28;
|
|
--neutral-200: #373A35;
|
|
--neutral-300: #42463F;
|
|
--neutral-400: #51554C;
|
|
--neutral-500: #686C60;
|
|
--neutral-600: #81867B;
|
|
--neutral-700: #A6A99F;
|
|
--neutral-800: #C9CBC4;
|
|
--neutral-900: #E9EAE8;
|
|
--neutral-950: #F6F7F6;
|
|
|
|
--primary-50: #520021;
|
|
--primary-100: #920945;
|
|
--primary-200: #AB064A;
|
|
--primary-300: #CD034F;
|
|
--primary-400: #ED0C5B;
|
|
--primary-500: #FF306F;
|
|
--primary-600: #ED0C5B;
|
|
--primary-700: #FF9CB6;
|
|
--primary-800: #FFC9D7;
|
|
--primary-900: #FFE2E8;
|
|
--primary-950: #FFF0F3;
|
|
}
|
|
|
|
|
|
/* width */
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
border-radius: 900px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--primary-600);
|
|
}
|
|
|
|
/* Handle on hover */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--primary-700);
|
|
}
|
|
|
|
body, p, html, button {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
|
|
body {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
|
|
#app {
|
|
background: var(--neutral-50);
|
|
color: var(--neutral-950);
|
|
height: 100vh;
|
|
width: 100vw;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
button {
|
|
color: var(--neutral-900);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Inter, sans-serif;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
line-height: 29px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
p {
|
|
font-family: Inter, sans-serif;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 19px;
|
|
}
|
|
|
|
.sub-text {
|
|
color: var(--neutral-50);
|
|
font-family: Inter, sans-serif;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
}
|
|
|
|
|
|
.iconDefault {
|
|
color: var(--neutral-950);
|
|
}
|
|
|
|
.iconDefaultStroke {
|
|
Stroke: var(--neutral-950);
|
|
}
|
|
.iconDefaultStrokeReverse {
|
|
stroke: var(--neutral-50);
|
|
}
|
|
.iconFixedStrokeWhite {
|
|
stroke: #F6F7F6;
|
|
}
|
|
.iconFixedStrokeBlack {
|
|
stroke: #111210;
|
|
}
|
|
|
|
.iconDefaultFill {
|
|
fill: var(--neutral-950);
|
|
}
|
|
|
|
.iconDefaultFillReverse {
|
|
fill: var(--neutral-50);
|
|
}
|
|
|
|
.iconFixedFillWhite {
|
|
fill: #F6F7F6;
|
|
}
|
|
.iconFixedFillBlack {
|
|
fill: #111210;
|
|
}
|
|
|
|
.colorFixedWhite {
|
|
color: #F6F7F6;
|
|
}
|
|
.colorFixedBlack {
|
|
color: #111210;
|
|
} |