|
|
| (25 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <noinclude>
| | |
| <!-- Template documentation -->
| |
| '''Usage:'''
| |
| <pre>
| |
| {{Reputation_Table/Item|value=0.1}}
| |
| </pre>
| |
| </noinclude>
| |
| <includeonly>
| |
| <div style="width: 100%; height: 20px; background: transparent; position: relative; border: 1px solid var(--border-color-base); border-radius:var(--border-radius--medium); border-spacing:0;">
| |
| <div style="position: absolute; display: flex; justify-content: space-between; width: 100%; height: 100%; top: 0; left: 0; z-index:2;">
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| <div style="width: 5%; height: 100%; border-right: 1px solid var(--color-base--subtle);"></div>
| |
| </div>
| |
| <!-- Dynamic bar based on the value -->
| |
| <div style="height: 100%;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 50%;
| |
| background:{{#ifexpr:{{{value|0}}}<0|
| |
| linear-gradient(90deg, rgba(255,{{#expr: {{#expr: {{#expr: 1 -{{#expr: {{{value|0}}} * -1}}}} * 255}} round 0 }},{{#expr: {{#expr: {{#expr: 1 -{{#expr: {{{value|0}}} * -1}}}} * 255}} round 0 }},1) 0%, rgba(255,255,255,1) 100%);
| |
| |
| |
| linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba({{#expr: {{#expr: 255 * {{#expr: 1 -{{{value|0}}}}}}} round 0}},255,{{#expr: {{#expr: 255 * {{#expr: 1 -{{{value|0}}}}}}} round 0}},1) 100%);
| |
| }}
| |
| border-radius: 5px;
| |
| width: {{#expr: abs(50 * {{{value|0}}})}}%;
| |
| {{#ifexpr:{{{value|0}}}<0|transform: translateX(-100%);|}}">
| |
| </div>
| |
| </div>
| |
| </includeonly>
| |
