Template:Item recipe/styles.css: Difference between revisions

From Space Station 14 Wiki
Browse history interactively
(recipes list styles)
(new iteration)
Line 1: Line 1:
/* item recipe */
.item-recipe {
.item-recipe {
     --padding: 0.4rem;
     --padding: 0.4rem;


display: flex;
    display: flex;
     flex-direction: column;
     flex-direction: column;


    box-sizing: border-box;
    width: 30rem;
    max-width: 100%;
   
     border: 1px solid var(--border-color-light);
     border: 1px solid var(--border-color-light);
     margin: .25rem 0;
     margin: .25rem 0;
}
}


/* item recipe, vertical layout */
.item-recipe-header {
.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;
     display: flex;
     flex-direction: row;
     flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: .2rem;
    box-sizing: border-box;
    width: 100%;
    padding: var(--padding);
   
    min-height: 6rem;
}
/* item recipe → content → text content */
.item-recipe-text-content {
    /* remove p margin */
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* item recipe → content → text content → product  */
.item-recipe-product {
    display: inline-block;
    width: 10rem;
    text-align: center;
}
}


/* item recipe → content → text content → method  */
.item-recipe-header > .item-recipe-product {
.item-recipe-method {
    /* needed to position the complete time element */
    position: relative;
}


/* item recipe → content → text content → complete time  */
.item-recipe-complete-time {
    color: gray;
    font-size: small;
}
}


.item-recipe-header > .item-recipe-method {


/* item recipe → content → text content → method → complete time → icon  */
.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  */
.recipe-supplementary-text {
color: gray;
}
}


/* item recipe → content → text content → method → supplementary text (left) */
.item-recipe-body {
.recipe-supplementary-text-left {
}


/* item recipe → content → text content → method → supplementary text (right) */
.recipe-supplementary-text-right {
}
}


/* item recipe → content → materials  */
.item-recipe-body > .item-recipe-materials {
.item-recipe-materials {
     display: flex;
     display: flex;
    flex-direction: column;
     gap: .15em;
     gap: .15em;
    width: 8rem;
}
/* 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-body > .item-recipe-complete-time {
.item-recipe.item-recipe-horizontal .item-recipe-materials {
    position: absolute;
flex-direction: column;
    bottom: 0;
    right: 0;
    margin: .5rem;
}
}


/* item recipe → notes */
.item-recipe-notes {
.item-recipe-notes {
     display: flex;
     display: flex;

Revision as of 07:37, 2 September 2024

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

    display: flex;
    flex-direction: column;

    border: 1px solid var(--border-color-light);
    margin: .25rem 0;
}

.item-recipe-header {
    display: flex;
    flex-direction: row;
}

.item-recipe-header > .item-recipe-product {

}

.item-recipe-header > .item-recipe-method {

}

.item-recipe-body {

}

.item-recipe-body > .item-recipe-materials {
    display: flex;
    flex-direction: column;
    gap: .15em;
}

.item-recipe-body > .item-recipe-complete-time {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: .5rem;
}

.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-notes .item-recipe-note {
	font-size: smaller;
}


/* list of recipes */
.item-recipes-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    justify-content: center;
}
Retrieved from "https://wiki.spacestation14.com/w/index.php?title=Template:Item_recipe/styles.css&oldid=8730"