MediaWiki:Recipe.css: Difference between revisions
Jump to navigation
Jump to search
Salty Nori (talk | contribs) No edit summary |
Salty Nori (talk | contribs) No edit summary |
||
Line 5: | Line 5: | ||
position: relative; | position: relative; | ||
gap: 8px; | gap: 8px; | ||
margin-bottom: 0.8em; | |||
} | } | ||
.ci-recipe-wrapper-second { | .ci-recipe-wrapper-second { |
Latest revision as of 11:19, 30 January 2024
/* Containers for general layout */
.ci-recipe-wrapper {
display: flex;
width: fit-content;
position: relative;
gap: 8px;
margin-bottom: 0.8em;
}
.ci-recipe-wrapper-second {
display: flex;
flex-direction: column;
align-items: center;
width: fit-content;
position: relative;
gap: 8px;
}
/* List of ingredients */
.ci-recipe-ingredient {
border: 1px solid var(--brown-200);
border-radius: 8px;
padding: 12px;
min-height: 100%;
background-color: var(--gray-050);
min-width: 136px;
max-width: 274px;
width: fit-content;
}
/* Method of crafting or cooking */
.ci-recipe-medium {
background-color: var(--gray-050);
border: 1px solid var(--brown-300);
border-radius: 6px;
position: relative;
text-align: center;
font-weight: 500;
padding: 8px;
max-width: 100px;
overflow-wrap: break-word;
hyphens: auto;
width: 96px;
height: 70px;
}
.ci-recipe-timed {
padding-bottom: 25px;
}
.ci-recipe-medium::after {
border: 1px solid var(--brown-300);
background-color: var(--brown-300);
border-radius: 3px;
width: 4px;
height: 4px;
content: "";
position: absolute;
top: 50%;
left: -8px;
}
.ci-recipe-medium::before {
border: 1px solid var(--brown-300);
background-color: var(--brown-300);
border-radius: 3px;
width: 4px;
height: 4px;
content: "";
position: absolute;
bottom: -8px;
right: 50%;
}
/* Final product */
.ci-recipe-yield {
background-color: var(--gray-050);
border: 1px solid var(--brown-200);
border-radius: 6px;
padding: 8px;
position: relative;
width: 96px;
text-align: center;
}
.ci-recipe-yield-amount {
background: var(--brown-300);
width: fit-content;
border-radius: 6px;
padding: 0 8px;
position: absolute;
bottom: 0;
right: 0;
}