Input styles updates (#1900)

* Rename class

* Update styles

* Use input-group class

* Update styles

* Update input line height

* Update border styles

* Update styles

* Update line height

* Update styles

* Update line height

* Update line height

* Update outline item style

3 files changed, 88 insertions, 74 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index 70a61b00..76e8d6a4 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -258,21 +258,8 @@
 :root[data-page-type=popup]:not([data-theme]) body {
     background-color: transparent;
 }
-:root {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: var(--font-size);
-    line-height: var(--line-height);
-    height: 100%;
-}
 body {
-    margin: 0;
-    border: 0;
-    padding: 0;
-    height: 100%;
     overflow: hidden;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    font-size: inherit;
 }
 ol, ul {
     margin-top: 0;
diff --git a/ext/css/material.css b/ext/css/material.css
index 3aef69d6..702215bd 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -23,6 +23,9 @@
     --font-size-small-no-units: 12;
     --font-size-small: calc(1em * var(--font-size-small-no-units) / var(--font-size-no-units));
 
+    --line-height-no-units: 20;
+    --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units));
+
     --animation-duration: 0.125s;
     --animation-duration2: calc(var(--animation-duration) * 2);
 
@@ -44,6 +47,7 @@
     --material-arrow-dimension1: calc(5em / var(--font-size-no-units));
     --material-arrow-dimension2: calc(10em / var(--font-size-no-units));
 
+    --button-border-radius: 0.3em;
     --button-default-shadow-params: 0 0.0625em 0.125em 0;
 
     --thin-border-size: calc(1em / var(--font-size-no-units));
@@ -179,6 +183,26 @@
 }
 
 
