mirror of
https://github.com/marcrobledo/RomPatcher.js.git
synced 2025-09-15 17:26:57 +00:00
GUI redesign among other fixes
This commit is contained in:
Marc Robledo
parent
eb40a592b5
commit
a56fa9d4e8
13 changed files with 251 additions and 314 deletions
319
RomPatcher.css
319
RomPatcher.css
|
|
@ -1,19 +1,41 @@
|
|||
/* WebApps CSS template by Marc Robledo v20170722 */
|
||||
/* WebApps CSS template by Marc Robledo v20180428 */
|
||||
/* minify at https://cssminifier.com/ + https://www.base64-image.de/ */
|
||||
|
||||
/* @FONT-FACES */
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,800');
|
||||
|
||||
@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:14px 'Open Sans',sans-serif;
|
||||
font:15px 'Open Sans',sans-serif;
|
||||
cursor:default;
|
||||
margin:0px 0 40px;
|
||||
background-color:#f1f2f3;
|
||||
color:#3c3c3c
|
||||
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{padding: 5% 0 8%}
|
||||
header h1{display:none}
|
||||
footer{padding: 50px 0 20px}
|
||||
#wrapper{flex-basis:100%}
|
||||
|
||||
|
||||
.clickable{cursor:pointer}
|
||||
|
||||
|
||||
/* flex box */
|
||||
.row{
|
||||
display:flex;
|
||||
|
|
@ -21,81 +43,36 @@ body{
|
|||
align-items:center; /* vertical align */
|
||||
justify-content:space-between
|
||||
}
|
||||
.columns.c1,.columns.one{width:7.33333%}
|
||||
.columns.c2,.columns.two{width:15.66667%}
|
||||
.columns.c3,.columns.three{width:24%}
|
||||
.columns.c4,.columns.four{width:32.33333%}
|
||||
.columns.c5,.columns.five{width:40.66667%}
|
||||
.columns.c6,.columns.six{width:49%}
|
||||
.columns.c7,.columns.seven{width:57.33333%}
|
||||
.columns.c8,.columns.eight{width:65.66667%}
|
||||
.columns.c9,.columns.nine{width:74%}
|
||||
.columns.c10,.columns.ten{width:82.33333%}
|
||||
.columns.c11,.columns.eleven{width:90.66667%}
|
||||
.columns.c12,.columns.twelve{width:99%}
|
||||
#the-app .columns{margin-bottom:3px}
|
||||
.leftcol{width:35%;text-align:right}
|
||||
.rightcol{width:63%}
|
||||
.leftcol,.rightcol{margin-bottom:8px}
|
||||
|
||||
|
||||
.container{background-color:#e4e7ea;padding:15px;border-radius:5px;}
|
||||
.container-description{text-align:center;margin-bottom:10px;color:#888d92;font-size:95%;}
|
||||
|
||||
/* useful classes */
|
||||
.help:hover{cursor:help}
|
||||
.hidden{display:none}
|
||||
.mono{font-family:monospace;color:#888}
|
||||
.clickable{cursor:pointer} /* also Safari iOS fix for clickable elements */
|
||||
.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.text-left{text-align:left}
|
||||
.text-right{text-align:right}
|
||||
.text-center{text-align:center}
|
||||
.text-justify{text-align:justify}
|
||||
.round{border-radius:3px}
|
||||
/* colors */
|
||||
.bg-light-gray{background-color:rgba(216,216,216,.99)}
|
||||
.bg-mid-gray{background-color:rgba(144,144,144,.99);color:white}
|
||||
.bg-dark-gray{background-color:rgba(72,72,72,.99);color:white}
|
||||
.bg-red{background-color:#e74c3c}
|
||||
.bg-orange{background-color:#f39c12}
|
||||
.bg-blue{background-color:#3498db}
|
||||
.bg-green{background-color:#25ba84}
|
||||
.fnt-white{color:white}
|
||||
.fnt-light-gray{color:#d8d8d8}
|
||||
.fnt-mid-gray{color:#909090}
|
||||
.fnt-dark-gray{color:#48484}
|
||||
.fnt-red{color:#e74c3c}
|
||||
/*.fnt-red{color:#fe5d05}*/
|
||||
.fnt-orange{color:#f39c12}
|
||||
/*.fnt-orange{color:#feb806}*/
|
||||
.fnt-blue{color:#3498db}
|
||||
.fnt-green{color:#25ba84}
|
||||
/*.fnt-green{color:#9ac430}*/
|
||||
.border-white{border-color:white}
|
||||
.border-light-gray{border-color:#d8d8d8}
|
||||
.border-mid-gray{border-color:#909090}
|
||||
.border-dark-gray{border-color:#48484}
|
||||
|
||||
/* Icons */
|
||||
i.icon{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAAkCAYAAAApQLALAAAFm0lEQVR42u2cf2hWVRjHX+d0ldbyj4JSKwOzFKeMHGQhFBREU8KgENLWD6KCoh+QxRAjo/qjKCL7SVk6SoVgJNjW0n4IlUGtsloZlNF01rJXKzZfy92+D3suPHu4977n3t079r73OfDB+Z5z7r3vPZ+de85zzl3B87yCYVQq/g9ewn+rmbfAf+C3GHUmgpWgExT5Ph0GXeAGUGvSZSNwFshUKTfkWlAPJoPv+NqP82eTWM6akLpzQLcXnb4G83Iu3WrwOTgtZr3zwc9gVVQPHEfO8Spw1Dmj8h7gPLpJB9X1/wX28M+vBUhM8vZ7bulQjiVeK+5Dd8y6G7gePRWvr+YeOOy8UddzCvjTUcAS9wZy2KB73i9BM5gFloAOlf8N9+jjXbg02+8RdQ/WONY7B7wNZoDtXPeXau6Bg87tci1rVbkfwEbwmfr8WVVvpco/AE4Fi8EmcBXL+q0qd2OFyOvShtPBCSF5E8AT6lgPOl7DuWCfGH6RxG1gYRY9cJyURX2X44WVbVCitnHP6ue3irwfwQUir1OdYys3Wg//fzeXe1WV60p4H8aiB41z7kt5wkrf5ySVR0OtF0T9IXCX4zWcB35V5+8sF4UYTQ883gSO8xTQ6cyA6EJ/yPGK6vN/ubfwOO9iMC2gMYopCZRGDzqaX6Be9Ut5ouh5X1Ty3uF4DTSn2K/O26eGbtYDh5Qd4iiELrM35Fhh6Sho5Nn2Fwm+R5ryZjmUa+SJqZ/e4znFK+Izmnjd4ni82QHy/g7musSB8zoGforjvX66LmCIcVzk74zogf20nfN3hOQXMxoCjPaXP0n9RjUJPqqeSCtiyKufVH+ABXmKAyeJQhR4YuGnv8E9oInjjr1qklYn6nWFNDTNlO/m3ico7aigCZxLOy7iRRuZjoFrYox5ewPkXRhnJS7PceAtjsOXIofH/HqrQsp9yuPfn0Lyb6qiKIRPk+iJKdx4dYxFiqBhQ4OtxLlBYa5djgIPqUdirZi0eWqYMVtEI2TqCRlnV0McuJGfPs0x6uiFI5owz7e9EPGYysOB1dyryjFxOzfIV+D2gLpz1USmXA/eUIX3L63Orj9qzDuWPXCls1nc1PkinBZWfh6vsEWlHpM3UuCyY14TOPuhSAv35HI3Gk3Ybq6QYUPF70ajMcxzvBtrgPmeg9JNGVzE/WCQG7uF9xG4JloVWy4mDa3WqPkVeAovdw6VmcC0caA6rYsYFMcngZ8B2xx5SQjsxx+tYXMoMMn7SYyej/Zz1vsH6Wu+hFgAOsAAOAI2g7PBDNAGDoNB0AUupDoBA/iWBF9ieYVFPIwMBH5DiEmB53c5DreboTDH+97whu+PxczcF5iE/Ad4iv2gN+BzEvkiE9hIQ+AlahdWuUovi/KXs8AfBEhajo9MYCMNgTeJxn/aodKjovybLHApgcDHTGAjDYH3iQna6Q6V6nmDhr/eTwL3JRD4oAlspCGwv3NoIEbFQ3LWDxkfTiDwYyawkYbAchvcGQ6VpomthUUWeBJojyHvO6AuQOBbE3yJFSZwvgX+UDT+OodKctvhLhFGI4m3OshLoteFhNG6wVne8KsoLkwXURETOKcC38kNv4f3bz7OEunCM1lwub/1PiEwUQtej5B3C4teCBE4jWQNmzOBp/BEjgReIwS90hv54p5OB/wVOSEwUQOeD5B3A5goy5rARloLGYt5SZfeIF0G7vVG/hmkOiVJiaUuBAhMTABPCnnXs9gFE9jIai/EFTwp28vjyqkib7IQ5AhYKg8SILDPOoo2hOWXEZj2hd7GkYkoOkxgE9iHohDrWZ6T1TbBft48MzPjV1c8vVQtuMwbfsPXp8bCaCbweH2BsN0h5msCm8AmsGECm8BGbgUupShwyRrVBB5rWr2Rf8klSmBaxl4kKKhXih6yRs0X/wMhEBsJUtVSfgAAAABJRU5ErkJggg==');
|
||||
|
||||
/* icons */
|
||||
button.with-dot:before{
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAQAAABKmM6bAAAAWElEQVQI12P4zwCGIv/V/stC2CCC63/J/5f/f////n/nf3OIUMn/v/9h4M5/NZCWR/8R4N//FgagCd/+I4PVIFVPUFR1oZt1778Bso3fEDZC3CULxFwgNgDirn13m99yDAAAAABJRU5ErkJggg==');
|
||||
background-size:100% 100%;
|
||||
display:inline-block;
|
||||
vertical-align:middle;
|
||||
width:4px;height:4px;
|
||||
content:"";
|
||||
margin-right:10px;
|
||||
}
|
||||
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
|
||||
}
|
||||
i.icon.reset,i.icon.blank{background-position:-0px 0px}
|
||||
i.icon.add,i.icon.plus{background-position:-16px 0px}
|
||||
i.icon.remove,i.icon.minus{background-position:-32px 0px}
|
||||
i.icon.close{background-position:-48px 0px}
|
||||
i.icon.config,i.icon.settings{background-position:-64px 0px}
|
||||
i.icon.help{background-position:-80px 0px}
|
||||
i.icon.down{background-position:-96px 0px}
|
||||
i.icon.up{background-position:-112px 0px}
|
||||
i.icon.sort{background-position:-128px 0px}
|
||||
i.icon.check,i.icon.accept,i.icon.save{background-position:-144px 0px}
|
||||
i.icon.pencil,i.icon.edit{background-position:-160px 0px}
|
||||
i.icon.github{background-position:0px -16px}
|
||||
i.icon.heart{background-position:-16px -16px}
|
||||
i.icon.disk{background-position:-32px -16px;width:20px;height:20px}
|
||||
footer .icon.github{background-position:0px 0px}
|
||||
footer .icon.heart{background-position:-16px 0px}
|
||||
footer .icon.check{background-position:-32px 0px}
|
||||
|
||||
|
||||
|
||||
|
|
@ -104,116 +81,82 @@ i.icon.disk{background-position:-32px -16px;width:20px;height:20px}
|
|||
|
||||
|
||||
|
||||
/* header+footer */
|
||||
header{text-align:center}
|
||||
header h1{margin:0}
|
||||
header img{max-width:90%}
|
||||
|
||||
/* header+toolbar+footer */
|
||||
#header{
|
||||
color:white;
|
||||
/*position:fixed;*/
|
||||
top:0;left:0;
|
||||
width:100%;
|
||||
z-index:100;
|
||||
footer{
|
||||
text-align:center;
|
||||
color:#767b86;
|
||||
font-size:85%;
|
||||
}
|
||||
#header-top{
|
||||
background-color:#43454a;
|
||||
padding:16px 0
|
||||
}
|
||||
#header h1 img{height:24px; vertical-align:middle}
|
||||
#header h1{font-size:140%;margin:0;display:inline-block}
|
||||
#header h1 small{color:#717377;font-size:60%}
|
||||
#toolbar{margin-top:10px}
|
||||
|
||||
|
||||
.header-buttons{
|
||||
font-size:85%
|
||||
}
|
||||
.header-buttons a{
|
||||
color:white;
|
||||
footer a{
|
||||
color:#969ba6;
|
||||
text-decoration:none;
|
||||
border-bottom:1px solid #5d5f63;
|
||||
margin-right:10px
|
||||
border-bottom:1px solid #464b56;
|
||||
}
|
||||
footer a:hover{
|
||||
color:white;
|
||||
border-color:#41d5ff;
|
||||
}
|
||||
.header-buttons a:hover{border-color:#41d5ff}
|
||||
|
||||
|
||||
|
||||
|
||||
hr{border:none;border-top:1px dotted #bbb;margin:15px 0}
|
||||
h3{
|
||||
/*border-bottom:2px solid #888;*/
|
||||
font-size:13px;
|
||||
padding:10px 0;
|
||||
font-weight:normal;
|
||||
|
||||
/* tabs */
|
||||
#tabs div{
|
||||
width:50%;
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
margin: 20px 0 0;
|
||||
box-sizing:border-box;
|
||||
padding: 10px;
|
||||
color:#646871;
|
||||
border-radius: 2px 2px 0 0;
|
||||
transition: .15s all;
|
||||
border-top: 3px solid transparent;
|
||||
}
|
||||
#tabs div:hover{color:white;background-color:#2e3137}
|
||||
#tabs div.selected{
|
||||
background-color:#f9fafa;
|
||||
color:black;
|
||||
}
|
||||
h3:before,h3:after{
|
||||
content:"";
|
||||
display:inline-block;
|
||||
width:130px;
|
||||
height:1px;
|
||||
background-color:red;
|
||||
vertical-align:middle;
|
||||
}
|
||||
h3:before{
|
||||
margin-right:5px;
|
||||
background:linear-gradient(to right, transparent 0%,#818181 100%);
|
||||
}
|
||||
h3:after{
|
||||
margin-left:5px;
|
||||
background:linear-gradient(to left, transparent 0%,#818181 100%);
|
||||
}
|
||||
|
||||
h3.red:before{background:linear-gradient(to right, transparent 0%,#e74c3c 100%)}
|
||||
h3.red:after{background:linear-gradient(to left, transparent 0%,#e74c3c 100%)}
|
||||
h3.orange:before{background:linear-gradient(to right, transparent 0%,#f39c12 100%)}
|
||||
h3.orange:after{background:linear-gradient(to left, transparent 0%,#f39c12 100%)}
|
||||
h3.blue:before{background:linear-gradient(to right, transparent 0%,#3498db 100%)}
|
||||
h3.blue:after{background:linear-gradient(to left, transparent 0%,#3498db 100%)}
|
||||
h3.green:before{background:linear-gradient(to right, transparent 0%,#25ba84 100%)}
|
||||
h3.green:after{background:linear-gradient(to left, transparent 0%,#25ba84 100%)}
|
||||
|
||||
|
||||
|
||||
table{width:100%}
|
||||
tbody tr:nth-child(even){background-color:#f2f2f2}
|
||||
th{background-color:#d4d4d4}
|
||||
.tab{background-color:#f9fafa;padding:30px 15px}
|
||||
#tab0{border-radius: 0px 2px 2px 2px}
|
||||
#tab1{border-radius: 2px 0px 2px 2px;display:none}
|
||||
#tabs div:first-child.selected{border-color: #e74c3c;}
|
||||
#tabs div:last-child.selected{border-color: #25ba84;/*border-color: #3498db;*/}
|
||||
|
||||
|
||||
|
||||
|
||||
/* forms */
|
||||
textarea, input[type=file]{
|
||||
input[type=file],select{
|
||||
box-sizing:border-box;
|
||||
max-width:100%;
|
||||
}
|
||||
input[type=text],input[type=number],select{
|
||||
padding:6px 10px;
|
||||
font-family:inherit;
|
||||
font-size:100%;
|
||||
outline:0;
|
||||
width:250px;
|
||||
max-width:90%;
|
||||
font:14px 'Open Sans', sans-serif;
|
||||
border:1px solid #191919;
|
||||
border-radius:4px;
|
||||
box-sizing:border-box;
|
||||
background-color:#191919;
|
||||
color:#f2f2f2;
|
||||
letter-spacing:.02em;
|
||||
border:none;
|
||||
border-radius:3px;
|
||||
background-color:#edefef;
|
||||
}
|
||||
input[type=text]:hover,input[type=number]:hover,select:hover{
|
||||
background-color:#222;
|
||||
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;
|
||||
}
|
||||
input[type=text]:focus,input[type=number]:focus,select:focus{
|
||||
border-color:#41d5ff;
|
||||
box-shadow:#35a1c0 0 0 3px;
|
||||
}
|
||||
input[type=text].error,input[type=number].error,select.error{
|
||||
box-shadow:#f88 0 0 3px;
|
||||
border-color:red
|
||||
}
|
||||
input[type=text].small,input[type=number].small,select.small{width:70px}
|
||||
input[type=text].medium,input[type=number].medium,select.medium{width:130px}
|
||||
input[type=text].fw,input[type=number].fw,select.fw{width:100% !important;max-width:100% !important}
|
||||
select::-ms-expand{display:none}
|
||||
input[type=file]:hover,select:hover{background-color:#dee1e1}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -234,9 +177,6 @@ button{
|
|||
|
||||
box-sizing:border-box
|
||||
}
|
||||
button.small{
|
||||
min-width:1px
|
||||
}
|
||||
button:hover{
|
||||
cursor:pointer;
|
||||
background-color:#6e7177;
|
||||
|
|
@ -245,9 +185,7 @@ button:active{
|
|||
background-color:#47494f;
|
||||
transform:translateY(1px)
|
||||
}
|
||||
button:disabled{opacity:.35}
|
||||
button.colored{color:white;background-color:#40a2c9}
|
||||
button.colored:hover{background-color:#63bfe3}
|
||||
button:disabled{opacity:.35 !important;cursor:not-allowed}
|
||||
button.close{color:white;background-color:#}
|
||||
button.no-text.with-icon:before{margin-right:0px}
|
||||
|
||||
|
|
@ -257,14 +195,28 @@ button.no-text.with-icon:before{margin-right:0px}
|
|||
|
||||
|
||||
|
||||
#rom-info{font-family:'Roboto Mono',monospace;color:#888;font-size:12px}
|
||||
#rom-info .rightcol{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
#crc32.valid{color:green}
|
||||
/*#crc32.valid:after{content:" \002713"}*/
|
||||
#crc32.invalid{color: red}
|
||||
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.wrapper{
|
||||
max-width:900px;
|
||||
#wrapper{
|
||||
box-sizing:border-box;
|
||||
max-width:95%;
|
||||
width:600px;
|
||||
margin:0 auto
|
||||
}
|
||||
|
||||
|
|
@ -272,17 +224,10 @@ button.no-text.with-icon:before{margin-right:0px}
|
|||
|
||||
|
||||
/* responsive */
|
||||
@media only screen and (max-width:961px){
|
||||
.wrapper{max-width:auto; padding-left:10px;padding-right:10px;}
|
||||
}
|
||||
@media only screen and (max-width:721px){
|
||||
#header .columns-6,#header .columns.six{width:100%;text-align:center}
|
||||
h1 img{margin-bottom:15px}
|
||||
#the-app{font-size:13px}
|
||||
h3:before,h3:after{width:40px}
|
||||
}
|
||||
@media only screen and (max-width:481px){
|
||||
#the-app{font-size:12px}
|
||||
@media only screen and (max-width:641px){
|
||||
#wrapper{font-size:14px}
|
||||
#rom-info{font-size:11px}
|
||||
header img{max-height:96px}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -308,19 +253,17 @@ button.no-text.with-icon:before{margin-right:0px}
|
|||
transform:translateY(-10px);
|
||||
transition:visibility 0s .2s, opacity .2s ease-in, transform .2s ease-in;
|
||||
|
||||
background-color:#45484f;
|
||||
background-color:#f9fafa;
|
||||
padding:15px;
|
||||
min-width:360px;
|
||||
max-width:80%;
|
||||
border-radius:4px;
|
||||
border-radius:3px;
|
||||
box-shadow:0 5px 15px 0 rgba(0,0,0,.5);
|
||||
line-height:1.8;
|
||||
color:#f2f2f2;
|
||||
}
|
||||
.dialog.active{transform:translateY(0px)}
|
||||
.dialog button{color:#f2f2f2}
|
||||
.buttons{
|
||||
margin-top:20px;
|
||||
text-align:center
|
||||
text-align:right
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue