MediaWiki:Recipe.css: Difference between revisions
Jump to navigation
Jump to search
Salty Nori (talk | contribs) (Created page with "→Containers for general layout: .ci-recipe-wrapper { display: flex; width: fit-content; position: relative; gap: 8px; } .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-300); border-radius: 3px; padding: 5px; min-height: 100%; } /* Method of...") |
Salty Nori (talk | contribs) No edit summary |
||
Line 17: | Line 17: | ||
/* List of ingredients */ | /* List of ingredients */ | ||
.ci-recipe-ingredient { | .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; | |||
} | } | ||
Line 26: | Line 30: | ||
.ci-recipe-medium { | .ci-recipe-medium { | ||
border: 1px solid var(--brown-300); | border: 1px solid var(--brown-300); | ||
border-radius: | border-radius: 6px; | ||
position: relative; | position: relative; | ||
text-align: center; | text-align: center; | ||
font-weight: 500; | |||
padding: 8px; | padding: 8px; | ||
max-width: 100px; | max-width: 100px; | ||
overflow-wrap: break-word; | overflow-wrap: break-word; | ||
hyphens: auto; | hyphens: auto; | ||
width: 96px; | |||
height: 70px; | |||
} | } | ||
.ci-recipe-timed { | .ci-recipe-timed { | ||
Line 43: | Line 48: | ||
background-color: var(--brown-300); | background-color: var(--brown-300); | ||
border-radius: 3px; | border-radius: 3px; | ||
width: | width: 4px; | ||
height: | height: 4px; | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
left: - | left: -8px; | ||
} | } | ||
.ci-recipe-medium::before { | .ci-recipe-medium::before { | ||
Line 54: | Line 59: | ||
background-color: var(--brown-300); | background-color: var(--brown-300); | ||
border-radius: 3px; | border-radius: 3px; | ||
width: | width: 4px; | ||
height: | height: 4px; | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
bottom: - | bottom: -8px; | ||
right: 50%; | right: 50%; | ||
} | } | ||
Line 64: | Line 69: | ||
/* Final product */ | /* Final product */ | ||
.ci-recipe-yield { | .ci-recipe-yield { | ||
background-color: var(--gray-050); | |||
border: 1px solid var(--brown-200); | border: 1px solid var(--brown-200); | ||
border-radius: 6px; | border-radius: 6px; | ||
padding: 8px; | padding: 8px; | ||
position: relative; | position: relative; | ||
width: | width: 96px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.ci-recipe-yield-amount { | .ci-recipe-yield-amount { | ||
background: var(-- | background: var(--brown-300); | ||
width: fit-content; | width: fit-content; | ||
border-radius: 6px; | border-radius: 6px; | ||
padding: 0 | padding: 0 8px; | ||
position: absolute; | position: absolute; | ||
bottom: 0; | bottom: 0; | ||
right: 0; | right: 0; | ||
} | } |
Revision as of 11:14, 30 January 2024
/* Containers for general layout */
.ci-recipe-wrapper {
display: flex;
width: fit-content;
position: relative;
gap: 8px;
}
.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 {
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;
}