diff --git a/src/css/app.css b/src/css/app.css index cf967b8..edae558 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1 +1 @@ -.do-mod-app{position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff}.do-mod-app .title-bar{position:relative;z-index:9;display:flex;flex:0 5rem}.do-mod-app .title-bar .btn-box{position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0}.do-mod-app .title-bar .btn-box .item{display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(../images/btn-grey.svg) no-repeat;background-size:cover}.do-mod-app .title-bar .btn-box.focus .quit{background-image:url(../images/btn-close.svg)}.do-mod-app .title-bar .btn-box.focus .min{background-image:url(../images/btn-mini.svg)}.do-mod-app .title-bar .btn-box:hover .quit{background-image:url(../images/btn-close_a.svg)}.do-mod-app .title-bar .btn-box:hover .min{background-image:url(../images/btn-mini_a.svg)}.do-mod-app .title-bar .btn-box-win{position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}.do-mod-app .title-bar .btn-box-win .item,.do-mod-app .title-bar .btn-box-win .opt{position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem}.do-mod-app .title-bar .btn-box-win .item{text-align:center}.do-mod-app .title-bar .btn-box-win .item:hover{background:rgba(0,0,0,0.05)}.do-mod-app .title-bar .btn-box-win .item.quit:hover{color:#ff5061}.do-mod-app .title-bar .btn-box-win .item.disabled{color:#dae1e9;background:none}.do-mod-app .title-bar .btn-box-win .opt i{font-size:1.8rem}.do-mod-app .title-bar .btn-box-win .opt-list{position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.1);font-size:1.4rem}.do-mod-app .title-bar .btn-box-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}.do-mod-app .title-bar .btn-box-win .opt-list span i{padding-right:.8rem}.do-mod-app .title-bar .btn-box-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-app .title-bar .btn-box-win .opt-list span:hover{background:#f3f5fb}.do-mod-app .title-bar .holder{flex:0 22rem;height:100%;background:#f3f5fb}.do-mod-app .title-bar .tools{flex:1;padding:1rem}.do-mod-app .title-bar .tools .search{position:relative;display:inline-block;line-height:3rem}.do-mod-app .title-bar .tools .icon{position:absolute;right:0;top:0;width:2.6rem;height:3rem}.do-mod-app .title-bar .tools input{width:20rem;padding:0 1.3rem;border-radius:1.5rem}.do-mod-app .main-body{flex:1;display:flex}.do-mod-app .main-body .sidebar{flex:0 22rem;position:relative;height:100%;background:#f3f5fb}.do-mod-app .main-body .sidebar .user-box{width:18rem;height:16.5rem;margin:0 2rem;text-align:center}.do-mod-app .main-body .sidebar .user-box .avatar{overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.15)}.do-mod-app .main-body .sidebar .user-box img{width:100%;height:100%}.do-mod-app .main-body .sidebar .user-box .uname{line-height:2;font-weight:normal}.do-mod-app .main-body .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}.do-mod-app .main-body .sidebar .music-box dt.title{line-height:4rem;color:#98acae}.do-mod-app .main-body .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#748182}.do-mod-app .main-body .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}.do-mod-app .main-body .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}.do-mod-app .main-body .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}.do-mod-app .main-body .sidebar .music-box dd.item.disabled{opacity:.25}.do-mod-app .main-body .module{position:relative;flex:1;display:flex;flex-flow:column wrap}.do-mod-app .contrl-bar{position:relative;z-index:99;display:flex;flex:0 8rem;background:#f3f5fb}.do-mod-app .contrl-bar .play-box{flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center}.do-mod-app .contrl-bar .play-box .item{flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:#19b491;transition:all .2s ease-in-out}.do-mod-app .contrl-bar .play-box .item:hover{color:#ffb618}.do-mod-app .contrl-bar .play-box .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .contrl-bar .play-box .play{font-size:5rem}.do-mod-app .contrl-bar .stat-box{position:relative;flex:1;display:flex;justify-content:center;align-items:center}.do-mod-app .contrl-bar .stat-box .song-stat{flex:1;height:8rem;margin:0 2rem 0 0}.do-mod-app .contrl-bar .stat-box .song-stat canvas{display:flex;width:100%;height:100%}.do-mod-app .contrl-bar .stat-box .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}.do-mod-app .contrl-bar .stat-box .ctrl:hover{color:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl:active{color:#16967a}.do-mod-app .contrl-bar .stat-box .ctrl.lrc{margin-right:2rem;font-size:1.6rem}.do-mod-app .contrl-bar .stat-box .ctrl .volume-ctrl{display:none;flex-direction:column;justify-content:flex-end;position:absolute;left:.5rem;bottom:3rem;width:2.4rem;height:12rem;padding:1rem .8rem;background:#fff;border-radius:.3rem;box-shadow:0 0 1rem rgba(0,0,0,0.1)}.do-mod-app .contrl-bar .stat-box .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl.volume:hover .volume-ctrl{display:flex}.do-mod-app.blur{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-app.blur .title-bar .holder{background:rgba(255,255,255,0.3)}.do-mod-app.blur .title-bar .tools input{background:rgba(255,255,255,0.8)}.do-mod-app.blur .main-body .sidebar{background:rgba(255,255,255,0.3)}.do-mod-app.blur .contrl-bar{background:rgba(255,255,255,0.35)}.do-mod-app.ktv .contrl-bar{background:rgba(233,233,233,0.1)}.do-mod-app.ktv .contrl-bar .play-box .item,.do-mod-app.ktv .contrl-bar .stat-box .ctrl{color:#fff}.do-mod-app.ktv .contrl-bar .play-box .item:hover,.do-mod-app.ktv .contrl-bar .stat-box .ctrl:hover{color:#ff5061}.do-mod-app .ktv-box{overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:#425064;background-size:cover;background-repeat:no-repeat;color:#fff}.do-mod-app .ktv-box .inner-content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29,35,44,0.767);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-app .ktv-box .inner-content .info{flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2}.do-mod-app .ktv-box .inner-content .info img{width:30rem;height:30rem;border:0.5rem solid rgba(255,255,255,0.5);border-radius:50%}.do-mod-app .ktv-box .inner-content .info .summary{flex:1;padding:0 5rem}.do-mod-app .ktv-box .inner-content .info pre{overflow:auto;height:30rem}.do-mod-app .ktv-box .inner-content .info h3{line-height:3;font-size:1.8rem}.do-mod-app .ktv-box .inner-content .lrc-box{flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}.do-mod-app .ktv-box .inner-content .lrc-box section{flex:1;display:flex}.do-mod-app .ktv-box .inner-content .lrc-box section.left{justify-content:flex-start}.do-mod-app .ktv-box .inner-content .lrc-box section.right{justify-content:flex-end}.do-mod-app .ktv-box .inner-content .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}.do-mod-app .ktv-box .inner-content .tool-box{position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255,255,255,0.1);border-radius:.3rem 0 0 .3rem;opacity:.3;-webkit-transform:translateX(8.8rem);transform:translateX(8.8rem);transition:all .2s ease-in-out}.do-mod-app .ktv-box .inner-content .tool-box .item{height:3.4rem;padding:0 .8rem;line-height:3.4rem}.do-mod-app .ktv-box .inner-content .tool-box .item:hover{background:rgba(255,255,255,0.1)}.do-mod-app .ktv-box .inner-content .tool-box i{padding:0 1rem 0 .8rem}.do-mod-app .ktv-box .inner-content .tool-box:hover{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.do-mod-app .ktv-box .inner-content .search-box{display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29,35,44,0.5);-webkit-backdrop-filter:blur(0.4rem);backdrop-filter:blur(0.4rem)}.do-mod-app .ktv-box .inner-content .search-box .content{width:60rem;height:auto;padding:2rem;background:rgba(255,255,255,0.8);color:#62778d}.do-mod-app .ktv-box .inner-content .search-box .content .title{height:3rem;line-height:2rem;font-size:1.4rem;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .title i{float:right;font-size:2rem;color:#ff5061}.do-mod-app .ktv-box .inner-content .search-box .content .section{height:3.5rem}.do-mod-app .ktv-box .inner-content .search-box .content .section input{width:100%}.do-mod-app .ktv-box .inner-content .search-box .content .result{overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255,255,255,0.2)}.do-mod-app .ktv-box .inner-content .search-box .content .result .item{display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .result .item:nth-child(1){line-height:2;border-bottom:0.1rem solid #98acae}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span{flex:1}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span:nth-child(1){flex:3}.do-mod-app .loading{position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.do-mod-app .loading .box{position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem}.do-mod-app .loading .box i{position:absolute;width:8rem;height:8rem;border:3px solid #3fc2a7;border-radius:50%;opacity:.5}.do-mod-app .loading .box i:nth-child(1){-webkit-animation:load 2.5s ease-in-out infinite;animation:load 2.5s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(2){-webkit-animation:load 2.5s .5s ease-in-out infinite;animation:load 2.5s .5s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(3){-webkit-animation:load 2.5s 1s ease-in-out infinite;animation:load 2.5s 1s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(4){-webkit-animation:load 2.5s 1.5s ease-in-out infinite;animation:load 2.5s 1.5s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(5){-webkit-animation:load 2.5s 2s ease-in-out infinite;animation:load 2.5s 2s ease-in-out infinite}.do-mod-app .loading .box span{position:absolute;width:8rem;height:8rem;background:url(../images/load1.png) no-repeat center center;background-size:cover}.do-mod-app .loading .box span:nth-child(6){-webkit-animation:play 1.5s linear infinite;animation:play 1.5s linear infinite}.do-mod-app .loading .box span:nth-child(7){background-image:url(../images/load2.png);-webkit-animation:load2 2.5s linear infinite;animation:load2 2.5s linear infinite}.do-mod-app .loading .box cite{font-size:2.4rem}.do-mod-contextmenu{width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem}.do-mod-contextmenu li{overflow:hidden;width:100%;height:35px;padding:0 10px;transition:background .2s ease-in-out;cursor:default}.do-mod-contextmenu li:hover{background:#f3f5fb}.do-mod-contextmenu li i{padding:0 3px;font-size:1.6rem;vertical-align:bottom}.do-layer .layer-box.do-mod-contextmenu__fixed{padding:0}@-webkit-keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-webkit-keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} +.do-mod-app{position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff}.do-mod-app .title-bar{position:relative;z-index:9;display:flex;flex:0 5rem}.do-mod-app .title-bar .btn-box{position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0}.do-mod-app .title-bar .btn-box .item{display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover}.do-mod-app .title-bar .btn-box.focus .quit{background-image:url(/images/btn-close.svg)}.do-mod-app .title-bar .btn-box.focus .min{background-image:url(/images/btn-mini.svg)}.do-mod-app .title-bar .btn-box:hover .quit{background-image:url(/images/btn-close_a.svg)}.do-mod-app .title-bar .btn-box:hover .min{background-image:url(/images/btn-mini_a.svg)}.do-mod-app .title-bar .btn-box-win{position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem}.do-mod-app .title-bar .btn-box-win .item,.do-mod-app .title-bar .btn-box-win .opt{position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem}.do-mod-app .title-bar .btn-box-win .item{text-align:center}.do-mod-app .title-bar .btn-box-win .item:hover{background:rgba(0,0,0,0.05)}.do-mod-app .title-bar .btn-box-win .item.quit:hover{color:#ff5061}.do-mod-app .title-bar .btn-box-win .item.disabled{color:#dae1e9;background:none}.do-mod-app .title-bar .btn-box-win .opt i{font-size:1.8rem}.do-mod-app .title-bar .btn-box-win .opt-list{position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 0.5rem 2rem rgba(0,0,0,0.1);font-size:1.4rem}.do-mod-app .title-bar .btn-box-win .opt-list span{display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem}.do-mod-app .title-bar .btn-box-win .opt-list span i{padding-right:.8rem}.do-mod-app .title-bar .btn-box-win .opt-list span.pipe{height:.1rem;margin:.5rem 0;border-bottom:0.1rem solid #f3f5fb}.do-mod-app .title-bar .btn-box-win .opt-list span:hover{background:#f3f5fb}.do-mod-app .title-bar .holder{flex:0 22rem;height:100%;background:#f3f5fb}.do-mod-app .title-bar .tools{flex:1;padding:1rem}.do-mod-app .title-bar .tools .search{position:relative;display:inline-block;line-height:3rem}.do-mod-app .title-bar .tools .icon{position:absolute;right:0;top:0;width:2.6rem;height:3rem}.do-mod-app .title-bar .tools input{width:20rem;padding:0 1.3rem;border-radius:1.5rem}.do-mod-app .main-body{flex:1;display:flex}.do-mod-app .main-body .sidebar{flex:0 22rem;position:relative;height:100%;background:#f3f5fb}.do-mod-app .main-body .sidebar .user-box{width:18rem;height:16.5rem;margin:0 2rem;text-align:center}.do-mod-app .main-body .sidebar .user-box .avatar{overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.15)}.do-mod-app .main-body .sidebar .user-box img{width:100%;height:100%}.do-mod-app .main-body .sidebar .user-box .uname{line-height:2;font-weight:normal}.do-mod-app .main-body .sidebar .music-box{width:100%;height:auto;padding:0 1.5rem}.do-mod-app .main-body .sidebar .music-box dt.title{line-height:4rem;color:#98acae}.do-mod-app .main-body .sidebar .music-box dd.item{height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:#748182}.do-mod-app .main-body .sidebar .music-box dd.item .icon{float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem}.do-mod-app .main-body .sidebar .music-box dd.item:hover{padding-left:.9rem;color:#3fc2a7}.do-mod-app .main-body .sidebar .music-box dd.item.active{border-radius:.3rem;background:#3fc2a7;color:#fff}.do-mod-app .main-body .sidebar .music-box dd.item.disabled{opacity:.25}.do-mod-app .main-body .module{position:relative;flex:1;display:flex;flex-flow:column wrap}.do-mod-app .contrl-bar{position:relative;z-index:99;display:flex;flex:0 8rem;background:#f3f5fb}.do-mod-app .contrl-bar .play-box{flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center}.do-mod-app .contrl-bar .play-box .item{flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:#19b491;transition:all .2s ease-in-out}.do-mod-app .contrl-bar .play-box .item:hover{color:#ffb618}.do-mod-app .contrl-bar .play-box .item:active{color:#3fc2a7;-webkit-transform:scale(1.1);transform:scale(1.1)}.do-mod-app .contrl-bar .play-box .play{font-size:5rem}.do-mod-app .contrl-bar .stat-box{position:relative;flex:1;display:flex;justify-content:center;align-items:center}.do-mod-app .contrl-bar .stat-box .song-stat{flex:1;height:8rem;margin:0 2rem 0 0}.do-mod-app .contrl-bar .stat-box .song-stat canvas{display:flex;width:100%;height:100%}.do-mod-app .contrl-bar .stat-box .ctrl{position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:#19b491;font-size:2rem}.do-mod-app .contrl-bar .stat-box .ctrl:hover{color:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl:active{color:#16967a}.do-mod-app .contrl-bar .stat-box .ctrl.lrc{margin-right:2rem;font-size:1.6rem}.do-mod-app .contrl-bar .stat-box .ctrl .volume-ctrl{display:none;flex-direction:column;justify-content:flex-end;position:absolute;left:.5rem;bottom:3rem;width:2.4rem;height:12rem;padding:1rem .8rem;background:#fff;border-radius:.3rem;box-shadow:0 0 1rem rgba(0,0,0,0.1)}.do-mod-app .contrl-bar .stat-box .ctrl .volume-ctrl em{flex:0 0;border-radius:.5rem;background:#3fc2a7}.do-mod-app .contrl-bar .stat-box .ctrl.volume:hover .volume-ctrl{display:flex}.do-mod-app.blur{background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-app.blur .title-bar .holder{background:rgba(255,255,255,0.3)}.do-mod-app.blur .title-bar .tools input{background:rgba(255,255,255,0.8)}.do-mod-app.blur .main-body .sidebar{background:rgba(255,255,255,0.3)}.do-mod-app.blur .contrl-bar{background:rgba(255,255,255,0.35)}.do-mod-app.ktv .contrl-bar{background:rgba(233,233,233,0.1)}.do-mod-app.ktv .contrl-bar .play-box .item,.do-mod-app.ktv .contrl-bar .stat-box .ctrl{color:#fff}.do-mod-app.ktv .contrl-bar .play-box .item:hover,.do-mod-app.ktv .contrl-bar .stat-box .ctrl:hover{color:#ff5061}.do-mod-app .ktv-box{overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:#425064;background-size:cover;background-repeat:no-repeat;color:#fff}.do-mod-app .ktv-box .inner-content{display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29,35,44,0.767);-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem)}.do-mod-app .ktv-box .inner-content .info{flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2}.do-mod-app .ktv-box .inner-content .info img{width:30rem;height:30rem;border:0.5rem solid rgba(255,255,255,0.5);border-radius:50%}.do-mod-app .ktv-box .inner-content .info .summary{flex:1;padding:0 5rem}.do-mod-app .ktv-box .inner-content .info pre{overflow:auto;height:30rem}.do-mod-app .ktv-box .inner-content .info h3{line-height:3;font-size:1.8rem}.do-mod-app .ktv-box .inner-content .lrc-box{flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}.do-mod-app .ktv-box .inner-content .lrc-box section{flex:1;display:flex}.do-mod-app .ktv-box .inner-content .lrc-box section.left{justify-content:flex-start}.do-mod-app .ktv-box .inner-content .lrc-box section.right{justify-content:flex-end}.do-mod-app .ktv-box .inner-content .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}.do-mod-app .ktv-box .inner-content .tool-box{position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255,255,255,0.1);border-radius:.3rem 0 0 .3rem;opacity:.3;-webkit-transform:translateX(8.8rem);transform:translateX(8.8rem);transition:all .2s ease-in-out}.do-mod-app .ktv-box .inner-content .tool-box .item{height:3.4rem;padding:0 .8rem;line-height:3.4rem}.do-mod-app .ktv-box .inner-content .tool-box .item:hover{background:rgba(255,255,255,0.1)}.do-mod-app .ktv-box .inner-content .tool-box i{padding:0 1rem 0 .8rem}.do-mod-app .ktv-box .inner-content .tool-box:hover{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.do-mod-app .ktv-box .inner-content .search-box{display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;z-index:82;width:100%;height:56rem;background:rgba(29,35,44,0.5);-webkit-backdrop-filter:blur(0.4rem);backdrop-filter:blur(0.4rem)}.do-mod-app .ktv-box .inner-content .search-box .content{width:60rem;height:auto;padding:2rem;background:rgba(255,255,255,0.8);color:#62778d}.do-mod-app .ktv-box .inner-content .search-box .content .title{height:3rem;line-height:2rem;font-size:1.4rem;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .title i{float:right;font-size:2rem;color:#ff5061}.do-mod-app .ktv-box .inner-content .search-box .content .section{height:3.5rem}.do-mod-app .ktv-box .inner-content .search-box .content .section input{width:100%}.do-mod-app .ktv-box .inner-content .search-box .content .result{overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255,255,255,0.2)}.do-mod-app .ktv-box .inner-content .search-box .content .result .item{display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center}.do-mod-app .ktv-box .inner-content .search-box .content .result .item:nth-child(1){line-height:2;border-bottom:0.1rem solid #98acae}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span{flex:1}.do-mod-app .ktv-box .inner-content .search-box .content .result .item span:nth-child(1){flex:3}.do-mod-app .loading{position:fixed;left:0;top:0;z-index:65536;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.do-mod-app .loading .box{position:relative;display:flex;justify-content:center;align-items:center;width:8rem;height:8rem}.do-mod-app .loading .box i{position:absolute;width:8rem;height:8rem;border:3px solid #3fc2a7;border-radius:50%;opacity:.5}.do-mod-app .loading .box i:nth-child(1){-webkit-animation:load 2.5s ease-in-out infinite;animation:load 2.5s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(2){-webkit-animation:load 2.5s .5s ease-in-out infinite;animation:load 2.5s .5s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(3){-webkit-animation:load 2.5s 1s ease-in-out infinite;animation:load 2.5s 1s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(4){-webkit-animation:load 2.5s 1.5s ease-in-out infinite;animation:load 2.5s 1.5s ease-in-out infinite}.do-mod-app .loading .box i:nth-child(5){-webkit-animation:load 2.5s 2s ease-in-out infinite;animation:load 2.5s 2s ease-in-out infinite}.do-mod-app .loading .box span{position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover}.do-mod-app .loading .box span:nth-child(6){-webkit-animation:play 1.5s linear infinite;animation:play 1.5s linear infinite}.do-mod-app .loading .box span:nth-child(7){background-image:url(/images/load2.png);-webkit-animation:load2 2.5s linear infinite;animation:load2 2.5s linear infinite}.do-mod-app .loading .box cite{font-size:2.4rem}.do-mod-contextmenu{width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem}.do-mod-contextmenu li{overflow:hidden;width:100%;height:35px;padding:0 10px;transition:background .2s ease-in-out;cursor:default}.do-mod-contextmenu li:hover{background:#f3f5fb}.do-mod-contextmenu li i{padding:0 3px;font-size:1.6rem;vertical-align:bottom}.do-layer .layer-box.do-mod-contextmenu__fixed{padding:0}@-webkit-keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes load{from{opacity:.5;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@-webkit-keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes load2{from{-webkit-transform:rotate(360deg);transform:rotate(360deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes play{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} diff --git a/src/css/app.scss b/src/css/app.scss index 26a6c9d..e566daa 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -15,16 +15,16 @@ .btn-box {position:absolute;left:1.2rem;top:0;width:auto;height:3rem;padding:.9rem 0; - .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(../images/btn-grey.svg) no-repeat;background-size:cover;} + .item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn-grey.svg) no-repeat;background-size:cover;} &.focus { - .quit {background-image:url(../images/btn-close.svg);} - .min {background-image:url(../images/btn-mini.svg);} + .quit {background-image:url(/images/btn-close.svg);} + .min {background-image:url(/images/btn-mini.svg);} // .max {background-image:url(/images/btn-maxi.svg);} } &:hover { - .quit {background-image:url(../images/btn-close_a.svg);} - .min {background-image:url(../images/btn-mini_a.svg);} + .quit {background-image:url(/images/btn-close_a.svg);} + .min {background-image:url(/images/btn-mini_a.svg);} // .max {background-image:url(/images/btn-maxi_a.svg);} } } @@ -261,10 +261,10 @@ &:nth-child(4) {animation:load 2.5s 1.5s ease-in-out infinite;} &:nth-child(5) {animation:load 2.5s 2s ease-in-out infinite;} } - span {position:absolute;width:8rem;height:8rem;background:url(../images/load1.png) no-repeat center center;background-size:cover; + span {position:absolute;width:8rem;height:8rem;background:url(/images/load1.png) no-repeat center center;background-size:cover; &:nth-child(6) {animation:play 1.5s linear infinite;} - &:nth-child(7) {background-image:url(../images/load2.png);animation:load2 2.5s linear infinite;} + &:nth-child(7) {background-image:url(/images/load2.png);animation:load2 2.5s linear infinite;} } cite {font-size:2.4rem} } diff --git a/src/js/modules/extra-win.js b/src/js/modules/extra-win.js index f4ee147..389f5b9 100644 --- a/src/js/modules/extra-win.js +++ b/src/js/modules/extra-win.js @@ -37,7 +37,7 @@ export const createMiniWindow = function(screen, pwin) { width: 320, height: 60, frame: false, - parent: pwin, + // parent: pwin, resizable: false, alwaysOnTop: true, x: screen.size.width - 320, diff --git a/src/tools/server.js b/src/tools/server.js index 8d13a86..fb1a7a4 100644 --- a/src/tools/server.js +++ b/src/tools/server.js @@ -13,12 +13,12 @@ const fs = require('iofs') const MIME_TYPES = { '.js': 'text/javascript; charset=utf-8', '.html': 'text/html; charset=utf-8', - '.htm': 'text/html; charset=utf-8', + '.htm': 'text/plain; charset=utf-8', '.css': 'text/css; charset=utf-8', '.jpg': 'image/jpg', '.png': 'image/png', '.gif': 'image/gif', - '.svg': 'image/svg', + '.svg': 'image/svg+xml', '.ico': 'image/ico' }