Template:Reputation Table/Item: Difference between revisions

Template page
No edit summary
No edit summary
Line 6: Line 6:
</pre>
</pre>
</noinclude>
</noinclude>
<includeonly>
<includeonly><div style="width: 100%; height: 20px; background-color: var(--color-surface-2); position: relative; border: 1px solid var(--border-color-base); border-radius: var(--border-radius--large);"><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%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div><div style="width: 5%; height: 100%;"></div></div><div style="height: 100%;  
<div style="width: 100%; height: 20px; background-color: var(--color-surface-2); position: relative; border: 1px solid var(--border-color-base); border-radius: var(--border-radius--large);">
<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%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%; padding: 1px; border-right: 2px solid black;"></div>
<div style="width: 5%; height: 100%;"></div>
</div>
<!-- Dynamic bar based on the value -->
<div style="height: 100%;  
position: absolute;  
position: absolute;  
top: 0;  
top: 0;  
Line 42: Line 17:
border-radius: 5px;
border-radius: 5px;
width: {{#expr: abs(50 * {{{value|0}}})}}%;
width: {{#expr: abs(50 * {{{value|0}}})}}%;
{{#ifexpr:{{{value|0}}}<0|transform: translateX(-100%);|}}">
{{#ifexpr:{{{value|0}}}<0|transform: translateX(-100%);|}}"></div></div></includeonly>
</div>
</div>
</includeonly>

Revision as of 05:55, 15 December 2024

Usage:

{{Reputation_Table/Item|value=0.1}}