index.css

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 20px;
    box-sizing: border-box;
}
input{display: inline-block;width: 100%;
background-color: #585858;}
input:focus {outline:none;}
ul{list-style: none;}
.bd{border:1px solid red;}
/* body{
    background-color: gray;
    overflow: hidden;
} */
main{
    display: flex;
    position: relative;
    width: 100%;
    height: 800px;
    flex-direction: row;
    color: white;
    /* overflow: hidden; */
}
.left, .right{
    position: relative; /*for quicksearch box*/
    display: flex;
    flex-direction: column;
    width: 50%;
    /* height: 100%; */
    background-color: #272822;
    /* z-index: 2; */
}
.left{
    border-right: 2px solid gray;
}
.right{
    /* right: -2px; */
    border-left: 2px solid gray;
}
section{
    /* position: fixed; */

    top: 62px;
    /* bottom: 31px; */
    height: 707px;  /* 1000-31*3 */
    /* width: 50%; */
    overflow-y: auto;   
    overflow-x: hidden; 
    /* z-index: 1; */
    
}
/* section:first-child{
    left: 0px;
}
section:last-child{
    right: 0px;
} */
header{
    height:62px;
    /* position: fixed; */
    /* top: 0; */
    background-color: #303030;
    /* z-index: 100; */
}
/* .left header{
    left: 0;
    width: 50%;
}
.right header{
    right: -5px;
    width: 50%;
} */
#leftdir,#rightdir{
    height: 31px;
    line-height: 31px;
    padding: 0 5px;
    color: white;
    font-size: 16px;
    white-space:nowrap;
}
.inflist{
    height: 31px;
    line-height: 31px;
    width: 100%;
    color: white;
}
.nameheader,.sizeheader{
    border-right: 1px groove #000;
    /* background-color: #2c2d27; */
}
header table{
    background-color: #2c2d27;
    border-top: 1px groove #000;
    border-bottom: 1px groove #000;
}
.nameleft,.nameright,.nameheader{
    width: 50%; 
    overflow: hidden; 
    word-break:break-all;
}
/* .filelist:hover,. */
tableheader:hover{
    background-color: #49483e;
    cursor: default;
}
.size,.sizeheader{
    width: 20%;
    overflow: hidden;}
.date,.dateheader{
    width: 30%;
    overflow: hidden;}
tr,td,table,header{box-sizing: border-box;}
tr{
    display: flex;
    flex-direction: row;
    flex-basis: 10;
    width: 100%;
}
td{
    display: block;
    font-size: 16px;
    padding-left: 5px;
    height: 31px;
}
footer{
    background-color: #585858;
    /* position: fixed; */
    /* bottom: 0; */
    /* display: block; */
    /* width: 50%; */
    height: 31px;
    line-height: 31px;
    font-size: 16px;
    padding-left: 5px;
    color: white;
    /* z-index: 110; */
}
/* .right footer{
    right: -5px;
} */

.quicknavleft,.quicknavright{
    position: absolute;
    bottom: 36px;
    height: 31px;
    border: 1px solid gray;
    background-color: #585858;
    line-height: 31px;
    width: 100px;
    right: 5px;
}
.quicknavleft input,.quicknavright input{
    color: white;
}
::-webkit-scrollbar  
{  
    width: 10px;   

    color: red;
}  
  
::-webkit-scrollbar-track  
{  
    /* box-shadow: inset 0 0 6px rgba(0,0,0,0.3);   */
    /* border-radius: 10px;   */
    background-color: #303030;
}  
  

::-webkit-scrollbar-thumb  
{  
    border-radius: 2px; 
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: gray;  
    border: 1px solid gray;
}  
.hide{display: none;}

.quickcmd{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-color: red; */
}
.cmdmain{
    margin: 100px auto;
    width: 600px;
    box-shadow: 0 5px 20px black;
    background-color: #404040;
    
}
.cmdheader{
    padding: 5px;
    background-color: white;
}
.cmdheader input{
    width: 100%;
    background-color: white;
}
.cmdcontent span{
    padding: 0 5px;
}
.cmdcontent li:hover{
    background-color: #616161;
}
.highlight {
    background-color: #49483e;
}