165 lines
3.4 KiB
CSS
165 lines
3.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* https://google-webfonts-helper.herokuapp.com/fonts */
|
|
|
|
/* manrope-regular - latin */
|
|
@font-face {
|
|
font-family: 'Manrope';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('../fonts/manrope-v8-latin-regular.eot');
|
|
/* IE9 Compat Modes */
|
|
src: local(''),
|
|
url('../fonts/manrope-v8-latin-regular.eot?#iefix')
|
|
format('embedded-opentype'),
|
|
/* IE6-IE8 */ url('../fonts/manrope-v8-latin-regular.woff2') format('woff2'),
|
|
/* Super Modern Browsers */ url('../fonts/manrope-v8-latin-regular.woff')
|
|
format('woff'),
|
|
/* Modern Browsers */ url('../fonts/manrope-v8-latin-regular.ttf')
|
|
format('truetype'),
|
|
/* Safari, Android, iOS */
|
|
url('../fonts/manrope-v8-latin-regular.svg#Manrope') format('svg');
|
|
/* Legacy iOS */
|
|
}
|
|
|
|
/* manrope-700 - latin */
|
|
@font-face {
|
|
font-family: 'Manrope';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url('../fonts/manrope-v8-latin-700.eot');
|
|
/* IE9 Compat Modes */
|
|
src: local(''),
|
|
url('../fonts/manrope-v8-latin-700.eot?#iefix') format('embedded-opentype'),
|
|
/* IE6-IE8 */ url('../fonts/manrope-v8-latin-700.woff2') format('woff2'),
|
|
/* Super Modern Browsers */ url('../fonts/manrope-v8-latin-700.woff')
|
|
format('woff'),
|
|
/* Modern Browsers */ url('../fonts/manrope-v8-latin-700.ttf')
|
|
format('truetype'),
|
|
/* Safari, Android, iOS */ url('../fonts/manrope-v8-latin-700.svg#Manrope')
|
|
format('svg');
|
|
/* Legacy iOS */
|
|
}
|
|
|
|
/* Jetbrains mono - latin */
|
|
@font-face {
|
|
font-family: 'Jetbrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('../fonts/JetBrainsMono-Regular.woff2');
|
|
}
|
|
|
|
/* ROUTE TRANSITION */
|
|
|
|
.route-move,
|
|
.route-enter-active,
|
|
.route-leave-active {
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
.route-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.route-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.route-leave-active {
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
/* ROUTE TRANSITION - BACK */
|
|
|
|
.route_back-move,
|
|
.route_back-enter-active,
|
|
.route_back-leave-active {
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
.route_back-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.route_back-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.route_back-leave-active {
|
|
position: absolute;
|
|
}
|
|
|
|
|
|
/* SLIDE LEFT */
|
|
|
|
.slide_left-move,
|
|
.slide_left-enter-active,
|
|
.slide_left-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.slide_left-enter-from,
|
|
.slide_left-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
/* .slide_left-leave-active {
|
|
position: absolute;
|
|
} */
|
|
|
|
/* SLIDE UP */
|
|
|
|
.slide_up-enter-active,
|
|
.slide_up-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.slide_up-enter-from,
|
|
.slide_up-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(60px);
|
|
}
|
|
|
|
/* ZERO HEIGHT */
|
|
|
|
.zero_height-enter-active,
|
|
.zero_height-leave-active {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.zero_height-enter-from,
|
|
.zero_height-leave-to {
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
@layer utils {
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply hover:text-cyan-500 dark:text-stone-400 dark:hover:text-cyan-500;
|
|
@apply transition-colors duration-200;
|
|
}
|
|
.btn-border {
|
|
@apply w-fit p-2;
|
|
@apply rounded border border-stone-600 transition-opacity;
|
|
@apply hover:border-cyan-500 hover:text-cyan-500;
|
|
@apply transition-colors duration-200;
|
|
}
|
|
.btn-disabled {
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
} |