Latest revision as of 23:50, 31 December 2025

50 / 100

Composition bar

Example:

{{Composition bar|3|11|hex=#dd5000}} will show as:

3 / 11

{{Composition bar|7|9|hex=#5ABF56}} will show as:

7 / 9

@@ Line 1: / Line 1: @@
-<div style="border: {{{border-width|1px}}} solid {{{border-color|#000000}}}; background-color: {{{background-color|#f0f0f0}}}; width: {{{width|100}}}px; height: 1.5em;  position:relative; top: -{{{border-width|1px}}}"><div style="position: absolute; background-color:{{#if:{{both|{{{4|}}}|{{{5|}}}}}
+<div style="border: {{{border-width|1px}}} solid {{{border-color|#474747}}}; background-color: {{{background-color|#171b21}}}; width: {{{width|100}}}px; height: 1.5em;  position:relative; top: -{{{border-width|1px}}}"><div style="position: absolute; background-color: {{{hex|#CCCCCC}}}; width: {{#expr:floor({{{width|100}}}*{{{1|{{#expr:{{{width|100}}}/2}}}}}/{{{2|{{{width|100}}}}}})}}px; height: 1.5em;"></div><div style="position: absolute; font-weight: bold; width: {{{width|100}}}px; line-height: 1.5em; text-align: center; z-index: 5; color: {{{color|#e8eaeb}}};">{{formatnum:{{{1|50}}}}}&nbsp;/&nbsp;{{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}|&nbsp;&nbsp;&nbsp;<span style="{{{perstyle|}}}">({{#expr:(({{{1|50}}}/{{{2|100}}})*100)round 0}}&nbsp;%)</span>}}</div></div><noinclude><h1>Composition bar</h1><p>Example:</p><code><nowiki>{{Composition bar|3|11|hex=#dd5000}}</nowiki></code> will show as:{{Composition bar|3|11|hex=#dd5000}}
-    |rgb({{#expr:255*{{{3|255}}}}},{{#expr:255*{{{4|0}}}}},{{#expr:255*{{{5|0}}}}})
+<code><nowiki>{{Composition bar|7|9|hex=#5ABF56}}</nowiki></code> will show as:{{Composition bar|7|9|hex=#5ABF56}}
-    |{{{hex|{{{3|#CCCCCC}}}}}}
-}}; width: {{#expr:floor({{{width|100}}}*{{{1|{{#expr:{{{width|100}}}/2}}}}}/{{{2|{{{width|100}}}}}})}}px; height: 1.5em;"></div><div style="position: absolute; font-weight: bold; width: {{{width|100}}}px; line-height: 1.5em; text-align: center; z-index: 5; color: {{{color|#000}}};">{{formatnum:{{{1|50}}}}}&nbsp;/&nbsp;{{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}|&nbsp;&nbsp;&nbsp;<span style="{{{perstyle|}}}">({{#expr:(({{{1|50}}}/{{{2|100}}})*100)round 0}}&nbsp;%)</span>}}</div></div><noinclude>
 </noinclude>
-{{Composition bar|50|100|#000000}}