web: Improvements

web/packages/core/src/shadow-template.ts

@@ -78,7 +78,7 @@ ruffleShadowTemplate.innerHTML = `
             font-size: 20px;
             text-align: center;
             /* Inverted colors from play button! */
-            background: linear-gradient(180deg, rgba(253,58,64,1) 0%, rgba(253,161,56,1) 100%);
+            background: linear-gradient(180deg, #fd3a40 0%, #fda138 100%);
             color: white;
             display: flex;
             flex-flow: column;
@@ -157,7 +157,7 @@ ruffleShadowTemplate.innerHTML = `
         }
 
         #message_overlay a:hover, #message_overlay button:hover {
-            background: rgba(255, 255, 255, 0.3);
+            background: #ffffff4c;
         }
 
         #continue-btn {
@@ -172,7 +172,7 @@ ruffleShadowTemplate.innerHTML = `
         }
 
         #continue-btn:hover {
-            background: rgba(255, 255, 255, 0.3);
+            background: #ffffff4c;
         }
 
         #context-menu {

web/packages/demo/.gitignore

@@ -0,0 +1 @@
+/swfs.json

web/packages/demo/webpack.config.js

@@ -36,10 +36,7 @@ module.exports = (env, argv) => {
         plugins: [
             new CopyWebpackPlugin({
                 patterns: [
-                    {
-                        from: path.resolve(__dirname, "www/index.html"),
-                        to: "index.html",
-                    },
+                    { from: path.resolve(__dirname, "www/index.html") },
                     { from: "LICENSE*" },
                     { from: "README.md" },
                 ],

web/packages/demo/www/index.css

@@ -64,7 +64,7 @@ body {
     right: 0;
     width: auto;
     height: auto;
-    margin: 10px;
+    margin: 10px 0;
 }
 
 #nav {
@@ -72,27 +72,23 @@ body {
     background: var(--ruffle-blue);
     box-shadow: 0 3px 6px 5px var(--ruffle-blue);
     display: flex;
-    justify-content: space-around;
     align-items: center;
-    align-self: flex-start;
+    justify-content: space-around;
     color: white;
-    min-height: 45px;
-    padding-top: 5px;
+    padding: 10px 0 5px 0;
     margin-bottom: 5px;
 }
 
 #title {
-    transition-duration: 0.5s;
+    transition: opacity 0.5s;
 }
 
 #title:hover {
     opacity: 0.5;
-    cursor: pointer;
 }
 
 #title img {
     height: 32px;
-    margin-top: 5px;
 }
 
 #file-picker select,
@@ -125,10 +121,6 @@ body {
     #sample-swfs-container {
         display: block;
     }
-
-    #nav {
-        min-height: 65px;
-    }
 }
 
 @media only screen and (max-width: 600px) {
@@ -146,7 +138,6 @@ body {
     }
 
     #nav {
-        min-height: 85px;
         flex-flow: column;
     }
 }

web/packages/demo/www/index.html

@@ -14,8 +14,7 @@
                     <img
                         src="https://ruffle.rs/assets/logo.png"
                         alt="Ruffle"
-                        data-canonical-src="https://ruffle.rs/assets/logo.png"
-                    />
+                        data-canonical-src="https://ruffle.rs/assets/logo.png" />
                 </a>
             </div>
             <div id="file-picker">

web/packages/demo/www/index.js

@@ -52,7 +52,7 @@ async function loadFile(file) {
     player.load({ data, ...config });
 }
 
-function sampleFileSelected() {
+function loadSample() {
     const swfData = sampleFileInput[sampleFileInput.selectedIndex].swfData;
     if (swfData) {
         authorContainer.style.display = "block";
@@ -69,7 +69,7 @@ localFileInput.addEventListener("change", (event) => {
     loadFile(event.target.files[0]);
 });
 
-sampleFileInput.addEventListener("change", sampleFileSelected);
+sampleFileInput.addEventListener("change", () => loadSample());
 
 main.addEventListener("dragenter", () => {
     overlay.classList.add("drag");
@@ -119,13 +119,13 @@ window.addEventListener("DOMContentLoaded", async () => {
     }
     sampleFileInputContainer.style.display = "inline-block";
 
-    const initialFile = new URLSearchParams(window.location.search).get("file");
+    const initialFile = new URL(window.location).searchParams.get("file");
     if (initialFile) {
         const options = Array.from(sampleFileInput.options);
         sampleFileInput.selectedIndex = Math.max(
             options.findIndex((swfData) => swfData.value.endsWith(initialFile)),
             0
         );
-        sampleFileSelected();
+        loadSample();
     }
 });