Template:ItemBox: Difference between revisions

fixed link color for localized names
applied new style by User:TheMilkMan
Line 1: Line 1:
<includeonly>
<templatestyles src="Template:ItemBox/styles.css"/><includeonly><!--
<div class="HeroCard2" style="transition: 0.1s transform ease-in-out;display:inline-block; margin-left: 5px; border-radius: 5px;">
-->{{#vardefine:item_key_or_en|{{{item_name|{{{1}}}}}}}}<!--
{|- style="font-family:'Retail Demo Regular',serif;text-align:center; border-collapse:collapse; border-radius: 5px; width:100px !important; max-width:200px; height:2px; font-size: 14px;{{
-->{{#vardefine:tier|{{#invoke:ItemData|get_prop|{{#var:item_key_or_en}}|Tier}}}}<!--
#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
--><div class="HeroCard2" style="transition:0.1s transform ease-in-out;display:inline-block; margin-left:5px; border-radius:9px;">
| Weapon = background-color: #C97A03;
{|- style="font-family:'Retail Demo Regular',serif; text-align:center; border-collapse:collapse; width:100px !important; position:relative;"
| Vitality = background-color: #659818;
|<span class="item-link-wrapper" data-item-name="{{{item_name|{{{1}}}}}}"><div style="position:absolute; z-index:0; transform-origin: top; transform: scale(1, 1.1);">[[File:{{#invoke:ItemData|get_prop|{{#var:item_key_or_en}}|Slot}} Card T{{#var:tier}}.png|100px|link={{#if:{{{link|}}}|{{{link}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}}}]]</div></span><!--
| Spirit = background-color: #8B56B4;
--><div style="position:relative; pointer-events:none;"><!--
| background-color: #C97A03;}}"
--><div class="paper-texture tex-1" style="position:absolute; z-index:5; mix-blend-mode:multiply; opacity:0.9;">[[File:Card PaperTexture 1.png|100px|link=]]</div><!--
! {{souls|{{#if: {{{item_price|}}}|{{{item_price}}}|{{#if: {{{ignore|}}}|0|{{#invoke:ItemData|get_cost|{{{item_name|{{{1}}}}}}}}}}}}|size=12px|Shadow=text-shadow: 1.8px 1.8px rgba(0, 0, 0, 0.3);}}
--><div class="paper-texture tex-2" style="position:absolute; z-index:5; mix-blend-mode:multiply; opacity:0.9;">[[File:Card PaperTexture 2.png|100px|link=]]</div><!--
|- style="text-align:center; width:100px; max-width:200px; height:60px; {{
--><div class="paper-texture tex-3" style="position:absolute; z-index:5; mix-blend-mode:multiply; opacity:0.9;">[[File:Card PaperTexture 3.png|100px|link=]]</div><!--
#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
--><div class="paper-wear wear-1" style="position:absolute; z-index:6; mix-blend-mode:overlay; opacity:1; filter: sepia(70%)">[[File:Card PaperWear 1.png|100px|link=]]</div><!--
| Weapon = background-color: #FCAC4D; color: #3A2B08;
--><div class="paper-wear wear-2" style="position:absolute; z-index:6; mix-blend-mode:overlay; opacity:0.8; filter: sepia(70%)">[[File:Card PaperWear 2.png|100px|link=]]</div><!--
| Vitality = background-color: #86C921; color: #233A00;
--><div class="paper-wear wear-3" style="position:absolute; z-index:6; mix-blend-mode:overlay; opacity:1; filter: sepia(70%)">[[File:Card PaperWear 3.png|100px|link=]]</div><!--
| Spirit = background-color: #DE9CFF; color: #3C254E;
--><div class="paper-wear wear-4" style="position:absolute; z-index:6; mix-blend-mode:overlay; opacity:1; filter: sepia(70%)">[[File:Card PaperWear 4.png|100px|link=]]</div></div>
| background-color: #FCAC4D; color: #3A2B08;}}"
|- style="text-align:center; position:relative; pointer-events:none;"
| <span style="transition: 0.1s transform ease-in-out;"
| <span class="item-card-icon" style="transition:0.1s transform ease-in-out; position:relative; bottom:-1px;">[[File:{{{item_name|{{{1}}}}}}.png|96px|link=]]</span>{{#if:{{{ignore|}}}||{{#ifeq: {{#invoke:ItemData|is_active|{{{item_name|{{{1}}}}}}}}|true|<div style="position:relative; display:flex; justify-content:center; align-items:center; z-index:6;"><div style="background-color:#161A13; color:#FFFFF5; border-radius:3px; padding:2px 2px; font-size:12px; margin:0; width:48px; height:16px; position:absolute; bottom:-9px; line-height:15px; letter-spacing:-0.5px; font-family:'Retail Demo Regular', serif;">'''ACTIVE'''</div></div>}}}}
{{
|- style="height:55px; font-size:14px; font-family:'Retail Demo Regular'; line-height:18px; position:relative; z-index:1; pointer-events:none; {{#ifexpr:{{#var:tier}} > 3|{{#switch: {{#invoke:ItemData|get_prop|{{#var:item_key_or_en}}|Slot}}
#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
  | Weapon = color: #e2c5a1 !important;
| Weapon = color: #3A2B08;  
  | Armor = color: #b8dcc4 !important;
| Vitality = color: #233A00;
  | Tech = color: #ccbfda !important;
| Spirit = color: #3C254E;
  | color: #000000;}}|color: #11140e; !important}}"
| color: #3A2B08;}}">[[File:{{{item_name|{{{1}}}}}}.png|50px|link={{#if:{{{link|}}}|{{{link}}}|{{{item_loc|{{{item_name|{{{1}}}}}}}}}}}]]</span>{{#if:{{{ignore|}}}||{{#ifeq: {{#invoke:ItemData|is_active|{{{item_name|{{{1}}}}}}}}|true|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:5px; padding: 2px 6px; font-size:10px; margin: 0; width: 48px; height: 16px; position: absolute; bottom: -14px; line-height: 12px; letter-spacing: -0.5px; font-family: 'Retail Demo Regular', serif;">'''ACTIVE'''</div></div>}}}}
! style="padding: 0 4px;" |{{{item_loc|{{{item_name|{{{1}}}}}}}}}
{{#if:{{{ignore|}}}||{{#if:{{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}|<div style="position: relative; display: flex; justify-content: center; align-items: center;"><div style="background-color: #161A13; color: #FFFFF5; border-radius:50%; padding: 5px; font-size:10px; margin: 0; width: 20px; height: 20px; position: absolute; bottom: -7px; right: 3px;{{
#switch: {{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}
| Weapon = background-color: #FFF0D7; color: #151912;
| Vitality = background-color: #FFFFE7; color: #1C1E18;
| Spirit = background-color: #FFEFD7; color: #131610;
| background-color: #FFF0D7; color: #151912;}}"><div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
  <div style="position: relative; top: 4px; left: -13px;">
    {{Icon|[[File:{{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}.png|16px|link={{#invoke:ItemData|get_component_name|{{{item_name|{{{1}}}}}}}}]]}}
  </div>
</div></div></div>}}}}
|- style="border-radius: 0px 0px 5px 5px; height:60px; font-size: 12px; {{
#switch: {{#if: {{{ignore|}}}|Weapon|{{#if: {{{item_type|}}}|{{{item_type}}}|{{#invoke:ItemData|get_type|{{{item_name|{{{1}}}}}}}}}}}}
  | Weapon = background-color: #FFF0D7; color: #151912;
  | Vitality = background-color: #FFFFE7; color: #1C1E18;
  | Spirit = background-color: #FFEFD7; color: #131610;
  | background-color: #FFF0D7; color: #151912;}}"
! style="text-align:center; vertical-align:middle;" |
{{#if:{{{link|}}}
| [[{{{link}}}|<span style="color: #111111">{{{item_loc|{{{item_name|{{{1}}}}}}}}}</span>]]
| [[{{{item_loc|{{{item_name|{{{1}}}}}}}}}|<span style="color: #111111">{{{item_loc|{{{item_name|{{{1}}}}}}}}}</span>]]
}}
|}</div></includeonly><noinclude>{{Documentation}}</noinclude>
|}</div></includeonly><noinclude>{{Documentation}}</noinclude>