diff --git a/src/components/AppInvalidGuest.vue b/src/components/AppInvalidGuest.vue index 60ad1e33..441e15a2 100644 --- a/src/components/AppInvalidGuest.vue +++ b/src/components/AppInvalidGuest.vue @@ -74,6 +74,7 @@ export default { div { margin: 20px 5px; } + .message { font-size: x-large; font-weight: bold; diff --git a/src/components/AppMain.vue b/src/components/AppMain.vue index 82926950..188fa4d7 100644 --- a/src/components/AppMain.vue +++ b/src/components/AppMain.vue @@ -42,12 +42,15 @@ export default { padding: 0 !important; margin-left: 0 !important; } + #app-navigation-vue { display: none !important; } + #header { display: none !important; } + a:link::after, a:visited::after { content: " [" attr(href) "] "; diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue index 130a5583..530288f5 100644 --- a/src/components/AppSettings.vue +++ b/src/components/AppSettings.vue @@ -244,6 +244,7 @@ export default { padding: 0; border-radius: var(--border-radius); } + #app-settings .button p { margin: auto; font-size: 13px; diff --git a/src/components/EditInputGroup.vue b/src/components/EditInputGroup.vue index b8342282..e925d38e 100644 --- a/src/components/EditInputGroup.vue +++ b/src/components/EditInputGroup.vue @@ -403,6 +403,7 @@ li .controls > button:last-child { border-bottom-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } + li .controls > button:last-child:not(:hover):not(:focus) { border-right-color: var(--color-border-dark); } @@ -427,6 +428,7 @@ li .controls > button:last-child:not(:hover):not(:focus) { clear: both; content: ""; } + .step-number { position: absolute; top: 0; diff --git a/src/components/EditMultiselect.vue b/src/components/EditMultiselect.vue index b886f9f3..130edb5b 100644 --- a/src/components/EditMultiselect.vue +++ b/src/components/EditMultiselect.vue @@ -45,6 +45,7 @@ fieldset > * { float: none; } } + fieldset > label { display: inline-block; width: 10em; diff --git a/src/components/EditMultiselectInputGroup.vue b/src/components/EditMultiselectInputGroup.vue index b16683c7..5c5d8353 100644 --- a/src/components/EditMultiselectInputGroup.vue +++ b/src/components/EditMultiselectInputGroup.vue @@ -235,6 +235,7 @@ fieldset > * { float: none; } } + fieldset > label { display: inline-block; width: 16em; diff --git a/src/components/LazyPicture.vue b/src/components/LazyPicture.vue index 0978c852..41fd35c6 100644 --- a/src/components/LazyPicture.vue +++ b/src/components/LazyPicture.vue @@ -162,6 +162,7 @@ picture .full-resolution.image-loaded { from { opacity: 0; } + to { opacity: 1; } @@ -171,6 +172,7 @@ picture .full-resolution.image-loaded { from { filter: blur(0.5rem); } + to { filter: blur(0); } diff --git a/src/components/RecipeCard.vue b/src/components/RecipeCard.vue index 0c6dec67..41cf6fe0 100644 --- a/src/components/RecipeCard.vue +++ b/src/components/RecipeCard.vue @@ -78,12 +78,14 @@ export default { max-width: 100%; margin: 0.5rem 1rem 1rem; } + .recipe-card a { display: block; height: 105px; border-radius: 3px; box-shadow: 0 0 3px #aaa; } + .recipe-card a:hover { box-shadow: 0 0 5px #888; } @@ -120,6 +122,7 @@ export default { .recipe-card .recipe-info-date { display: flex; } + .recipe-info-date-icon { height: 1.4ex; min-height: 0; diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue index c63ba625..270c11ba 100644 --- a/src/components/RecipeEdit.vue +++ b/src/components/RecipeEdit.vue @@ -727,6 +727,7 @@ export default { background-color: var(--color-main-background); opacity: 0.75; } + .overlay.hidden { display: none; } diff --git a/src/components/RecipeImages.vue b/src/components/RecipeImages.vue index df52ffbc..11a55f24 100644 --- a/src/components/RecipeImages.vue +++ b/src/components/RecipeImages.vue @@ -37,16 +37,19 @@ div { margin-bottom: 1rem; text-align: center; } + img { width: 100%; max-width: 950px; background-color: #bebdbd; cursor: pointer; } + .collapsed { overflow: hidden; height: 40vh; } + .collapsed img { display: block; margin: 0 auto; diff --git a/src/components/RecipeInstruction.vue b/src/components/RecipeInstruction.vue index 845973ee..66ab2556 100644 --- a/src/components/RecipeInstruction.vue +++ b/src/components/RecipeInstruction.vue @@ -36,6 +36,7 @@ li { cursor: pointer; white-space: pre-line; } + li::before { position: absolute; top: 0; @@ -52,12 +53,15 @@ li::before { outline: none; text-align: center; } + li:hover::before { border-color: var(--color-primary-element); } + .done::before { content: "✔"; } + li span, li input[type="checkbox"] { display: inline-block; diff --git a/src/components/RecipeList.vue b/src/components/RecipeList.vue index dae41405..126177a0 100644 --- a/src/components/RecipeList.vue +++ b/src/components/RecipeList.vue @@ -322,6 +322,7 @@ export default { .recipe-sorting-item-placeholder { display: block; } + .ordering-item-icon { margin-right: 0.5em; } diff --git a/src/components/RecipeListKeywordCloud.vue b/src/components/RecipeListKeywordCloud.vue index acb92d44..8577aed1 100644 --- a/src/components/RecipeListKeywordCloud.vue +++ b/src/components/RecipeListKeywordCloud.vue @@ -258,6 +258,7 @@ export default { font-size: 8px; vertical-align: bottom; } + .ordering-button { padding: 2px 6px; } diff --git a/src/components/RecipeTimer.vue b/src/components/RecipeTimer.vue index 375a9dcb..ae0f54ae 100644 --- a/src/components/RecipeTimer.vue +++ b/src/components/RecipeTimer.vue @@ -142,6 +142,7 @@ export default { font-size: 1.2rem; text-align: center; } + .time button { position: absolute; top: 0; @@ -150,6 +151,7 @@ export default { height: 36px; transform: translate(-50%, -50%); } + .time h4 { padding: 0.5rem; border-bottom: 1px solid var(--color-border-dark); diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue index 3bf20241..daf07291 100644 --- a/src/components/RecipeView.vue +++ b/src/components/RecipeView.vue @@ -561,12 +561,15 @@ export default { display: flex; flex-wrap: wrap; } + .header > .image { flex: 600px 0 0; } + .header > .meta { margin: 0 10px; } + .header a::after { content: ""; } @@ -585,12 +588,15 @@ export default { .meta { margin: 0 1rem; } + .dates { font-size: 0.9em; } + .date { margin-right: 1.5em; } + .date-icon { display: inline-block; margin-right: 0.2em; @@ -598,13 +604,16 @@ export default { background-size: 1em; vertical-align: middle; } + .date-text { vertical-align: middle; } + .description { font-style: italic; white-space: pre-line; } + .details p { margin: 0.5em 0; } @@ -639,6 +648,7 @@ export default { font-size: 1.2rem; text-align: center; } + .times .time button { position: absolute; top: 0; @@ -647,6 +657,7 @@ export default { height: 36px; transform: translate(-50%, -50%); } + .times .time h4 { padding: 0.5rem; border-bottom: 1px solid var(--color-border-dark); @@ -661,6 +672,7 @@ export default { section { margin-bottom: 1rem; } + section::after { display: table; clear: both; @@ -692,11 +704,13 @@ aside { aside ul { list-style-type: none; } + aside ul li { margin-bottom: 0.75ex; margin-left: 1em; line-height: 2.5ex; } + aside ul li span, aside ul li input[type="checkbox"] { display: inline-block; @@ -749,12 +763,14 @@ main { counter-reset: instruction-counter; list-style: none; } + .instructions .instruction { margin-bottom: 2rem; clear: both; counter-increment: instruction-counter; cursor: pointer; } + .instructions .instruction::before { display: block; width: 36px; @@ -771,9 +787,11 @@ main { outline: none; text-align: center; } + .instructions .instruction:hover::before { border-color: var(--color-primary-element); } + .instructions .instruction.done::before { content: "✔"; } @@ -784,6 +802,7 @@ main { color: var(--color-text-maxcontrast); font-weight: 450; } + .recipe-reference-inline:hover { color: var(--color-main-text); }