Template:Hero card2: Difference between revisions

(33 intermediate revisions by 10 users not shown)

Line 1:

<~~div class~~="~~HeroCard2~~" ~~style="display~~:~~inline~~-~~block; border~~-~~radius~~: ~~8px; overflow~~:~~hidden; position: relative; background~~-~~image: linear~~-~~gradient(~~#~~A69885,~~ #~~72695A); width~~: ~~132px; height: 179px; box-shadow: 5px 5px 12px~~ #~~00000090; transition~~: 0.~~1s transform ease~~-in-~~out;">~~

<templatestyles src="Template:Hero card2/styles.css" /><includeonly><!--

~~<span~~>~~[[File~~:{{{~~Image~~|{{{~~name~~|~~Abrams~~}}}}}} ~~card.png~~|~~132px~~|~~link=~~{{{~~link~~|{{{~~name~~|~~Abrams~~}}}}}}]]<~~/span>~~

~~<p style="position: absolute; bottom: 5px; text~~-~~align~~: ~~center; width~~: ~~100%; font~~-~~weight: bold; font~~-~~family: 'Forevs Demo', 'PT Serif','Palatino','Georgia',serif; color: #FFEFD7; text~~-~~shadow: 0px 0px 8px black, 0px 0px 8px black, 0px 0px 8px black; font~~-~~size~~: {{{~~text-size~~|24}}}~~px; letter~~-~~spacing: 0.5px; margin: 0; text~~-~~transform: uppercase; text~~-~~overflow: ellipsis; pointer~~-~~events~~: ~~none;">~~{{{~~name~~|~~Abrams~~}}}</p>

vars:

~~<div style="display:~~ {{#~~ifeq~~: {{{~~recommended~~|~~false~~}}} ~~| true | inline| none~~ }}~~; top~~:~~0; right~~:~~0; position~~: ~~absolute~~;"><div ~~position: relative;~~>[[File:~~Recommended icon backer~~.png| ~~64px~~|link={{{name~~|Abrams~~}}}]]

heroName (1) / default Abrams

</div>

cardSize

</div>

textSize

</~~div~~><noinclude>{{Documentation}}</noinclude>

isHeroLabs

overrideDisplayName

overrideLinkTooltip

overrideLinkImage

overrideLinkClick

-->{{#vardefine:heroName|{{{heroName|{{{1|Abrams}}}|}}}}}<!--

-->{{#vardefine:cardSize|{{{cardSize|130}}}}}<!--

-->{{#vardefine:imageSize|{{#expr: ({{#var:cardSize}} * 0.923) round 0 }}}}<!--

-->{{#vardefine:textSize|{{{textSize|24}}}}}<!--

-->{{#vardefine:isHeroLabs|{{#ifeq:{{{isHeroLabs|false}}}|true|HeroLabs}}}}<!--

-->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:HeroData|get_hero_key|{{#var:heroName}}}}}}}}<!--

-->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:heroName}}}}}}<!--

-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--

-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:heroName}}}}}}}<!--

-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:heroName}}}}}}}<!--

-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:heroName}}{{If lang}}}}}}}<!--

-->

<div class="HeroImage">[[File:{{#var:linkImage}}_vertical.png|{{#var:imageSize}}px|link=]]</div>

<p class="HeroLabsText">{{#invoke:Lang|get_string|MyRosterHeroLabsHero|fallback_str=en}}</p>

<p class="HeroName" style="--text-size:{{#var:textSize}}px;">{{#var:displayName}}</p>

<div class="hero-link-wrapper" data-hero-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div>

</div></includeonly><noinclude>{{Documentation}}</noinclude>

Template:Hero card2: Difference between revisionsGive feedback

Jannepg (talk | contribs)

@@ Line 1: / Line 1: @@
-<div class="HeroCard2" style="display:inline-block; border-radius: 8px; overflow:hidden; position: relative; background-image: linear-gradient(#A69885, #72695A); width: 132px; height: 179px; box-shadow: 5px 5px 12px #00000090; transition: 0.1s transform ease-in-out;">
+<templatestyles src="Template:Hero card2/styles.css" /><includeonly><!--
-<span>[[File:{{{Image|{{{name|Abrams}}}}}} card.png|132px|link={{{link|{{{name|Abrams}}}}}}]]</span>
-<p style="position: absolute; bottom: 5px; text-align: center; width: 100%; font-weight: bold; font-family: 'Forevs Demo', 'PT Serif','Palatino','Georgia',serif; color: #FFEFD7; text-shadow: 0px 0px 8px black, 0px 0px 8px black, 0px 0px 8px black; font-size: {{{text-size|24}}}px; letter-spacing: 0.5px; margin: 0; text-transform: uppercase; text-overflow: ellipsis; pointer-events: none;">{{{name|Abrams}}}</p>
+vars:
-<div style="display: {{#ifeq: {{{recommended|false}}} | true | inline| none }}; top:0; right:0; position: absolute;"><div position: relative;>[[File:Recommended icon backer.png| 64px|link={{{name|Abrams}}}]]
+  heroName (1) / default Abrams
-</div>
+  cardSize
-</div>
+  textSize
-</div><noinclude>{{Documentation}}</noinclude>
+  isHeroLabs
+  overrideDisplayName
+  overrideLinkTooltip
+  overrideLinkImage
+  overrideLinkClick
+-->{{#vardefine:heroName|{{{heroName|{{{1|Abrams}}}|}}}}}<!--
+-->{{#vardefine:cardSize|{{{cardSize|130}}}}}<!--
+-->{{#vardefine:imageSize|{{#expr: ({{#var:cardSize}} * 0.923) round 0 }}}}<!--
+-->{{#vardefine:textSize|{{{textSize|24}}}}}<!--
+-->{{#vardefine:isHeroLabs|{{#ifeq:{{{isHeroLabs|false}}}|true|HeroLabs}}}}<!--
+-->{{#vardefine:displayName|{{#invoke:Lang|get_string|{{#invoke:HeroData|get_hero_key|{{#var:heroName}}}}}}}}<!--
+-->{{#vardefine:displayName|{{#if:{{#var:displayName}}|{{#var:displayName}}|{{#var:heroName}}}}}}<!--
+-->{{#vardefine:displayName|{{{overrideDisplayName|{{#var:displayName}}}}}}}<!--
+-->{{#vardefine:linkTooltip|{{{overrideLinkTooltip|{{#var:heroName}}}}}}}<!--
+-->{{#vardefine:linkImage|{{{overrideLinkImage|{{#var:heroName}}}}}}}<!--
+-->{{#vardefine:linkClick|{{{overrideLinkClick|{{#var:heroName}}{{If lang}}}}}}}<!--
+-->
+<div class="HeroCard {{#var:isHeroLabs}}" style="width:{{#var:cardSize}}px;">
+  <div class="CardBacker"></div>
+  <div class="HeroImage">[[File:{{#var:linkImage}}_vertical.png|{{#var:imageSize}}px|link=]]</div>
+  <div class="HeroLabsSticker"></div>
+  <div class="CardShape"></div>
+  <div class="GradiantOverlay"></div>
+  <p class="HeroLabsText">{{#invoke:Lang|get_string|MyRosterHeroLabsHero|fallback_str=en}}</p>
+  <p class="HeroName" style="--text-size:{{#var:textSize}}px;">{{#var:displayName}}</p>
+  <div class="hero-link-wrapper" data-hero-name="{{#var:linkTooltip}}">[[{{#var:linkClick}}|<span></span>]]</div>
+</div></includeonly><noinclude>{{Documentation}}</noinclude>