Update hotkey settings design (#1564)

* Update PopupMenu event prevention

* Use vars for button padding

* Add button-inner-label style

* Add input-button button

* Update display of scope selection

* Add hidden argument text input field

* Remove unnecessary calls

* Display a strike through the enabled button when no scopes are selected

2 files changed, 83 insertions, 16 deletions

diff --git a/ext/css/material.css b/ext/css/material.css
index a5fcee29..efa5a730 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -798,10 +798,13 @@ button,
     --button-current-background-color: var(--button-background-color);
     --button-current-shadow: var(--button-shadow);
 
+    --button-padding-vertical: 0.5em;
+    --button-padding-horizontal: 1em;
+
     border-width: var(--thin-border-size);
     border-style: solid;
     border-radius: 0.3em;
-    padding: 0.5em 1em;
+    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
     font-weight: bold;
     font-size: inherit;
     font-family: inherit;
@@ -940,6 +943,35 @@ button.low-emphasis.danger {
     --button-disabled-background-color: var(--danger-color-transparent0);
 }
 
+/* Input button */
+button.input-button {
+    --button-content-color: var(--button-default-icon-color);
+    --button-border-color: var(--input-background-color);
+    --button-background-color: var(--input-background-color);
+    --button-hover-background-color: var(--input-background-color-dark);
+    --button-active-background-color: var(--input-background-color-darker);
+
+    --button-padding-vertical: 0;
+    --button-padding-horizontal: 0.5em;
+
+    text-align: left;
+    font-weight: normal;
+    border-style: none;
+    border-width: 0;
+    width: var(--input-width-large);
+    height: var(--input-height);
+    line-height: var(--input-height);
+    box-sizing: border-box;
+    position: relative;
+}
+button.input-button.input-with-suffix-button {
+    flex: 1 1 auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right-style: none;
+    z-index: 1;
+}
+
 /* Input suffix button */
 button.input-suffix-button {
     --button-content-color: var(--button-default-icon-color);
@@ -985,6 +1017,16 @@ input[type=number][data-invalid=true]+button.input-suffix-button {
 }
 
 
+/* Button inner label */
+.button-inner-label {
+    margin-top: calc(-1 * var(--button-padding-vertical));
+    margin-bottom: calc(-1 * var(--button-padding-vertical));
+    margin-left: calc(-1 * var(--button-padding-horizontal));
+    margin-right: calc(-1 * var(--button-padding-horizontal));
+    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
+}
+
+
 /* Material design icon button */
 button.icon-button {
     --button-content-color: var(--button-default-icon-color);
@@ -1140,7 +1182,9 @@ button.popup-menu-item {
     --button-disabled-background-color: transparent;
     --button-disabled-shadow: none;
 
-    padding: 0.625em 1.5em;
+    --button-padding-vertical: 0.625em;
+    --button-padding-horizontal: 1.5em;
+
     flex: 1 1 auto;
     border-radius: 0;
     border-style: none;
@@ -1174,7 +1218,9 @@ button.popup-menu-item:not([hidden]) {
 }
 :root[data-page-type=popup] .popup-menu.popup-menu-auto-size button.popup-menu-item,
 .popup-menu.popup-menu-small button.popup-menu-item {
-    padding: 0.5em 0.75em;
+    --button-padding-vertical: 0.5em;
+    --button-padding-horizontal: 0.75em;
+
     font-size: var(--font-size-small);
 }
 .popup-menu-item-group {
diff --git a/ext/css/settings.css b/ext/css/settings.css
index cd90b7d3..6bc06bf7 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -2047,9 +2047,34 @@ input.sentence-termination-character-input2 {
 .hotkey-list-item-action {
     flex: 1 1 auto;
 }
-.hotkey-list-item-enabled-label {
-    align-self: center;
-    margin-left: 1em;
+.hotkey-list-item-enabled-button-container {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+    margin-left: 0.375em;
+}
+button.hotkey-list-item-enabled-button {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+    width: auto;
+}
+button.hotkey-list-item-enabled-button[data-scope-count='0'] {
+    text-decoration: line-through;
+}
+.hotkey-list-item-enabled-button-label {
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+.hotkey-list-item-enabled-button-label>.checkbox {
+    margin-right: 0.5em;
+}
+.hotkey-list-item-action-argument {
+    margin-left: 0.375em;
+    flex: 1 1 auto;
+    visibility: hidden;
 }
 .hotkey-list-item-flex-row {
     display: flex;
@@ -2059,19 +2084,15 @@ input.sentence-termination-character-input2 {
 .hotkey-list-item-flex-row-label {
     margin: 0 0.5em 0 1em;
 }
-.hotkey-scope-checkbox-container {
+
+.hotkey-scope-popup-menu-item-label {
+    flex: 1 1 auto;
+    display: flex;
     flex-flow: row nowrap;
     align-items: center;
-    cursor: pointer;
-}
-.hotkey-scope-checkbox-container:not([hidden]) {
-    display: flex;
 }
-.hotkey-scope-checkbox-container:not(:last-child) {
-    margin-right: 0.75em;
-}
-.hotkey-scope-checkbox-container>span {
-    padding-left: 0.375em;
+.hotkey-scope-popup-menu-item-label>.checkbox {
+    margin-right: 0.5em;
 }
 
 .inline-icon {