Template:Callout/styles.css
From Space Station 14 Wiki
/* 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;
}
.callout.callout-type-info { border-color: var(--action-color); }
.callout.callout-type-warning { border-color: yellow; }
.callout.callout-type-danger { border-color: var(--danger-color); }
.callout.callout-type-tip { border-color: var(--green-color); }
.callout.callout-type-example { border-color: #f92672; }
/* added to callout when it's should be a centered, page-wide banner */
.callout-banner {
width: 80%;
}
/* wrapper for images */
.callout-images {
display: flex;
flex-direction: row;
align-items: center;
}
/* wrapper for images → image container */
.callout-images > * {
display: inline-block;
min-width: 64px;
}
/* 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%;
}
/* callout wrapper → a special class for creating same-width notices for stacking */
.callout-wrapper.stacked-notice {
/* make the wrapper fit the callout element */
width: fit-content;
/* stacked notices go right */
float: right;
/* allow for stacking */
clear: right;
}
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
.callout-wrapper.stacked-notice > .callout {
/* set to fixed width */
width: 30rem;
/* fit to the page on small resoltuions, preventing overflow */
max-width: 100%;
}
/* when on tablet or smaller device, take up the whole width of the page. */
@media (max-width:801px) {
/* actual callout */
.callout {
width: 100%;
}
/* callout wrapper → a special class for creating same-width notices for stacking */
.callout-wrapper.stacked-notice {
/* fill the page width */
width: 100%;
/* no more float */
float: none;
/* no more clear, since float is disabled */
clear: none;
}
/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
.callout-wrapper.stacked-notice > .callout {
/* fill the page width */
width: 100%;
}
}