Template:Callout/styles.css: Difference between revisions
From Space Station 14 Wiki
(added a gap between images and content) |
(updated for banner support) |
||
Line 15: | Line 15: | ||
gap: .5rem; | gap: .5rem; | ||
min-width: 20rem; | |||
width: fit-content; | width: fit-content; | ||
/* set by template */ | /* set by template */ | ||
Line 26: | Line 27: | ||
/* set by template */ | /* set by template */ | ||
/*border-color: XXX;*/ | /*border-color: XXX;*/ | ||
} | |||
/* added to callout when it's should be a centered, page-wide banner */ | |||
.callout-banner { | |||
width: 80%; | |||
} | } | ||
Revision as of 10:30, 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;
min-width: 20rem;
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;*/
}
/* added to callout when it's should be a centered, page-wide banner */
.callout-banner {
width: 80%;
}
/* 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%;
}