User:Saag/AbilityCircle: Difference between revisions

Revision as of 19:52, 6 September 2024

                 {{Abilities/{{{name}}}}}

Isolated port of the ability circle and background from Template:Ability card. Intended for use on Heroes.

No description.

Template parameters
Parameter		Description	Type	Status
name	`name`	Name of the ability Example Smoke Bomb	Unknown	required
iconsize	`iconsize`	Size of the whole icon. Defaults to 90 Default 90 Example 20	Unknown	optional
bgsize	`bgsize`	Size of the background circle. Should almost always be larger than the icon Example 128	Unknown	optional
displayicon	`displayicon`	Use if the ability icon has a different name or uses another icon. Example Smoke Bomb.png	Unknown	optional

@@ Line 2: / Line 2: @@
   <div class="abilityImage" style="display:inline-block; width:{{{bgsize|128}}}px; height:{{{bgsize|128}}}px;">
                <div style="position:absolute; filter: invert(42%) sepia(10%) saturate(2912%) hue-rotate(-40deg) brightness(190%) contrast(77%);">[[File:Passive ability frame.png|{{{bgsize|128}}}x{{{bgsize|128}}}px|link=]]</div>
-               <div class="ability-icon popover__wrapper"
+               <div class="ability-icon popover-wrapper"
                  style="width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;">
                  {{#if:{{{displayicon|}}}|[[File:{{{displayicon}}}|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center|link=]]|[[File:{{{name|Smoke Bomb}}}.png|link=|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center]]}}
                </div>
-               <div class="popover__content" style="text-align:left">
+               <div class="popover-content" style="text-align:left">
                    {{Abilities/{{{name}}}}}
                </div>