2020-12-07 23:57:48 +01:00
|
|
|
* {
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
|
|
|
html{
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
2020-12-05 21:08:32 +01:00
|
|
|
body{
|
|
|
|
background: white;
|
|
|
|
margin:0;
|
2020-12-07 23:57:48 +01:00
|
|
|
height:100%;
|
|
|
|
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
2020-12-05 21:08:32 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#menubar{
|
|
|
|
position:fixed;
|
|
|
|
top:0;
|
|
|
|
left:0;
|
|
|
|
width:100%;
|
|
|
|
height:28px;
|
|
|
|
background-color:rgb(37, 37, 37);
|
|
|
|
color:white;
|
2020-12-07 23:57:48 +01:00
|
|
|
cursor: move;
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
-webkit-user-select: none;
|
2020-12-05 21:08:32 +01:00
|
|
|
}
|
|
|
|
|
2020-12-07 23:57:48 +01:00
|
|
|
|
2020-12-05 21:08:32 +01:00
|
|
|
#menubar ul{
|
|
|
|
margin:0;
|
|
|
|
padding:0;
|
|
|
|
}
|
|
|
|
|
|
|
|
#menubar .left{
|
|
|
|
float:left;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#menubar .right{
|
|
|
|
float: right;
|
2020-12-07 23:57:48 +01:00
|
|
|
-webkit-app-region: no-drag;
|
2020-12-05 21:08:32 +01:00
|
|
|
}
|
|
|
|
|
2020-12-07 23:57:48 +01:00
|
|
|
#menubar .right li,
|
|
|
|
#menubar .left li {
|
2020-12-05 21:08:32 +01:00
|
|
|
display: inline-block;
|
2020-12-07 23:57:48 +01:00
|
|
|
height:28px;
|
2020-12-05 21:08:32 +01:00
|
|
|
}
|
|
|
|
|
2020-12-07 23:57:48 +01:00
|
|
|
#menubar .right li:hover,
|
|
|
|
#menubar .left li:hover {
|
2020-12-05 21:08:32 +01:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
2020-12-07 23:57:48 +01:00
|
|
|
|
2020-12-05 21:08:32 +01:00
|
|
|
#minimize-btn:hover,
|
|
|
|
#max-unmax-btn:hover{
|
|
|
|
background-color: rgb(55, 55, 55);
|
|
|
|
transition: 0.3s background-color ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
#close-btn:hover{
|
|
|
|
background-color:red;
|
|
|
|
transition: 0.3s background-color ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.material-icons{
|
|
|
|
position: relative;
|
|
|
|
top: 2px;
|
2020-12-07 23:57:48 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#content{
|
|
|
|
display: flex;
|
|
|
|
height:100%;
|
|
|
|
padding-top:28px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#sidebar{
|
|
|
|
flex:20%;
|
|
|
|
background-color: rgb(43, 43, 43);
|
|
|
|
color: white;
|
|
|
|
padding:5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#sidebar input[type="text"],
|
|
|
|
#sidebar input[type="password"]{
|
|
|
|
width:95%;
|
|
|
|
padding: 5px 2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type="submit"] {
|
|
|
|
padding: 5px;
|
|
|
|
width: 70%;
|
|
|
|
height: 25px;
|
|
|
|
margin: 10px 15%;
|
|
|
|
background-color: white;
|
|
|
|
border: 1px solid lightgrey;
|
|
|
|
transition: background 0.1s linear, border 0.2s;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main{
|
|
|
|
flex: 80%;
|
|
|
|
background-color: rgb(216, 216, 216);
|
|
|
|
padding: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#main-img {
|
|
|
|
height:100%;
|
|
|
|
width:100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
margin-block-end: 0.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
#launch{
|
|
|
|
position: absolute;
|
|
|
|
bottom:0;
|
|
|
|
right:0;
|
|
|
|
width:80%;
|
|
|
|
height:70px;
|
|
|
|
background-color:rgb(49, 49, 49);
|
|
|
|
}
|
|
|
|
|
|
|
|
#launch-btn {
|
|
|
|
position: relative;
|
|
|
|
top: -25px;
|
|
|
|
left:50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
width: 20%;
|
|
|
|
max-width:200px;
|
|
|
|
height:50px;
|
|
|
|
padding:10px;
|
|
|
|
text-align: center;
|
|
|
|
color:white;
|
|
|
|
font-weight: bold;
|
|
|
|
font-size:1.2rem;
|
|
|
|
background-color: green;
|
|
|
|
border: 1px solid black;
|
|
|
|
border-radius: 3px;
|
2020-12-05 21:08:32 +01:00
|
|
|
}
|