Template:Item recipe/styles.css

/* item recipe */
.item-recipe {
    --padding: 0.4rem;

	display: flex;
    flex-direction: column;

    box-sizing: border-box;
    /* set in module */
    /* min-width: */
    width: fit-content;
    
    border: 1px solid var(--border-color);
    margin: .25rem 0;
}

/* item recipe, vertical layout */
.item-recipe.item-recipe-vertical {
	flex-direction: row;
}

/* item recipe, horizontal layout */
.item-recipe.item-recipe-horizontal {
	flex-direction: column;
}

/* item recipe, materials only mode */
.item-recipe.materials-only {
	border: none;
}

/* item recipe → content */
.item-recipe-content {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    padding: var(--padding);
}

/* item recipe → content → text content */
.item-recipe-text-content {
    display: grid;
    grid-template-columns: 10rem max-content max-content max-content;
    grid-template-rows: 1fr;
}


/* item recipe → content → text content → product  */
.item-recipe-product {
    grid-area: 1 / 1 / 2 / 2;

    display: inline-block;
    max-width: 10rem;
}

/* item recipe → content → text content → method  */
.item-recipe-method {
    grid-area: 1 / 2 / 2 / 3;

    /* needed to position the complete time element */
    position: relative;

    /* disable wrapping so it aligns with the complete time perfectly */
    white-space: nowrap;
}

/* item recipe → content → text content → method → complete time  */
.item-recipe-method .item-recipe-complete-time {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 100%);
    padding-top: 0.5em;
    color: gray;
    font-size: small;
}


/* item recipe → content → text content → method → complete time → icon  */
.item-recipe-method .item-recipe-complete-time::before {
    --image-size: .7em;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAAXNSR0IArs4c6QAAAGNJREFUCJl1jlsNwCAQBOeaauhDDaLQgRU8nAQUoOCSc0B/WkJpOl97mc3mhJtSSgNwd0IIwiweVLV9xJhVtS3uzh/LeBzn2SfNjNXMuty3TZjJOb8eSik1ABkLtVYAYowCcAGDkzDCq/YM/QAAAABJRU5ErkJggg==');
    width: var(--image-size);
    height: var(--image-size);
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: pixelated;
    display: inline-block;
    margin-right: 0.2em;
}

/* item recipe → content → text content → method → supplementary text  */
.item-recipe .recipe-supplementary-text {
	color: gray;
}

/* item recipe → content → text content → method → supplementary text (left) */
.item-recipe .recipe-supplementary-text-left {
	grid-area: 1 / 3 / 2 / 4;
}

/* item recipe → content → text content → method → supplementary text (right) */
.item-recipe .recipe-supplementary-text-right {
	grid-area: 1 / 4 / 2 / 5;
}

/* item recipe → content → materials  */
.item-recipe .item-recipe-materials {
    display: flex;
    gap: .15em;
}

/* item recipe, vertical layout → content → materials */
.item-recipe.item-recipe-vertical .item-recipe-materials {
	flex-direction: row;
}

/* item recipe, horizontal layout → content → materials */
.item-recipe.item-recipe-horizontal .item-recipe-materials {
	flex-direction: column;
}

/* item recipe → notes */
.item-recipe .item-recipe-notes {
    display: flex;
    flex-direction: column;
    gap: .4em;
    box-sizing: border-box;
	
	padding: var(--padding);
	
	background-color: var(--bg-color-light-x3);
    border-top: 1px solid var(--border-color);
}

.item-recipe .item-recipe-notes .item-recipe-note {
	font-size: smaller;
}