User:Saag/Sandbox/Ability card v2/Card: Difference between revisionsGive feedback
mNo edit summary |
mNo edit summary |
||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly>{{anchor|{{{name}}}}}<div id="{{{id|}}}" 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: | <includeonly>{{anchor|{{{name}}}}}<div id="{{{id|}}}" class="ability-card" 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: #121013; align-items: center; width: 100%; max-width: 500px; border-radius: 13px 13px 4px 4px"> | ||
<!-- HEADER --> | <!-- HEADER --> | ||
<div style="width: 100%"> | <div style="width: 100%"> | ||
<div style="display:flex; flex-direction:row; justify-content: space-between; background: # | <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="display:flex; flex-direction:column;"> | ||
<div style="font-size: | <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:'Retail Demo','Open Sans'; font-weight:bold">{{#if:{{{name_link|}}}|[[{{{name_link}}}|{{{name}}}]]|{{{name}}}}}</span> | <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> | ||
<div style="display:flex; flex-direction:row; margin-left: 10px; height: 40px"> | <div style="display:flex; flex-direction:row; margin-left: 10px; height: 40px"> | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{channel_time|}}}|id= | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{channel_time|}}}|id=AbilityChannelTime|uom=s|ss={{{channel_time_ss|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Channel Time|20px|link=]]}} | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{range|}}}|id= | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{range|}}}|id=AbilityCastRange|ss={{{range_ss|}}}|uom=m|icon=[[File:CastRange.png|Cast Range|20px|link=]]}} | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{radius|}}}|id= | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{radius|}}}|id=Radius|ss={{{radius_ss|}}}|uom=m|icon=[[File:AttributeIconTechRange.png|Radius|20px|link=]]}} | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{ability_width|}}}|id=ability_width|uom=m|icon=[[File:AttributeIconTechRange.png|Width|20px|link=]]}} | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{ability_width|}}}|id=ability_width|uom=m|icon=[[File:AttributeIconTechRange.png|Width|20px|link=]]}} | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{duration|}}}|id= | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{duration|}}}|id=AbilityDuration|uom=s|ss={{{duration_ss|}}}|icon=[[File:AttributeIconTechDuration.png|Duration|20px|link=]]}} | ||
</div> | </div> | ||
</div> | </div> | ||
<div style="display:flex; flex-direction:column; align-items: end; justify-content: flex-end;"> | <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;"> | <div style="display:flex; flex-direction:row; justify-content: flex-end; margin-bottom: 5px; margin-right: 20px;"> | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{num_of_charges|}}}|id= | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{num_of_charges|}}}|id=AbilityCharges|icon=[[File:AttributeIconMaxChargesIncrease.png|Number of Charges|20px|link=]]|style=margin-right: 0;}} | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{charge_cooldown|}}}|id= | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{charge_cooldown|}}}|id=AbilityCooldownBetweenCharge|ss={{{charge_cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldownBetweenChargeUses.png|Charge Cooldown|16px|link=]]|style=margin-left: 1px; margin-right: 0}} | ||
</div> | </div> | ||
{{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{cooldown|}}}|id=AbilityCooldown|ss={{{cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldown.png|Cooldown|20px|link=]]}} | {{User:Saag/Sandbox/Ability_card_v2/Card/HeaderAttr|{{{cooldown|}}}|id=AbilityCooldown|ss={{{cooldown_ss|}}}|uom=s|icon=[[File:AttributeIconTechCooldown.png|Cooldown|20px|link=]]}} | ||
| Line 27: | Line 27: | ||
<!-- INFO SECTIONS --> | <!-- INFO SECTIONS --> | ||
<div style="margin: 5px 10px 0px 10px; padding: 3px 0 5px 0; width: calc(100% - 18px); box-sizing: | <div style="margin: 5px 10px 0px 10px; padding: 3px 0 5px 0; width: calc(100% - 18px); box-sizing: border-box;"> | ||
<!-- Info Section #1 --> | <!-- Info Section #1 --> | ||
<div style="display:flex; flex-direction:column; align-items: center; width: 100%"> | <div id="ability-info1" class="ability-info {{#ifeq:{{{hide_info1|}}}|true|hide}}" style="display:flex; flex-direction:column; align-items: center; width: 100%"> | ||
<div style="padding: 0 10px 0 10px">{{{info1_desc|}}}</div> | <div style="padding: 0 10px 0 10px">{{{info1_desc|}}}</div> | ||
<!-- Main Info --> | <!-- Main Info --> | ||
<div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;"> | <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|}}} | {{{info1_mainbox1|}}}{{{info1_mainbox2|}}}{{{info1_mainbox3|}}}{{{info1_mainbox4|}}}{{{info1_mainbox5|}}} | ||
</div> | </div> | ||
<!-- Alt Info --> | <!-- 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"> | <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> | ||
</div> | </div> | ||
<!-- Info Section #2 --> | <!-- Info Section #2 --> | ||
<div style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px"> | <div id="ability-info2" class="ability-info {{#ifeq:{{{hide_info2|}}}|true|hide}}" style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px"> | ||
<div style="padding: 0 10px 0 10px">{{{info2_desc|}}}</div> | <div style="padding: 0 10px 0 10px">{{{info2_desc|}}}</div> | ||
<!-- Main Info --> | <!-- Main Info --> | ||
<div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;"> | <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|}}}{{{info2_mainbox4|}}}{{{info2_mainbox5|}}} | |||
</div> | </div> | ||
<!-- Alt Info --> | <!-- 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"> | <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> | ||
</div> | </div> | ||
<!-- Info Section #3 --> | <!-- Info Section #3 --> | ||
<div style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px"> | <div id="ability-info3" class="ability-info {{#ifeq:{{{hide_info3|}}}|true|hide}}" style="display:flex; flex-direction:column; align-items: center; width: 100%; padding-top: 8px"> | ||
<div style="padding: 0 10px 0 10px">{{{info3_desc|}}}</div> | <div style="padding: 0 10px 0 10px">{{{info3_desc|}}}</div> | ||
<!-- Main Info --> | <!-- Main Info --> | ||
<div style="display:flex; flex-direction:row; flex-wrap: wrap; justify-content: center; width: calc(97% - 5px); min-width: 280px;"> | <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|}}}{{{info3_mainbox4|}}}{{{info3_mainbox5|}}} | |||
</div> | </div> | ||
<!-- Alt Info --> | <!-- 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"> | <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> | </div> | ||
| Line 72: | Line 72: | ||
<!-- UPGRADES --> | <!-- UPGRADES --> | ||
<div style="display:flex; flex-direction:row; flex-wrap: wrap; margin-bottom: 5px; justify-content: center; width: calc(97% - 16px); min-width: 280px;> | <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}}} | {{{upgrade1}}}{{{upgrade2}}}{{{upgrade3}}} | ||
</div> | </div> | ||
| Line 93: | Line 93: | ||
</div> | </div> | ||
</div>}}</div></includeonly><noinclude> | </div>}}</div></includeonly><noinclude> | ||
{{#invoke:Abilities-test/card|get_ability_card|{{{hero_name| | {{#invoke:Abilities-test/card|get_ability_card|{{{hero_name|Abrams}}}|{{{ability_num|4}}}|{{{link_name|false}}}|{{{notes|}}}}} | ||
{{Documentation}} | {{Documentation}} | ||
</noinclude> | </noinclude> | ||