MediaWiki:Recipe.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}