feat: Adds color selection to the class and origin feature boxes

- Adds a select field to allow the user to choose the color of class and origin features individually
- Adds attributes and inputs to ensure this selection is preserved and can be referenced properly by CSS
- Updates the class and origin feature divs to use a more correct class name of `class-feature` instead of `pokemon-move`
This commit is contained in:
Ian Merryweather
2022-08-11 12:45:45 +01:00
parent 400791b936
commit dc5d632a42
2 changed files with 150 additions and 47 deletions
+84 -39
View File
@@ -148,133 +148,152 @@ button.sheet-hidden-setting {
}
input.sheet-color-setting[value="bug"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="bug"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="bug"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="bug"] ~ div.sheet-class-feature {
--background-color: var(--poke-bug);
--foreground-color: var(--poke-bug-shaded);
--text-background-color: var(--poke-bug-background);
}
input.sheet-color-setting[value="dark"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="dark"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="dark"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="dark"] ~ div.sheet-class-feature {
--background-color: var(--poke-dark);
--foreground-color: var(--poke-dark-shaded);
--text-background-color: var(--poke-dark-background);
}
input.sheet-color-setting[value="dragon"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="dragon"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="dragon"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="dragon"] ~ div.sheet-class-feature {
--background-color: var(--poke-dragon);
--foreground-color: var(--poke-dragon-shaded);
--text-background-color: var(--poke-dragon-background);
}
input.sheet-color-setting[value="electric"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="electric"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="electric"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="electric"] ~ div.sheet-class-feature {
--background-color: var(--poke-electric);
--foreground-color: var(--poke-electric-shaded);
--text-background-color: var(--poke-electric-background);
}
input.sheet-color-setting[value="fairy"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="fairy"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="fairy"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="fairy"] ~ div.sheet-class-feature {
--background-color: var(--poke-fairy);
--foreground-color: var(--poke-fairy-shaded);
--text-background-color: var(--poke-fairy-background);
}
input.sheet-color-setting[value="fighting"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="fighting"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="fighting"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="fighting"] ~ div.sheet-class-feature {
--background-color: var(--poke-fighting);
--foreground-color: var(--poke-fighting-shaded);
--text-background-color: var(--poke-fighting-background);
}
input.sheet-color-setting[value="fire"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="fire"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="fire"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="fire"] ~ div.sheet-class-feature {
--background-color: var(--poke-fire);
--foreground-color: var(--poke-fire-shaded);
--text-background-color: var(--poke-fire-background);
}
input.sheet-color-setting[value="flying"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="flying"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="flying"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="flying"] ~ div.sheet-class-feature {
--background-color: var(--poke-flying);
--foreground-color: var(--poke-flying-shaded);
--text-background-color: var(--poke-flying-background);
}
input.sheet-color-setting[value="ghost"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="ghost"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="ghost"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="ghost"] ~ div.sheet-class-feature {
--background-color: var(--poke-ghost);
--foreground-color: var(--poke-ghost-shaded);
--text-background-color: var(--poke-ghost-background);
}
input.sheet-color-setting[value="grass"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="grass"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="grass"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="grass"] ~ div.sheet-class-feature {
--background-color: var(--poke-grass);
--foreground-color: var(--poke-grass-shaded);
--text-background-color: var(--poke-grass-background);
}
input.sheet-color-setting[value="ground"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="ground"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="ground"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="ground"] ~ div.sheet-class-feature {
--background-color: var(--poke-ground);
--foreground-color: var(--poke-ground-shaded);
--text-background-color: var(--poke-ground-background);
}
input.sheet-color-setting[value="ice"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="ice"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="ice"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="ice"] ~ div.sheet-class-feature {
--background-color: var(--poke-ice);
--foreground-color: var(--poke-ice-shaded);
--text-background-color: var(--poke-ice-background);
}
input.sheet-color-setting[value="normal"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="normal"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="normal"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="normal"] ~ div.sheet-class-feature {
--background-color: var(--poke-normal);
--foreground-color: var(--poke-normal-shaded);
--text-background-color: var(--poke-normal-background);
}
input.sheet-color-setting[value="poison"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="poison"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="poison"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="poison"] ~ div.sheet-class-feature {
--background-color: var(--poke-poison);
--foreground-color: var(--poke-poison-shaded);
--text-background-color: var(--poke-poison-background);
}
input.sheet-color-setting[value="psychic"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="psychic"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="psychic"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="psychic"] ~ div.sheet-class-feature {
--background-color: var(--poke-psychic);
--foreground-color: var(--poke-psychic-shaded);
--text-background-color: var(--poke-psychic-background);
}
input.sheet-color-setting[value="rock"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="rock"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="rock"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="rock"] ~ div.sheet-class-feature {
--background-color: var(--poke-rock);
--foreground-color: var(--poke-rock-shaded);
--text-background-color: var(--poke-rock-background);
}
input.sheet-color-setting[value="steel"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="steel"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="steel"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="steel"] ~ div.sheet-class-feature {
--background-color: var(--poke-steel);
--foreground-color: var(--poke-steel-shaded);
--text-background-color: var(--poke-steel-background);
}
input.sheet-color-setting[value="typeless"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="typeless"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="typeless"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="typeless"] ~ div.sheet-class-feature {
--background-color: var(--poke-typeless);
--foreground-color: var(--poke-typeless-shaded);
--text-background-color: var(--poke-typeless-background);
}
input.sheet-color-setting[value="water"] ~ div.sheet-wrapper,
input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move,
input.sheet-color-setting-feature[value="water"] ~ div.sheet-class-feature {
--background-color: var(--poke-water);
--foreground-color: var(--poke-water-shaded);
--text-background-color: var(--poke-water-background);
@@ -283,7 +302,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
/* Fancy colors, in DARK MODE */
.sheet-darkmode input.sheet-color-setting[value="bug"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="bug"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="bug"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="bug"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-bug);
--text-background-color: var(--poke-all-dark-background);
@@ -291,7 +311,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="dark"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="dark"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="dark"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="dark"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-dark);
--text-background-color: var(--poke-all-dark-background);
@@ -299,7 +320,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="dragon"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="dragon"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="dragon"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="dragon"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-dragon);
--text-background-color: var(--poke-all-dark-background);
@@ -307,7 +329,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="electric"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="electric"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="electric"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="electric"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-electric);
--text-background-color: var(--poke-all-dark-background);
@@ -315,7 +338,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="fairy"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="fairy"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="fairy"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="fairy"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-fairy);
--text-background-color: var(--poke-all-dark-background);
@@ -323,7 +347,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="fighting"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="fighting"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="fighting"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="fighting"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-fighting);
--text-background-color: var(--poke-all-dark-background);
@@ -331,7 +356,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="fire"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="fire"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="fire"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="fire"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-fire);
--text-background-color: var(--poke-all-dark-background);
@@ -339,7 +365,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="flying"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="flying"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="flying"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="flying"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-flying);
--text-background-color: var(--poke-all-dark-background);
@@ -347,7 +374,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="ghost"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="ghost"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="ghost"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="ghost"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-ghost);
--text-background-color: var(--poke-all-dark-background);
@@ -355,7 +383,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="grass"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="grass"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="grass"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="grass"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-grass);
--text-background-color: var(--poke-all-dark-background);
@@ -363,7 +392,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="ground"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="ground"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="ground"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="ground"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-ground);
--text-background-color: var(--poke-all-dark-background);
@@ -371,7 +401,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="ice"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="ice"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="ice"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="ice"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-ice);
--text-background-color: var(--poke-all-dark-background);
@@ -379,7 +410,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="normal"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="normal"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="normal"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="normal"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-normal);
--text-background-color: var(--poke-all-dark-background);
@@ -387,7 +419,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="poison"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="poison"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="poison"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="poison"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-poison);
--text-background-color: var(--poke-all-dark-background);
@@ -395,7 +428,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="psychic"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="psychic"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="psychic"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="psychic"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-psychic);
--text-background-color: var(--poke-all-dark-background);
@@ -403,7 +437,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="rock"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="rock"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="rock"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="rock"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-rock);
--text-background-color: var(--poke-all-dark-background);
@@ -411,7 +446,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="steel"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="steel"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="steel"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="steel"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-steel);
--text-background-color: var(--poke-all-dark-background);
@@ -419,7 +455,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="typeless"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="typeless"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="typeless"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="typeless"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-typeless);
--text-background-color: var(--poke-all-dark-background);
@@ -427,7 +464,8 @@ input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
}
.sheet-darkmode input.sheet-color-setting[value="water"] ~ div.sheet-wrapper,
.sheet-darkmode input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move {
.sheet-darkmode input.sheet-color-setting-move[value="water"] ~ div.sheet-pokemon-move,
.sheet-darkmode input.sheet-color-setting-feature[value="water"] ~ div.sheet-class-feature {
--background-color: var(--poke-all-dark);
--foreground-color: var(--poke-water);
--text-background-color: var(--poke-all-dark-background);
@@ -522,7 +560,8 @@ div.sheet-collapsible-feature {
border-color: var(--foreground-color);
}
div.sheet-pokemon-move {
div.sheet-pokemon-move,
div.sheet-class-feature {
background-image: var(--background-image);
background-position: right top;
background-repeat: no-repeat;
@@ -794,6 +833,7 @@ select.sheet-no-dropdown::-ms-expand {
grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr;
}
.sheet-class-feature-info-header,
.sheet-pokemon-move-info-header {
display: flex;
justify-content: space-between;
@@ -1630,11 +1670,16 @@ button[type="roll"].sheet-inline-roller {
width: 30%;
}
.sheet-class-feature-info-header input[type="text"],
.sheet-pokemon-move-info-header input[type="text"] {
margin-left: 4px;
width: 30%;
}
.sheet-class-feature-info-header select {
margin: 5px 0px;
}
.sheet-collapsible-feature .sheet-options-flag,
.sheet-collapsible-feature .sheet-options-flag + span,
.sheet-pokemon-move .sheet-options-flag,
+66 -8
View File
@@ -812,14 +812,15 @@
<div class="sheet-tab-trainer sheet-tab-hybrid">
<b>Origin Feature</b>
<div class="sheet-collapsible-feature" style="position: relative;">
<input class="sheet-color-setting-feature" name="attr_feature_color" type="hidden" value="@{type1}" />
<div class="sheet-class-feature sheet-collapsible-feature" style="position: relative;">
<input checked class="sheet-options-flag" name="attr_origin_options_flag" type="checkbox" />
<span name="attr_origin_flag">-</span>
<div class="sheet-display">
<div class="sheet-pokemon-move-info-header">
<div class="sheet-class-feature-info-header">
<span class="sheet-fill-space">
<button class="sheet-inline-roller sheet-skill-roller" name="roll-origin-feature-output" title="Click this to send this feature to the chat log. Click the Plus to allow editing the information." type="roll"
value="@{publicity_roll} &{template:feature-output} {{type-color=@{type1}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{originfeaturename}}} {{feature-text=@{originfeaturedesc}}}">
value="@{publicity_roll} &{template:feature-output} {{type-color=@{feature_color}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{originfeaturename}}} {{feature-text=@{originfeaturedesc}}}">
<span name="attr_originfeaturename"></span>
</button>
<b class="sheet-info-tooltip" title="Click this to send this feature to the chat log. Click the Plus to allow editing the information.">ℹ</b>
@@ -837,7 +838,7 @@
<input name="attr_originfeaturename" placeholder="Feature Name" spellcheck="false" type="text" />
<span class="sheet-fill-space sheet-hide-on-mobile">
<button class="sheet-inline-roller sheet-skill-roller" name="roll-origin-feature-output" title="Click this to send this feature to the chat log." type="roll"
value="@{publicity_roll} &{template:feature-output} {{type-color=@{type1}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{originfeaturename}}} {{feature-text=@{originfeaturedesc}}}">
value="@{publicity_roll} &{template:feature-output} {{type-color=@{feature_color}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{originfeaturename}}} {{feature-text=@{originfeaturedesc}}}">
Send to Chat
</button>
<b class="sheet-info-tooltip" title="Click this to send this feature to the chat log.">ℹ</b>
@@ -849,6 +850,34 @@
<button name="act_resetoriginusage" type="action">Reset</button>
</span>
</div>
<div class="sheet-class-feature-info-header">
<span>
<b>Select a Feature Color:</b>
<select class="sheet-no-dropdown" name="attr_feature_color" title="Attribute: feature_color">
<option value="@{type1}" selected>Match Character Sheet</option>
<option value="bug">Bug</option>
<option value="dark">Dark</option>
<option value="dragon">Dragon</option>
<option value="electric">Electric</option>
<option value="fairy">Fairy</option>
<option value="fighting">Fighting</option>
<option value="fire">Fire</option>
<option value="flying">Flying</option>
<option value="ghost">Ghost</option>
<option value="grass">Grass</option>
<option value="ground">Ground</option>
<option value="ice">Ice</option>
<option value="normal">Normal</option>
<option value="poison">Poison</option>
<option value="psychic">Psychic</option>
<option value="rock">Rock</option>
<option value="steel">Steel</option>
<option value="typeless">Typeless</option>
<option value="water">Water</option>
</select>
<b class="sheet-info-tooltip" title="Select a type to have this feature show in that color.">ℹ</b>
</span>
</div>
<textarea name="attr_originfeaturedesc" placeholder="Feature Description" spellcheck="false"></textarea>
</div>
</div>
@@ -856,14 +885,15 @@
<br />
<b>Class Features</b>
<fieldset class="repeating_features">
<div class="sheet-collapsible-feature">
<input class="sheet-color-setting-feature" name="attr_feature_color" type="hidden" value="@{type1}" />
<div class="sheet-class-feature sheet-collapsible-feature">
<input checked class="sheet-options-flag" name="attr_options_flag" type="checkbox" />
<span name="attr_flag">-</span>
<div class="sheet-display">
<div class="sheet-pokemon-move-info-header">
<span class="sheet-fill-space">
<button class="sheet-inline-roller sheet-skill-roller" name="roll-class-feature-output" title="Click this to send this feature to the chat log. Click the Plus to allow editing the information." type="roll"
value="@{publicity_roll} &{template:feature-output} {{type-color=@{type1}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{classfeaturename}}} {{feature-text=@{classfeaturedesc}}}">
value="@{publicity_roll} &{template:feature-output} {{type-color=@{feature_color}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{classfeaturename}}} {{feature-text=@{classfeaturedesc}}}">
<span name="attr_classfeaturename"></span>
</button>
<b class="sheet-info-tooltip" title="Click this to send this feature to the chat log. Click the Plus to allow editing the information.">ℹ</b>
@@ -877,11 +907,11 @@
</div>
</div>
<div class="sheet-options">
<div class="sheet-pokemon-move-info-header">
<div class="sheet-class-feature-info-header">
<input name="attr_classfeaturename" placeholder="Feature Name" spellcheck="false" type="text" />
<span class="sheet-fill-space sheet-hide-on-mobile">
<button class="sheet-inline-roller sheet-skill-roller" name="roll-class-feature-output" title="Click this to send this feature to the chat log." type="roll"
value="@{publicity_roll} &{template:feature-output} {{type-color=@{type1}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{classfeaturename}}} {{feature-text=@{classfeaturedesc}}}">
value="@{publicity_roll} &{template:feature-output} {{type-color=@{feature_color}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{classfeaturename}}} {{feature-text=@{classfeaturedesc}}}">
Send to Chat
</button>
<b class="sheet-info-tooltip" title="Click this to send this feature to the chat log.">ℹ</b>
@@ -892,6 +922,34 @@
<button name="act_incrementfeatureusage" type="action">+</button>
<button name="act_resetfeatureusage" type="action">Reset</button>
</span>
</div>
<div class="sheet-class-feature-info-header">
<span>
<b>Select a Feature Color:</b>
<select class="sheet-no-dropdown" name="attr_feature_color" title="Attribute: feature_color">
<option value="@{type1}" selected>Match Character Sheet</option>
<option value="bug">Bug</option>
<option value="dark">Dark</option>
<option value="dragon">Dragon</option>
<option value="electric">Electric</option>
<option value="fairy">Fairy</option>
<option value="fighting">Fighting</option>
<option value="fire">Fire</option>
<option value="flying">Flying</option>
<option value="ghost">Ghost</option>
<option value="grass">Grass</option>
<option value="ground">Ground</option>
<option value="ice">Ice</option>
<option value="normal">Normal</option>
<option value="poison">Poison</option>
<option value="psychic">Psychic</option>
<option value="rock">Rock</option>
<option value="steel">Steel</option>
<option value="typeless">Typeless</option>
<option value="water">Water</option>
</select>
<b class="sheet-info-tooltip" title="Select a type to have this feature show in that color.">ℹ</b>
</span>
</div>
<textarea name="attr_classfeaturedesc" placeholder="Feature Description" spellcheck="false"></textarea>
</div>