165 lines
2.8 KiB
CSS
165 lines
2.8 KiB
CSS
|
/*
|
||
|
|
-- FONTS
|
||
|
|
*/
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
|
||
|
|
/*
|
||
|
|
-- FOR WINDOW TRANSPARENCY & BORDERS
|
||
|
|
*/
|
||
|
|
html{
|
||
|
|
background: transparent;
|
||
|
|
overflow: hidden;
|
||
|
|
font-family: 'Source Sans Pro', sans-serif;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
.bodym{
|
||
|
|
border: 0px solid white;
|
||
|
|
border-radius: 2em;
|
||
|
|
background-color: slategrey;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-wrap{
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
height:93%;
|
||
|
|
width:100%;
|
||
|
|
border: 0px solid white;
|
||
|
|
border-radius: 2em;
|
||
|
|
background-color: #2f4f4f;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.appbar {
|
||
|
|
display:flex;
|
||
|
|
justify-content:space-between;
|
||
|
|
align-items: flex-end;
|
||
|
|
height:2.5em;
|
||
|
|
float:left;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
.appbar h1{
|
||
|
|
|
||
|
|
margin:0;
|
||
|
|
margin-left:1em;
|
||
|
|
font-weight: 900;
|
||
|
|
color:#2f4f4f;
|
||
|
|
}
|
||
|
|
.navbar{
|
||
|
|
margin-right:2em;
|
||
|
|
float:right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dragger{
|
||
|
|
position: absolute;
|
||
|
|
z-index: -99;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
right:8em;
|
||
|
|
bottom:calc(100vh - 3em);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
-- FORM
|
||
|
|
*/
|
||
|
|
.form-wrap{
|
||
|
|
|
||
|
|
text-align: left;
|
||
|
|
flex:3;
|
||
|
|
padding: 2em;
|
||
|
|
border:1px solid slategray;
|
||
|
|
height: 60%;
|
||
|
|
|
||
|
|
}
|
||
|
|
#encode-queue{
|
||
|
|
overflow: scroll;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
.form {
|
||
|
|
width:100%;
|
||
|
|
height:80%;
|
||
|
|
background-color: rgb(29, 48, 48);
|
||
|
|
border:1px solid slategray;
|
||
|
|
}
|
||
|
|
.form input[type="file"] {
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
visibility: hidden;
|
||
|
|
height:0;
|
||
|
|
width:0;
|
||
|
|
}
|
||
|
|
.encode-element{
|
||
|
|
height:3em;
|
||
|
|
margin: -1px -1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.encode-element{
|
||
|
|
filter:brightness(1);
|
||
|
|
transition: 0.1s ease;
|
||
|
|
border:1px solid slategray;
|
||
|
|
}
|
||
|
|
.encode-element:hover{
|
||
|
|
|
||
|
|
filter:brightness(1.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.encode-element label[for="input"] {
|
||
|
|
position: relative;
|
||
|
|
display:inline-block;
|
||
|
|
font-weight: 300;
|
||
|
|
color: lightgray;
|
||
|
|
text-align: left;
|
||
|
|
width:60%;
|
||
|
|
}
|
||
|
|
.encode-element label p{
|
||
|
|
color:lightgray;
|
||
|
|
text-decoration:underline;
|
||
|
|
margin:0;
|
||
|
|
padding-left:1em;
|
||
|
|
margin: 0.8em 0;
|
||
|
|
}
|
||
|
|
.buttontab{
|
||
|
|
width:100%;
|
||
|
|
height:3em;
|
||
|
|
}
|
||
|
|
.form-wrap button {
|
||
|
|
display:block;
|
||
|
|
color:lightgray;
|
||
|
|
background-color: #2f4f4f;
|
||
|
|
border: solid 1px lightgray;
|
||
|
|
border-radius: 1em;
|
||
|
|
float:right;
|
||
|
|
padding:0.5em;
|
||
|
|
transition: 0.1s ease;
|
||
|
|
}
|
||
|
|
.form-wrap button:hover{
|
||
|
|
background-color: rgb(72, 117, 117);
|
||
|
|
}
|
||
|
|
.form-wrap button:active{
|
||
|
|
background-color: rgb(36, 61, 61);
|
||
|
|
}
|
||
|
|
.button-conv {
|
||
|
|
margin:0 !important;
|
||
|
|
padding:0 !important;
|
||
|
|
border-radius:0px !important;
|
||
|
|
padding: 0 0.5em !important;
|
||
|
|
height:100%;
|
||
|
|
width:5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
-- SETTINGS
|
||
|
|
*/
|
||
|
|
.settings {
|
||
|
|
padding:2em;
|
||
|
|
|
||
|
|
flex:1;
|
||
|
|
margin: 0 -1px;
|
||
|
|
border: solid 1px slategray;
|
||
|
|
height:60%;
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
-- PROGRESS
|
||
|
|
*/
|