Added print button/logic
This commit is contained in:
@@ -60,21 +60,6 @@ html, body {
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 2px solid #dccca7;
|
||||
color: #2e1e0a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
width: fit-content;
|
||||
margin: 0 auto 1rem auto;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
color: #5d4a36 !important;
|
||||
@@ -198,13 +183,230 @@ html, body {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.save-recipe-btn:hover {
|
||||
background-color: #3b4e1e !important;
|
||||
color: #f4e4bc !important;
|
||||
text-shadow: none !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.print-btn {
|
||||
background-color: #3b4e1e !important;
|
||||
color: #f4e4bc !important;
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
text-transform: none !important;
|
||||
letter-spacing: 0;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.print-btn:hover {
|
||||
background-color: #2e1e0a !important;
|
||||
color: #f4e4bc !important;
|
||||
text-shadow: none !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
margin: 0.5in 0.75in !important;
|
||||
}
|
||||
|
||||
.v-application,
|
||||
.v-application__wrap,
|
||||
main.v-main,
|
||||
.v-container {
|
||||
padding-top: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.recipe-content {
|
||||
margin-top: -20px !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.chat-container,
|
||||
.v-app-bar,
|
||||
.no-print,
|
||||
.separator,
|
||||
.v-divider,
|
||||
button,
|
||||
.v-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body, .recipe-bg, .landing-page, .recipe-card {
|
||||
background: white !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none !important;
|
||||
color: black !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.v-row,
|
||||
.v-col,
|
||||
.v-container,
|
||||
.v-card,
|
||||
.recipe-card,
|
||||
div[class*="v-col"] {
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 2. Specific fix for Vuetify's "thin" borders */
|
||||
.v-border-thin,
|
||||
.border,
|
||||
.border-sm {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
.v-border-thin,
|
||||
.border,
|
||||
.border-sm {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
header.text-center {
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
header.text-center img,
|
||||
.v-img,
|
||||
[class*="v-img"] {
|
||||
max-height: 60px !important;
|
||||
margin-bottom: 2px !important;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
margin-bottom: 5px !important;
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
margin-bottom: 45px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.recipe-content .v-row {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: nowrap !important;
|
||||
width: 100% !important;
|
||||
gap: 0.4in !important;
|
||||
align-items: flex-start !important;
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.recipe-content .v-row > div:first-child {
|
||||
flex: 0 0 35% !important;
|
||||
width: 35% !important;
|
||||
max-width: 35% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.recipe-content .v-row > div:last-child {
|
||||
flex: 0 0 60% !important;
|
||||
width: 60% !important;
|
||||
max-width: 60% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 12px !important;
|
||||
padding-bottom: 0 !important;
|
||||
border-bottom: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
* {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.ingredient-item, .step-text {
|
||||
font-size: 0.95rem !important;
|
||||
line-height: 1.3 !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.instruction-step {
|
||||
margin-bottom: 8px !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.step-number, .ingredient-item::before {
|
||||
color: #3b4e1e !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.recipe-content, .v-row, .v-col {
|
||||
overflow: visible !important;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 2px solid #dccca7;
|
||||
color: #4a3a2a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ingredients-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ingredient-item {
|
||||
position: relative;
|
||||
padding-left: 45px;
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-size: 1.1rem !important;
|
||||
line-height: 1.4 !important;
|
||||
color: #2c2925 !important;
|
||||
}
|
||||
|
||||
.ingredients-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
padding-left:20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ingredient-item::before {
|
||||
content: "❦";
|
||||
position: absolute;
|
||||
padding-left: 10px;
|
||||
left: 0;
|
||||
color: #3b4e1e;
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.instruction-step{
|
||||
display: flex !important;
|
||||
align-items: flex-start !important;
|
||||
text-align: left;
|
||||
gap: 12px !important;
|
||||
margin-bottom: 24px !important;
|
||||
width: 100%;
|
||||
@@ -215,9 +417,9 @@ html, body {
|
||||
font-weight: bold !important;
|
||||
color: #3b4e1e !important;
|
||||
font-size: 1.1rem !important;
|
||||
min-width: 28px !important;
|
||||
text-align: right !important;
|
||||
line-height: 1.6 !important;
|
||||
min-width: 30px !important;
|
||||
text-align: center !important;
|
||||
line-height: 1.4 !important;
|
||||
padding-top: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
@@ -231,14 +433,6 @@ html, body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ingredient-item {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-size: 1.1rem !important;
|
||||
line-height: 1.8 !important;
|
||||
color: #2c2925 !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
width: 100%;
|
||||
background-color: rgba(62, 42, 20, 0.03) !important;
|
||||
@@ -369,10 +563,10 @@ html, body {
|
||||
border: 1px solid #7a3e29
|
||||
}
|
||||
|
||||
.message.assistant {
|
||||
.chat-display .message.assistant {
|
||||
background-color: #fcf8ef !important;
|
||||
color: #2e1e0a !important;
|
||||
align-self: flex-start;
|
||||
border-radius: 12px 12px 12px 2px;
|
||||
border: 1px solid #e8dec5;
|
||||
border: 1px solid #e8dec5 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user