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

From Space Station 14 Wiki
(layout changes)
(layout changes)
Line 10: Line 10:
     max-width: 100%;
     max-width: 100%;
      
      
     border: 1px solid var(--border-color);
     border: 1px solid var(--border-color-light);
     margin: .25rem 0;
     margin: .25rem 0;
}
.item-recipe * {
    box-sizing: border-box;
}
}


Line 40: Line 36:
     justify-content: space-around;
     justify-content: space-around;
     gap: .2rem;
     gap: .2rem;
    box-sizing: border-box;


     width: 100%;
     width: 100%;
Line 52: Line 50:
     margin: 0;  
     margin: 0;  
     text-align: center;
     text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
}


Line 58: Line 60:
.item-recipe-product {
.item-recipe-product {
     display: inline-block;
     display: inline-block;
     max-width: 10rem;
     width: 10rem;
     text-align: center;
     text-align: center;
}
}
Line 71: Line 73:
}
}


/* item recipe → content → text content → method → complete time  */
/* item recipe → content → text content → complete time  */
.item-recipe-method .item-recipe-complete-time {
.item-recipe-complete-time {
     color: gray;
     color: gray;
     font-size: small;
     font-size: small;
Line 79: Line 81:


/* item recipe → content → text content → method → complete time → icon  */
/* item recipe → content → text content → method → complete time → icon  */
.item-recipe-method .item-recipe-complete-time::before {
.item-recipe-complete-time::before {
     --image-size: .7em;
     --image-size: .7em;
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAAXNSR0IArs4c6QAAAGNJREFUCJl1jlsNwCAQBOeaauhDDaLQgRU8nAQUoOCSc0B/WkJpOl97mc3mhJtSSgNwd0IIwiweVLV9xJhVtS3uzh/LeBzn2SfNjNXMuty3TZjJOb8eSik1ABkLtVYAYowCcAGDkzDCq/YM/QAAAABJRU5ErkJggg==');
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAAXNSR0IArs4c6QAAAGNJREFUCJl1jlsNwCAQBOeaauhDDaLQgRU8nAQUoOCSc0B/WkJpOl97mc3mhJtSSgNwd0IIwiweVLV9xJhVtS3uzh/LeBzn2SfNjNXMuty3TZjJOb8eSik1ABkLtVYAYowCcAGDkzDCq/YM/QAAAABJRU5ErkJggg==');
Line 93: Line 95:


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


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


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


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


/* item recipe → notes */
/* item recipe → notes */
.item-recipe .item-recipe-notes {
.item-recipe-notes {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
Line 134: Line 136:
}
}


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

Revision as of 05:50, 2 September 2024

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

	display: flex;
    flex-direction: column;

    box-sizing: border-box;
    width: 30rem;
    max-width: 100%;
    
    border: 1px solid var(--border-color-light);
    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;
    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-method {
    /* 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 → complete time  */
.item-recipe-complete-time {
    color: gray;
    font-size: small;
}


/* 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) */
.recipe-supplementary-text-left {
}

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

/* item recipe → content → materials  */
.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-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;
}