More spacing adjustment |
Copied improvements from Arti, moved the image definition out of the template entirely (this way we can use any type of insert, like inline svg!) |
||
Line 1: | Line 1: | ||
<div style=" | <onlyinclude><div style=" | ||
display: flex; | |||
align-items: center; | |||
gap: 16px; | |||
color: var(--color-base--emphasized); | color: var(--color-base--emphasized); | ||
Line 10: | Line 11: | ||
background-color: {{{2|rgba(96.9, 209.1, 249.9, 0.25)}}}; | background-color: {{{2|rgba(96.9, 209.1, 249.9, 0.25)}}}; | ||
padding: | padding: 12px 16px; | ||
margin: 0.5em 0; | margin: 0.5em 0; | ||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid; | border: 1px solid; | ||
Line 19: | Line 19: | ||
border-radius: 12px; | border-radius: 12px; | ||
">{{#if: {{{3|}}}|< | ">{{#if: {{{3|}}}|{{{3|}}}|}} | ||
{{#if: {{{1|}}}|{{{1}}}|Example Text}}</div> | |||
</onlyinclude> | |||
== Examples == | |||
{{User:JackTheFoxOtter/Template:Container | |||
|This is a note. | |||
|rgba(96.9, 209.1, 249.9, 0.25) /* Hero Cyan */ | |||
|[[File:PotatoBadge.png|40px|Note|link=]]}} | |||
{{User:JackTheFoxOtter/Template:Container | |||
|This is a note with a large amount of text to test how it overflows. {{Lorem ipsum}} | |||
|rgba(96.9, 209.1, 249.9, 0.25) /* Hero Cyan */ | |||
|[[File:PotatoBadge.png|40px|Note|link=]]}} | |||
{{User:JackTheFoxOtter/Template:Container | |||
|This note is potatoless. | |||
|rgba(96.9, 209.1, 249.9, 0.25) /* Hero Cyan */}} | |||
{{User:JackTheFoxOtter/Template:Container | |||
|This is a note with a large amount of text that's potatoless. {{Lorem ipsum}} | |||
|rgba(96.9, 209.1, 249.9, 0.25) /* Hero Cyan */}} | |||
{{User:JackTheFoxOtter/Template:Container | |||
|This is a note using an inline svg instead of png. This is cool because we can define the color of the image in the template! | |||
|rgba(96.9, 209.1, 249.9, 0.25) /* Hero Cyan */ | |||
|<svg style="width: 40px; height: 40px; fill: rgba(96.9, 209.1, 249.9, 1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><circle cx="63.56" cy="112.22" r="13.8"/><path d="m98.03,36.45c0,4.64-.92,9.16-2.72,13.42-1.74,4.11-4.22,7.79-7.38,10.95-3.06,3.06-6.62,5.49-10.57,7.21v5.36c0,7.58-6.03,13.9-13.61,14-7.7.1-13.98-6.11-13.98-13.79v-16.45c0-6.79,4.9-12.43,11.36-13.58,0,0,0,0,0,0,.75-.13,1.51-.21,2.3-.21,3.81-.04,7-3.03,7.03-6.84s-3.07-6.96-6.9-6.96c-2.55,0-4.77,1.38-5.97,3.44s-3.51,3.46-5.98,3.46h-14.74c-4.52,0-7.81-4.27-6.68-8.64.42-1.62.96-3.22,1.62-4.78,1.74-4.11,4.22-7.79,7.38-10.95,3.16-3.15,6.84-5.64,10.95-7.37,3.51-1.49,7.2-2.37,10.98-2.63,0,0,0,0,0,0,.81-.06,1.62-.08,2.43-.08s1.63.03,2.43.08c0,0,0,0,0,0,3.78.26,7.47,1.14,10.98,2.63,4.11,1.74,7.79,4.22,10.95,7.37,3.16,3.16,5.64,6.84,7.38,10.95,1.8,4.27,2.72,8.78,2.72,13.42Z"/> | |||
</svg>}} |
Revision as of 18:42, 18 January 2024