From 81ae6f456cf7b447e3697ff705fac0ef824efa0d Mon Sep 17 00:00:00 2001
From: LeeRhodes <leerhodes@protonmail.com>
Date: Fri, 11 Mar 2022 19:12:19 +0000
Subject: [PATCH] fixed hover bugs

---
 Ironsworn-Starforged/Ironsworn-starforged.css | 34 +++++++++++--------
 .../Ironsworn-starforged.html                 | 18 ++++------
 .../src/app/common/stylus/dark-mode.styl      |  7 ++++
 .../src/app/common/stylus/light-mode.styl     |  7 ++++
 .../components/connections/connections.pug    | 12 ++++---
 .../components/connections/connections.styl   |  6 ++--
 .../src/app/components/momentum/momentum.styl |  8 -----
 .../src/app/components/progress/progress.styl |  4 +++
 .../app/components/resources/resources.styl   |  3 --
 9 files changed, 53 insertions(+), 46 deletions(-)

diff --git a/Ironsworn-Starforged/Ironsworn-starforged.css b/Ironsworn-Starforged/Ironsworn-starforged.css
index 09542c7c5e..f5ae8c9130 100644
--- a/Ironsworn-Starforged/Ironsworn-starforged.css
+++ b/Ironsworn-Starforged/Ironsworn-starforged.css
@@ -83,6 +83,12 @@
 .charsheet .list-group-container label.toggle-btn:hover {
   background-color: #ccc;
 }
+.charsheet .roll-resource-label:hover,
+.charsheet input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back:hover,
+.charsheet .momentum-box-input:hover ~ .momentum-box-back:hover {
+  background: #ccc;
+  transition: 0.5s ease;
+}
 .charsheet .progress-input-holder input[min],
 .charsheet .large-progress-input-holder input[min],
 .charsheet input[min] + span,
@@ -887,10 +893,6 @@
   text-align: center;
   border-left: 1px solid #4c4d4f;
 }
