|
|
| Line 1: |
Line 1: |
| <includeonly>{{anchor|{{{name}}}}}<div class="hero-ability-card-wrapper" style="font-size: 0.9rem; line-height: 1.4; font-family: 'Retail Demo', 'Open Sans', 'PT Serif', serif; color: #FFEFD7; display:flex; flex-direction:column; background: rgb(52,52,52); background: #121013; 100%); align-items: center; width: 100%; max-width: 500px; border-radius: 13px 13px 4px 4px">
| | <div class="ability-tabs"> |
| | | {{#foreach:{{{abilities}}}|@|<div class="ability-tab" data-tab="{{#pos:@|@=}}">{{#pos:@|=}}</div>}} |
| <!-- HEADER --> | |
| <div style="width: 100%">
| |
| <div style="display:flex; flex-direction:row; justify-content: space-between; background: #121013; font-size: calc(1em - 2px); border-radius: 13px 13px 0 0; padding: 0 8px 14px 8px">
| |
| <div style="display:flex; flex-direction:column;">
| |
| <div style="font-size: 2rem;">
| |
| <span style="filter: brightness(0) saturate(100%) invert(98%) sepia(19%) saturate(1458%) hue-rotate(301deg) brightness(102%) contrast(109%); padding: 0 5px 0 7px">[[File:{{{icon}}}|45px|link=]]</span><span style="font-family: 'Valve Occult','Retail Demo','Open Sans'; font-weight:bold">{{#if:{{{name_link|}}}|[[{{{name_link}}}|{{{name}}}]]|{{uc:{{{name}}}}}}}</span>
| |
| </div>
| |
| <div style="display:flex; flex-direction:row; margin-left: 10px; height: 40px">
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{channel_time|}}}|uom=s|ss={{{channel_time_ss|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Channel Time|20px|link=]]}}
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{range|}}}|ss={{{range_ss|}}}|uom=m|icon=[[File:CastRange.png|Cast Range|20px|link=]]}}
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{radius|}}}|ss={{{radius_ss|}}}|uom=m|icon=[[File:AttributeIconTechRange.png|Radius|20px|link=]]}}
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{ability_width|}}}|uom=m|icon=[[File:AttributeIconTechRange.png|Width|20px|link=]]}}
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{duration|}}}|uom=s|ss={{{duration_ss|}}}|icon=[[File:AttributeIconTechDuration.png|Duration|20px|link=]]}}
| |
| </div>
| |
| </div>
| |
| <div style="display:flex; flex-direction:column; align-items: end; justify-content: flex-end;">
| |
| <div style="display:flex; flex-direction:row; justify-content: flex-end; margin-bottom: 5px; margin-right: 20px;">
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{num_of_charges|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Number of Charges|20px|link=]]|style=margin-right: 0;}}
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{charge_cooldown|}}}|ss={{{charge_cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldownBetweenChargeUses.png|Charge Cooldown|16px|link=]]|style=margin-left: 1px; margin-right: 0}}
| |
| </div>
| |
| {{Ability_card_v2/Card/HeaderAttr|{{{cooldown|}}}|ss={{{cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldown.png|Cooldown|20px|link=]]}}
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- INFO SECTIONS -->
| |
| <div style="margin: 5px 10px 0px 10px; padding: 3px 0 5px 0; width: calc(100% - 18px); box-sizing: unset;">
| |
| <!-- Info Section #1 -->
| |
| <div style="display:flex; flex-direction:column; align-items: center; width: 100%">
| |
| <div style="padding: 0 10px 0 10px">{{{info1_desc|}}}</div>
| |
| <!-- Main Info -->
| |
| <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
| |
| {{{info1_mainbox1|}}}{{{info1_mainbox2|}}}{{{info1_mainbox3|}}}
| |
| </div>
| |
| | |
| <!-- Alt Info -->
| |
| <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
| |
| {{{info1_altbox1|}}}{{{info1_altbox2|}}}{{{info1_altbox3|}}}{{{info1_altbox4|}}}{{{info1_altbox5|}}}{{{info1_altbox6|}}}
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- Info Section #2 -->
| |
| <div style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px">
| |
| <div style="padding: 0 10px 0 10px">{{{info2_desc|}}}</div>
| |
| <!-- Main Info -->
| |
| <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
| |
| {{{info2_mainbox1|}}}{{{info2_mainbox2|}}}{{{info2_mainbox3|}}}
| |
| </div>
| |
|
| |
| <!-- Alt Info -->
| |
| <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
| |
| {{{info2_altbox1|}}}{{{info2_altbox2|}}}{{{info2_altbox3|}}}{{{info2_altbox4|}}}{{{info2_altbox5|}}}{{{info2_altbox6|}}}
| |
| </div>
| |
| </div>
| |
|
| |
| <!-- Info Section #3 -->
| |
| <div style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px">
| |
| <div style="padding: 0 10px 0 10px">{{{info3_desc|}}}</div>
| |
| <!-- Main Info -->
| |
| <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;">
| |
| {{{info3_mainbox1|}}}{{{info3_mainbox2|}}}{{{info3_mainbox3|}}}
| |
| </div>
| |
|
| |
| <!-- Alt Info -->
| |
| <div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #2A2A2A; width: calc(97% - 19px); min-width: 267px; padding: 0 4px 0 4px; column-gap: 15px">
| |
| {{{info3_altbox1|}}}{{{info3_altbox2|}}}{{{info3_altbox3|}}}{{{info3_altbox4|}}}{{{info3_altbox5|}}}{{{info3_altbox6|}}}
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- UPGRADES -->
| |
| <div style="display:flex; flex-direction:row; flex-wrap: wrap; margin-bottom: 5px; justify-content: center; width: calc(97% - 16px); min-width: 280px;>
| |
| {{{upgrade1}}}{{{upgrade2}}}{{{upgrade3}}}
| |
| </div>
| |
|
| |
| <!-- NOTES -->
| |
| {{#if: {{{notes|}}}|
| |
| <div style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
| |
| <div><span style="font-size:1.15rem;"> {{#if: {{{name_link|}}}|
| |
| {{#vardefine:notes_localized|{{#invoke:Dictionary|translate|Notes|show_needs_translation=false}}}}
| |
| [[{{{name_link}}}/{{#var:notes_localized}}|{{#var:notes_localized}}]]
| |
| |
| |
| {{#invoke:Dictionary|translate|Notes}}
| |
| }}</span>
| |
| {{#if:{{{notes_source_page|}}}
| |
| | <span style="font-size:.7rem;">[[{{{notes_source_page}}}|{{#invoke:Dictionary|translate|edit}}]]</span>}}</div>
| |
| </div> | | </div> |
| <div class="mw-collapsible mw-collapsed" style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
| |
| <div>
| |
| {{{notes}}}
| |
| </div>
| |
| </div>}}</div></includeonly><noinclude>
| |
| {{#invoke:Abilities/card|get_ability_card|Rem|1|false}}
| |
|
| |
| {{Documentation}}
| |
|
| |
|
| </noinclude> | | {{#foreach:{{{abilities}}}|@|<div class="ability-content" id="tab-{{#pos:@|@=}}"> |
| | {{#pos:@|=}} |
| | </div>}} |
{{#foreach:{{{abilities}}}|@|
}}
{{#foreach:{{{abilities}}}|@|
}}