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

5 files changed, 28 insertions, 46 deletions

diff --git a/README.md b/README.md
index 5fceea43..1fcf5979 100644
--- a/README.md
+++ b/README.md
@@ -88,9 +88,9 @@ primary language is not English, you may consider also importing the English ver
 
     <a href="resources/images/browser-action-popup1.png"><img src="resources/images/browser-action-popup1.png" width="103" height="100"></a>
 
-    *   The <img src="ext/mixed/img/cog.svg" alt="" width="16" height="16"> _cog_ button will open the settings page.
-    *   The <img src="ext/mixed/img/magnifying-glass.svg" alt="" width="16" height="16"> _magnifying glass_ button will open the search page.
-    *   The <img src="ext/mixed/img/question-mark-circle.svg" alt="" width="16" height="16"> _question mark_ button will open a page with some general information about Yomichan.
+    *   The <img src="ext/mixed/img/cog.svg" alt="" width="16" height="16"> _cog_ button will open the Settings page.
+    *   The <img src="ext/mixed/img/magnifying-glass.svg" alt="" width="16" height="16"> _magnifying glass_ button will open the Search page.
+    *   The <img src="ext/mixed/img/question-mark-circle.svg" alt="" width="16" height="16"> _question mark_ button will open the Information page.
     *   The <img src="ext/mixed/img/profile.svg" alt="" width="16" height="16"> _profile_ button will appear when multiple profiles exist, allowing the current profile to be quickly changed.
 
 2.  Import the dictionaries you wish to use for term and kanji searches. If you do not have any dictionaries installed
@@ -99,7 +99,7 @@ primary language is not English, you may consider also importing the English ver
 
     <a href="resources/images/settings-dictionaries-popup.png"><img src="resources/images/settings-dictionaries-popup-thumb.png" width="128" height="86"></a>
 
-3.  Webpage text can be scanned by moving the cursor while holding the scanning modifier key, which is <kbd>Shift</kbd>
+3.  Webpage text can be scanned by moving the cursor while holding a modifier key, which is <kbd>Shift</kbd>
     by default. If definitions are found for the text at the cursor position, a popup window containing term definitions
     will open. This window can be dismissed by clicking anywhere outside of it.
 
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;