3 * This file is used to style the recipe using the 'full' view mode.
6 .node--type-recipe.node--view-mode-full .field--name-field-summary,
7 .node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol {
8 /* Limit text width for legibility */
12 .node--type-recipe.node--view-mode-full .field--name-field-summary {
16 .node--type-recipe.node--view-mode-full .field--name-field-image {
17 background-color: #fcece7;
18 background-image: url(../../../../images/png/umami-background-pattern-1.png);
21 .node--type-recipe.node--view-mode-full .field--name-field-image img {
25 @media screen and (min-width: 786px) {
26 .node--type-recipe.node--view-mode-full .field--name-field-image img {
31 /* Icons for the recipe meta fields */
32 .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
33 .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
34 .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
35 .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
38 margin-bottom: 0.96em;
39 padding-left: 48px; /* LTR */
40 background-repeat: no-repeat;
41 background-position: left center; /* LTR */
42 background-size: 40px 40px;
44 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
45 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
46 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
47 [dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
48 background-position: right center;
52 .node--type-recipe.node--view-mode-full .field--name-field-preparation-time {
53 background-image: url(../../../../images/svg/knife.svg);
55 .node--type-recipe.node--view-mode-full .field--name-field-cooking-time {
56 background-image: url(../../../../images/svg/timer.svg);
58 .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {
59 background-image: url(../../../../images/svg/serves.svg);
61 .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
62 background-image: url(../../../../images/svg/difficulty.svg);