machete/www/css/beauty.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0;font-size:14px}
.clearfix{zoom:1}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;overflow:hidden;height:0px}
body{position:relative;font-family: 微軟正黑體;
	word-break: break-all;
	word-wrap: break-word;background-color:#FFF;font-size:14px;line-height:1.428571429}
ul,li{list-style:none;margin:0;padding:0}
img,span{display:inline-block;max-width:100%}
a{color:#464c5c}
.markdown-body ul li{list-style:disc}
.markdown-body ol li{list-style:number}

.img-responsive{max-width:100%;display:block}
.elementBlock{display:block !important}
.elementNone{display:none !important}
.elementhidden{visibility:hidden !important}
.verMiddle{vertical-align:middle !important}
.vercenter{text-align:center !important}
.verbold{font-weight:bold !important}
.opacityshow{opacity:1 !important}
.qcmargin{margin:0 !important}
a:hover{text-decoration:none}
a:active{text-decoration:none}
a:visited{text-decoration:none}
a:link{text-decoration:none}

.lampshow{background-color:#222}
.main_style{padding-top:64px;overflow:hidden}
.navbar-default {
    background-color:#FFF;
}
.navbar .navbar-brand {
    font-family: Brush Script MT;
    font-weight: normal;
    color: #c7b9b9;
    font-size: 21px;
    line-height: 21px;
    padding:0 14px 0 13px;
    height:auto;
    margin-top:10px;
    text-shadow:1px 1px 0 rgb(122 122 122),
        1px 1px 5px rgb(183 183 183 / 80%);
}
.navbar .navbar-brand img{width:30px;display:inline-block}
.navbar .navbar-toggle{padding:0;border:none;margin-top:10px}
.navbar .mr_button{border:none;background:none}
.svgimg{width:2em;height:2em;vertical-align:middle;fill: currentColor;overflow: hidden}
.svgimg2{width: 1.8em;height: 1.8em}
.navbar .svg{cursor:pointer;color: #6c6c6c}
.navbar .svg:hover{color:#000}
.navbar .navbar-toggle:focus,
.navbar .navbar-toggle:hover{background:none}
.nb_right{padding:10px 13px 0 0}
.nb_right .iconr2{margin:3px 0 0 10px}

.navbar-fixed-left{
    position: fixed;
    left: 0;
    top: 52px;
    bottom: 0;
    width: 160px;
    background-color: #FFF;
    overflow-y: auto;
    z-index: 1000;
    padding-bottom:3em;
    padding-top:10px;
}
.navbar-fixed-left .active a{background-color:#e7e7e7;color:#555}
.lampshow .navbar-fixed-left{background-color:#222}
.lampshow .navbar-fixed-left a{color:#DDD}
.lampshow .navbar-fixed-left .active a{background-color:#e7e7e7;color:#555}
.lampshow .navbar-fixed-left a:hover{background-color:#CCC;color:#444}

.img_main{min-height:510px;margin-left:160px}
.im_mainl{margin:0 10px 12px 10px}
.bor_radius{border-radius:10px}
.im_img{transform:scale(1);transition:all 0.5s ease;object-fit:cover;display:block;width:100%;height:100%}
.im_img:hover{transform:scale(1.03)}
.im_item{padding:5px;height:16vw;overflow:hidden}
.im_item>a{overflow: hidden;display:block;position:relative;width: 100%;height: 100%}
.im_img_title{background:rgba(7, 7, 7, .1);position:absolute;left:0;right:0;bottom:0;top:0;color:#EEE;border-radius:10px}
.im_img_title .folder_title{position:absolute;bottom:10px;left:10px;margin-right:10px;font-weight:bold;padding:3px;border:solid 1px #444;border-radius:6px;font-size:13px;background-color:#333;opacity:0.7}
.im_img_title .right-bottom{position:absolute;left:auto;right:5px;bottom:5px;margin-right:0;padding:0 2px;font-size:11px;border:0 none;font-weight:300;color:#CCC}
.im_img_title img{vertical-align:bottom}
.im_item:hover .im_img{transform:scale(1.03)}
.im_item:hover .im_img_title,.im_item:hover .im_img_title .right-bottom{color:#FFF}
.im_item .btn-set-snap{display:none;position:absolute;top:5px;right:5px;opacity:0.8}
.im_item:hover .btn-set-snap{display:inline-block}


.navbar-fixed-left .expand-icon{position:fixed;top:58px;left:130px;cursor:pointer;padding:5px}
.navbar-fixed-left.closed{width:28px;overflow:hidden}
.navbar-fixed-left.closed li{display:none}
.navbar-fixed-left.closed li.expand-icon{display:block;left:5px}
.expand-icon img{background-color:#FFF;border-radius:9px;border:1px solid #FFF}
.img_main.full{margin-left:28px}

.locked_dir{position:absolute;right:3px;top:5px}

.web_info{padding:10px 0 42px 0;margin-top:75px;border-top:solid 1px #f5f5f5}
.web_info p{color:#808080;font-size:13px;margin:5px 0}
.web_info a{text-decoration: underline;color:#808080}
.web_info a:hover{color:#000}

.btrt_side{position:fixed;bottom:48px;right:16px;transition:all 0.5s ease}
.btrt_side_ul li{margin-top:4px;color:#878686;cursor:pointer;width:38px;height: 38px;line-height:38px;border-radius:50%;text-align:center;background-color:#f5f5f5}
.btrt_side_ul li:hover{background:rgba(209, 209, 209, 1);color:#3e3d3d}
.scroll_top{display:none}
.btrt_side_ul .svg{width:18px;cursor:pointer}
.btrt_side_ul .icon3{width:26px}

/* 音乐相关 */
.music_put{animation:musicTurn 3s linear infinite}

.blank_cover{transition: all 0.5s ease;position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0, 0, 0, .7);opacity:0;z-index: 1099}
.right_sidebox{padding:15px 10px 15px 18px;opacity:0;transform:translateX(101%);background-color:#FFF;position:fixed;right:0;top:0;bottom:0;color:#333;width:396px;overflow-y:auto;max-width:100%;z-index:1100}
.right_sidebox>h5{display:flex;padding:15px 0 10px 0;border-bottom:solid 1px #e9e2e2;margin-bottom:20px}
.right_sidebox>h5 span{font-size:20px;font-weight:bold;flex: 1}
.right_sidebox .link{text-decoration: underline;color:#457fc1}
.right_sidebox .sort1{font-size:16px;font-weight:bold;margin-top:10px}
.right_sidebox p{margin:5px 0}
.right_sidebox .codeimg{width:48%}
.sideboxShow{animation:bounceInRight 0.5s ease forwards}

.page_meta{padding:10px 0 0 0}
.page_meta .breadcrumb{background:none;display: inline-block;padding:8px 0 8px 0;margin:0}
.breadcrumbs{padding-left:1.5em;padding-bottom:10px;font-size:13px}
.breadcrumbs small{font-size:13px}
.breadcrumbs .total{padding-right:10px}

.gap-hr{position:relative}
.gap-hr .btn-dir-ext{position:absolute;left:50%;top:50%;margin-top:-11px;margin-left:-26px}
.gap-hr .btn-dir-ext img{width:13px;vertical-align:text-bottom}

#qrimg{width:160px;height:160px;margin:0 auto 20px auto;background-color:#FFF;padding:5px;border:1px solid #EEE;border-radius:5px;overflow:hidden}

.videoplayer{max-width:800px;margin:0 auto;text-align:center}
.videoplayer video{width:100%}
.videotitle{max-width:600px;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}
.playbtn{width:50px;height:50px;position:absolute;left:50%;top:50%;margin-top:-25px;margin-left:-25px;opacity:0.75}
.duration{position:absolute;left:5px;bottom:5px;background-color:#222;padding:0 3px;opacity:0.7;border-radius:3px;font-size:12px;color:#FFF;text-align:center}
.video_previewer{display:none;position:fixed;right:4px;bottom:4px;width:200px;height:112px;overflow:hidden;z-index:1000}

.othervideos{max-height:560px;overflow-y:auto;padding:4px}
.othervideos .im_item{height:11vw}
.btn_autoplay{margin:5px 5px 10px 5px}

.audio-list-item .im_img_title{background:none}
.audio-list-item .im_img{width:86%;height:86%;margin:0 auto}
.audio-list-item .title{margin-top:5px;color:#444;text-wrap:nowrap;white-space:nowrap;text-overflow:ellipsis}
.audio-list-item .duration{bottom:17.5%;left:50%;width:56px;margin-left:-28px}
.audiolist{max-width:600px;margin:0 auto;min-height:560px}
.audiolist .othervideos{max-height:inherit}
.audio-item{background:rgba(7, 7, 7, .1);padding:5px;border-radius:5px;margin:0 5px;position:relative;cursor:pointer}
.audio-item:hover{background-color:#CCC}
.audio-item a{display:block;min-height:60px}
.audio-item img{float:left;width:60px;height:60px}
.audio-item .title{display:block;margin-left:70px}
.audio-item .duration{width:52px;overflow:hidden;margin-left:4px;bottom:4px;font-size:11px}
.audioplayer{position:fixed;left:0;right:0;bottom:0;z-index:1000;height:120px;overflow:hidden;background-color:#000}
.audioplayer .videoplayer{max-width:460px;height:120px;overflow:hidden;opacity:0.85}
.audioplayer .downloadbtn{width:96px;margin:81px auto 0 auto}

.mt-3{margin-top:3em}
.mt-2{margin-top:2em}
.mt-1{margin-top:1em}
.mr-1{margin-right:1em}
.ml-1{margin-left:1em}
.ml-2{margin-left:2em}
.mb-1{margin-bottom:1em}

.simple-form{max-width:480px;margin:0 auto}


/* 主题切换 */
.lampshow .web_info{border-color:#363636}
.lampshow .btrt_side_ul li{background-color:#181818}
.lampshow .right_sidebox{background-color:#222;color:#FFF}
.lampshow .right_sidebox>h5{border-color: #363636}
.lampshow .text_dark{color:#808080}
.lampshow .text_dark a, .lampshow .nav-tabs a{color:#f4f7fd}
.lampshow .nav-tabs a:hover{background-color:#CCC;color:#444}
.lampshow .othervideos{background-color:inherit}
.lampshow .btn-default{background-color:#EEE}
.lampshow .audio-item{background-color:#333}
.lampshow .audio-item:hover{background-color:#444}
.lampshow .audio-item .title{color:#999}
.lampshow .audio-list-item .im_img{opacity:0.65}
.lampshow .audio-list-item .title{color:#999}


@media screen and (max-width: 1199px) {
    .im_item {
        height: 23vw;
    }
}

@media screen and (max-width: 991px) {
    .im_item {
        height: 32vw;
    }
}

@media screen and (max-width: 767px) {
    .im_item {
        height: 45vw;
    }
    .othervideos .im_item{height:34vw}
    .audioplayer .videoplayer{max-width:100%}
    .audioplayer .downloadbtn{width:30px;padding:3px 0;margin:0;position:absolute;top:5px;right:5px}

    .hidden-xs{display:none}
    .navbar-fixed-left,.navbar-fixed-left.closed,.versioninfo{position:static;width:100%}
    .navbar-fixed-left.closed li{display:block}
    .img_main, .img_main.full{margin-left:0}
    .pagination>li>a, .pagination>li>span{padding:3px 7px}
    .videotitle{max-width:52%}
    .othervideos{max-height:inherit}
}

@keyframes musicTurn {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}
@keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}