+/* Root styles */
+:root {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+    height: 100%;
+}
+body {
+    margin: 0;
+    border: 0;
+    padding: 0;
+    height: 100%;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+
 /* Text styles */
 .light {
     color: var(--text-color-light2);
@@ -666,7 +690,7 @@ label.radio {
 select {
     width: var(--input-width-large);
     height: var(--input-height);
-    line-height: var(--input-height);
+    line-height: var(--line-height);
     border: 0;
     border-radius: var(--input-border-radius);
     box-sizing: border-box;
@@ -693,7 +717,7 @@ input[type=text],
 input[type=number] {
     width: var(--input-width);
     height: var(--input-height);
-    line-height: var(--input-height);
+    line-height: var(--line-height);
     color: var(--text-color);
     font-size: var(--input-font-size);
     background-color: var(--input-background-color);
@@ -761,17 +785,61 @@ input[type=number][data-invalid=true]:focus {
     box-shadow: 0 0 0 calc(2em / var(--font-size-no-units)) var(--danger-color);
     outline: none;
 }
-input[type=text].input-with-suffix-button,
-input[type=number].input-with-suffix-button {
+input[type=text].code,
+input[type=number].code {
+    font-family: 'Courier New', Courier, monospace;
+}
+
+/* Input groups */
+.input-group {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+}
+.input-group>input[type=text],
+.input-group>input[type=number],
+.input-group>button.input-button {
     flex: 1 1 auto;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right-style: none;
     z-index: 1;
 }
-input[type=text].code,
-input[type=number].code {
-    font-family: 'Courier New', Courier, monospace;
+.input-suffix,
+button.input-suffix {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-radius: var(--input-border-radius);
+    border-style: none;
+    border-width: 0;
+    height: var(--input-height);
+    box-sizing: border-box;
+    padding: 0 0.5em;
+    position: relative;
+}
+.input-suffix:not(:first-child),
+button.input-suffix:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+.input-suffix:not(:last-child),
+button.input-suffix:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.input-suffix:not(button) {
+    background-color: var(--input-background-color);
+}
+input[type=text]:invalid~.input-suffix:not(button),
+input[type=number]:invalid~.input-suffix:not(button),
+input[type=text][data-invalid=true]~.input-suffix:not(button),
+input[type=number][data-invalid=true]~.input-suffix:not(button) {
+    border-color: var(--danger-color);
+    border-width: var(--thin-border-size);
+    border-style: solid;
+    border-left-style: none;
+    border-right-style: none;
 }
 
 
@@ -818,7 +886,7 @@ button,
 
     border-width: var(--thin-border-size);
     border-style: solid;
-    border-radius: 0.3em;
+    border-radius: var(--button-border-radius);
     padding: var(--button-padding-vertical) var(--button-padding-horizontal);
     font-weight: bold;
     font-size: inherit;
@@ -979,48 +1047,31 @@ button.input-button {
     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.input-suffix {
     --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);
-
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-style: none;
-    border-width: 0;
-    height: var(--input-height);
-    line-height: var(--input-height);
-    box-sizing: border-box;
-    padding: 0 0.5em;
-    position: relative;
 }
-button.input-suffix-button.light-icon {
+button.input-suffix.light-icon {
     --button-content-color: var(--button-default-icon-color-light);
 }
-button.input-suffix-button.input-suffix-icon-button {
+button.input-suffix.input-suffix-icon-button {
     width: 2.125em;
 }
-button.input-suffix-button.input-suffix-icon-button>.icon {
+button.input-suffix.input-suffix-icon-button>.icon {
     display: block;
     width: 100%;
     height: 100%;
     background-color: var(--button-current-content-color);
 }
-input[type=text]:invalid+button.input-suffix-button,
-input[type=number]:invalid+button.input-suffix-button,
-input[type=text][data-invalid=true]+button.input-suffix-button,
-input[type=number][data-invalid=true]+button.input-suffix-button {
+input[type=text]:invalid~button.input-suffix,
+input[type=number]:invalid~button.input-suffix,
+input[type=text][data-invalid=true]~button.input-suffix,
+input[type=number][data-invalid=true]~button.input-suffix {
     --button-border-color: var(--danger-color);
     --button-hover-border-color: var(--danger-color);
     --button-active-border-color: var(--danger-color);
diff --git a/ext/css/settings.css b/ext/css/settings.css
index 869f52d4..728e93ee 100644
--- a/ext/css/settings.css
+++ b/ext/css/settings.css
@@ -42,7 +42,6 @@
     --font-size-no-units: 14;
     --font-size: calc(1px * var(--font-size-no-units));
     --font-size-small: 12px;
-    --line-height-default: calc(20 / var(--font-size-no-units));
     --outline-item-height: 40px;
     --outline-item-icon-size: 32px;
     --input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
@@ -101,19 +100,7 @@
 
 
 /* Common styles */
-:root {
-    height: 100%;
-}
 body {
-    background-color: var(--background-color);
-    margin: 0;
-    padding: 0;
-    border: none;
-    font-size: var(--font-size);
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    color: var(--text-color);
-    line-height: var(--line-height-default);
-    height: 100%;
     overflow: hidden;
 }
 p {
@@ -407,10 +394,10 @@ a.heading-link-light {
     align-items: center;
     width: 100%;
     height: var(--outline-item-height);
-    line-height: var(--outline-item-height);
     padding: 0 1.5em;
     cursor: pointer;
     transition: background-color var(--animation-duration) ease-in-out;
+    box-sizing: border-box;
 }
 .outline-item,
 .outline-item:hover {
@@ -423,6 +410,7 @@ a.heading-link-light {
     min-width: var(--outline-item-icon-size);
     min-height: var(--outline-item-icon-size);
     position: relative;
+    line-height: var(--outline-item-height);
 }
 .outline-item-left-warning-badge {
     position: absolute;
@@ -668,7 +656,7 @@ input[type=number].short-height,
 select.short-height {
     height: var(--input-short-height);
     margin-top: calc(var(--settings-group-right-max-height) - var(--input-short-height) - var(--font-size-small));
-    line-height: var(--input-short-height);
+    line-height: var(--line-height);
 }
 .settings-item-button-group-container {
     max-height: none;
@@ -1544,10 +1532,7 @@ select.profile-condition-operator {
     flex: 1 1 auto;
 }
 .anki-card-field-value-container {
-    display: flex;
-    flex-flow: row nowrap;
     width: 100%;
-    align-items: stretch;
     margin-top: 0.25em;
 }
 input.anki-card-field-value {
@@ -1597,10 +1582,7 @@ code.anki-field-marker {
     flex: 0 1 auto;
 }
 .anki-card-templates-test-input-container {
-    display: flex;
-    flex-flow: row nowrap;
     width: 100%;
-    align-items: stretch;
 }
 .anki-card-templates-test-container {
     flex: 0 1 auto;
@@ -1679,7 +1661,7 @@ code.anki-field-marker {
     padding: 0 var(--modal-padding-horizontal);
     box-sizing: border-box;
 }
-.scan-input-suffix-cell {
+.scan-input-menu-button-cell {
     grid-area: 1/4/2/5;
 }
 .scan-input-index-cell {
@@ -1697,10 +1679,7 @@ code.anki-field-marker {
     white-space: nowrap;
 }
 .scan-input-content-cell {
-    display: flex;
-    flex-flow: row nowrap;
     width: 100%;
-    align-items: stretch;
 }
 .scan-input-prefix-cell[data-property=include] {
     grid-area: 1/2/2/3;
@@ -2008,9 +1987,6 @@ input.sentence-termination-character-input2 {
     flex: 1 1 auto;
 }
 .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 {