User:Saag/Sandbox/Ability card v2/Card: Difference between revisions

mNo edit summary
m Merge with new ability card changes
Line 1: Line 1:
<includeonly>{{anchor|{{{name}}}}}<div id="{{{id|}}}" class="hero-ability" 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: linear-gradient(90deg, rgba(52,52,52,1) 0%, rgba(66,66,66,1) 14%, rgba(77,77,77,1) 100%); align-items: center; width: 100%; max-width: 600px; border-radius: 13px 13px 4px 4px">
<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: #121212; font-size: calc(1em - 2px); border-radius: 13px 13px 0 0; padding: 0 8px 14px 8px">     
     <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: 1.3rem;">
         <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">
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: unset;">
<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 id="ability-info1" class="ability-info {{#ifeq:{{{hide_info1|}}}|true|hide}}" 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%">
Line 38: Line 38:
       <!-- 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|}}}
        {{{info1_altbox1|}}}{{{info1_altbox2|}}}{{{info1_altbox3|}}}{{{info1_altbox4|}}}{{{info1_altbox5|}}}{{{info1_altbox6|}}}
       </div>
       </div>
   </div>
   </div>
Line 47: Line 47:
       <!-- 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|}}}
        {{{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|}}}
        {{{info2_altbox1|}}}{{{info2_altbox2|}}}{{{info2_altbox3|}}}{{{info2_altbox4|}}}{{{info2_altbox5|}}}{{{info2_altbox6|}}}
       </div>
       </div>
   </div>
   </div>
Line 61: Line 61:
       <!-- 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|}}}
        {{{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|}}}
        {{{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|Abrams}}}|{{{ability_num|4}}}|{{{link_name|false}}}|{{{notes|}}}}}
{{#invoke:Abilities/card|get_ability_card|Rem|1|false}}
 
{{Documentation}}
{{Documentation}}
</noinclude>
</noinclude>