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%;
}