mirror of
https://github.com/marcrobledo/RomPatcher.js.git
synced 2025-06-27 16:25:54 +00:00
414 lines
8.3 KiB
CSS
414 lines
8.3 KiB
CSS
/* 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;}
|
|
}
|