mirror of
https://github.com/marcrobledo/RomPatcher.js.git
synced 2025-07-27 16:48:31 +00:00
version 3.0
This commit is contained in:
Marc Robledo
parent
20a97ae39f
commit
f7014075ec
86 changed files with 7587 additions and 238 deletions
414
legacy/style/RomPatcher.css
Normal file
414
legacy/style/RomPatcher.css
Normal file
|
|
@ -0,0 +1,414 @@
|
|||
/* 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');
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300');
|
||||
|
||||
body{
|
||||
margin:0;
|
||||
font:15px 'Open Sans',sans-serif;
|
||||
cursor:default;
|
||||
line-height:1.8;
|
||||
background-color:#31343a;
|
||||
color:#3c3c3c;
|
||||
-moz-user-select:none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select:none;
|
||||
-o-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
/* flex main column */
|
||||
html, body{height:100%}
|
||||
#column{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
header{margin: 1% 0 4%}
|
||||
header h1{display:none}
|
||||
footer{padding: 50px 0 20px}
|
||||
#wrapper{flex-basis:100%}
|
||||
|
||||
|
||||
.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;
|
||||
flex-flow:row wrap; /* this is the same as flex-direction:row;flex-wrap:wrap; */
|
||||
align-items:center; /* vertical align */
|
||||
justify-content:space-between
|
||||
}
|
||||
.leftcol{width:28%}
|
||||
.rightcol{width:70%}
|
||||
.leftcol-md{width:60%}
|
||||
.rightcol-md{width:40%}
|
||||
.leftcol-lg{width:70%}
|
||||
.rightcol-lg{width:30%}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* icons */
|
||||
.icon{
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
width:16px;height:16px
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* header+footer */
|
||||
header{text-align:center}
|
||||
header h1{margin:0}
|
||||
header img{max-width:90%; height:192px;}
|
||||
|
||||
footer{
|
||||
text-align:center;
|
||||
color:#767b86;
|
||||
font-size:85%;
|
||||
}
|
||||
footer a{
|
||||
color:#969ba6;
|
||||
text-decoration:none;
|
||||
border-bottom:1px solid #464b56;
|
||||
}
|
||||
footer a:hover{
|
||||
color:white;
|
||||
border-color:#41d5ff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
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;
|
||||
margin-bottom:10px;
|
||||
font-size:88%;
|
||||
}
|
||||
#switch-create-button{
|
||||
border-radius:2px;
|
||||
padding: 6px 8px;
|
||||
transition:background-color .1s;
|
||||
}
|
||||
.switch{
|
||||
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;
|
||||
height:12px;width:12px;
|
||||
content:" ";
|
||||
border-radius:6px;
|
||||
top:2px;
|
||||
left:2px;
|
||||
transition:left .2s;
|
||||
}
|
||||
.switch.enabled:before{
|
||||
left:16px;
|
||||
}
|
||||
.switch.enabled{background-color:#41bdc7;}
|
||||
|
||||
|
||||
|
||||
|
||||
.tab{background-color:#f9fafa;padding:30px 15px;border-radius: 3px}
|
||||
#tab1{display:none}
|
||||
|
||||
.buttons{
|
||||
margin-top:20px;
|
||||
text-align:right
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* forms */
|
||||
input[type=file],select{
|
||||
box-sizing:border-box;
|
||||
max-width:100%;
|
||||
font-family:inherit;
|
||||
font-size:100%;
|
||||
outline:0;
|
||||
border:none;
|
||||
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;
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
text-overflow:'';
|
||||
|
||||
background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
|
||||
background-position:100% center;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
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}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* buttons */
|
||||
button{
|
||||
font-family:inherit;
|
||||
font-size:100%;
|
||||
min-width:120px;
|
||||
border-radius:3px;border:0;
|
||||
|
||||
padding:10px 20px;
|
||||
margin:0 5px;
|
||||
|
||||
background-color:#2a9ca5;
|
||||
color:white;
|
||||
|
||||
transition:background-color .15s;
|
||||
|
||||
box-sizing:border-box
|
||||
}
|
||||
button.enabled:hover{
|
||||
cursor:pointer;
|
||||
background-color:#3aacb5;
|
||||
}
|
||||
button.enabled:active{
|
||||
background-color:#297b81;
|
||||
transform:translateY(1px)
|
||||
}
|
||||
button:disabled{opacity:.35 !important;cursor:not-allowed}
|
||||
|
||||
button.no-text.with-icon:before{margin-right:0px}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#rom-info, #row-expected-source-info{font-family:'Roboto Mono',monospace;color:#888;font-size:12px;
|
||||
-moz-user-select:text;
|
||||
-webkit-user-select: text;
|
||||
-ms-user-select:text;
|
||||
-o-user-select:text;
|
||||
user-select:text;
|
||||
cursor:text;
|
||||
}
|
||||
#rom-info .rightcol{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
#crc32.valid{color:green}
|
||||
#crc32.invalid{color: red}
|
||||
#crc32 span{text-decoration:underline}
|
||||
#crc32 span:hover{cursor:pointer;color:black}
|
||||
|
||||
|
||||
#crc32.valid:after{
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
content:"";
|
||||
|
||||
width:16px;height:16px;
|
||||
margin-left:4px;
|
||||
|
||||
|
||||
background-size:100% 100%;
|
||||
background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSIjMDgwIiBzdHJva2Utd2lkdGg9IjIuNzMiIGZpbGw9Im5vbmUiIGQ9Ik0gMS40Myw2LjU5IEMgNi4yNiwxMS40MiA2LjI2LDExLjQyIDYuMjYsMTEuNDIgTCAxNC42OCwzIi8+PC9zdmc+");
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.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}
|
||||
|
||||
/* loading circle */
|
||||
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
|
||||
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
|
||||
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
||||
|
||||
.loading{
|
||||
width:20px;
|
||||
height:20px;
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
-webkit-animation:spin 1s linear infinite;
|
||||
-moz-animation:spin 1s linear infinite;
|
||||
animation:spin 1s ease-in-out infinite;
|
||||
vertical-align:middle;
|
||||
}
|
||||
.loading:before{
|
||||
width:6px;
|
||||
height:6px;
|
||||
background-color:#41bdc7;
|
||||
border-radius:3px;
|
||||
display:inline-block;
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:50%;
|
||||
margin-left:-3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#wrapper{
|
||||
box-sizing:border-box;
|
||||
max-width:95%;
|
||||
width:600px;
|
||||
margin:0 auto
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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}
|
||||
|
||||
|
||||
|
||||
/* responsive */
|
||||
@media only screen and (max-width:641px){
|
||||
#wrapper{font-size:14px}
|
||||
#rom-info{font-size:11px}
|
||||
header img{max-height:96px}
|
||||
#settings-dialog, #zip-dialog{min-width: auto;}
|
||||
}
|
||||
BIN
legacy/style/app_icon_114.png
Normal file
BIN
legacy/style/app_icon_114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
legacy/style/app_icon_144.png
Normal file
BIN
legacy/style/app_icon_144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
legacy/style/app_icon_16.png
Normal file
BIN
legacy/style/app_icon_16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 B |
BIN
legacy/style/app_icon_192.png
Normal file
BIN
legacy/style/app_icon_192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
legacy/style/app_icon_maskable.png
Normal file
BIN
legacy/style/app_icon_maskable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
1
legacy/style/icon_close.svg
Normal file
1
legacy/style/icon_close.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><line stroke="#888" stroke-width="4" x1="1" x2="31" y1="1" y2="31"/><line stroke="#888" stroke-width="4" x1="31" x2="1" y1="1" y2="31"/></svg>
|
||||
|
After Width: | Height: | Size: 206 B |
2
legacy/style/icon_github.svg
Normal file
2
legacy/style/icon_github.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<!-- from octicon https://github.com/primer/octicons/ -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 760 B |
1
legacy/style/icon_heart.svg
Normal file
1
legacy/style/icon_heart.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M4.3,2.1C2.816504,2.218309 1.4015208,3.1679153 0.87398438,4.58375 0.34678348,5.8777663 0.60547985,7.4216259 1.4467505,8.5260791 2.428738,9.9126453 3.9007302,10.812811 5.1733475,11.900144 6.1025539,12.652873 7.0572605,13.374847 8.03,14.07 9.8414762,12.741487 11.62015,11.365101 13.338177,9.9179978 14.534069,8.8670814 15.617932,7.3839163 15.42875,5.70625 15.351533,4.1060809 14.135607,2.6806679 12.60355,2.2616895 11.873602,2.0258183 11.076327,2.0638822 10.328633,2.1798242 9.4188311,2.3910696 8.6202638,2.9340558 8.02,3.64 7.2081279,2.6482215 5.9494781,2.0210606 4.6572266,2.0850586 4.5320909,2.0883379 4.4030623,2.0709127 4.28,2.1" fill="#e74c3c" /></svg>
|
||||
|
After Width: | Height: | Size: 729 B |
1
legacy/style/icon_settings.svg
Normal file
1
legacy/style/icon_settings.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><ellipse cx="8" cy="8" fill="transparent" rx="2.5" ry="2.5" stroke="#ffffff" stroke-width="1.13" style="fill:none" /><path d="M 6.34,15.93 C 5.4588832,15.789025 5.3688301,14.771577 5.1756353,14.070626 4.88526,12.736602 3.4341324,13.644518 2.5971627,13.722372 1.429913,13.634857 1.20405,12.274774 0.57110457,11.527239 0.01256473,10.862766 -0.28025442,9.5563977 0.70078865,9.1307029 1.6881819,8.6864782 1.6795687,7.1576053 0.59919067,6.8587653 -0.3188158,6.2116572 0.07040277,5.0345832 0.70962743,4.3579058 1.1458066,3.5997233 1.4745511,2.6165206 2.3772581,2.2995448 3.2853269,2.2266882 4.6163607,3.3077881 5.1380438,2.0525892 5.3177552,1.1958744 5.5325932,-0.04373646 6.6754583,0.01614659 7.7138044,0.09890156 8.7722596,-0.11077281 9.7963088,0.11827521 10.569368,0.31098193 10.571622,1.2355275 10.750403,1.8610601 c 0.307427,1.3026813 1.685123,0.6224444 2.503868,0.3533436 0.82764,-0.090277 1.050717,0.8516809 1.472505,1.360975 0.38881,0.6166529 0.834189,1.2049045 1.187448,1.8394061 0.330486,1.0831614 -0.991271,1.5371101 -1.414855,2.2998779 -0.2856,1.1308037 1.380075,1.3511924 1.444845,2.3814793 -0.0079,0.927004 -0.692382,1.66038 -1.102823,2.444419 -0.39067,0.912507 -1.296704,1.612005 -2.278176,1.000092 -0.946701,-0.63303 -1.993578,0.112458 -1.907388,1.191742 0.0079,1.047847 -1.1122687,1.390845 -1.9768201,1.270072 C 7.8997219,15.932974 7.1191405,16.008245 6.34,15.93 Z m 3,-1.22 c 0.072192,-1.038342 0.5424188,-2.201536 1.610519,-2.551894 0.862697,-0.55308 2.289047,0.880644 2.758176,-0.364357 0.567891,-0.682315 1.24254,-1.736649 0.133817,-2.2771293 C 12.89432,8.7323482 13.006994,7.194583 13.884539,6.4028471 14.39852,6.1084948 14.833041,5.6436658 14.236602,5.1479432 13.957925,4.5967831 13.628958,4.0709474 13.33,3.53 12.383852,3.9354666 11.178531,4.1915721 10.300674,3.4919254 9.2869972,3.1081771 9.8933516,1.1858595 8.7077559,1.2901448 8.0634396,1.4130361 6.9692111,1.0406335 6.610177,1.4803803 6.5078416,2.4182135 6.0678498,3.4743442 5.0999314,3.7923931 4.2722569,4.3906884 3.3123355,3.3221592 2.4772941,3.8142154 2.2352934,4.5382998 0.87395464,5.4749545 1.8007346,6.1937991 c 1.053982,0.664386 1.302272,2.235122 0.4884086,3.1815951 -0.5474043,0.4278527 -1.2164805,0.9805138 -0.5529679,1.6797018 0.467778,0.565173 0.7706283,1.822385 1.7323918,1.179994 0.7375009,-0.386335 1.6577438,-0.111792 2.2758,0.38501 0.5290179,0.419069 0.7676252,1.08802 0.7930337,1.743226 0.4594894,0.831464 1.6051495,0.156768 2.3667841,0.36409 C 9.0495442,14.724232 9.1948683,14.718824 9.34,14.71 Z" fill="#ffffff" /></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
BIN
legacy/style/logo.png
Normal file
BIN
legacy/style/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
legacy/style/thumbnail.jpg
Normal file
BIN
legacy/style/thumbnail.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Loading…
Add table
Add a link
Reference in a new issue