RomPatcher.js/style/RomPatcher.css

/* WebApps CSS template by Marc Robledo v20191106 */
/* minify at https://cssminifier.com/ + https://www.base64-image.de/ */

/* @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
}


/* hide header checkboxes */
#row-removeheader,#row-addheader{display:none}


/* flex main column */
html, body{height:100%}
#column{
	display: flex;
	flex-wrap: nowrap;
	height: 100%;
	flex-direction: column;
}
header{padding: 1% 0 4%}
header h1{display:none}
footer{padding: 50px 0 20px}
#wrapper{flex-basis:100%}


.clickable{cursor:pointer}


/* 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%;text-align:right}
.rightcol{width:70%}
.leftcol,.rightcol{margin-bottom:8px}





/* 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;
	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}








/* header+footer */
header{text-align:center}
header h1{margin:0}
header img{max-width:90%}

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}

/* Switch mode */
#switch-container{
	visibility:hidden;
	text-align:right;
	color:white;
	margin-bottom:10px;
	font-size:88%;
}
#switch-create-button{
	border-radius:2px;
	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;
}
.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:#00a5ff;
	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]{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}

#select-language{
	background-color:#31343a;
	color:white;
	cursor:pointer;
	background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJmaWxsOiNmZmYiIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
}
#select-language:hover,#select-language:focus{
	background-color:#2b2e33;
	cursor:pointer;
}



/* 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{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{
	background-position:0px 0px;
	display:inline-block;
	vertical-align:middle;
	width:16px;height:16px;
	background-position:-32px 0px;
	content:"";
	margin-left:4px;
	/*content:" \002713"}*/
}





.message{padding: 3px 10px; border-radius:3px;display:inline}
.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
}










/* responsive */
@media only screen and (max-width:641px){
	#wrapper{font-size:14px}
	#rom-info{font-size:11px}
	header img{max-height:96px}
}






/* 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;
}