Template:Callout/styles.css: Difference between revisions

From Space Station 14 Wiki
(Created page with "→‎wrapper around the callout that manages its alignment.: .callout-wrapper { display: flex; →‎set by template: →‎justify-content: XXX;: margin-top: .5em; } →‎actual callout: .callout { box-sizing: border-box; display: flex; flex-direction: row; width: fit-content; →‎set by template: →‎min-width: XXX;: padding: .5rem; background-color: var(--bg-color-light-x2); border: 1px solid; border-left: 10px solid; →‎set by template: /*...")
 
(added a gap between images and content)
Line 13: Line 13:
display: flex;
display: flex;
flex-direction: row;
flex-direction: row;
gap: .5rem;
width: fit-content;
width: fit-content;

Revision as of 10:27, 15 August 2024

/* wrapper around the callout that manages its alignment. */
.callout-wrapper {
	display: flex;
	/* set by template */
    /*justify-content: XXX;*/
    margin-top: .5em;
}

/* actual callout */
.callout {
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	gap: .5rem;
	
	width: fit-content;
	/* set by template */
	/*min-width: XXX;*/
	padding: .5rem;
	
	background-color: var(--bg-color-light-x2);
	
	border: 1px solid;
	border-left: 10px solid;
	/* set by template */
	/*border-color: XXX;*/
}

/* wrapper for images */
.callout-images { }

/* contains header and content elements */
.callout-header-content-container {
	display: flex;
	flex-direction: column;
}

/* header element */
.callout-header {
	font-weight: bold;
	font-size: large;
}

/* wrapper around content element */
.callout-content-container {
	display: flex;
	align-items: center;
	
	height: 100%;
}