https://wiki.funkystation.org/index.php?action=history&feed=atom&title=Template%3ACallout%2Fstyles.css 2026-06-05T01:17:29Z Revision history for this page on the wiki MediaWiki 1.42.3 https://wiki.funkystation.org/index.php?title=Template:Callout/styles.css&diff=200&oldid=prev 2024-09-01T11:25:45Z

<p>moved colors here</p> <p><b>New page</b></p><div>/* wrapper around the callout that manages its alignment. */<br /> .callout-wrapper {<br /> display: flex;<br /> /* set by template */<br /> /*justify-content: XXX;*/<br /> margin-top: .5em;<br /> }<br /> <br /> /* actual callout */<br /> .callout {<br /> box-sizing: border-box;<br /> <br /> display: flex;<br /> flex-direction: row;<br /> gap: .5rem;<br /> <br /> min-width: 20rem;<br /> width: fit-content;<br /> /* set by template */<br /> /*min-width: XXX;*/<br /> padding: .5rem;<br /> <br /> background-color: var(--bg-color-light-x2);<br /> <br /> border: 1px solid;<br /> border-left: 10px solid;<br /> }<br /> <br /> .callout.callout-type-info { border-color: var(--action-color); }<br /> .callout.callout-type-warning { border-color: yellow; }<br /> .callout.callout-type-danger { border-color: var(--danger-color); }<br /> .callout.callout-type-tip { border-color: var(--green-color); }<br /> .callout.callout-type-example { border-color: #f92672; }<br /> <br /> /* added to callout when it&#039;s should be a centered, page-wide banner */<br /> .callout-banner {<br /> width: 80%;<br /> }<br /> <br /> /* wrapper for images */<br /> .callout-images {<br /> display: flex;<br /> flex-direction: row;<br /> align-items: center;<br /> }<br /> <br /> /* wrapper for images → image container */<br /> .callout-images &gt; * {<br /> display: inline-block;<br /> min-width: 64px;<br /> }<br /> <br /> /* contains header and content elements */<br /> .callout-header-content-container {<br /> display: flex;<br /> flex-direction: column;<br /> }<br /> <br /> /* header element */<br /> .callout-header {<br /> font-weight: bold;<br /> font-size: large;<br /> }<br /> <br /> /* wrapper around content element */<br /> .callout-content-container {<br /> display: flex;<br /> align-items: center;<br /> <br /> height: 100%;<br /> }<br /> <br /> /* callout wrapper → a special class for creating same-width notices for stacking */<br /> .callout-wrapper.stacked-notice {<br /> /* make the wrapper fit the callout element */<br /> width: fit-content;<br /> /* stacked notices go right */<br /> float: right;<br /> /* allow for stacking */<br /> clear: right;<br /> }<br /> <br /> /* callout wrapper → a special class for creating same-width notices for stacking → callout element */<br /> .callout-wrapper.stacked-notice &gt; .callout {<br /> /* set to fixed width */<br /> width: 30rem;<br /> /* fit to the page on small resoltuions, preventing overflow */<br /> max-width: 100%;<br /> }<br /> <br /> /* when on tablet or smaller device, take up the whole width of the page. */<br /> @media (max-width:801px) {<br /> /* actual callout */<br /> .callout {<br /> width: 100%;<br /> }<br /> <br /> /* callout wrapper → a special class for creating same-width notices for stacking */<br /> .callout-wrapper.stacked-notice {<br /> /* fill the page width */<br /> width: 100%;<br /> /* no more float */<br /> float: none;<br /> /* no more clear, since float is disabled */<br /> clear: none;<br /> }<br /> <br /> /* callout wrapper → a special class for creating same-width notices for stacking → callout element */<br /> .callout-wrapper.stacked-notice &gt; .callout {<br /> /* fill the page width */<br /> width: 100%;<br /> }<br /> }</div>

imported>Aliser