Settings and welcome page improvements (#1326)

* Update wording to be less repetitive

* Remove the shadow theme option from the welcome page, to avoid confusion

* Update input sizes

* Update select text to not clip the triangle icon

* Update wording

* Update descriptions

* Remove "popup" to not exclude the search page

4 files changed, 24 insertions, 42 deletions

diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 4a465a2c..46e859c1 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -45,9 +45,8 @@
     --line-height-default: calc(20 / var(--font-size-no-units));
     --outline-item-height: 40px;
     --outline-item-icon-size: 32px;
-    --input-short: 80px;
-    --input-height-short: 24px;
-    --input-half-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
+    --input-short-width: calc(var(--input-width-large) / 2 - var(--padding) / 2);
+    --input-short-height: 24px;
     --fab-button-size: 56px;
     --fab-button-padding: 16px;
     --modal-width: 600px;
@@ -648,19 +647,14 @@ a.settings-item.settings-item-button {
 input[type=text].short-width,
 input[type=number].short-width,
 select.short-width {
-    width: var(--input-short);
-}
-input[type=text].half-width,
-input[type=number].half-width,
-select.short-width {
-    width: var(--input-half-width);
+    width: var(--input-short-width);
 }
 input[type=text].short-height,
 input[type=number].short-height,
 select.short-height {
-    height: var(--input-height-short);
-    margin-top: calc(var(--settings-group-right-max-height) - var(--input-height-short) - var(--font-size-small));
-    line-height: var(--input-height-short);
+    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);
 }
 .settings-item-button-group-container {
     max-height: none;
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index d29bd4a1..2f1e2f73 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -579,7 +579,7 @@
                     <div class="settings-item-group-item">
                         <div class="settings-item-group-item-label">Shadow</div>
                         <select data-setting="general.popupOuterTheme" class="short-width short-height">
-                            <option value="auto">Auto-detect</option>
+                            <option value="auto">Auto</option>
                             <option value="default">Light</option>
                             <option value="dark">Dark</option>
                         </select>
@@ -876,9 +876,9 @@
             </div>
             <div class="settings-item-right">
                 <select data-setting="general.popupVerticalTextPosition">
-                    <option value="default">Same as for horizontal text</option>
-                    <option value="before">Before text reading direction</option>
-                    <option value="after">After text reading direction</option>
+                    <option value="default">Same as horizontal text</option>
+                    <option value="before">Before reading direction</option>
+                    <option value="after">After reading direction</option>
                     <option value="left">Left of text</option>
                     <option value="right">Right of text</option>
                 </select>
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html
index 5ff3c818..44db4a77 100644
--- a/ext/bg/welcome.html
+++ b/ext/bg/welcome.html
@@ -40,16 +40,16 @@
             </div></div></div>
             <div class="settings-item-children settings-item-children-group">
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    The <img src="/mixed/img/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the settings page.
+                    The <img src="/mixed/img/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="settings2.html" target="_blank" rel="noopener">Settings</a> page.
                 </div></div></div></div>
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    The <img src="/mixed/img/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open a search page,
+                    The <img src="/mixed/img/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/bg/search.html" target="_blank" rel="noopener">Search</a> page,
                     enabling text and terms to be looked up using the installed dictionaries.
                     This can even be used in offline mode!
                 </div></div></div></div>
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    The <img src="/mixed/img/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open a page
-                    with some general information about Yomichan.
+                    The <img src="/mixed/img/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/bg/info.html" target="_blank" rel="noopener">Information</a> page,
+                    which has some helpful information and links about Yomichan.
                 </div></div></div></div>
             </div>
         </div>
@@ -74,12 +74,12 @@
         </div>
         <div class="settings-item">
             <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding the scanning modifier key.
-                The default key is <kbd>Shift</kbd>, which can be configured below.
+                After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
+                The default key is <kbd>Shift</kbd>, which can be disabled or configured below.
             </div></div></div>
             <div class="settings-item-children settings-item-children-group">
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
-                    Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the popup search results
+                    Clicking the <img src="/mixed/img/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
                     will play an audio clip of a term's pronunciation using an online dictionary, if available.
                 </div></div></div></div>
                 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
@@ -167,28 +167,15 @@
                 <div class="settings-item-description">Adjust the style of the popup.</div>
             </div>
             <div class="settings-item-right">
-                <div class="settings-item-group">
-                    <div class="settings-item-group-item">
-                        <div class="settings-item-group-item-label">Body</div>
-                        <select data-setting="general.popupTheme" class="short-width short-height">
-                            <option value="default">Light</option>
-                            <option value="dark">Dark</option>
-                        </select>
-                    </div>
-                    <div class="settings-item-group-item">
-                        <div class="settings-item-group-item-label">Shadow</div>
-                        <select data-setting="general.popupOuterTheme" class="short-width short-height">
-                            <option value="auto">Auto-detect</option>
-                            <option value="default">Light</option>
-                            <option value="dark">Dark</option>
-                        </select>
-                    </div>
-                </div>
+                <select data-setting="general.popupTheme" class="short-width">
+                    <option value="default">Light</option>
+                    <option value="dark">Dark</option>
+                </select>
             </div>
         </div></div>
         <a href="settings2.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
             <div class="settings-item-left">
-                <div class="settings-item-label">View more settings on the Settings page</div>
+                <div class="settings-item-label">More customization options are available on the Settings page</div>
             </div>
             <div class="settings-item-right open-panel-button-container">
                 <button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css
index 1f1d45d7..bbc4fb83 100644
--- a/ext/mixed/css/material.css
+++ b/ext/mixed/css/material.css
@@ -33,7 +33,8 @@
 
     --input-font-size-no-units: 1;
     --input-font-size: calc(1em * var(--input-font-size-no-units));
-    --input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
+    --input-spacing: calc(10em / var(--font-size-no-units));
+    --input-width: calc(100em / (var(--font-size-no-units) * var(--input-font-size-no-units)) - var(--input-spacing) / 2);
     --input-width-large: calc(200em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
     --input-height: calc(32em / (var(--font-size-no-units) * var(--input-font-size-no-units)));
     --input-border-radius: 0.25em;