Template:Ink card: Difference between revisions

Revision as of 17:14, 10 December 2024

A template for displaying inks as simple color ramps.

Usage

Simple

{{Color ramp|Burgundy}}

Template:Color ramp

Advanced

You can also use this template to pull in full categories of inks, such as all Riso inks:

{{#arraymaptemplate:{{#ask:[[Category:Riso_inks]]
  |format=plainlist
  |headers=hide
  |link=none
  |limit=100
}}|Color ramp|,|}}

@@ Line 27: / Line 27: @@
 }}|Color ramp|,|}}
 </noinclude>
-<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; margin-bottom:.5rem;">
+<includeonly><div class="ink-card-wrapper text-{{#ifexpr:{{#invoke:Color|csvrgbToLum|{{#show: {{{1}}} |? Has rgb#}}}}>75|black|white}}" style="position:relative; margin-bottom:.5rem;">
-   <div class="color-ramp" style="background-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1); display: flex; flex-direction:row; width:100; height: 45px; border-radius:.5rem; overflow: hidden;">
+   <div class="color-ramp" style="background-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1); display: flex; flex-direction:row; width:100;box-sizing: border-box; border-radius:.5rem; overflow: hidden;">
-      <div class="p100" style="width:55%;display: inline-flex; align-items:flex-end; justify-content: space-between; padding: .25rem .5rem .25rem .75rem;"><span class="title" style="font-size: 1.25rem;">[[{{{1}}}]]</span>
+      <div class="p100" style="width:55%;display: inline-flex; align-items:center; justify-content: space-between; padding: 1rem;"><span class="title" style="font-size: 1.25rem; line-height: 1.25rem;">[[{{{1}}}]]</span>
-<span>100%</span></div>
+<span style="font-size: .75rem; line-height: .75rem;">100%</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="p75" style="width:15%; background-color: rgba(250,250,250,.25);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem"><span style="font-size: .75rem; line-height: .75rem;">75%</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="p50" style="width:15%; background-color: rgba(250,250,250,.5);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem;"><span style="font-size: .75rem; line-height: .75rem;">50%</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 class="p25" style="width:15%;background-color: rgba(250,250,250,.75);display: inline-flex; align-items:center; justify-content: flex-end; padding: 1rem;"><span style="font-size: .75rem; line-height: .75rem;">25%</span></div>
    </div>
 </div>
 </includeonly>