araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

css and adding cancel button to editor

Browse source
This commit is contained in:
Anika Raemer 2025-09-07 09:43:55 +02:00
parent f1711831f7
commit 0eec7cf58e
5 changed files with 102 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

99
frontend/src/App.css
View file

@ -4,55 +4,76 @@
/* Custom recipe app styles */
@layer components{
.app-container {
@apply p-4 flex;
}
.app-container {
@apply p-4 flex;
}
.sidebar {
@apply min-w-[16rem] bg-gray-50 p-4 w-1/3 border-r pr-4;
}
.sidebar {
@apply min-w-[16rem] bg-gray-50 p-4 w-1/3 border-r pr-4;
}
.sidebar-title {
@apply text-blue-900 font-bold mb-2;
}
.sidebar-title {
@apply text-blue-900 font-bold mb-2;
}
.sidebar-link {
@apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition
}
.sidebar-link {
@apply block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition
}
.sidebar-item-text {
@apply font-semibold text-blue-400
}
.sidebar-item-text {
@apply font-semibold text-blue-400;
}
.content-title{
@apply text-xl font-black mb-16 text-blue-300
}
.content-title{
@apply text-3xl font-black mb-8 text-blue-400;
}
.main-view {
@apply w-2/3 pl-4;
}
.main-view {
@apply w-2/3 pl-4;
}
.recipe-title {
@apply text-2xl font-bold;
}
.recipe-image {
@apply my-4 w-64;
}
.recipe-image {
@apply my-4 w-64;
}
.section-heading {
@apply text-xl font-bold mb-2;
}
.section-heading {
@apply text-2xl font-bold;
}
.subsection-heading {
@apply font-semibold mb-2;
}
.primary-button {
@apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 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
}
.default-button{
@apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600
}
.default-button{
@apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600
}
.input-field {
@apply border p-2 w-full mb-2;
}
.dark-button{
@apply bg-gray-600 text-white rounded px-4 py-2
}
/* input field */
.input-field {
@apply border p-2 w-full mb-2 rounded;
}
.text-area {
@apply border p-2 w-full mb-2 rounded;
}
/* groups */
.button-group{
@apply flex gap-4 mt-4;
}
/* lists */
.default-list-item {
@apply list-disc pl-6 mb-6
}
}