155 lines
No EOL
3.2 KiB
CSS
155 lines
No EOL
3.2 KiB
CSS
:root {
|
|
--pink-a: #ff9ff3;
|
|
--pink-b: #f368e0;
|
|
--yellow-a: #feca57;
|
|
--yellow-b: #ff9f43;
|
|
--red-a: #ff6b6b;
|
|
--red-b: #ee5253;
|
|
--light-blue-a: #ee5253;
|
|
--light-blue-b: #0abde3;
|
|
--green-a: #1dd1a1;
|
|
--green-b: #10ac84;
|
|
--cyan-a: #00d2d3;
|
|
--cyan-b: #01a3a4;
|
|
--blue-a: #54a0ff;
|
|
--blue-b: #2e86de;
|
|
--purple-a: #5f27cd;
|
|
--purple-b: #341f97;
|
|
--grey-a: #c8d6e5;
|
|
--grey-b: #8395a7;
|
|
--dark-grey-a: hsl(211, 14%, 40%);
|
|
--dark-grey-b: hsl(212, 29%, 19%);
|
|
--dark-grey-c: hsl(212, 29%, 15%);
|
|
--dark-grey-ca: hsl(212, 27%, 12%);
|
|
--dark-grey-d: hsl(212, 14%, 10%);
|
|
--dark-grey-e: hsl(212, 12%, 8%);
|
|
|
|
--foreground-color-a: #fff;
|
|
--foreground-color-b: var(--grey-a);
|
|
--foreground-color-c: var(--grey-b);
|
|
|
|
--background-color-a: var(--dark-grey-b);
|
|
--background-color-b: var(--dark-grey-c);
|
|
--background-color-ba: var(--dark-grey-ca);
|
|
--background-color-c: var(--dark-grey-d);
|
|
--background-color-d: var(--dark-grey-e);
|
|
|
|
--scrollbar-color: hsla(211, 29%, 40%, 25%);
|
|
|
|
--body-font-family: "Poppins", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
--mono-font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
monospace;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-Thin.ttf");
|
|
font-weight: 100;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-ExtraLight.ttf");
|
|
font-weight: 200;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-Light.ttf");
|
|
font-weight: 300;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-Regular.ttf");
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-SemiBold.ttf");
|
|
font-weight: 500;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-Bold.ttf");
|
|
font-weight: 600;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-ExtraBold.ttf");
|
|
font-weight: 700;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Poppins";
|
|
src: url("/public/media/fonts/Poppins/Poppins-Black.ttf");
|
|
font-weight: 800;
|
|
}
|
|
|
|
html, body, #root {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
overflow: hidden;
|
|
background-color: var(--background-color-c);
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--body-font-family);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
* {
|
|
color: var(--foreground-color-a);
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
p, a, button, input, h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--body-font-family);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
code {
|
|
font-family: var(--mono-font-family);
|
|
}
|
|
|
|
button {
|
|
margin: 0;
|
|
border: none;
|
|
outline: none;
|
|
transition: background-color 100ms ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
|
|
*::selection {
|
|
color: var(--background-color-c);
|
|
background-color: var(--grey-b);
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 20px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: none;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
border-radius: 9999px;
|
|
border: 5px solid transparent;
|
|
background-color: var(--scrollbar-color);
|
|
background-clip: padding-box;
|
|
backdrop-filter: invert(100%);
|
|
transition: 200ms ease-in-out;
|
|
z-index: 1;
|
|
} |