web: Extension UI improvements (ruffle-rs#13473)

* web: Improve styling of extension pop-up menu * web: Improve styling of extension settings page * web: Improve styling of extension player * web: Make styling more consistent across browsers * web: Run eslint, fix some problems * web: Move version text near top of pop-up menu, add to settings menu * web: Improve logo hover bounds in pop-up and settings * web: Improve styling of extension status indicator * web: Update extension pop-up text strings * web: Misc. sizing/padding changes to extension UI * web: chore: Add a stylelint exception for #backgroundColor in player.css Because it's not kebab-case, to match the keys of the metadata object in JS. --------- Co-authored-by: TÖRÖK Attila <[email protected]>
Lord-McSweeney · Nov 3, 2023 · 4403848 · 4403848
1 parent 2059492
commit 4403848
Show file tree

Hide file tree

Showing 11 changed files with 297 additions and 337 deletions.
diff --git a/web/packages/extension/assets/_locales/en/messages.json b/web/packages/extension/assets/_locales/en/messages.json
@@ -9,7 +9,7 @@
         "message": "Show SWF download in context menu"
     },
     "settings_autostart": {
-        "message": "Play automatically without splash screen (then click to unmute)"
+        "message": "Autoplay Flash content (click to unmute)"
     },
     "settings_log_level": {
         "message": "Log level"
@@ -57,25 +57,25 @@
         "message": "Checking Ruffle status on current tab…"
     },
     "status_result_running": {
-        "message": "Ruffle is loaded and ready to run Flash content on the current tab."
+        "message": "Ruffle is ready to run Flash content in the current tab."
     },
     "status_result_running_protected": {
-        "message": "Ruffle is loaded and running the Flash content that you requested."
+        "message": "Ruffle is ready to run the Flash content that you request."
     },
     "status_result_optout": {
-        "message": "Ruffle is not loaded because the current page has marked itself as incompatible."
+        "message": "Ruffle cannot load because the current website marked itself as incompatible."
     },
     "status_result_disabled": {
-        "message": "Ruffle is not loaded because it is disabled."
+        "message": "Ruffle is disabled."
     },
     "status_result_error": {
-        "message": "An error occurred when querying the current tab's instance of Ruffle."
+        "message": "An error occurred while querying the current page's Ruffle instance."
     },
     "status_result_protected": {
-        "message": "Ruffle cannot load on protected browser pages."
+        "message": "Ruffle cannot load in protected browser pages."
     },
     "action_reload": {
-        "message": "Reload tab to apply changes"
+        "message": "Reload Tab to Apply Changes"
     },
     "open_player_page": {
         "message": "Open SWF Player"

diff --git a/web/packages/extension/assets/css/common.css b/web/packages/extension/assets/css/common.css
@@ -1,4 +1,5 @@
 :root {
+    --ruffle-light-blue: #546da3;
     --ruffle-blue: #37528c;
     --ruffle-dark-blue: #184778;
     --ruffle-orange: #ffad33;
@@ -25,8 +26,19 @@ body {
     position: relative;
     background: var(--ruffle-dark-blue);
     text-align: center;
-    padding: 16px;
-    box-shadow: 0 0 15px #0008;
+    padding: 16px 16px 6px;
+    box-shadow: 0 0 12px #0008;
+}
+
+.header a {
+    display: inline-block;
+    line-height: 0;
+}
+
+#version-text {
+    text-align: center;
+    font-size: smaller;
+    opacity: 0.6;
 }
 
 .logo {
@@ -40,10 +52,37 @@ body {
 
 /* Controls */
 
+input,
+select {
+    background: var(--ruffle-dark-blue);
+    color: white;
+    padding: 6px;
+    border: none;
+    border-radius: 4px;
+}
+
+input::placeholder {
+    opacity: 0.5;
+    color: white;
+}
+
+button {
+    padding: 6px 8px;
+    border: 2px solid var(--ruffle-blue);
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: center;
+    background: var(--ruffle-light-blue);
+    color: white;
+
+    /* This gives the text a little more weight without outright bolding it */
+    text-shadow: 0 0 0.1px white;
+}
+
 .options {
     display: flex;
     flex-flow: column;
-    gap: 24px;
+    gap: 20px;
 }
 
 .option {
@@ -54,13 +93,14 @@ body {
 
 .option input,
 .option select {
+    padding: 4px;
     position: absolute;
     right: 0;
 }
 
 .option label {
     display: inline-block;
-    padding-right: 80px;
+    padding-right: 60px;
 }
 
 /* Checkbox (Based on "Pure CSS Slider Checkboxes": https://codepen.io/Qvcool/pen/bdzVYW) */

diff --git a/web/packages/extension/assets/css/options.css b/web/packages/extension/assets/css/options.css
@@ -3,19 +3,17 @@
 }
 
 .container {
-    max-width: 400px;
+    max-width: 600px;
     margin: auto;
     padding: 24px 32px;
 }
 
-details > .options {
-    padding-top: 10px;
+#advanced-options {
+    color: var(--ruffle-orange);
+    font-size: 28px;
+    margin: 8px auto 0;
 }
 
-details > .options.special {
-    padding-top: 30px;
-}
-
-details > summary {
-    cursor: pointer;
+#reset-settings {
+    margin: 0 auto;
 }