96 lines
1.7 KiB
CSS
96 lines
1.7 KiB
CSS
|
|
/* assets/css/custom.css */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Lato:wght@400;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Lato', sans-serif;
|
|
background-color: #F0F8FF;
|
|
color: #292B2C;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
h1, h2, h3, .h1, .h2, .h3 {
|
|
font-family: 'Mountains of Christmas', cursive;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-family: 'Mountains of Christmas', cursive;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 0.5rem;
|
|
border: none;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #D9534F;
|
|
border-color: #D9534F;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #c9302c;
|
|
border-color: #c9302c;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #5CB85C;
|
|
border-color: #5CB85C;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #4cae4c;
|
|
border-color: #4cae4c;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #F0AD4E;
|
|
border-color: #F0AD4E;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #ec971f;
|
|
border-color: #ec971f;
|
|
}
|
|
|
|
#shopping-list-container {
|
|
background-color: #fff;
|
|
padding: 2rem;
|
|
border-radius: 0.5rem;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.ingredient-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.ingredient-row .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Snowflakes animation */
|
|
.snowflake {
|
|
color: #fff;
|
|
font-size: 1em;
|
|
font-family: Arial, sans-serif;
|
|
text-shadow: 0 0 5px #000;
|
|
position: fixed;
|
|
top: -5%;
|
|
z-index: -1;
|
|
user-select: none;
|
|
animation: fall linear infinite;
|
|
}
|
|
|
|
@keyframes fall {
|
|
to {
|
|
transform: translateY(105vh);
|
|
}
|
|
}
|