1
0
Fork 0
mirror of https://github.com/marcrobledo/RomPatcher.js.git synced 2025-06-27 16:25:54 +00:00

added settings screen with new features

This commit is contained in:
Marc Robledo 2022-03-24 22:38:53 +01:00
parent a45e635696
commit e13da86290
18 changed files with 433 additions and 215 deletions

View file

@ -1,5 +1,5 @@
/* Rom Patcher JS CSS template by Marc Robledo v20210815 */
/* minify at https://cssminifier.com/ + https://www.base64-image.de/ */
/* Rom Patcher JS CSS template by Marc Robledo v20220323 */
/* minify at https://cssminifier.com/ */
/* @FONT-FACES */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@ -16,7 +16,7 @@ body{
-webkit-user-select: none;
-ms-user-select:none;
-o-user-select:none;
user-select:none
user-select:none;
}
/* flex main column */
@ -27,7 +27,7 @@ html, body{height:100%}
height: 100%;
flex-direction: column;
}
header{padding: 1% 0 4%}
header{margin: 1% 0 4%}
header h1{display:none}
footer{padding: 50px 0 20px}
#wrapper{flex-basis:100%}
@ -35,8 +35,9 @@ footer{padding: 50px 0 20px}
.clickable{cursor:pointer}
.hide{display:none !important}
.text-center{text-align:center}
.text-right{text-align:right}
.m-b{margin-bottom:8px}
/* flex box */
.row{
display:flex;
@ -44,27 +45,23 @@ footer{padding: 50px 0 20px}
align-items:center; /* vertical align */
justify-content:space-between
}
.leftcol{width:28%;text-align:right}
.leftcol{width:28%}
.rightcol{width:70%}
.leftcol,.rightcol{margin-bottom:8px}
.leftcol-md{width:60%}
.rightcol-md{width:40%}
.leftcol-lg{width:70%}
.rightcol-lg{width:30%}
/* icons */
footer .icon, #crc32.valid:after{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAQCAYAAABQrvyxAAACUElEQVRIx9XWzUtUURzG8atp04svtCiI3v6EQFIoInBREFgEQtC+VVCLWoQLMTKqRUEbU4uKaOht5a7IoDcoWkiLIKKVgqUUvkGMM2revid+V55u5+qdS5ANfEDvPXN4npl7zpkgDMMgpgFX8QEF8xG9aPKM/6f0n7W4ifkw+eXu5VG33Aq48G/C9K8B1EeTjLTsdrbjMQqYwn1sw2bkMYlp9GOHe89CiDNBuU5jAOujSe5KsFY8wVe8NaN4hsN4bWP7pIAL9B1hzGcMe667IjszFuhAaN65CfbIJ5tP8bVdl/F7rcBzT8ilvMxQ4JyEd9rdBHck0JUUBc7L+HtWoJShwEyswCasSghegUux8G2/7jHBoCzQDSkKuGd/1t4zZAVGMhQYlQLNmEA/1sTCV6JHgs/jxMJ9JihamEIZq3/M3lO0AmczFLggBYYloCuxWj753lj4Y78VZIJxeSQ2pgi/Dj9s/IQVqEZfGeEfIScFGjAmQZ+iDjfk2hyO/vF4McELKdCZokCbjH8l26gr8TBFeFc059lGXYlxCVyUv2dxxLs+mOC4hXkPt7AuYqsn+BYrOCcFTkkBpwq3Fwn/wIoGCedAIyZji3UGrYk7kx1ig1agXQLul/DNnsPsS3QiSwGnEt2e8LewQscmbKNN8k2UcGjRrdUm2YVp9OAgTqJKCuRi4UtWKvAUcCpwWcJ3WbEgRYHocRpCy5Jng4TcZ4vyk522NXJvpYSfwgF9vDwFIp1ut0m6/7d/zAW2C3XhG2rlerVdu2ZrYVn+Gv0v/QQllGUdmIg+uwAAAABJRU5ErkJggg==');
}
footer .icon{
background-position:0px 0px;
.icon{
display:inline-block;
vertical-align:middle;
width:16px;height:16px
}
footer .icon.github{background-position:0px 0px}
footer .icon.heart{background-position:-16px 0px}
footer .icon.check{background-position:-32px 0px}
@ -76,7 +73,7 @@ footer .icon.check{background-position:-32px 0px}
/* header+footer */
header{text-align:center}
header h1{margin:0}
header img{max-width:90%}
header img{max-width:90%; height:192px;}
footer{
text-align:center;
@ -97,11 +94,28 @@ footer a:hover{
hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
/* outer buttons */
.button-outer{
background-color:transparent;
color:white;
cursor:pointer;
text-align:center;
}
.button-outer:hover,.button-outer:focus{
background-color:#2b2e33;
cursor:pointer;
}
.button-outer img{
height:16px;
display:inline-block;
vertical-align:middle;
}
/* Switch mode */
#switch-container{
visibility:hidden;
text-align:right;
color:white;
text-align:right;
margin-bottom:10px;
font-size:88%;
}
@ -110,19 +124,18 @@ hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
padding: 6px 8px;
transition:background-color .1s;
}
#switch-create-button:hover{
background-color:#2b2e33;
cursor:pointer;
}
.switch{
background-color:#474c56;
display:inline-block;
vertical-align:middle;
width:30px;height:16px;
border-radius:8px;
position:relative;
transition:background-color .2s;
background-color:#babfbf;
}
#switch-create-button .switch.disabled{background-color:#474c56;}
#settings-dialog .switch{transition:opacity .1s;}
#settings-dialog .switch:hover{cursor:pointer;opacity:.7}
.switch:before{
position:absolute;
background-color:white;
@ -136,10 +149,7 @@ hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
.switch.enabled:before{
left:16px;
}
.switch.enabled{
background-color:#00a5ff;
background-color:#41bdc7;
}
.switch.enabled{background-color:#41bdc7;}
@ -165,6 +175,7 @@ input[type=file],select{
border-radius:3px;
background-color:#edefef;
}
input[type=file].w100, select.w100{width:100%}
input[type=file]{padding:6px 10px}
select{
padding:6px 18px 6px 10px;
@ -180,17 +191,7 @@ select::-ms-expand{display:none}
input[type=file].enabled:hover,select.enabled:hover{background-color:#dee1e1}
input[type=file].disabled,select.disabled{background-color:transparent}
#select-language{
background-color:transparent;
color:white;
cursor:pointer;
text-align:center;
background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJmaWxsOiNmZmYiIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
}
#select-language:hover,#select-language:focus{
background-color:#2b2e33;
cursor:pointer;
}
@ -245,21 +246,23 @@ button.no-text.with-icon:before{margin-right:0px}
#crc32.valid:after{
background-position:0px 0px;
display:inline-block;
vertical-align:middle;
width:16px;height:16px;
background-position:-32px 0px;
content:"";
width:16px;height:16px;
margin-left:4px;
/*content:" \002713"}*/
background-size:100% 100%;
background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSBzdHJva2U9IiMwODAiIHN0cm9rZS13aWR0aD0iODgiIHgxPSIyMjciIHgyPSI0NzQuMzEiIHkxPSIzNDMiIHkyPSI5NS42OSIvPjxsaW5lIHN0cm9rZT0iIzA4MCIgc3Ryb2tlLXdpZHRoPSI4OCIgeDE9IjU0IiB4Mj0iMjM3LjUxIiB5MT0iMjExIiB5Mj0iMzk0LjUxIi8+PC9zdmc+");
}
.message{padding: 3px 10px; border-radius:3px;display:inline-block;vertical-align:middle}
.message{padding: 5px 10px; border-radius:3px;display:inline-block;vertical-align:middle}
.message.error{background-color:#de4205; color:white}
.message.warning{background-color:#ffec68; color:black}
@ -307,7 +310,98 @@ button.no-text.with-icon:before{margin-right:0px}
/* dialogs */
#dialog-backdrop{
position:fixed;
display:flex;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.75);
margin:0;
padding:0;
display:none;
}
#dialog-backdrop.show{display:flex}
.dialog{
vertical-align:middle;
margin:auto;
background-color:white;
color:#999;
box-sizing:border-box;
box-shadow:rgba(0,0,0,.7) 0 0 24px;
padding:20px;
border-radius:3px;
display:none;
}
.dialog.show{display:block}
/* settings dialog */
#settings-dialog{
min-width:400px;
max-width:90%;
}
#settings-close-dialog{
padding:8px;
border-radius:30px;
margin-right:-8px;
margin-top:-8px;
transition:background-color .2s;
height:24px;
}
#settings-close-dialog:hover{
cursor:pointer;
background-color:#f4f4f4;
}
/* ZIP dialog */
#zip-dialog{
min-width:360px;
}
#zip-dialog-file-list{
list-style:none;
padding:0;
margin: 0;
max-height:300px;
overflow-y:auto;
}
#zip-dialog-file-list li{
color:#3c3c3c;
padding: 2px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#zip-dialog-file-list li:hover{
background-color:#eee;
cursor:pointer;
color: black;
border-radius: 3px;
}
/* light theme */
body.light{background-color:#eeeceb;}
body.light .button-outer{color:#575b66;}
body.light footer img.icon.settings, body.light footer img.icon.github{filter: invert(0%) brightness(30%);}
body.light .button-outer:hover, body.light .button-outer:focus{background-color: #e6e3e1}
body.light .switch.enabled{background-color:#ff941e;}
body.light #switch-create.disabled{background-color:#cec5bd;}
body.light button:not(.button-outer){background-color:#f9a345;}
body.light button:not(.button-outer):not(:disabled):hover{background-color:#ffbe78;}
body.light header img{filter: hue-rotate(98rad) brightness(97.9%) saturate(160%)}
body.light footer{color:#a89d97}
body.light footer a{color:#8c817c; border-color:#e3d4cc}
body.light footer a:hover{color:#484543; border-color:#ffac41}
@ -316,55 +410,5 @@ button.no-text.with-icon:before{margin-right:0px}
#wrapper{font-size:14px}
#rom-info{font-size:11px}
header img{max-height:96px}
#settings-dialog, #zip-dialog{min-width: auto;}
}
/* ZIP dialog */
.zip-overlay{
position:fixed;
display:flex;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.65);
margin:0;
padding:0;
}
.zip-dialog{
vertical-align:middle;
color:#999;
text-align:center;
margin:auto;
background-color:white;
box-sizing:border-box;
padding:4px;
border-radius:3px;
min-width:340px;
max-width: 90%;
}
.zipped-files{
list-style:none;
padding:0;
margin: 0;
max-height:300px;
overflow-y:auto;
}
.zipped-files li{
color:#3c3c3c;
padding: 2px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zipped-files li:hover{
background-color:#eee;
cursor:pointer;
color: black;
border-radius: 3px;
}

View file

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 202 B

After

Width:  |  Height:  |  Size: 202 B

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Before After
Before After

BIN
style/app_icon_maskable.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

4
style/icon_close.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<line stroke="#888" stroke-width="64" x1="16" x2="496" y1="16" y2="496"/>
<line stroke="#888" stroke-width="64" x1="496" x2="16" y1="16" y2="496"/>
</svg>

After

Width:  |  Height:  |  Size: 221 B

4
style/icon_github.svg Normal file
View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<!-- from https://github.com/simple-icons/simple-icons -->
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" fill="#fff" />
</svg>

After

Width:  |  Height:  |  Size: 865 B

3
style/icon_heart.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<path d="m135.81,62.13c-0.25,0.22 -3.37,0.63 -6.95,0.93c-13.9,1.13 -37.6,9.39 -50.16,17.47c-3.89,2.51 -7.33,4.55 -7.67,4.56c-0.99,0.03 -15.22,12.54 -19.79,17.39c-11.94,12.72 -19.85,26.1 -27.72,46.87c-5.01,13.19 -7.02,42.47 -4.09,59.8c5.9,35.18 27.87,69.21 67.68,104.88c103.21,82.78 106.19,85.08 106.71,85.45c0.52,0.37 60.38,45.75 61.69,45.75c49.02,-36.35 52.15,-38.5 55.2,-40.84c3.06,-2.33 5.99,-4.55 6.49,-4.91c94.85,-74.83 100.68,-80.06 106.71,-85.45c39.81,-35.66 61.78,-69.71 67.69,-104.88c2.91,-17.33 0.9,-46.62 -4.09,-59.8c-7.87,-20.76 -15.8,-34.15 -27.73,-46.87c-4.54,-4.86 -18.78,-17.37 -19.79,-17.39c-0.35,-0.01 -3.78,-2.05 -7.67,-4.56c-10.61,-6.83 -28.74,-13.61 -46.45,-17.38c-7.34,-1.57 -44.42,-1.18 -52.53,0.55c-9.8,2.08 -23.74,6.9 -32.84,11.36c-2.91,1.42 -17.78,10.71 -19.62,12.25c-0.59,0.5 -3.02,2.51 -5.38,4.47c-4.35,3.6 -13.05,12 -17.57,16.95l-2.44,2.68l-2.44,-2.68c-4.52,-4.96 -13.22,-13.36 -17.57,-16.95c-2.36,-1.96 -4.79,-3.97 -5.38,-4.47c-11.06,-9.24 -34.63,-19.86 -52.16,-23.52c-7.15,-1.49 -40.83,-2.81 -42.16,-1.65" fill="#e74c3c" />
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

4
style/icon_settings.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="512" height="512" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="256" cy="256" fill="transparent" rx="80" ry="80" stroke="#ffffff" stroke-width="36"/>
<path d="m201.85,509.06c-12.76,-2.99 -24.81,-13.35 -29.03,-24.91c-0.93,-2.29 -2.88,-11.86 -4.53,-21.32c-4.01,-22.92 -7.62,-29.5 -19.45,-35.08c-4.73,-2.19 -7.1,-2.69 -13.07,-2.69c-6.28,0.1 -9.26,0.9 -24.19,6.48c-16.88,6.28 -16.98,6.28 -27.79,6.38c-9.98,0 -11.32,-0.2 -17.5,-3.09c-3.71,-1.69 -8.75,-5.08 -11.32,-7.67c-5.46,-5.38 -50.74,-80.42 -53.83,-89.38c-2.68,-7.57 -1.96,-19.63 1.54,-27.1c3.81,-7.77 7.51,-11.76 22.13,-23.32c7.2,-5.78 14.2,-11.86 15.54,-13.35c8.85,-10.86 9.06,-26.71 0.31,-37.47c-1.13,-1.4 -8.23,-7.47 -15.75,-13.55c-14.92,-11.86 -18.22,-15.45 -22.13,-23.52c-3.6,-7.47 -4.32,-19.53 -1.75,-27.1c51.36,-88.39 53.94,-91.77 65.26,-97.06c6.18,-2.89 7.51,-3.09 17.5,-3.09c42.71,11.96 45.7,12.76 51.98,12.86c12.04,0.1 21.72,-5.78 27.38,-16.54c8.44,-40.45 9.78,-44.74 14.21,-51.01c4.32,-6.08 9.78,-10.36 17.6,-13.95l6.69,-3.09c81.32,-0.5 101.49,-0.2 104.68,0.4c12.45,2.59 22.44,10.16 28.1,21.32c9.88,44.24 12.15,50.02 18.63,55.5c6.18,5.18 12.15,7.37 20.48,7.27c6.38,0 9.26,-0.8 24.19,-6.38c16.88,-6.28 16.98,-6.28 27.79,-6.38c9.98,0 13.82,-0.8 19.5,3.09l62.53,94.57c1.34,2.89 1.75,6.68 1.85,13.95c0,8.67 -0.31,10.66 -2.68,15.45c-4.01,8.07 -7.41,11.76 -22.64,23.92c-14.72,11.86 -18.53,16.34 -21,24.21c-1.96,6.28 -1.96,9.07 0,15.35c2.47,7.97 6.48,12.66 21,24.21c15.03,11.96 18.63,15.84 22.64,23.92c2.37,4.78 2.68,6.78 2.68,15.45c-0.1,7.27 -0.21,5.15 -1.85,13.95c-1.64,8.8 -49.52,90.81 -60.74,96.08c-6.18,2.89 -11.3,1.58 -21.29,1.58c-10.81,-0.1 -10.91,-0.1 -27.79,-6.38c-14.92,-5.58 -17.91,-6.38 -24.19,-6.48c-12.04,-0.1 -21.72,5.78 -27.38,16.54c-1.24,2.39 -3.29,10.76 -5.15,21.03c-1.54,9.37 -3.71,19.13 -4.73,21.82c-3.5,9.57 -9.28,21.79 -24.17,24.58c-14.89,2.79 -108.09,0.53 -110.25,0.03l-0.01,-0.03zm96.03,-38.96c0,-0.2 1.34,-7.97 3.09,-17.44c4.43,-24.71 9.47,-35.47 22.54,-47.73c14.51,-13.75 35.61,-21.32 54.65,-19.83c9.98,0.8 12.76,1.49 31.7,8.17c8.65,3.09 15.85,5.38 15.95,5.18c38.7,-64.77 42.72,-72.24 41.69,-73.14c-0.72,-0.6 -6.59,-5.28 -12.87,-10.36c-14.82,-11.76 -20.79,-18.34 -25.94,-28.4c-5.76,-11.06 -7.62,-18.83 -7.62,-31.49c0,-12.66 1.85,-20.43 7.62,-31.49c5.15,-10.06 11.12,-16.64 25.94,-28.4l12.87,-10.36l-41.69,-73.14c-0.1,-0.2 -7.31,2.09 -15.95,5.18c-18.94,6.68 -21.72,7.37 -31.7,8.17c-19.04,1.49 -40.24,-6.18 -54.76,-19.73c-12.87,-12.26 -18.12,-23.22 -22.44,-47.83c-1.75,-9.47 -3.09,-17.24 -3.09,-17.34l-86.46,0c0,0.1 -1.34,7.87 -3.09,17.34c-4.32,24.61 -9.37,35.18 -22.34,47.63c-14.41,13.75 -35.72,21.42 -54.86,19.93c-9.98,-0.8 -12.76,-1.49 -31.7,-8.17c-8.65,-3.09 -15.85,-5.38 -15.95,-5.18c-3.19,3.89 -42.72,72.14 -42.2,72.64c0.41,0.4 6.38,5.18 13.17,10.66c14.41,11.56 19.87,17.24 25.01,26.21c6.18,10.66 8.65,20.53 8.65,33.88c0,13.35 -2.47,23.22 -8.65,33.88c-5.15,8.97 -10.6,14.65 -25.01,26.21c-6.79,5.48 -12.76,10.26 -13.17,10.66c-0.51,0.5 39.01,68.76 42.2,72.64c0.1,0.2 7.31,-2.09 15.95,-5.18c21.31,-7.57 23.36,-7.97 35.82,-8.07c12.87,0 20.79,1.79 32.42,7.37c9.37,4.48 13.99,6.88 23.36,17.64c9.37,10.76 13.79,21.52 17.29,42.15c3.5,20.63 2.37,13.65 2.68,15.25l0.62,2.69c66.8,0 86.26,-0.1 86.26,-0.2l0.01,0z" fill="#ffffff" />
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
style/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB