322 lines
14 KiB
SCSS
322 lines
14 KiB
SCSS
@charset "UTF-8";
|
|
/**
|
|
* {sonist app style}
|
|
* @authors yutent<yutent@doui.cc>
|
|
* @date 2018/12/16 17:15:07
|
|
*/
|
|
|
|
|
|
@import "./var.scss";
|
|
|
|
@font-face {font-family: "sonist font";
|
|
src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff')
|
|
}
|
|
|
|
[class^="s-icon-"], [class*=" s-icon-"] {display:inline-block;font-family:"sonist font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
|
|
|
.s-icon-all:before { content: "\e714"; }
|
|
.s-icon-eq:before { content: "\e715"; }
|
|
.s-icon-heart:before { content: "\e716"; }
|
|
.s-icon-music:before { content: "\e717"; }
|
|
.s-icon-play-list:before { content: "\e719"; }
|
|
.s-icon-mv:before { content: "\e71d"; }
|
|
.s-icon-rank:before { content: "\e71e"; }
|
|
.s-icon-singer:before { content: "\e71f"; }
|
|
.s-icon-random:before { content: "\e720"; }
|
|
.s-icon-radio:before { content: "\e721"; }
|
|
.s-icon-single:before { content: "\e722"; }
|
|
.s-icon-next:before { content: "\e723"; }
|
|
.s-icon-prev:before { content: "\e724"; }
|
|
.s-icon-pause:before { content: "\e725"; }
|
|
.s-icon-play:before { content: "\e726"; }
|
|
|
|
.do-fn-drag {-webkit-app-region:drag;user-select: none;}
|
|
.do-fn-nodrag {-webkit-app-region:no-drag;}
|
|
|
|
html {font-size:62.5%}
|
|
body {position:fixed;left:0;top:0;display:flex;width:100%;height:100%;line-height:1.5;background:#fff;font-size:1.4rem;color:nth($cd, 1);background-size:cover;background-repeat:no-repeat;}
|
|
|
|
table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
|
thead tr {height:4.5rem;border-bottom:.1rem solid rgba(200, 200, 200, .15)}
|
|
thead th {padding:1rem .8rem;border:0;}
|
|
tbody tr {height:auto;@include ts(background, .3s);
|
|
&:hover {background:rgba(63, 194, 168, .08);}
|
|
}
|
|
tbody td {padding:.9rem .8rem}
|
|
}
|
|
|
|
::-webkit-scrollbar {width:.6rem;height:.6rem;background:none;}
|
|
::-webkit-scrollbar:hover {background:rgba(255, 255, 255, .1);}
|
|
::-webkit-scrollbar-button {display:none;}
|
|
::-webkit-scrollbar-thumb {background:nth($cp, 3);}
|
|
::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);}
|
|
|
|
|
|
.do-mod-app {position:relative;display:flex;flex-flow:column wrap;width:100%;height:100%;background:#fff;
|
|
|
|
// 标题栏样式
|
|
.title-bar {position:relative;z-index:9;display:flex;flex:0 5rem;
|
|
|
|
.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;}
|
|
|
|
&.focus {
|
|
.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);}
|
|
.max {background-image:url(/images/btn-maxi_a.svg);}
|
|
}
|
|
}
|
|
|
|
.btn-box-win {position:absolute;right:1.2rem;top:0;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
|
|
|
|
.item,.opt {position:relative;display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem;
|
|
}
|
|
.item:hover {transform:scale(1.1)}
|
|
|
|
.opt i {font-size:1.8rem;}
|
|
|
|
.opt-list {position:absolute;z-index:100;right:0;top:2.2rem;width:13rem;height:auto;padding:.8rem 0;background:#fff;box-shadow:0 .5rem 2rem rgba(0, 0, 0, .1);font-size:1.4rem;
|
|
span {display:flex;align-items:center;height:3rem;padding:0 2rem;line-height:3rem;
|
|
|
|
i {padding-right:.8rem;}
|
|
&.pipe {height:.1rem;margin:.5rem 0;border-bottom:.1rem solid nth($cp, 1)}
|
|
&:hover {background:nth($cp, 1)}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 工具栏
|
|
.holder {flex:0 22rem;height:100%;background:nth($cp, 1);}
|
|
|
|
.tools {flex:1;padding:1rem;
|
|
|
|
.search {position:relative;display:inline-block;line-height:3rem;}
|
|
.icon {position:absolute;right:0;top:0;width:2.6rem;height:3rem;}
|
|
input {width:20rem;padding:0 1.3rem;border-radius:1.5rem;}
|
|
}
|
|
}
|
|
|
|
|
|
// 主体样式
|
|
.main-body {flex:1;display:flex;
|
|
|
|
// 侧边栏
|
|
.sidebar {flex:0 22rem;position:relative;height:100%;background:nth($cp, 1);
|
|
|
|
// 用户信息
|
|
.user-box {width:18rem;height:16.5rem;margin:0 2rem;text-align:center;
|
|
|
|
.avatar {overflow:hidden;width:12rem;height:12rem;margin:0 3rem;border:.6rem solid #fff;border-radius:50%;box-shadow:0 .5rem 1.5rem rgba(0, 0, 0, .15);}
|
|
img {width:100%;height:100%;}
|
|
.uname {line-height:2;font-weight:normal;}
|
|
}
|
|
|
|
// 功能菜单导航
|
|
.music-box {width:100%;height:auto;padding:0 1.5rem;
|
|
|
|
dt.title {line-height:4rem;color:nth($cgr, 1)}
|
|
dd.item {height:3rem;margin:.3rem 0;padding:0 .8rem;line-height:3rem;color:nth($cgr, 3);
|
|
|
|
.icon {float:left;width:3rem;height:3rem;padding:0 .5rem;font-size:2.4rem;}
|
|
&:hover {padding-left:.9rem;color:nth($ct, 1);}
|
|
&.active {border-radius:.3rem;background:nth($ct, 1);color:#fff;}
|
|
&.disabled {opacity:.25}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// 功能模块
|
|
.module {position:relative;flex:1;display:flex;flex-flow:column wrap;}
|
|
}
|
|
|
|
|
|
.contrl-bar {position:relative;z-index:99;display:flex;flex:0 8rem;background:nth($cp, 1);
|
|
|
|
// 播放控制按钮
|
|
.play-box {flex:0 22rem;display:flex;justify-content:center;align-items:center;height:8rem;padding:1rem 2rem;text-align:center;
|
|
|
|
.item {flex:0 5rem;margin:0 .5rem;line-height:1;font-size:4.2rem;color:nth($ct, 2);@include ts();
|
|
|
|
&:hover {color:nth($co, 1)}
|
|
&:active {color:nth($ct, 1);transform:scale(1.1)}
|
|
}
|
|
.play {font-size:5rem;}
|
|
}
|
|
|
|
// 播放条
|
|
.stat-box {position:relative;flex:1;display:flex;justify-content:center;align-items:center;
|
|
|
|
.song-stat {flex:1;height:8rem;margin:0 2rem 0 0;
|
|
|
|
canvas {display:flex;width:100%;height:100%;}
|
|
}
|
|
|
|
.ctrl {position:relative;flex:0 1 3.5rem;height:3rem;line-height:3rem;text-align:center;color:nth($ct, 2);font-size:2rem;
|
|
|
|
&:hover {color:nth($ct, 1)}
|
|
&:active {color:nth($ct, 3)}
|
|
&.lrc {margin-right:2rem;font-size:1.6rem;}
|
|
|
|
.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, .1);
|
|
|
|
em {flex:0 0;border-radius:.5rem;background:nth($ct, 1)}
|
|
}
|
|
|
|
&.volume:hover .volume-ctrl {display:flex}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 播放状态下的 模糊特效
|
|
&.blur {background:rgba(255, 255, 255, .85);backdrop-filter:blur(1rem);
|
|
|
|
|
|
.title-bar {
|
|
.holder {background:rgba(255, 255, 255, .3);}
|
|
.tools input {background:rgba(255, 255, 255, .8);}
|
|
}
|
|
|
|
.main-body {
|
|
|
|
.sidebar {background:rgba(255, 255, 255, .3);}
|
|
}
|
|
|
|
.contrl-bar {background:rgba(255, 255, 255, .35)}
|
|
|
|
|
|
}
|
|
|
|
// ktv状态下的 模糊特效
|
|
&.ktv {
|
|
.contrl-bar {background:rgba(233, 233, 233, .1);
|
|
|
|
.play-box .item,
|
|
.stat-box .ctrl {color:#fff;
|
|
|
|
&:hover {color:nth($cr, 1)}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.ktv-box {overflow:hidden;position:absolute;z-index:80;left:0;top:0;width:100%;height:100%;background-color:nth($cd, 3);background-size:cover;background-repeat:no-repeat;color:#fff;
|
|
|
|
.inner-content {display:flex;flex-flow:column wrap;width:100%;height:100%;padding-bottom:8rem;background:rgba(29, 35, 44, 0.767);backdrop-filter:blur(1rem);
|
|
|
|
.info {flex:1;display:flex;justify-content:center;align-items:center;padding:0 10rem;line-height:2;
|
|
|
|
img {width:30rem;height:30rem;border:.5rem solid rgba(255, 255, 255, .5);border-radius:50%;}
|
|
.summary {flex:1; padding:0 5rem}
|
|
pre {overflow:auto;height:30rem}
|
|
h3 {line-height:3;font-size:1.8rem;}
|
|
}
|
|
.lrc-box {flex:0 10rem;display:flex;flex-flow:column wrap;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem;
|
|
|
|
section {flex:1;display:flex;
|
|
|
|
&.left {justify-content:flex-start;}
|
|
&.right {justify-content:flex-end}
|
|
|
|
span {background-clip:text!important;color:transparent;}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.tool-box {position:absolute;right:0;top:15rem;width:13rem;height:auto;padding:1.5rem 0;background:rgba(255, 255, 255, .1);border-radius:.3rem 0 0 .3rem;opacity:.3;transform:translateX(8.8rem);@include ts();
|
|
|
|
.item {height:3.4rem;padding:0 .8rem;line-height:3.4rem;
|
|
|
|
&:hover {background:rgba(255, 255, 255, .1);}
|
|
}
|
|
i {padding:0 1rem 0 .8rem}
|
|
|
|
&:hover {opacity:1;transform:translateX(0)}
|
|
}
|
|
|
|
|
|
.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);backdrop-filter:blur(.4rem);
|
|
|
|
.content {width:60rem;height:auto;padding:2rem;background:rgba(255, 255, 255, .8);color:nth($cd, 1);
|
|
|
|
.title {height:3rem;line-height:2rem;font-size:1.4rem;text-align:center;
|
|
|
|
i {float:right;font-size:2rem;color:nth($cr, 1);}
|
|
}
|
|
|
|
.section {height:3.5rem;
|
|
|
|
input {width:100%;}
|
|
}
|
|
|
|
.result {overflow-y:auto;width:100%;max-height:30rem;padding:1rem;background:rgba(255, 255, 255, .2);
|
|
|
|
.item {display:flex;justify-content:center;align-items:center;margin:.3rem 0;text-align:center;
|
|
|
|
&:nth-child(1) {line-height:2;border-bottom:.1rem solid nth($cgr, 1);}
|
|
|
|
span {flex:1;
|
|
|
|
&:nth-child(1) {flex:3}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.do-mod-contextmenu {width:145px;height:auto;padding:8px 0;line-height:35px;font-size:1.3rem;
|
|
li {overflow:hidden;width:100%;height:35px;padding:0 10px;@include ts(background);cursor:default;
|
|
&:hover {background:nth($cp, 1)}
|
|
i {padding:0 3px;font-size:1.6rem;vertical-align:bottom;}
|
|
}
|
|
}
|
|
.do-layer .layer-box.do-mod-contextmenu__fixed {padding:0}
|
|
|
|
|
|
|
|
|
|
@keyframes play {
|
|
from {transform:rotate(0deg)}
|
|
to {transform:rotate(360deg)}
|
|
} |
JavaScript
60.1%
SCSS
19.2%
HTML
16.9%
CSS
3.8%