/* static/style.css - Modern Minimalistic Theme */
/* Base styles */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
background-color: #fafafa;
color: #1e1e1e;
}
#app-content {
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}
/* Sticky header (tabs + progress bar) */
.sticky-header {
position: sticky;
top: 0;
z-index: 1000;
background-color: #ffffff;
border-bottom: 1px solid #eaeaea;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
/* Tabs row – full width bar, content constrained on large screens */
.tabs-row {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 768px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.tabs {
display: flex;
flex: 1;
gap: 0px;
}
.tab-button {
background: none;
border: none;
padding: 12px 16px;
font-size: 1rem;
font-weight: 500;
color: #5c5c5c;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 2px solid transparent;
flex: 1; /* each tab takes equal space */
text-align: center;
}
.tab-button:hover {
color: #1e1e1e;
}
.tab-button.active {
color: #007bff;
border-bottom-color: #007bff;
}
/* Progress bar */
#progress-bar-container {
width: 100%;
display: none;
}
#progress-bar {
height: 3px;
background-color: #007bff;
width: 0%;
transition: width 0.2s ease;
display: none;
}
/* Active state is signalled only by the blue bar indicator (::after);
we deliberately do NOT recolour the text/emoji here. */
/* Tab content containers */
.tab-content {
flex: 1;
padding: 20px 24px 0px 24px; /* extra bottom padding for floating buttons */
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
/* Categories in shopping tab */
.category {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
margin-bottom: 20px;
padding: 16px 20px;
border: 1px solid #efefef;
}
.category h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
}
/* Shopping items (editor and shopping tabs) */
.shopping-item {
display: flex;
align-items: center;
margin-bottom: 2px; /* reduced from 4px */
padding: 2px 0;
}
.shopping-item .indent-handle {
cursor: pointer;
margin-right: 8px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #888;
transition: color 0.2s;
}
.shopping-item .indent-handle:hover {
color: #333;
}
.shopping-item .indent-handle::before {
content: "▶";
font-size: 10px;
}
.shopping-item .indent-handle.indented::before {
content: "▼";
}
.shopping-item .item-text {
flex: 1;
padding: 4px 5px; /* reduced from 6px */
border: 1px solid transparent;
border-radius: 6px;
outline: none;
background: transparent;
transition: background 0.1s ease;
font-size: 0.95rem;
}
.shopping-item .item-text:focus {
background-color: #fff7e5;
border-color: #ffd966;
}
.indent {
margin-left: 24px;
}
/* Checkboxes — rem so they track the Tekststørrelse setting, which writes
font-size on . (em fails here: doesn't inherit font-size
from its parent by default, so em resolves against the UA stylesheet.)
1.125rem at default 16px = 18px (unchanged look). */
input[type="checkbox"] {
margin-right: 0.625rem;
width: 1.125rem;
height: 1.125rem;
cursor: pointer;
accent-color: #007bff;
}
/* Superscript group names */
sup {
font-size: 0.7rem;
background-color: #f0f0f0;
padding: 2px 5px;
border-radius: 12px;
margin-left: 6px;
color: #666;
}
/* Recipes tab — saved recipe cards */
.recipes-empty {
color: #888;
font-size: 0.95rem;
text-align: center;
padding: 32px 16px;
line-height: 1.5;
}
.saved-recipe-card {
background: #fff;
border: 1px solid #eaeaea;
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.recipe-card-name {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 12px;
color: #1e1e1e;
}
/* Loading shimmer on the recipe name while extracting */
.recipe-loading-name {
display: inline-block;
width: 180px;
height: 1.1em;
border-radius: 6px;
background: linear-gradient(90deg, #e8e8e8 25%, #d0d0d0 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: recipe-shimmer 1.4s infinite;
vertical-align: middle;
}
@keyframes recipe-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Pill button — single row, three sections, consistent 30px radius */
.recipe-pill {
display: flex;
flex-wrap: wrap;
border-radius: 30px;
overflow: hidden;
border: 1px solid #dde1e7;
max-width: 100%;
}
.pill-btn {
flex: 1 1 auto;
min-width: 0;
padding: 7px 14px;
border: none;
background: #f5f6f7;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
color: #333;
transition: background 0.15s;
white-space: nowrap;
text-align: center;
}
.pill-btn + .pill-btn {
border-left: 1px solid #dde1e7;
}
.pill-view {
background: #007bff;
color: #fff;
min-width: 100px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.pill-view:hover:not(:disabled) { background: #0069d9; }
.pill-view-loading {
background: #c8d8f0;
color: #6b90c4;
cursor: default;
}
/* Tiny spinner inside the loading pill-view button */
.pill-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: step-spin 0.7s linear infinite;
flex-shrink: 0;
}
.pill-view-loading .pill-spinner {
border-color: #6b90c4;
border-top-color: transparent;
}
.pill-link:hover { background: #eaecef; }
.pill-delete { color: #c0392b; }
.pill-delete:hover { background: #fdf0f0; }
/* Error state */
.recipe-card-error .recipe-card-name {
display: flex;
align-items: center;
gap: 8px;
color: #c0392b;
}
.recipe-error-badge {
font-size: 0.75rem;
background: #fdf0f0;
color: #c0392b;
padding: 2px 8px;
border-radius: 12px;
font-weight: 600;
}
.pill-view-error {
background: #dc3545;
color: #fff;
}
.pill-view-error:hover { background: #c82333; }
.pill-error-details {
background: #f0c674;
color: #333;
}
.pill-error-details:hover { background: #e6b85c; }
/* Confirm modal — vertical option list */
.confirm-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 4px;
}
.confirm-opt {
width: 100%;
padding: 11px 16px;
border-radius: 30px;
font-size: 0.95rem;
font-weight: 500;
border: none;
cursor: pointer;
text-align: center;
transition: background 0.15s;
}
.confirm-opt.primary, .modal-actions button.primary { background: #007bff; color: #fff; }
.confirm-opt.primary:hover { background: #0069d9; }
.confirm-opt.secondary, .modal-actions button.secondary { background: #f0f0f0; color: #333; }
.confirm-opt.secondary:hover { background: #e2e2e2; }
.confirm-cancel-btn {
background: none;
border: none;
color: #888;
font-size: 0.9rem;
cursor: pointer;
padding: 6px 12px;
}
.confirm-cancel-btn:hover { color: #333; }
/* Feedback button inside categories */
.feedback-btn {
margin-left: 12px;
background: none;
border: 1px solid #e0e0e0;
padding: 2px 10px;
border-radius: 20px;
font-size: 0.7rem;
cursor: pointer;
color: #888;
transition: all 0.2s;
}
.feedback-btn:hover {
background-color: #f8f8f8;
color: #d9534f;
border-color: #d9534f;
}
/* Login overlay and form */
#login-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.login-form {
background-color: white;
padding: 2rem;
border-radius: 12px;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.login-form h2 {
margin-top: 0;
text-align: center;
margin-bottom: 1.5rem;
}
.login-form input {
width: 100%;
padding: 12px;
margin-bottom: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
}
.login-form button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
}
.login-form button:hover {
background-color: #0056b3;
}
#login-error {
text-align: center;
margin-top: 1rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.tab-button {
padding: 10px 8px;
font-size: 0.85rem;
}
.tab-content {
padding: 8px;
}
.category {
padding: 12px;
}
}
/* Completed item styling (grey, strike-through) */
.completed-item .item-text,
.completed-item span {
text-decoration: line-through !important;
color: #999 !important;
}
/* Heading for completed section */
#shopping-list h3 {
border-top: 1px solid #eaeaea;
padding-top: 1rem;
margin-top: 2rem;
font-weight: 500;
}
/* Bottom UI wrapper (action bar + connection bar) */
#bottom-ui {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
flex-direction: column;
}
/* Action buttons bar — full-width chrome, content constrained inside */
#action-buttons-container {
position: relative; /* positioning context for .action-toast */
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid #e8e8e8;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
}
/* Inner wrapper: max-width centered, equal-slot layout.
max-width in rem so the container grows with the Tekststørrelse scale
(buttons inside are rem-sized; px max-width would clip them at large sizes). */
.action-bar-inner {
max-width: 48rem;
margin: 0 auto;
display: flex;
align-items: stretch;
width: 100%;
}
/* Each button lives in a flex slot. All slots are equal-width (flex: 1)
except the text feedback slot which gets a bit more room (flex: 1.5). */
.bar-slot {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 0;
padding: 0.3rem 0; /* scales with font-size step */
}
/* Grey vertical separator — drawn on top of buttons (z-index: 1) so the
feedback button's active fill never visually bleeds past it. */
.bar-slot + .bar-slot::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.25rem;
background: #e0e0e0;
pointer-events: none;
z-index: 1;
}
/* Button text labels — hidden on small screens, shown on larger ones */
.btn-label {
display: none;
font-size: 0.72rem;
white-space: nowrap;
}
@media (min-width: 600px) {
.btn-label { display: inline; }
}
/* Action bar icon buttons — all rem so they grow with font-size steps */
#toggle-checked-btn,
#delete-checked-btn,
#achievements-btn,
#settings-btn {
background-color: #fff;
border: none;
min-width: 2.75rem;
height: 2.75rem;
padding: 0 0.25rem;
cursor: pointer;
border-radius: 0.625rem;
font-size: 1.375rem;
transition: background-color 0.6s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
color: #1e1e1e;
flex-shrink: 0;
}
/* Press: instant grey-down, fades back to white over 0.6s.
Explicit :focus white prevents iOS Safari's focus tint from lingering. */
#toggle-checked-btn:active,
#delete-checked-btn:active,
#achievements-btn:active,
#settings-btn:active {
background-color: rgba(0, 0, 0, 0.09);
transition: background-color 0s;
}
#toggle-checked-btn:focus,
#delete-checked-btn:focus,
#achievements-btn:focus,
#settings-btn:focus {
background-color: #fff;
outline: none;
}
@media (hover: hover) {
#toggle-checked-btn:hover,
#delete-checked-btn:hover,
#achievements-btn:hover,
#settings-btn:hover {
background-color: #f0f0f0;
}
}
#delete-checked-btn {
color: #d9534f;
}
/* Feedback toggle — fills its slot exactly so the active red stays between
the separator lines regardless of font size. */
#feedback-toggle,
#scan-recipe-btn,
#shopping-wake-lock-btn {
width: 100%;
align-self: stretch;
border: none;
border-radius: 0;
padding: 0 0.4rem;
font-size: 0.82rem;
color: #555;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #fff;
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
transition: background-color 0.6s ease;
}
#feedback-toggle:active,
#scan-recipe-btn:active,
#shopping-wake-lock-btn:active {
background-color: rgba(0, 0, 0, 0.09);
transition: background-color 0s;
}
#feedback-toggle:focus,
#scan-recipe-btn:focus,
#shopping-wake-lock-btn:focus {
background-color: #fff;
outline: none;
}
@media (hover: hover) {
#feedback-toggle:hover,
#scan-recipe-btn:hover,
#shopping-wake-lock-btn:hover {
background-color: #f0f0f0;
}
}
#shopping-wake-lock-btn {
font-size: 1.375rem;
}
/* Active state is signalled only by the blue bar (::after); no recolour. */
/* Active-state indicator: small blue bar at the top of the slot */
#feedback-toggle.active::after,
#toggle-checked-btn.active::after,
#shopping-wake-lock-btn.wake-lock-active::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 3px;
background: #007bff;
border-radius: 0 0 2px 2px;
pointer-events: none;
}
/* Toast notification bubble — bottom in rem so the offset tracks the
Tekststørrelse scale (the toolbar grows in rem; a px offset drifts into
the buttons at large sizes and floats too high at the small one). */
.action-toast {
position: absolute;
bottom: 4rem;
left: 0;
background-color: #333;
color: white;
padding: 8px 16px;
border-radius: 24px;
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.action-toast.show {
opacity: 1;
}
/* Arrow pointer */
.action-toast::after {
content: '';
position: absolute;
bottom: -6px;
left: var(--arrow-left, 20px);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #333;
}
/* Public read-only shopping view (/list/view/) */
body.public-list-page {
padding: 0;
margin: 0;
background: #f7f7f7;
min-height: 100vh;
}
body.public-list-page .public-list-header {
padding: 18px 16px 12px;
border-bottom: 1px solid #e5e5e5;
background: #fff;
text-align: center;
}
body.public-list-page .public-list-title {
margin: 0;
font-size: 1.4rem;
}
body.public-list-page .public-list-meta {
margin-top: 4px;
color: #777;
font-size: 0.85rem;
}
body.public-list-page main {
padding: 12px 8px 40px;
}
body.public-list-page .public-shopping-row {
padding: 8px 12px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body.public-list-page .public-shopping-row:hover {
background: rgba(0, 0, 0, 0.03);
}
body.public-list-page .public-list-error {
padding: 48px 24px;
text-align: center;
color: #555;
}
/* Centered variant (no trigger button — placed mid-screen, no arrow) */
.action-toast.centered {
position: fixed;
top: 50%;
left: 50%;
bottom: auto;
transform: translate(-50%, -50%);
z-index: 1000;
}
.action-toast.centered::after { display: none; }
/* Connection status bar */
#connection-bar {
height: 5px;
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
background: #28a745;
flex-shrink: 0;
}
#connection-bar.disconnected {
background: #dc3545;
}
#connection-bar.active {
height: 2.5em;
}
#connection-bar-text {
color: white;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.01em;
opacity: 0;
transition: opacity 0.15s ease 0.15s;
white-space: nowrap;
pointer-events: none;
padding: 0 16px;
}
#connection-bar.active #connection-bar-text {
opacity: 1;
}
/* URL input in editor tab */
.url-input-container {
padding: 12px 0;
margin-bottom: 8px;
border-bottom: 1px solid #eaeaea;
}
#recipe-url-input {
width: 100%;
padding: 12px 16px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 30px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
transition: border 0.2s;
}
#recipe-url-input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}
/* Modal dialog */
.recipe-modal {
padding: 0;
border: none;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
max-width: 500px;
width: 90%;
}
.recipe-modal::backdrop {
background: rgba(0,0,0,0.5);
}
.modal-content {
padding: 24px;
}
#modal-loading-section {
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px;
}
.loading-message {
font-size: 1.5rem;
font-weight: 500;
color: #333;
text-align: center;
}
/* Swooping animation */
.swoop {
animation: swoopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes swoopIn {
0% { opacity: 0; transform: translateX(-30px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Result display */
.modal-result h3 {
margin-top: 0;
margin-bottom: 16px;
font-size: 1.4rem;
word-break: break-word;
}
.ingredient-list {
list-style: none;
padding: 0;
margin: 0 0 24px 0;
max-height: 300px;
overflow-y: auto;
}
.ingredient-list li {
display: flex;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.ingredient-list li:last-child {
border-bottom: none;
}
.ingredient-text {
flex: 1;
}
.ingredient-edit-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: inherit;
font-family: inherit;
color: inherit;
padding: 2px 4px;
border-radius: 4px;
min-width: 0;
}
.ingredient-edit-input:focus {
background: #f0f4ff;
outline: 1px solid #007bff;
}
.ingredient-add-input::placeholder {
color: #aaa;
}
.ingredient-add-row {
border-bottom: none !important;
padding-top: 4px !important;
}
/* Ingredient section headers in modal */
.ingredient-section-header {
font-weight: 600;
font-size: 0.9rem;
color: #555;
background: #f8f9fa;
padding: 8px 12px !important;
margin-top: 8px !important;
margin-bottom: 4px !important;
border-radius: 4px;
border: none !important;
}
/* Modal portion controls */
.modal-portions-control {
margin-bottom: 16px;
padding: 12px;
background: #f8f9fa;
border-radius: 6px;
}
.modal-portions-label {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #666;
margin-bottom: 8px;
}
.remove-ingredient {
background: none;
border: none;
color: #dc3545;
font-size: 20px;
cursor: pointer;
padding: 4px 8px;
border-radius: 50%;
transition: background 0.2s;
}
.remove-ingredient:hover {
background: #ffeeee;
}
.modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.modal-actions button {
padding: 10px 20px;
border-radius: 30px;
font-size: 1rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.modal-actions button.primary:hover {
background: #0056b3;
}
.modal-actions button.secondary:hover {
background: #e0e0e0;
}
/* Shopping tab span clickable */
#shopping-categories span {
cursor: pointer;
}
#settings-btn {
font-size: 1.875rem; /* ~30px at default */
}
#settings-btn:hover {
background-color: #f0f0f0;
}
/* Settings container + popup menu */
#settings-container {
position: relative;
}
.settings-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
min-width: 220px;
max-width: min(320px, calc(100vw - 24px));
padding: 6px 0;
z-index: 1001;
}
/* Username header in settings menu */
.settings-username {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px 8px;
color: #888;
font-size: 0.85rem;
pointer-events: none;
user-select: none;
}
/* Logout item in settings menu */
.settings-logout {
color: #d9534f !important;
}
.settings-logout:hover:not(:disabled) {
background: #fff5f5 !important;
}
.settings-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 16px;
border: none;
background: none;
cursor: pointer;
font-size: 0.95rem;
text-align: left;
color: #1e1e1e;
transition: background 0.15s ease, box-shadow 0.8s ease;
overflow: hidden;
}
.settings-menu-item span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1 1 auto;
}
.settings-menu-item:hover:not(:disabled) {
background: #f5f5f5;
}
.settings-menu-item:active:not(:disabled) {
box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.09);
transition: background 0.15s ease, box-shadow 0s;
}
.settings-menu-item:disabled {
color: #bbb;
cursor: default;
}
.settings-item-icon {
width: 22px;
text-align: center;
flex-shrink: 0;
font-size: 16px;
}
.settings-item-check {
margin-left: auto;
font-size: 0.85rem;
color: #28a745;
flex-shrink: 0;
}
.font-size-indicator {
margin-left: auto;
display: inline-flex;
align-items: baseline;
gap: 2px;
flex-shrink: 0;
}
.font-size-indicator .fsi-a {
font-weight: 400;
color: #888;
line-height: 1;
}
.font-size-indicator .fsi-a[data-step="0"] { font-size: 0.75em; }
.font-size-indicator .fsi-a[data-step="1"] { font-size: 0.95em; }
.font-size-indicator .fsi-a[data-step="2"] { font-size: 1.15em; }
.font-size-indicator .fsi-a[data-step="3"] { font-size: 1.4em; }
.font-size-indicator .fsi-a.active {
font-weight: 700;
color: #1e1e1e;
}
.settings-divider {
height: 1px;
background: #f0f0f0;
margin: 4px 0;
}
.shopping-item input.item-text {
font-family: inherit;
color: inherit;
min-width: 0; /* allows flex shrink inside flex container */
-webkit-appearance: none;
appearance: none;
}
.shopping-item input.item-text::placeholder {
color: #aaa;
font-style: italic;
}
/* Group header input in the editor (recipe names) */
.shopping-item input.group-header-text {
font-weight: 600;
}
.delete-group-btn {
background: none;
border: none;
color: #ccc;
font-size: 1rem;
line-height: 1;
padding: 2px 6px;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
transition: color 0.2s;
}
.delete-group-btn:hover {
color: #d9534f;
}
/* Confirm recipe modal */
.confirm-url-text {
margin: 0 0 12px;
font-size: 0.85rem;
color: #666;
word-break: break-all;
background: #f5f5f5;
padding: 8px 12px;
border-radius: 8px;
}
/* Loading steps below the main spinner */
.loading-steps {
display: flex;
flex-direction: column;
gap: 6px;
align-self: flex-start;
width: 100%;
margin-top: 8px;
}
/* In recipe cards, add extra margin above loading steps */
.saved-recipe-card .loading-steps {
margin-top: 12px;
}
.loading-step {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: #aaa;
}
.loading-step .step-label {
transition: color 0.3s;
}
.loading-step .step-indicator {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
/* Pending: faint grey dot */
.step-indicator.pending {
border: 2px solid #ddd;
background: transparent;
}
/* Active: spinning ring */
.step-indicator.active {
border: 2px solid #007bff;
border-top-color: transparent;
animation: step-spin 0.7s linear infinite;
}
.loading-step:has(.step-indicator.active) .step-label {
color: #333;
}
/* Done: green filled checkmark */
.step-indicator.done {
background: #28a745;
border: 2px solid #28a745;
color: white;
}
.step-indicator.done::after {
content: '✓';
font-size: 9px;
line-height: 1;
}
.loading-step:has(.step-indicator.done) .step-label {
color: #666;
}
@keyframes step-spin {
to { transform: rotate(360deg); }
}
/* Recipe extraction error state (inside modal-loading) */
#modal-error {
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
padding: 8px 0 4px;
width: 100%;
}
.modal-error-icon {
font-size: 2.4rem;
margin: 0;
line-height: 1;
}
.modal-error-text {
margin: 0;
font-size: 0.95rem;
color: #555;
word-break: break-word;
max-width: 320px;
}
/* Generic modal text */
.generic-modal-title {
font-weight: 600;
font-size: 1.05rem;
margin: 0 0 8px;
color: #1e1e1e;
}
.generic-modal-body {
margin: 0 0 20px;
color: #555;
font-size: 0.95rem;
line-height: 1.5;
}
/* Danger button variant */
.modal-actions button.danger {
background: #dc3545;
color: white;
}
.modal-actions button.danger:hover {
background: #bd2130;
}
/* =====================================================================
Full-screen recipe detail view
===================================================================== */
#recipe-view {
position: fixed;
inset: 0;
z-index: 5000;
background: #fafafa;
overflow-y: auto;
}
/* Sticky top bar */
.recipe-back-bar {
position: sticky;
top: 0;
z-index: 10;
background: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
gap: 12px;
min-height: 52px;
flex-shrink: 0;
}
.recipe-back-btn,
.recipe-wake-lock-btn,
.recipe-ai-toggle-btn {
background: rgba(255,255,255,0.18);
border: none;
color: white;
border-radius: 20px;
cursor: pointer;
white-space: nowrap;
}
.recipe-back-btn { padding: 8px 18px; font-size: 0.95rem; font-weight: 500; }
.recipe-wake-lock-btn, .recipe-ai-toggle-btn { padding: 8px 14px; font-size: 0.82rem; flex-shrink: 0; }
.recipe-wake-lock-btn { text-align: right; }
.recipe-back-btn:hover, .recipe-wake-lock-btn:hover, .recipe-ai-toggle-btn:hover { background: rgba(255,255,255,0.28); }
.recipe-wake-lock-btn.wake-lock-active,
.recipe-ai-toggle-btn.ai-mode-active {
background: rgba(255,255,255,0.32);
font-weight: 600;
}
/* Grid layout — desktop: sidebar left, main right */
.recipe-layout {
display: grid;
grid-template-columns: 290px 1fr;
grid-template-areas:
"sidebar rv-name"
"sidebar rv-image"
"sidebar rv-instructions";
max-width: 1200px;
margin: 0 auto;
width: 100%;
align-items: start;
}
.recipe-sidebar {
grid-area: sidebar;
position: sticky;
top: 52px;
align-self: start;
max-height: calc(100vh - 52px);
overflow-y: auto;
padding: 24px 20px 32px;
border-right: 1px solid #eaeaea;
background: #fff;
}
.rv-name {
grid-area: rv-name;
margin: 24px 24px 16px;
font-size: 1.8rem;
line-height: 1.3;
color: #1e1e1e;
}
.rv-image {
grid-area: rv-image;
width: calc(100% - 48px);
margin: 0 24px 24px;
max-height: 600px;
object-fit: contain;
border-radius: 12px;
display: block;
}
.rv-instructions {
grid-area: rv-instructions;
padding: 0 24px 48px;
}
/* Sidebar content */
.rv-cook-time,
.rv-portions-control {
margin-bottom: 20px;
padding: 12px 14px;
background: #f0f7ff;
border-radius: 8px;
}
.rv-cook-time-label {
font-size: 0.78rem;
color: #666;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.rv-cook-time-value {
font-size: 1.05rem;
font-weight: 600;
color: #0056b3;
}
.portions-buttons {
display: flex;
gap: 8px;
align-items: center;
}
.portions-btn {
width: 45px;
height: 32px;
border: 1px solid #ddd;
background: white;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
color: #007bff;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.portions-btn:hover:not(:disabled) {
background: #f0f7ff;
border-color: #007bff;
}
.portions-btn:disabled {
color: #ccc;
cursor: not-allowed;
border-color: #eee;
}
.portions-input {
width: 80px;
height: 32px;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
text-align: center;
font-weight: 600;
}
.rv-section-title {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #888;
margin-bottom: 10px;
}
.rv-ingredients {
list-style: none;
padding: 0;
margin: 0;
}
.rv-ingredients li {
padding: 7px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 0.9rem;
line-height: 1.45;
color: #333;
}
.rv-ingredients li:last-child { border-bottom: none; }
/* Ingredient sections */
.rv-ingredient-section {
margin-top: 12px !important;
padding-top: 12px !important;
padding-bottom: 6px !important;
font-weight: 600;
font-size: 0.95rem;
color: #555;
border-bottom: 2px solid #ddd !important;
border-top: 1px solid #f0f0f0 !important;
}
.rv-ingredient-section:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
.rv-ingredient-item {
padding-left: 12px;
}
/* Instruction steps */
.rv-step {
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid #f0f0f0;
}
.rv-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.rv-step-number {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #007bff;
margin-bottom: 8px;
}
.rv-step-text {
font-size: 1rem;
line-height: 1.65;
color: #333;
white-space: pre-wrap;
}
.rv-step-image {
width: 100%;
max-height: 600px;
object-fit: contain;
border-radius: 8px;
margin-top: 14px;
}
/* Mobile: single column, order: name → image → sidebar → instructions.
Breakpoint chosen below iPad portrait (768px) so iPad keeps two columns. */
@media (max-width: 700px) {
.recipe-layout {
grid-template-columns: 1fr;
grid-template-areas:
"rv-name"
"rv-image"
"sidebar"
"rv-instructions";
}
.recipe-sidebar {
position: static;
max-height: none;
overflow-y: visible;
border-right: none;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
background: #f9f9f9;
padding: 16px;
}
.rv-name {
font-size: 1.35rem;
margin: 16px 16px 12px;
}
.rv-image {
width: calc(100% - 32px);
margin: 0 16px 0;
max-height: 260px;
}
.rv-instructions {
padding: 16px 16px 48px;
}
.recipe-back-bar {
padding: 10px 12px;
min-height: 46px;
}
.recipe-back-btn { font-size: 0.88rem; padding: 7px 12px; }
.recipe-wake-lock-btn, .recipe-ai-toggle-btn { font-size: 0.76rem; padding: 7px 10px; }
}
/* =====================================================================
App-level floating notification
===================================================================== */
/* App-level floating notification */
#app-notification {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 10px 20px;
border-radius: 24px;
font-size: 0.9rem;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#app-notification.visible {
opacity: 1;
}
/* ---------- Multi-list bar ---------- */
.editor-list-bar,
.shopping-list-bar {
margin: 8px 0 12px;
font-size: 0.95rem;
}
.list-bar-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.list-bar-scroll {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.list-bar-scroll::-webkit-scrollbar { height: 4px; }
.list-bar-chip,
.list-bar-add,
.list-bar-alle {
flex: 0 0 auto;
border: 1px solid #d0d0d0;
background: #fff;
color: #333;
padding: 6px 12px;
border-radius: 16px;
font-size: 0.9rem;
cursor: pointer;
}
.list-bar-chip {
white-space: nowrap;
position: relative;
scroll-snap-align: start;
}
.list-bar-chip.active,
.list-bar-alle.active {
background: #007bff;
color: #fff;
border-color: #007bff;
}
.list-bar-dot {
display: inline-block;
width: 8px;
height: 8px;
background: #e53935;
border-radius: 50%;
margin-left: 6px;
vertical-align: middle;
}
.list-bar-add { font-weight: bold; }
.list-bar-delete {
flex: 0 0 auto;
background: #fff;
padding: 6px 12px;
border: 1px solid #f0c8c8;
border-radius: 16px;
color: #c62828;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
}
.list-bar-share-info {
margin-top: 4px;
color: #6c757d;
font-size: 0.82rem;
padding-left: 4px;
}
/* ---------- Friends list in share modal ---------- */
.share-friend-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.share-friend-pick {
flex: 1;
text-align: left;
padding: 6px 10px;
background: #f0f4f8;
border: 1px solid #d0d7e0;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
}
.share-friend-pick:hover { background: #e3ecf5; }
.share-friend-del {
flex: 0 0 auto;
width: 28px;
height: 28px;
border: none;
background: #fbe9e9;
color: #c62828;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
line-height: 1;
}
/* ---------- Recipe shared-by + share button ---------- */
.recipe-shared-by {
font-size: 0.78rem;
color: #888;
margin-top: -2px;
margin-bottom: 6px;
font-style: italic;
}
.pill-btn.pill-share {
background: #e3f2fd;
color: #1565c0;
}
/* ---------- Tab badge dot ---------- */
.tab-button {
position: relative;
}
.tab-badge-dot {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
background: #e53935;
border-radius: 50%;
}
/* ---------- Cog menu header (username + logout on one row) ---------- */
.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
gap: 8px;
}
.settings-header .settings-username {
padding: 0;
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
}
.settings-logout-inline {
background: none;
border: none;
cursor: pointer;
color: #c62828;
font-size: 0.9rem;
padding: 4px 8px;
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 6px;
}
.settings-logout-inline:hover { background: #fbe9e9; }
/* ---------- Recipes tab: add-recipe button ---------- */
.add-recipe-btn {
display: block;
width: 100%;
padding: 12px 16px;
margin-bottom: 16px;
background: #fff;
border: 1px dashed #c0d5ee;
border-radius: 12px;
color: #1565c0;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.add-recipe-btn:hover {
background: #f4f9ff;
border-color: #1565c0;
}
/* ---------- Language toggle (Bokmål / Nynorsk) ---------- */
/* The pill appears top-right on pre-login pages. The settings-menu version
* uses the same .lang-label-nb / .lang-label-nn / .lang-active mechanic. */
.lang-pill {
position: fixed;
top: 12px;
right: 12px;
z-index: 100;
padding: 6px 12px;
border: 1px solid #cbd5e1;
background: rgba(255, 255, 255, 0.95);
border-radius: 999px;
font-size: 0.85rem;
font-family: inherit;
color: #0f172a;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
line-height: 1.2;
}
.lang-pill:hover { background: #fff; border-color: #94a3b8; }
.lang-pill .lang-active,
#language-toggle-btn .lang-active {
font-weight: 700;
}
.lang-toggle-labels {
display: inline-flex;
align-items: baseline;
gap: 2px;
}
.lang-toggle-sep {
color: #94a3b8;
margin: 0 2px;
}
/* ---------------- Achievements ---------------- */
#achievements-list .ach-row {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 10px 12px;
border: 1px solid #eef2f6;
border-radius: 10px;
background: #fafbfc;
}
#achievements-list .ach-row.unlocked {
background: linear-gradient(135deg, #fef9c3 0%, #fffbeb 100%);
border-color: #fde68a;
}
#achievements-list .ach-row.locked {
opacity: 0.75;
}
#achievements-list .ach-icon {
font-size: 1.6rem;
line-height: 1;
flex: 0 0 1.8em;
text-align: center;
}
#achievements-list .ach-row.locked .ach-icon {
filter: grayscale(1);
}
#achievements-list .ach-body { flex: 1; min-width: 0; }
#achievements-list .ach-title { font-weight: 600; color: #0f172a; margin-bottom: 2px; }
#achievements-list .ach-desc { font-size: 0.85rem; color: #475569; }
#achievements-list .ach-progress {
margin-top: 6px;
background: #e2e8f0;
height: 6px;
border-radius: 999px;
overflow: hidden;
}
#achievements-list .ach-progress > div {
height: 100%;
background: #10b981;
transition: width 0.4s ease;
}
#achievements-list .ach-progress-label {
font-size: 0.75rem;
color: #64748b;
margin-top: 4px;
}
.ach-section-label {
font-size: 0.85rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 8px 0 4px;
}
/* ---------------- Confetti ---------------- */
#confetti-root,
.confetti-root-overlay {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 9999;
}
/* When spawned inside an open