feature: Makes class features collapsible

- Updates text area and number input backgrounds to use the type-variable text background colour
- Updates number inputs to use bold font weight for consistency across the character sheet
- Adds collapsing to class features
- Corrects the assignment of relative position for the origin feature div

PokemonTabletopAdventures_v3/PTA3.css

@@ -400,7 +400,7 @@ div.sheet-skill-selection .sheet-no-dropdown {
 
 .sheet-top-information[type="number"],
 .sheet-top-information[type="text"] {
-  background-color: rgba(255, 153, 153, 0);
+  background-color: transparent;
   border: 2px var(--foreground-color);
   border-style: none none solid none;
   font-weight: bold;
@@ -549,8 +549,9 @@ input[type="checkbox"] {
 
 input[type="number"] {
   -moz-appearance: textfield;
+  background-color: var(--text-background-color);
+  font-weight: bold;
   text-align: center;
-  background-color: rgba(255, 255, 255, 0.6);
 }
 
 input[type="number"]::placeholder,
@@ -582,7 +583,7 @@ input[type="text"].sheet-caps {
 }
 
 textarea {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: var(--text-background-color);
   box-sizing: border-box;
   font-weight: bold;
 }
@@ -1226,10 +1227,6 @@ button[type="roll"].sheet-inline-roller {
   width: 30%;
 }
 
-.charsheet div {
-  position: relative;
-}
-
 .sheet-collapsible-feature .sheet-options-flag,
 .sheet-collapsible-feature .sheet-options-flag + span,
 .sheet-pokemon-move .sheet-options-flag,

PokemonTabletopAdventures_v3/PTA3.html

@@ -637,17 +637,17 @@
 
     <div class="sheet-tab-trainer sheet-tab-hybrid">
       <b>Origin Feature</b>
-      <div class="sheet-collapsible-feature">
+      <div class="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">
             <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. Roll Name: -roll-origin-feature-output" type="roll"
+              <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="&{template:feature-output} {{type-color=@{type1}}} {{character-name=@{character_name}}} {{character-id=@{character_id}}} {{feature-name=@{originfeaturename}}} {{feature-text=@{originfeaturedesc}}}">
-                  <span name="attr_originfeaturename"></span>
+                <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. Roll Name: -roll-origin-feature-output">ℹ</b>
+              <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>
             </span>
             <span>
               <b>Feature Usage</b>
@@ -661,11 +661,11 @@
           <div class="sheet-pokemon-move-info-header">
             <input name="attr_originfeaturename" placeholder="Feature Name" spellcheck="false" type="text" />
             <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. Roll Name: -roll-origin-feature-output" type="roll"
+              <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="&{template:feature-output} {{type-color=@{type1}}} {{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. Roll Name: -roll-origin-feature-output">ℹ</b>
+                <b class="sheet-info-tooltip" title="Click this to send this feature to the chat log.">ℹ</b>
             </span>
             <span>
               <b>Feature Usage</b>
@@ -681,19 +681,49 @@
       <br />
       <b>Class Features</b>
       <fieldset class="repeating_features">
-        <div class="sheet-pokemon-move-info-header">
-          <input name="attr_classfeaturename" placeholder="Feature Name" spellcheck="false" type="text" />
-          <span>
-            <b>Feature Usage</b>
-            <input name="attr_feature_usage" type="number" value="0" />
-            <button name="act_incrementfeatureusage" type="action">+</button>
-            <button name="act_resetfeatureusage" type="action">Reset</button>
-          </span>
+        <div class="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="&{template:feature-output} {{type-color=@{type1}}} {{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>
+              </span>
+              <span>
+                <b>Feature Usage</b>
+                <input name="attr_feature_usage" type="number" value="0" />
+                <button name="act_incrementfeatureusage" type="action">+</button>
+                <button name="act_resetfeatureusage" type="action">Reset</button>
+              </span>
+            </div>
+          </div>
+          <div class="sheet-options">
+            <div class="sheet-pokemon-move-info-header">
+              <input name="attr_classfeaturename" placeholder="Feature Name" spellcheck="false" type="text" />
+              <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." type="roll"
+                value="&{template:feature-output} {{type-color=@{type1}}} {{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>
+                </span>
+              <span>
+                <b>Feature Usage</b>
+                <input name="attr_feature_usage" type="number" value="0" />
+                <button name="act_incrementfeatureusage" type="action">+</button>
+                <button name="act_resetfeatureusage" type="action">Reset</button>
+              </span>
+            </div>
+            <textarea name="attr_classfeaturedesc" placeholder="Feature Description" spellcheck="false"></textarea>
+          </div>
         </div>
-
-        <textarea class="sheet-3row-textarea" name="attr_classfeaturedesc" placeholder="Feature Description" spellcheck="false"></textarea>
       </fieldset>
 
+      <br />
       <b>Honors</b>
       <textarea spellcheck="false" name="attr_honors" placeholder="Gym Badges, Contest Ribbons, Recognitions, etc."></textarea>
     </div>

PokemonTabletopAdventures_v3/README.md

@@ -25,8 +25,10 @@ Things we want to add to the character sheet, presented in no particular order o
 
 ### Feb 23rd, 2021
 
-- Added collapsing to the Origin Feature
-- Added a send to chat button for the Origin Feature to output the name and description in the chat log in a nice and easily readable format
+- Unifies background colours for text areas and number inputs
+- Added collapsing to the Origin Feature and all Class Features
+- Added a send to chat button for the Origin Feature and Class Features to output the name and description in the chat log in a nice and easily readable format
+  - Made the name of the features into the same button when collapsed to improve consistency of design vis-a-vis the moves section
 
 ### Feb 18th, 2021