Difference between revisions of "Template:Diagonal split color box"
Jump to navigation
Jump to search
Adds a rectangular color box.
imported>Trigenibinion (Adjust size) |
(Readability) |
||
Line 2: | Line 2: | ||
</noinclude><includeonly><div style="display:inline-block;vertical-align:middle;font-family:{{{font|Lucida Console, monospace}}};{{#ifexpr:{{#if:{{{1|}}}|1|0}} or {{#if:{{{2|}}}|1|0}} | </noinclude><includeonly><div style="display:inline-block;vertical-align:middle;font-family:{{{font|Lucida Console, monospace}}};{{#ifexpr:{{#if:{{{1|}}}|1|0}} or {{#if:{{{2|}}}|1|0}} | ||
− | + | |background:{{#if:{{{2|}}} | |
− | + | |{{#ifeq:{{{1}}}|{{{2}}}|{{{1}}}|{{#if:{{{1|}}} | |
− | + | |linear-gradient(to top right,{{{1|#eaecf0}}} {{#if:{{{no-diagonal|}}} | |
− | + | |48.5%,{{{2|#eaecf0}}} 51.5%|49.5%,#aaa 49.5%,#aaa 50.5%,{{{2|#eaecf0}}} 50.5%}}) | |
− | + | |{{{2}}}}}}}|{{{1}}}}};|}}line-height:1;{{#if:{{{far-border|}}} | |
− | + | |{{#ifeq:{{{far-border|}}}|{{{border|}}}|border:{{{border-width|0.0625em}}} solid {{{border|#000}}};|border-top:{{{border-width|0.0625em}}} solid {{{border|{{{1|#000}}}}}};border-left:{{{border-width|0.0625em}}} solid {{{border|{{{1|#000}}}}}};border-right:{{{border-width|0.0625em}}} solid {{{far-border|#000}}};border-bottom:{{{border-width|0.0625em}}} solid {{{far-border|#000}}};}}|{{#if:{{{border2|}}} | |
− | + | |{{#ifeq:{{{border2}}}|{{{border|}}}|border:{{{border-width|0.0625em}}} solid {{{border|#000}}};|border-top:{{{border-width|0.0625em}}} solid {{{border2|#000}}};border-left:{{{border-width|0.0625em}}} solid {{{border|{{{1|#000}}}}}};border-right:{{{border-width|0.0625em}}} solid {{{border2|#000}}};border-bottom:{{{border-width|0.0625em}}} solid {{{border|{{{1|#000}}}}}};}}|{{#if:{{{border|}}} | |
− | + | |border:{{{border-width|0.0625em}}} solid {{{border}}};|{{#ifeq:{{{1|}}}|{{{2}}}|border:{{{border-width|0.0625em}}} solid {{{1|#000}}};|{{#if:{{{1|}}} | |
− | + | |{{#if:{{{2|}}}|border-top:{{{border-width|0.0625em}}} solid {{{2}}};border-left:{{{border-width|0.0625em}}} solid {{{1|}}};border-right:{{{border-width|0.0625em}}} solid {{{2}}};border-bottom:{{{border-width|0.0625em}}} solid {{{1}}}|border:{{{border-width|0.0625em}}} solid {{{1}}}}}|border:{{{border-width|0.0625em}}} solid #000}};}}}}}}}}font-size:{{{font-size|1em}}};">{{#ifexpr:{{#ifeq:{{{3|}}}|{{{4|}}}|1|0}} and {{#if:{{{3|}}}|1|0}} | |
− | + | |{{#ifeq:{{{5|}}}|{{{6|}}}|{{#if:{{{corner|}}} | |
− | + | |<div style="line-height:{{#switch:{{str len|{{{3}}}}} | |
− | + | |3 = 0.95 | |
− | + | |4 = 1 | |
− | + | |#default = 0.7}};margin:-0.125em 0.125em 0em 0em;text-align:left;"><span style="font-size:{{#ifeq:{{str len|{{{3}}}}}|4|0.85|0.75}}em;margin:0em;padding:0.0625em 0.0625em 0em 0.1875em;text-align:left;color:{{#if:{{{corner-color|}}} | |
− | + | |{{{corner-color}}}|{{greater color contrast ratio|{{{corner-background|{{{border|{{greater color contrast ratio|{{{1|{{{2|#fff}}}}}}|#000|#fff}}}}}}}}|#000|#fff}}}};background-color:{{#if:{{{corner-background|{{{border|}}}}}}|{{{corner-background|{{{border|}}}}}}|{{greater color contrast ratio|{{{corner-color|{{{1|{{{2|#fff}}}}}}}}}|#000|#fff}}}};">{{{corner}}}</span></div>|<div style="line-height:{{#if:{{{maximize|}}} | |
− | + | |0.45|{{#switch:{{str len|{{{3}}}}} | |
− | + | |3 = 0.75 | |
− | + | |4 = 0.8 | |
− | + | |#default = 0.65}}}};font-size:{{#if:{{{maximize|}}}|0.58|1}}em;margin-right:0em;"> </div>}}<div style="text-align:center;line-height:0.85;margin:{{#if:{{{maximize|}}}|-0.125em 0.125em -0.125em 0.125em|-0.0625em 0.125em -0.1875em 0.125em}};color:{{#if:{{{5|}}} | |
− | + | |{{{5}}}|{{greater color contrast ratio|{{{1|}}}|#000|#fff}}}};{{#switch:{{str len|{{{3}}}}} | |
− | + | |3 = {{#ifeq:{{{font-size|}}}|0.61em|font-size:0.95em;|font-size:0.85em;}} | |
− | + | |4 = {{#ifeq:{{{font-size|}}}|0.61em|font-size:0.75em;|font-size:0.6em;}} | |
− | + | |#default = }}">{{{3| }}}</div>{{#if:{{{far-corner|}}} | |
− | + | |<div style="line-height:{{#switch:{{str len|{{{3}}}}} | |
− | + | |3 = 0.95 | |
− | + | |4 = 1 | |
− | + | |#default = 0.7}};margin:0em 0em 0em 0.0625em;text-align:right;"><span style="margin:0em -0.0625em 0em 0em;"> </span><span style="font-size:0.75em;margin:0em;padding:0em 0.0625em 0em 0.125em;text-align:right;color:{{#if:{{{far-corner-color|}}} | |
− | + | |{{{far-corner-color}}}|{{greater color contrast ratio|{{{far-corner-background|{{{far-border|}}}|{{{border|}}}|{{{2|}}}|{{{1|}}}|#fff}}}|#000|#fff}}}};background-color:{{#if:{{{far-corner-background|{{{far-border|{{{border|}}}}}}|}}}|{{{far-corner-background|{{{far-border|{{{border|}}}}}}|}}}|{{greater color contrast ratio|{{{far-corner-color|{{{2|}}}|{{{1|}}}|#fff}}}|#000|#fff}}}};">{{{far-corner}}}</span></div>|<div style="line-height:{{#if:{{{maximize|}}} | |
− | + | |0.45|{{#switch:{{str len|{{{3}}}}} | |
− | + | |3 = 0.75 | |
− | + | |4 = 0.8 | |
− | + | |#default = 0.7}}}};font-size:{{#if:{{{maximize|}}}|0.58|1}}em;margin-left:0.125em;"> </div>}} | |
− | + | |<div style="margin-right:0.125em;text-align:right;color:{{#if:{{{6|}}}|{{{6}}}|{{#if:{{{2|}}}|{{greater color contrast ratio|{{{2}}}|#000|#fff}}|#000}}}};">{{#if:{{{4|}}}| {{{4}}}| }}</div><div style="float:left;margin-left:0.125em;text-align:left;color:{{#if:{{{5|}}} | |
− | + | |{{{5}}}|{{#if:{{{1|}}}|{{greater color contrast ratio|{{{1}}}|#000|#fff}}|#000}}}};">{{{3| }}}</div>}} | |
− | + | |{{#if:{{{corner|}}} | |
− | + | |<div style="margin-left:0em;margin-top:0em;text-align:left;"><span style="color:{{#if:{{{corner-color|}}} | |
− | + | |{{{corner-color}}}|{{greater color contrast ratio|{{{corner-background|{{{border|{{greater color contrast ratio|{{{1|{{{2|#fff}}}}}}|#000|#fff}}}}}}}}|#000|#fff}}}};text-align:left;margin-left:0em;padding:0.0625em 0.0625em 0em 0.125em;margin-top:0em;background-color:{{#if:{{{corner-background|{{{border|}}}}}}|{{{corner-background|{{{border|}}}}}}|{{greater color contrast ratio|{{{corner-color|{{{1|{{{2|#fff}}}}}}}}}|#000|#fff}}}};">{{{corner}}}</span><span style="margin-left:0.3em;margin-right:0.125em;text-align:right;color:{{#if:{{{6|}}}|{{{6}}}|{{#if:{{{2|}}}|{{greater color contrast ratio|{{{2}}}|#000|#fff}}|#000}}}};">{{#if:{{{4|}}}|{{{4}}}| }}</span></div><div style="float:left;margin-left:0.125em;text-align:left;color:{{#if:{{{5|}}}|{{{5}}}|{{#if:{{{1|}}}|{{greater color contrast ratio|{{{1}}}|#000|#fff}}|#000}}}};">{{#if:{{{3|}}}|{{{3}}}| }}</div> | |
− | + | |<div style="line-height:{{#if:{{{maximize|}}}|0.55|0.98}};font-size:{{#if:{{{maximize|}}}|1|0.99}}em;margin-right:{{#if:{{{maximize|}}}|0.3125|0.125}}em;text-align:right;color:{{#if:{{{6|}}}|{{{6}}}|{{#if:{{{2|}}}|{{greater color contrast ratio|{{{2|}}}|#000|#fff}}|#000}}}};">{{#if:{{{4|}}}| {{{4}}}|{{#if:{{{maximize|}}}| | }}}}</div><div style="line-height:{{#if:{{{maximize|}}}|0.55|0.99}};font-size:{{#if:{{{maximize|}}}|1|0.98}}em;float:left;margin-left:{{#if:{{{maximize|}}}|0.3125|0.125}}em;text-align:left;color:{{#if:{{{5|}}}|{{{5}}}|{{#if:{{{1|}}}|{{greater color contrast ratio|{{{1}}}|#000|#fff}}|#000}}}};">{{#if:{{{3|}}}|{{{3}}}|{{#if:{{{maximize|}}}| | }}}}</div>}}}}</div></includeonly><noinclude> | |
{{documentation}} | {{documentation}} | ||
</noinclude> | </noinclude> |
Latest revision as of 02:13, 1 January 2020
Contents
Usage
This is the TemplateData documentation for this template used by VisualEditor and other tools; see the monthly parameter usage report for this template.
TemplateData for Diagonal split color box
{{diagonal split color box|left color|right color|left text|right text|left text color|right text color|border=|border2=|far-border=|border-width=|font=|font-size=|maximize=|no-diagonal=|corner=|corner-color=|corner-background=|far-corner=|far-corner-color=|far-corner-background=}}
Adds a rectangular color box.
- Colors are most commonly specified as either a color keyword or as the hexadecimal triplet representing an RGB combination. See the article web colors for details.
Parameter | Description | Type | Status | |
---|---|---|---|---|
Left color | 1 | Left background color of the box.
| String | suggested |
Right color | 2 | Right background color of the box.
| String | suggested |
Left text | 3 | Adds text inside the left triangle; box otherwise has no text.
| String | suggested |
Right text | 4 | Adds text inside the right triangle; otherwise it is empty.
| String | suggested |
Left text color | 5 | Sets the color of the text inside the left triangle.
| String | suggested |
Right text color | 6 | Sets the color of the text inside the right triangle.
| String | suggested |
Border color | border | Sets the color of the border around the box.
| String | optional |
Border 2 color | border2 | Sets the color of the border next to the right triangle.
| String | optional |
Far border color | far-border | Sets the color of the border next to the far corner.
| String | optional |
Border width | border-width | Sets the width of the border around the box.
| String | optional |
Font | font | Sets the font size.
| String | optional |
Font size | font-size | Sets the font size.
| String | optional |
Maximize | maximize | Fits bigger font.
| String | optional |
No diagonal | no-diagonal | Do not draw the diagonal.
| String | optional |
Corner | corner | Sets the top left text.
| String | optional |
Corner color | corner-color | Sets the color of the top left text.
| String | optional |
Corner background | corner-background | Sets the background color of the top left text.
| String | optional |
Far corner | far-corner | Sets the bottom right text.
| String | optional |
Far corner color | far-corner-color | Sets the color of the bottom right text.
| String | optional |
Far corner background | far-corner-background | Sets the background color of the bottom right text.
| String | optional |
Format: inline
ExpandTest of raw TemplateData output:
Visual effect | Markup |
---|---|
{{diagonal split color box}}
| |
{{diagonal split color box|Green}}
| |
{{diagonal split color box||Green}}
| |
{{diagonal split color box|Green|Green}}
| |
{{diagonal split color box|Green|border=Green}}
| |
{{diagonal split color box|Yellow|Blue}}
| |
C R |
{{diagonal split color box|||R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|no-diagonal=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|no-diagonal=yes}}
|
C R |
{{diagonal split color box|#999|#999|R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box|#999||R|C|#f00|#0ff}}
|
C R |
{{diagonal split color box||#999|R|C|#f00|#0ff}}
|
R R |
{{diagonal split color box|Yellow||R|R|#f00}}
|
R R |
{{diagonal split color box|Yellow||R|R||#f00}}
|
A R |
{{diagonal split color box|Yellow||R|A|#f00|#f00}}
|
R |
{{diagonal split color box|||R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow|Yellow|R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00}}
|
R |
{{diagonal split color box||Yellow|R|R|#f00|#f00}}
|
R |
{{diagonal split color box|Yellow||R||#f00}}
|
R |
{{diagonal split color box|Yellow|||R|#f00}}
|
R |
{{diagonal split color box|Yellow|||R||#f00}}
|
R |
{{diagonal split color box|#999||R|#f00|#f00}}
|
R |
{{diagonal split color box|#999|||R|#f00|#f00}}
|
R |
{{diagonal split color box|#999||R||#f00|#0ff}}
|
R |
{{diagonal split color box|#999|||R|#f00|#0ff}}
|
{{diagonal split color box|font-size=0.6em}}
| |
{{diagonal split color box|Yellow|font-size=0.6em}}
| |
{{diagonal split color box|LightGray|Yellow|font-size=0.6em}}
| |
{{diagonal split color box|LightGray|Yellow|font-size=0.6em|no-diagonal=yes}}
| |
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.6em}}
|
R R |
{{diagonal split color box|Yellow||R|R|#f00|font-size=0.6em}}
|
R R |
{{diagonal split color box|Yellow||R|R||#f00|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow||R|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow|||R|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|maximize=yes|no-diagonal=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.2em|maximize=yes|no-diagonal=yes}}
|
B R |
{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#00f}}
|
R B |
{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|far-corner=B|far-corner-color=#00f}}
|
B R W |
{{diagonal split color box|Yellow|#999|R|R|#f00|#f00|font-size=0.7em|corner=B|corner-color=#000|far-corner=W|far-corner-color=#fff}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em}}
|
BC R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.7em|corner=B|corner-color=#00f}}
|
P E100 |
{{diagonal split color box|green||E100|E100|font-size=0.7em|corner=P|corner-color=white|corner-background=green}}
|
P E85 |
{{diagonal split color box|green||E85|E85|font-size=0.7em|corner=P|corner-color=white|corner-background=green}}
|
E100 |
{{diagonal split color box|green||E100|E100|font-size=0.61em}}
|
E85 |
{{diagonal split color box|green||E85|E85|font-size=0.61em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.2em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow|#bbb|R|R|#f00|#f00|font-size=1.37em|maximize=yes|no-diagonal=yes}}
|
C R |
{{diagonal split color box|Yellow|#999|R|C|#f00|#0ff|font-size=0.8em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.8em}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=1.35em|maximize=yes}}
|
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.7em|maximize=yes}}
|
{{diagonal split color box|Yellow|border=Yellow|font-size=0.7em|maximize=yes}}
| |
R |
{{diagonal split color box|Yellow||R|R|#f00|#f00|font-size=0.6em|maximize=yes}}
|
{{diagonal split color box|Yellow|border=Yellow|font-size=0.6em|maximize=yes}}
| |
{{diagonal split color box|Yellow|Blue|font-size=0.45em}}
| |
Red Blue |
{{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00}}
|
Red Blue |
{{diagonal split color box|LightGray|Yellow|Blue|Red|#00f|#f00|font=Helvetica, Sans-serif}}
|
Blue Red |
{{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f}}
|
Blue Red |
{{diagonal split color box|LightGray|Yellow|Red|Blue|#f00|#00f|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Green|Green|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Yellow|Blue|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Yellow|Blue||Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Yellow|Blue|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for this text |
{{diagonal split color box|Blue|Yellow|Default color for this text|Default color for this text|font=Helvetica, Sans-serif}}
|
Default color for right text Default color for left text |
{{diagonal split color box|Yellow|Blue|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}}
|
Default color for right text Default color for left text |
{{diagonal split color box|Blue|Yellow|Default color for left text|Default color for right text|font=Helvetica, Sans-serif}}
|
Using X11 color names Using X11 color names |
{{diagonal split color box|SteelBlue|Coral|'''Using X11 color names'''|'''Using X11 color names'''|Gold|Silver|font=Helvetica, Sans-serif}}
|
Default color for this text Using RGB hex triplets |
{{diagonal split color box|#012345|#BA9876|''Using RGB hex triplet''|''Default color for this text''|#FEDCBA|font=Helvetica, Sans-serif}}
|
bordercolor like wikitable |
{{diagonal split color box|white|lightgray|bordercolor like wikitable|border=#A2A9B1|border-width=4px|font=Helvetica, Sans-serif}}
|
two border colors |
{{diagonal split color box|white|lightgray|two border colors|border=yellow|border2=red|border-width=4px|font=Helvetica, Sans-serif}}
|
far border color |
{{diagonal split color box|white|lightgray|far border color|border=yellow|far-border=red|border-width=4px|font=Helvetica, Sans-serif}}
|
Variants
Template | Description | Example |
---|---|---|
{{Color box}} | a small color box with black borders and text color | or ORANGE |
{{Color box striped}} | a striped version | |
{{RouteBox}} | a borderless version with text color and wikilinks | Template:RouteBox |
{{Colorbull}} | a colored bullet with wikilinks | ■ |
{{Legend2}} | another borderless version | |
{{Color sample}} | a small color box with black borders | |
{{Swatch inline}} | Template:Swatch inline | |
{{Background color}} | orange | |
{{Rail color box}} | a version with more display options (part of Module:Adjacent stations) |
Template:Rcb, Template:Rcb, etc. |
{{Diagonal split color box}} | a small color box split diagonally | |
{{Motor type}} | A small color box corresponding to the motor type | Template:Motor type, etc. |
Supporting template
See also
- {{Infobox color}}, an infobox for the detailed description of a color.
- {{Legend}}
- {{Diagonal split header}}
The above documentation is transcluded from Template:Diagonal split color box/doc. (edit | history) Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |