Template:Ink card: Difference between revisions

From stencil.wiki
(Created page with "<noinclude> A template for displaying inks as simple color ramps. ==usage== <pre> {{Ink card|Burgundy|rgb=145,78,114}} </pre> {{Ink card|Burgundy|rgb=145,78,114}} </noinclude> <includeonly><div class="ink-card-wrapper" style="position:relative;"> <div class="color-ramp" style="color: white; background-color:rgb({{{rgb|}}}); display: flex; flex-direction:row; width:100; height: 50px; border-radius:.5rem; overflow: hidden;"> <div class="p100" style="width:55%;displ...")
 
No edit summary
Line 4: Line 4:
==usage==
==usage==
<pre>
<pre>
{{Ink card|Burgundy|rgb=145,78,114}}
{{Ink card|Burgundy}}
</pre>
</pre>
{{Ink card|Burgundy|rgb=145,78,114}}
{{Ink card|Burgundy}}
</noinclude>
</noinclude>
<includeonly><div class="ink-card-wrapper" style="position:relative;">
<includeonly><div class="ink-card-wrapper text-{{#ifexpr:{{#rmatch:{{#invoke:Color|hexToCielch|{{#invoke:Color|rgbTripletToHex|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$1|}}|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$2|}}|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$3|}}}}}}|/^([0-9]{1,3})/|$1}}>75|black|white}}" style="position:relative;">
   <div class="color-ramp" style="color: white; background-color:rgb({{{rgb|}}}); display: flex; flex-direction:row; width:100; height: 50px; border-radius:.5rem; overflow: hidden;">
   <div class="color-ramp" style="color: white; background-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1); display: flex; flex-direction:row; width:100; height: 50px; border-radius:.5rem; overflow: hidden;">
     <div class="p100" style="width:55%;display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>100%</span></div>
     <div class="p100" style="width:55%;display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>100%</span></div>
     <div class="p75" style="width:15%; background-color: rgba(255,255,255,.25);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>75%</span></div>
     <div class="p75" style="width:15%; background-color: rgba(250,250,250,.25);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>75%</span></div>
     <div class="p50" style="width:15%; background-color: rgba(255,255,255,.5);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>50%</span></div>
     <div class="p50" style="width:15%; background-color: rgba(250,250,250,.5);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>50%</span></div>
     <div class="p25" style="width:15%;background-color: rgba(255,255,255,.75);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>25%</span></div>
     <div class="p25" style="width:15%;background-color: rgba(250,250,250,.75);display: inline-flex; align-items:flex-end; justify-content: flex-end; padding: .25rem .5rem;"><span>25%</span></div>
   </div>
   </div>
   <div class="title" style="position: absolute; top:2px; left:.75rem; font-size: 1.5rem;">[[{{{1}}}]]</div>
   <div class="title" style="position: absolute; top:2px; left:.75rem; font-size: 1.5rem;">[[{{{1}}}]]</div>
</div>
</div>
</includeonly>
</includeonly>

Revision as of 15:02, 10 December 2024

A template for displaying inks as simple color ramps.

usage

{{Ink card|Burgundy}}
100%
75%
50%
25%