style.css

/*
作者:D.Young
主页：https://blog.5iux.cn/
github：https://github.com/5iux/5iux.github.io
日期：2020-09-24
版权所有，请勿删除
*/
body{ font-size: 14px; background: #f4f8fb; }
svg.icon { width: 14px; height: 14px; margin: 0 5px 0 8px; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
/* --- search --- */
#search{width:100%;margin:150px auto 60px; padding: 0px;}
#search form{position:relative}
#search-text{width:100%;height:50px; line-height: 50px; text-indent: 10px; font-size:16px;border-radius:5px;background-color:#fff; border:none; box-shadow: 0 0.5rem 0.625rem #d4d4d44d;transition: 0.3s all linear;}
#search-text:focus{background: #fff; box-shadow: 0 0px 24px 0 rgba(50, 50, 50, 0.08); border-color: #fff; }
#search button{position:absolute;top:0;right:0;background:none;border:0; border-radius:20px;width:60px;height:36px;margin:7px 0 0;line-height:36px;border-radius:3px; outline: none;}
#search button:hover{cursor:pointer}
#search button i{color:#ddd;font-size:18px}
.search-group{display:none;padding-left:75px}
.s-current .search-type{padding-left:0;display:block}
.s-current{display:block}
#search-list{position:relative}
.s-type{position:absolute;top:0;left:0;z-index:13;width:75px}
.s-type:hover{height:auto}
.s-type>span{display:block;height:31px;width:75px}
.s-type-list{display:none;position:absolute;top:31px;padding:9pt 0;width:70px;background:#fff;border-radius:5px;box-shadow:0 9px 20px rgba(0,0,0,.16)}
.s-type-list:before{position:absolute;top:-1pc;left:20px;content:'';display:block;width:0;height:0;border:10px solid transparent;border-bottom-color:#fff}
.s-type-list label{display:block;font-size:15px;text-align:center;font-weight:normal;margin-bottom:0;padding:2px 0;cursor:pointer;transition:.3s}
.s-type-list label:hover{background:rgba(136,136,136,.1)}
.s-type-list .tile-lg{color:#fff;width:3pc;height:3pc;font-size:1.25rem;line-height:3rem;border-radius:.3rem;display:block;margin:auto}
.s-type:hover .s-type-list{display:block}
.type-text{position:absolute;left:0;width:75px;padding-left:9pt;font-size:1pc;line-height:31px}
/*.type-text:after{content:"\f105";font-family:FontAwesome;margin:0 0 0 15px}*/
.search-type{white-space:nowrap;margin:0}.search-type label{margin:0}
.search-type li{display:inline-block}
.search-type li label{display:inline-block;padding:0 11px;font-size:14px;line-height:31px;border-radius:3px 3px 0 0;cursor:pointer}
.search-type input:checked+label,.search-type input:hover+label{background-color:#fff;box-shadow: -6px 10px 20px #eee}
#search-text::-webkit-input-placeholder {color: #bbb;}
.set-check{margin-top:3px;font-size:9pt}.set-check label{margin-left:3px}
.set-check input,.set-check label{opacity:0;transition:all .3s ease}
.search-type li{list-style:none;display:inline-block}
.mylist{list-style: none; padding:30px 20px; margin: 40px 0; border-radius: 5px; background: #fff; box-shadow: 0 0.5rem 0.625rem #d4d4d44d}
.mylist li{ min-width: 105px; margin:10px 0 0;  font-size: 14px; overflow: hidden; padding: 0;}
.mylist li a {  color: #555;}
.mylist li.title{width: auto; min-width: auto; margin: 0; position: absolute; margin-top: -50px; background: #29f; color: #fff; height: 35px; font-size: 16px; line-height: 33px; border-radius: 20px; box-shadow: 0 0.5rem 0.625rem #2299ff4d; padding: 0 20px 0 10px;}
.mylist li.title .icon{color: #fff;}
@media screen and (min-width:1200px){
    .mylist li{ min-width: 118px;}

}
@media screen and (max-width: 992px){
    #he-plugin-simple{ overflow: hidden ; }
}
@media screen and (max-width:767px){
    #search{margin:25px auto 15px}
    .s-type-list label{padding:5px 0}
    .search-type{overflow:hidden}
    .search-list{height:30px;overflow-y:hidden;overflow-x:scroll;white-space:nowrap}
}



::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: #29f;
}

::-webkit-scrollbar-corner {
    background: #ccc;
}