Template:SkillCard: Difference between revisions

Latest revision as of 10:39, 17 June 2024

Non-Attribute

Tech

Skill Name

Description of the ability.

Sample Info
Sample Data	Value

@@ Line 1: / Line 1: @@
+<templatestyles src="SkillCard/styles.css" />
 <div style="display: flex; justify-content: space-between; align-items: flex-start; border: 1px solid #6F7277; padding: 10px; background: linear-gradient(to bottom right, #4C4F4D, #1B1C1F 30%, #1A191A); color: #cccccc;">
    <div style="flex: 1; padding-right: 10px; border-right: 1px solid #636165; margin-right: -1px;">
+     {{#if:{{{icon|}}}|[[{{{icon}}}|64px|left|link=]]}}<noinclude>
-     <div>{{{element|Attribute}}} • {{{type|Type}}}</div>
+    <!-- Preview only --><div>{{Non-Attribute}} {{Tech}}</div></noinclude>
-     <h3 style="margin-top: 5px">'''[[{{{skill_name|Skill Name}}}]]''' <noinclude>([[{{{descendant|Descendant}}}]])</noinclude></h3>
+     <div>{{#if:{{{element|}}}|{{{{{element}}}}}}} {{#if:{{{type|}}}|{{{{{type}}}}}}}</div>
-     <hr />
+     <h3 style="margin-top: 5px">'''[[{{{skill_name|Skill Name}}}]]''' <!--([[{{{descendant|Descendant}}}]])--></h3>
+     <hr style="clear: both;" />
      <p>{{{description | Description of the ability.}}}</p>
-{{#if:{{{preview|}}}|<div style="margin-bottom: 15px">[[{{{preview}}}|frameless|link={{{preview}}}|loop]]</div>}}
+    {{#if:{{{preview|}}}|<div class="preview">[[{{{preview}}}|loop|autoplay|muted|link=]]</div>}}
    </div>
    <div style="flex: 1; padding-left: 10px; border-left: 1px solid #636165;">
-     {| style="border-spacing: 0px 2px; border-collapse: separate; width: 100%; max-width: none;"
+     {| style="border-spacing: 0px 2px; border-collapse: separate; width: 100%; max-width: none; font-size: var(--font-size-small);"
      |-
-     {{{info_table | {{!}} Skill Data Table}}}
+     {{{info_table |
+      <noinclude>
+      <!-- Preview only -->
+      {{SkillCard/infoheader | Sample Info}}
+      {{SkillCard/inforow | Sample Data | Value}}
+      </noinclude>
+    }}}
      |-
      |}
    </div>
 </div>