Template:Ink card: Difference between revisions
IssuePress (talk | contribs) (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...") |
IssuePress (talk | contribs) No edit summary |
||
Line 4: | Line 4: | ||
==usage== | ==usage== | ||
<pre> | <pre> | ||
{{Ink card|Burgundy | {{Ink card|Burgundy}} | ||
</pre> | </pre> | ||
{{Ink card|Burgundy | {{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 | <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( | <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( | <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( | <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> |