-.charsheet .roll-resource-label:hover {
-  background: #ccc;
-  transition: 0.5s ease;
-}
 .charsheet .impact-list {
   display: flex;
   flex-flow: row wrap;
@@ -1022,12 +1024,13 @@
 .charsheet .details-btn {
   text-transform: uppercase;
   display: inline-flex;
-  width: auto;
-  height: auto;
-  padding: 0em 1em;
   margin: 0.3em 0.5em;
   border-radius: 2em;
 }
+.charsheet .details-btn .btn-content {
+  border-radius: 0.5em;
+  padding: 0em 1em;
+}
 .charsheet .connection-name::placeholder,
 .charsheet .connection-location::placeholder,
 .charsheet .connection-descriptors::placeholder {
@@ -1158,6 +1161,9 @@
   justify-content: center;
   align-items: center;
 }
+.charsheet .progress-row .btn {
+  border-radius: 0.3em;
+}
 .charsheet .progress-name {
   width: 100%;
   font-weight: bold;
@@ -1371,14 +1377,6 @@
 .charsheet .momentum {
   display: flex;
 }
-.charsheet input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back {
-  background-color: #ccc;
-  transition: 0.5s ease;
-}
-.charsheet .momentum-box-input:hover ~ .momentum-box-back {
-  background: #ccc;
-  transition: 0.5s ease;
-}
 .charsheet .momentum-box-input:checked ~ .momentum-box-back {
   background: #4c4d4f;
   color: #fff;
@@ -3056,6 +3054,12 @@
 .sheet-darkmode .list-group-container label.toggle-btn:hover {
   background-color: #3d3d3d !important;
 }
+.sheet-darkmode .roll-resource-label:hover,
+.sheet-darkmode input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back:hover,
+.sheet-darkmode .momentum-box-input:hover ~ .momentum-box-back:hover {
+  background: #3d3d3d;
+  transition: 0.5s ease;
+}
 .sheet-darkmode .progress-input-holder input[min],
 .sheet-darkmode .large-progress-input-holder input[min],
 .sheet-darkmode input[min] + span,
diff --git a/Ironsworn-Starforged/Ironsworn-starforged.html b/Ironsworn-Starforged/Ironsworn-starforged.html
index 6140cb7c9c..0e03993ec9 100644
--- a/Ironsworn-Starforged/Ironsworn-starforged.html
+++ b/Ironsworn-Starforged/Ironsworn-starforged.html
@@ -408,13 +408,10 @@
             <fieldset class="repeating_connection">
               <div class="connection-container surface">
                 <p class="connection-title i18n-text" data-i18n="character-name"></p>
-                <!-- i18n = 'character-name'-->
                 <input class="border-bottom connection-name" type="text" name="attr_connection-name" placeholder="Name"/>
-                <label class="btn details-btn surface-2">
-                  <input class="hide-element btn-input" type="checkbox" name="attr_details_button"/>
-                  <div class="btn-content i18n-text" data-i18n="details"></div>
-                </label>
-                <!-- i18n = 'details'-->
+                  <label class="toggle-btn details-btn surface-2">
+                    <input class="btn-input hide-element" type="checkbox" name="attr_details"/><span class="i18n-text btn-content" data-i18n="details"></span>
+                  </label>
                 <input class="hide-element show-connection-info" type="checkbox" name="attr_details"/>
                 <div class="show-connection-info showhide">
                   <div class="full-width">
@@ -26885,13 +26882,10 @@
             <fieldset class="repeating_connection">
               <div class="connection-container surface">
                 <p class="connection-title i18n-text" data-i18n="character-name"></p>
-                <!-- i18n = 'character-name'-->
                 <input class="border-bottom connection-name" type="text" name="attr_connection-name" placeholder="Name"/>
-                <label class="btn details-btn surface-2">
-                  <input class="hide-element btn-input" type="checkbox" name="attr_details_button"/>
-                  <div class="btn-content i18n-text" data-i18n="details"></div>
-                </label>
-                <!-- i18n = 'details'-->
+                  <label class="toggle-btn details-btn surface-2">
+                    <input class="btn-input hide-element" type="checkbox" name="attr_details"/><span class="i18n-text btn-content" data-i18n="details"></span>
+                  </label>
                 <input class="hide-element show-connection-info" type="checkbox" name="attr_details"/>
                 <div class="show-connection-info showhide">
                   <div class="full-width">
diff --git a/Ironsworn-Starforged/src/app/common/stylus/dark-mode.styl b/Ironsworn-Starforged/src/app/common/stylus/dark-mode.styl
index d2d7239dae..92cb403b0c 100644
--- a/Ironsworn-Starforged/src/app/common/stylus/dark-mode.styl
+++ b/Ironsworn-Starforged/src/app/common/stylus/dark-mode.styl
@@ -128,5 +128,12 @@ textColor = #c0c0c0
     label.toggle-btn
       &:hover
         background-color #3d3d3d !important
+  
+  .roll-resource-label,
+  input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back,
+  .momentum-box-input:hover ~ .momentum-box-back
+    &:hover
+      background #3d3d3d
+      transition 0.5s ease
 
   progress(textColor, backgroundColor)
\ No newline at end of file
diff --git a/Ironsworn-Starforged/src/app/common/stylus/light-mode.styl b/Ironsworn-Starforged/src/app/common/stylus/light-mode.styl
index 23a457011e..2875ba0d8b 100644
--- a/Ironsworn-Starforged/src/app/common/stylus/light-mode.styl
+++ b/Ironsworn-Starforged/src/app/common/stylus/light-mode.styl
@@ -70,5 +70,12 @@ light-styles()
     label.toggle-btn
       &:hover
         background-color #cccccc
+  
+  .roll-resource-label,
+  input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back,
+  .momentum-box-input:hover ~ .momentum-box-back
+    &:hover
+      background #ccc
+      transition 0.5s ease
 
   progress(textColor, backgroundColor)
\ No newline at end of file
diff --git a/Ironsworn-Starforged/src/app/components/connections/connections.pug b/Ironsworn-Starforged/src/app/components/connections/connections.pug
index 4ed5a6f24f..cab764dd0b 100644
--- a/Ironsworn-Starforged/src/app/components/connections/connections.pug
+++ b/Ironsworn-Starforged/src/app/components/connections/connections.pug
@@ -5,12 +5,14 @@ mixin connections()
     fieldset.repeating_connection
       .connection-container.surface
         p.connection-title.i18n-text(data-i18n='character-name')
-        // i18n = 'character-name'
         input.border-bottom.connection-name(type='text' name='attr_connection-name' placeholder='Name')
-        label.btn.details-btn.surface-2
-          input.hide-element.btn-input(type='checkbox' name='attr_details_button')
-          .btn-content.i18n-text(data-i18n='details')
-        // i18n = 'details'
+        +btn({
+          type: 'checkbox',
+          translationId: 'details',
+          attribute: `details`,
+          classes: 'details-btn surface-2',
+          pure_attr: true
+        })
         input.hide-element.show-connection-info(type='checkbox' name='attr_details')
         .show-connection-info.showhide
           .full-width
diff --git a/Ironsworn-Starforged/src/app/components/connections/connections.styl b/Ironsworn-Starforged/src/app/components/connections/connections.styl
index f4955d85ef..7f382d7b66 100644
--- a/Ironsworn-Starforged/src/app/components/connections/connections.styl
+++ b/Ironsworn-Starforged/src/app/components/connections/connections.styl
@@ -56,11 +56,11 @@ p
 .details-btn
   text-transform uppercase
   display inline-flex
-  width auto
-  height auto
-  padding 0em 1em
   margin 0.3em 0.5em
   border-radius 2em
+  .btn-content
+    border-radius 0.5em
+    padding 0em 1em
 
 .connection-name::placeholder,
 .connection-location::placeholder,
diff --git a/Ironsworn-Starforged/src/app/components/momentum/momentum.styl b/Ironsworn-Starforged/src/app/components/momentum/momentum.styl
index 4d46edf9c2..7a0039c96f 100644
--- a/Ironsworn-Starforged/src/app/components/momentum/momentum.styl
+++ b/Ironsworn-Starforged/src/app/components/momentum/momentum.styl
@@ -4,14 +4,6 @@
 .momentum
   display flex
 
-input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back
-  background-color #ccc
-  transition: .5s ease;
-
-.momentum-box-input:hover ~ .momentum-box-back
-  background: #ccc
-  transition: .5s ease;
-
 .momentum-box-input:checked ~ .momentum-box-back
   background: #4C4D4F
   color: white
diff --git a/Ironsworn-Starforged/src/app/components/progress/progress.styl b/Ironsworn-Starforged/src/app/components/progress/progress.styl
index 4277854d7d..76e3d29299 100644
--- a/Ironsworn-Starforged/src/app/components/progress/progress.styl
+++ b/Ironsworn-Starforged/src/app/components/progress/progress.styl
@@ -18,6 +18,10 @@
   justify-content center
   align-items center
 
+.progress-row
+  .btn
+    border-radius 0.3em
+
 .progress-name
   width 100%
   font-weight bold
diff --git a/Ironsworn-Starforged/src/app/components/resources/resources.styl b/Ironsworn-Starforged/src/app/components/resources/resources.styl
index 63f01a34f4..df7ee6a299 100644
--- a/Ironsworn-Starforged/src/app/components/resources/resources.styl
+++ b/Ironsworn-Starforged/src/app/components/resources/resources.styl
@@ -109,6 +109,3 @@ input[type=text].resource-value
   cursor pointer
   text-align center
   border-left 1px solid #4C4D4F
-  &:hover
-    background #ccc
-    transition 0.5s ease