diff --git a/src/css/desktop-lrc.css b/src/css/desktop-lrc.css index 543e0d9..ac7b2f7 100644 --- a/src/css/desktop-lrc.css +++ b/src/css/desktop-lrc.css @@ -1 +1 @@ -body{background:transparent}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold}body .quit:hover,body .lock:hover{color:#ff5061}body .quit:active,body .lock:active{color:#ffb618}body .lock{right:4rem}body .lock.active{color:#3fc2a7}body:hover{background:rgba(29,35,44,0.2)}body:hover .quit,body:hover .lock{visibility:visible} +body{background:transparent}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;right:0;top:0;z-index:9;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold;text-shadow:0 0 .1rem #fff}body .quit:hover,body .lock:hover{color:#ff5061}body .quit:active,body .lock:active{color:#ffb618}body .lock{right:4rem}body .lock.active{color:#3fc2a7}body:hover{background:rgba(29,35,44,0.15)}body:hover .quit,body:hover .lock{visibility:visible} diff --git a/src/css/desktop-lrc.scss b/src/css/desktop-lrc.scss index 0bbd1d5..24ca137 100644 --- a/src/css/desktop-lrc.scss +++ b/src/css/desktop-lrc.scss @@ -26,10 +26,10 @@ body {background:transparent; } - .touch-bar {position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem;} + .touch-bar {position:absolute;right:0;top:0;z-index:9;height:2rem;} .quit, - .lock {visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold; + .lock {visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold;text-shadow:0 0 .1rem #fff; &:hover {color:nth($cr, 1)} &:active {color:nth($co, 1)} } @@ -39,7 +39,7 @@ body {background:transparent; } - &:hover {background:rgba(29, 35, 44, 0.2); + &:hover {background:rgba(29, 35, 44, 0.15); .quit, .lock {visibility:visible;} } diff --git a/src/css/mini-win.css b/src/css/mini-win.css index 579f318..62056f7 100644 --- a/src/css/mini-win.css +++ b/src/css/mini-win.css @@ -1 +1 @@ -.app{display:flex;width:100%;height:100%}.app .cover{overflow:hidden;flex:0 6rem}.app .cover img{width:100%}.app .ctrl{flex:1;padding:.8rem;line-height:2.2rem}.app .ctrl .title{font-weight:normal;font-size:1.2rem}.app .ctrl .btns{font-size:2.2rem}.app .ctrl .btns span:hover{color:#ffb618}.app .tools,.app .actions{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:#98acae}.app .tools span,.app .actions span{margin:0 .2rem}.app .tools span:hover,.app .actions span:hover{color:#3fc2a7}.app .tools span.close:hover,.app .actions span.close:hover{color:#ff5061}.app .tools span.active,.app .actions span.active{font-weight:bold}.app .actions{top:auto;bottom:.5rem}.app .actions span:nth-child(1){font-size:1.2rem} +.app{display:flex;width:100%;height:100%}.app .cover{overflow:hidden;flex:0 6rem;box-shadow:0 0 0.1rem rgba(0,0,0,0.1)}.app .cover img{width:100%}.app .ctrl{flex:1;padding:.8rem;line-height:2.2rem}.app .ctrl .title{font-weight:normal;font-size:1.2rem}.app .ctrl .btns{font-size:2.2rem}.app .ctrl .btns span:hover{color:#ffb618}.app .tools,.app .actions{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:#98acae}.app .tools span,.app .actions span{margin:0 .2rem}.app .tools span:hover,.app .actions span:hover{color:#3fc2a7}.app .tools span.close:hover,.app .actions span.close:hover{color:#ff5061}.app .tools span.active,.app .actions span.active{font-weight:bold}.app .actions{top:auto;bottom:.5rem}.app .actions span:nth-child(1){font-size:1.2rem} diff --git a/src/css/mini-win.scss b/src/css/mini-win.scss index acd9478..2429e61 100644 --- a/src/css/mini-win.scss +++ b/src/css/mini-win.scss @@ -8,11 +8,10 @@ @import "./var.scss"; -// body {width:32rem;height:6rem;} .app {display:flex;width:100%;height:100%; - .cover {overflow:hidden;flex:0 6rem; + .cover {overflow:hidden;flex:0 6rem;box-shadow:0 0 .1rem rgba(0, 0, 0, .1); img {width:100%;} } diff --git a/src/desktop-lrc.html b/src/desktop-lrc.html index 1da6d66..588ccd6 100644 --- a/src/desktop-lrc.html +++ b/src/desktop-lrc.html @@ -9,7 +9,7 @@ -
+