ui.css

/*
* CSS by function
*/
/* Theme & UI */
body{
    color: #333;
    font-family: 'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.1;
    background-color: #fff;
    border-radius: 2px;
}
h1{
    font-size: 1.5em;
    margin: .2em;
}
h2{
    font-size: 1.3em;
    margin: .1em;
}
.header{
    text-align: right;
}
.close-button{
    color: #444;
    cursor: pointer;
    font-size: 1.5em;
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
}
.close-button:hover{
    color: #000;
    background-color: #eee;
}
/* Drag & Drop */
.dropper{
    padding: 20px 40px;
    text-align: center;
    border-radius: 10px;
    border: 5px dashed #eee;
}
.dropper p {
    transform: scale(1);
    transition: .2s transform linear;
}
.dragover{
    background-color: #D7FFFB;
    border-color: #41FFEC;
}
.dragover p {
    transform: scale(1.2);
}
.dropped{
    background-color: #8DF978;
    color: #287125;
    border-color: #62C74F;
    border-style: solid;
}
/* Pages */
.page-wrap{
    position: relative;
}
.page {
    background-color: #fff;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    transform: scale(0);
    transition: .2s transform ease-in-out .1s;
    margin: 1em 0;
    padding: .7em;
    border: 1px solid #eee;
    border-radius: 10px;
}
.page.in{
    transform: scale(1);
    z-index: 2;
    transition: .3s transform linear .3s;
}
.page.out{
    transform: scale(0);
}
/* Choose Directory */
.dirs{
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #444;
    text-align: right;
}
.dirs div, .dirs button {
    display: inline-block;
    box-sizing: border-box;
    width: 49%;
    text-align: center;
}
.dir-output{
    font-size: .8em;
}
.choose-dir{

}
/* Choose Gateway */


/* Buttons */
.buttons{
    text-align: right;
}

button{
    text-align: center;
    padding: .3em .5em;
    background-color: #444;
    border: none;
    font-size: 1.2em;
    color: #fff;
    min-width: 5em;
    transition: .3s all ease-in-out;
    cursor: pointer;
}
button:disabled{
    opacity: .8;
    cursor: not-allowed;
    background-color: #ccc;
}
button:hover:enabled{
    box-shadow:  0 0 5px 2px rgba(255, 255, 255, 0.18) inset;
    background-color: #666666;
}
.next{
    background-color: #30AB00;
}
.next:hover:enabled{
    background-color: #3acd00;
}