71 lines
No EOL
1.4 KiB
CSS
71 lines
No EOL
1.4 KiB
CSS
/* Import Tailwind layers */
|
|
@import "tailwindcss";
|
|
@tailwind utilities;
|
|
|
|
/* Custom recipe app styles */
|
|
@layer components{
|
|
.app-container {
|
|
@apply p-4 flex;
|
|
}
|
|
|
|
.content-title{
|
|
@apply text-3xl font-black mb-8 text-blue-400;
|
|
}
|
|
|
|
.main-view {
|
|
@apply w-2/3 pl-4;
|
|
}
|
|
|
|
.recipe-image {
|
|
@apply my-4 w-64;
|
|
}
|
|
|
|
.section-heading {
|
|
@apply text-xl font-bold mb-2;
|
|
}
|
|
|
|
.subsection-heading {
|
|
@apply font-semibold mb-2 mt-4;
|
|
}
|
|
|
|
.label {
|
|
@apply text-gray-600
|
|
}
|
|
|
|
/* buttons */
|
|
.primary-button {
|
|
@apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap
|
|
}
|
|
|
|
.default-button{
|
|
@apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 whitespace-nowrap text-gray-600
|
|
}
|
|
|
|
.dark-button{
|
|
@apply bg-gray-600 hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap
|
|
}
|
|
|
|
/* input fields like input and textarea */
|
|
.input-field {
|
|
@apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-600 transition-colors text-gray-600 focus:outline-none focus:border-blue-800;
|
|
}
|
|
|
|
/* groups */
|
|
.button-group{
|
|
@apply flex gap-4 mt-4;
|
|
}
|
|
|
|
.horizontal-input-group{
|
|
@apply flex gap-2 mb-2 items-center;
|
|
}
|
|
|
|
/* lists */
|
|
.default-list {
|
|
@apply list-disc pl-6 mb-6;
|
|
}
|
|
|
|
.ingredient-group-card {
|
|
@apply py-4 border-b border-gray-400;
|
|
}
|
|
|
|
} |