web: Improvements
This commit is contained in:
parent
c4af8114d0
commit
1ed8dea599
|
@ -78,7 +78,7 @@ ruffleShadowTemplate.innerHTML = `
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/* Inverted colors from play button! */
|
/* 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;
|
color: white;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
|
@ -157,7 +157,7 @@ ruffleShadowTemplate.innerHTML = `
|
||||||
}
|
}
|
||||||
|
|
||||||
#message_overlay a:hover, #message_overlay button:hover {
|
#message_overlay a:hover, #message_overlay button:hover {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: #ffffff4c;
|
||||||
}
|
}
|
||||||
|
|
||||||
#continue-btn {
|
#continue-btn {
|
||||||
|
@ -172,7 +172,7 @@ ruffleShadowTemplate.innerHTML = `
|
||||||
}
|
}
|
||||||
|
|
||||||
#continue-btn:hover {
|
#continue-btn:hover {
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: #ffffff4c;
|
||||||
}
|
}
|
||||||
|
|
||||||
#context-menu {
|
#context-menu {
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
/swfs.json
|
|
@ -36,10 +36,7 @@ module.exports = (env, argv) => {
|
||||||
plugins: [
|
plugins: [
|
||||||
new CopyWebpackPlugin({
|
new CopyWebpackPlugin({
|
||||||
patterns: [
|
patterns: [
|
||||||
{
|
{ from: path.resolve(__dirname, "www/index.html") },
|
||||||
from: path.resolve(__dirname, "www/index.html"),
|
|
||||||
to: "index.html",
|
|
||||||
},
|
|
||||||
{ from: "LICENSE*" },
|
{ from: "LICENSE*" },
|
||||||
{ from: "README.md" },
|
{ from: "README.md" },
|
||||||
],
|
],
|
||||||
|
|
|
@ -64,7 +64,7 @@ body {
|
||||||
right: 0;
|
right: 0;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 10px;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
#nav {
|
||||||
|
@ -72,27 +72,23 @@ body {
|
||||||
background: var(--ruffle-blue);
|
background: var(--ruffle-blue);
|
||||||
box-shadow: 0 3px 6px 5px var(--ruffle-blue);
|
box-shadow: 0 3px 6px 5px var(--ruffle-blue);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-self: flex-start;
|
justify-content: space-around;
|
||||||
color: white;
|
color: white;
|
||||||
min-height: 45px;
|
padding: 10px 0 5px 0;
|
||||||
padding-top: 5px;
|
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#title {
|
#title {
|
||||||
transition-duration: 0.5s;
|
transition: opacity 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#title:hover {
|
#title:hover {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#title img {
|
#title img {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin-top: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#file-picker select,
|
#file-picker select,
|
||||||
|
@ -125,10 +121,6 @@ body {
|
||||||
#sample-swfs-container {
|
#sample-swfs-container {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
|
||||||
min-height: 65px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
@media only screen and (max-width: 600px) {
|
||||||
|
@ -146,7 +138,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
#nav {
|
||||||
min-height: 85px;
|
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,8 +14,7 @@
|
||||||
<img
|
<img
|
||||||
src="https://ruffle.rs/assets/logo.png"
|
src="https://ruffle.rs/assets/logo.png"
|
||||||
alt="Ruffle"
|
alt="Ruffle"
|
||||||
data-canonical-src="https://ruffle.rs/assets/logo.png"
|
data-canonical-src="https://ruffle.rs/assets/logo.png" />
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="file-picker">
|
<div id="file-picker">
|
||||||
|
|
|
@ -52,7 +52,7 @@ async function loadFile(file) {
|
||||||
player.load({ data, ...config });
|
player.load({ data, ...config });
|
||||||
}
|
}
|
||||||
|
|
||||||
function sampleFileSelected() {
|
function loadSample() {
|
||||||
const swfData = sampleFileInput[sampleFileInput.selectedIndex].swfData;
|
const swfData = sampleFileInput[sampleFileInput.selectedIndex].swfData;
|
||||||
if (swfData) {
|
if (swfData) {
|
||||||
authorContainer.style.display = "block";
|
authorContainer.style.display = "block";
|
||||||
|
@ -69,7 +69,7 @@ localFileInput.addEventListener("change", (event) => {
|
||||||
loadFile(event.target.files[0]);
|
loadFile(event.target.files[0]);
|
||||||
});
|
});
|
||||||
|
|
||||||
sampleFileInput.addEventListener("change", sampleFileSelected);
|
sampleFileInput.addEventListener("change", () => loadSample());
|
||||||
|
|
||||||
main.addEventListener("dragenter", () => {
|
main.addEventListener("dragenter", () => {
|
||||||
overlay.classList.add("drag");
|
overlay.classList.add("drag");
|
||||||
|
@ -119,13 +119,13 @@ window.addEventListener("DOMContentLoaded", async () => {
|
||||||
}
|
}
|
||||||
sampleFileInputContainer.style.display = "inline-block";
|
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) {
|
if (initialFile) {
|
||||||
const options = Array.from(sampleFileInput.options);
|
const options = Array.from(sampleFileInput.options);
|
||||||
sampleFileInput.selectedIndex = Math.max(
|
sampleFileInput.selectedIndex = Math.max(
|
||||||
options.findIndex((swfData) => swfData.value.endsWith(initialFile)),
|
options.findIndex((swfData) => swfData.value.endsWith(initialFile)),
|
||||||
0
|
0
|
||||||
);
|
);
|
||||||
sampleFileSelected();
|
loadSample();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue