4d5cb9791b
- add login page design - use card class instead on card component - add button press animations
53 lines
1.4 KiB
CSS
53 lines
1.4 KiB
CSS
/* You can add global styles to this file, and also import other style files */
|
|
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");
|
|
|
|
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* This overrides the default 'sans' font stack with Geist */
|
|
--font-sans:
|
|
"Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
|
"Segoe UI Symbol", "Noto Color Emoji";
|
|
--font-space: "Space Grotesk", sans-serif;
|
|
}
|
|
|
|
body {
|
|
@apply bg-gray-100;
|
|
}
|
|
|
|
.wrapper {
|
|
@apply px-5 sm:px-15;
|
|
}
|
|
|
|
.btn {
|
|
@apply rounded-full transition-all duration-200 ease-out flex justify-center active:translate-y-[1px];
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply text-gray-600 border border-gray-300 hover:bg-gray-800 hover:text-gray-200;
|
|
}
|
|
|
|
.btn-black {
|
|
@apply text-gray-100 bg-gray-800 border border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-gray-50 rounded-xl border border-gray-300 hover:border-gray-400 p-4 hover:shadow-xl transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
.fieldset {
|
|
@apply space-y-1;
|
|
}
|
|
.fieldset-legend {
|
|
@apply text-xs font-bold ml-2 text-gray-800;
|
|
}
|
|
|
|
.fieldset .label {
|
|
@apply text-xs text-gray-400 ml-2;
|
|
}
|
|
|
|
.input {
|
|
@apply p-3 border border-gray-300 rounded-xl text-sm w-full;
|
|
}
|