The Deadlock Wiki

Template:Ability card v2/Card: Difference between revisions

Browse history interactively
← Older editNewer edit →

Vergir (talk | contribs)

2 user groups
1,631 edits
undo
VisualWikitext
Vergir (talk | contribs)
Contributors, Interface administrators
1,631 edits
Move AbilityCardV2 template to use CSS-classes instead of inline styling. Ability card's look can now be customized.
Vergir (talk | contribs)
Contributors, Interface administrators
1,631 edits
m undo last, test something quick
Tag: Undo
Line 1: Line 1:
<includeonly><templatestyles src="Ability card v2/Card/styles.css" />{{anchor|{{{name}}}}}<div id="{{{id|}}}" class="ability-card">
<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 class="ac-header-wrapper">
   <div style="width: 100%">
     <div class="ac-header">     
     <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 class="ac-header-left">
       <div style="display:flex; flex-direction:column;">
         <div class="ac-title">
         <div style="font-size: 2rem;">
<span class="ac-icon">[[File:{{{icon}}}|45px|link=]]</span><span class="ac-name">{{#if:{{{name_link|}}}|[[{{{name_link}}}|{{{name}}}]]|{{uc:{{{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 class="ac-header-attrs">
         <div style="display:flex; flex-direction:row; margin-left: 10px; height: 40px">
           {{Ability_card_v2/Card/HeaderAttr|{{{channel_time|}}}|id=AbilityChannelTime|uom=s|ss={{{channel_time_ss|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Channel Time|20px|link=]]}}
           {{Ability_card_v2/Card/HeaderAttr|{{{channel_time|}}}|id=AbilityChannelTime|uom=s|ss={{{channel_time_ss|}}}|icon=[[File:AttributeIconMaxChargesIncrease.png|Channel Time|20px|link=]]}}
           {{Ability_card_v2/Card/HeaderAttr|{{{range|}}}|id=AbilityCastRange|ss={{{range_ss|}}}|uom=m|icon=[[File:CastRange.png|Cast Range|20px|link=]]}}
           {{Ability_card_v2/Card/HeaderAttr|{{{range|}}}|id=AbilityCastRange|ss={{{range_ss|}}}|uom=m|icon=[[File:CastRange.png|Cast Range|20px|link=]]}}
Line 16: Line 16:
         </div>
         </div>
       </div>
       </div>
       <div class="ac-header-right">
       <div style="display:flex; flex-direction:column; align-items: end; justify-content: flex-end;">
         <div class="ac-charge-row">
         <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|}}}|id=AbilityCharges|icon=[[File:AttributeIconMaxChargesIncrease.png|Number of Charges|20px|link=]]|style=margin-right: 0;}}
           {{Ability_card_v2/Card/HeaderAttr|{{{num_of_charges|}}}|id=AbilityCharges|icon=[[File:AttributeIconMaxChargesIncrease.png|Number of Charges|20px|link=]]|style=margin-right: 0;}}
           {{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}}
           {{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}}
Line 27: Line 27:
    
    
<!-- INFO SECTIONS -->
<!-- INFO SECTIONS -->
<div class="ac-info-outer">
<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 ac-info-section {{#ifeq:{{{hide_info1|}}}|true|hide}}">
   <div id="ability-info1" class="ability-info {{#ifeq:{{{hide_info1|}}}|true|hide}}" style="display:flex; flex-direction:column; align-items: center; width: 100%">
     <div class="ac-info-desc">{{{info1_desc|}}}</div>
     <div style="padding: 0 10px 0 10px">{{{info1_desc|}}}</div>
       <!-- Main Info -->
       <!-- Main Info -->
       <div class="ac-info-main">
       <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_mainbox4|}}}{{{info1_mainbox5|}}}
         {{{info1_mainbox1|}}}{{{info1_mainbox2|}}}{{{info1_mainbox3|}}}{{{info1_mainbox4|}}}{{{info1_mainbox5|}}}
       </div>
       </div>


       <!-- Alt Info -->
       <!-- Alt Info -->
       <div class="ac-info-alt">
       <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_altbox7|}}}
         {{{info1_altbox1|}}}{{{info1_altbox2|}}}{{{info1_altbox3|}}}{{{info1_altbox4|}}}{{{info1_altbox5|}}}{{{info1_altbox6|}}}{{{info1_altbox7|}}}
       </div>
       </div>
Line 43: Line 43:
    
    
   <!-- Info Section #2 -->
   <!-- Info Section #2 -->
   <div id="ability-info2" class="ability-info ac-info-section ac-info-section--padded {{#ifeq:{{{hide_info2|}}}|true|hide}}">
   <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 class="ac-info-desc">{{{info2_desc|}}}</div>
     <div style="padding: 0 10px 0 10px">{{{info2_desc|}}}</div>
       <!-- Main Info -->
       <!-- Main Info -->
       <div class="ac-info-main">
       <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 class="ac-info-alt">
       <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_altbox7|}}}
         {{{info2_altbox1|}}}{{{info2_altbox2|}}}{{{info2_altbox3|}}}{{{info2_altbox4|}}}{{{info2_altbox5|}}}{{{info2_altbox6|}}}{{{info2_altbox7|}}}
       </div>
       </div>
Line 57: Line 57:
    
    
     <!-- Info Section #3 -->
     <!-- Info Section #3 -->
   <div id="ability-info3" class="ability-info ac-info-section ac-info-section--padded {{#ifeq:{{{hide_info3|}}}|true|hide}}">
   <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 class="ac-info-desc">{{{info3_desc|}}}</div>
     <div style="padding: 0 10px 0 10px">{{{info3_desc|}}}</div>
       <!-- Main Info -->
       <!-- Main Info -->
       <div class="ac-info-main">
       <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 class="ac-info-alt">
       <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_altbox7|}}}
         {{{info3_altbox1|}}}{{{info3_altbox2|}}}{{{info3_altbox3|}}}{{{info3_altbox4|}}}{{{info3_altbox5|}}}{{{info3_altbox6|}}}{{{info3_altbox7|}}}
       </div>
       </div>
Line 72: Line 72:


   <!-- UPGRADES -->
   <!-- UPGRADES -->
   <div class="ac-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}}}
     {{{upgrade1}}}{{{upgrade2}}}{{{upgrade3}}}
   </div>
   </div>
Line 78: Line 78:
   <!-- NOTES -->
   <!-- NOTES -->
   {{#if: {{{notes|}}}|
   {{#if: {{{notes|}}}|
   <div class="ac-notes-wrapper">
   <div style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
     <div><span class="ac-notes-title"> {{#if: {{{name_link|}}}|
     <div><span style="font-size:1.15rem;"> {{#if: {{{name_link|}}}|
     {{#vardefine:notes_localized|{{#invoke:Dictionary|translate|Notes|show_needs_translation=false}}}}
     {{#vardefine:notes_localized|{{#invoke:Dictionary|translate|Notes|show_needs_translation=false}}}}
[[{{{name_link}}}/{{#var:notes_localized}}|{{#var:notes_localized}}]]  
[[{{{name_link}}}/{{#var:notes_localized}}|{{#var:notes_localized}}]]  
Line 86: Line 86:
}}</span>
}}</span>
{{#if:{{{notes_source_page|}}}
{{#if:{{{notes_source_page|}}}
|  <span class="ac-notes-edit">[[{{{notes_source_page}}}|{{#invoke:Dictionary|translate|edit}}]]</span>}}</div>
|  <span style="font-size:.7rem;">[[{{{notes_source_page}}}|{{#invoke:Dictionary|translate|edit}}]]</span>}}</div>
</div>
</div>
<div class="mw-collapsible mw-collapsed ac-notes-body">
<div class="mw-collapsible mw-collapsed" style="align-self: flex-start; margin: 10px 0 10px 20px; font-size: 0.8rem;">
<div>
<div>
{{{notes}}}
{{{notes}}}
Retrieved from "https://deadlock.wiki/Template:Ability_card_v2/Card"