188 lines
9.5 KiB
SCSS
188 lines
9.5 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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
|
||
|
|
}
|
||
|
|
|
||
|
|
[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-prev:before { content: "\e718"; }
|
||
|
|
.s-icon-play-list:before { content: "\e719"; }
|
||
|
|
.s-icon-pause:before { content: "\e71a"; }
|
||
|
|
.s-icon-play:before { content: "\e71b"; }
|
||
|
|
.s-icon-next:before { content: "\e71c"; }
|
||
|
|
.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"; }
|
||
|
|
|
||
|
|
.do-fn-drag {-webkit-app-region:drag;user-select: none;}
|
||
|
|
.do-fn-nodrag {-webkit-app-region:no-drag;}
|
||
|
|
|
||
|
|
html {font-size:62.5%}
|
||
|
|
body {line-height:1.5;background:#fff;font-size:1.4rem;color:nth($cd, 1)}
|
||
|
|
|
||
|
|
table {overflow:auto;display:table;width:100%;line-height:2.5rem;
|
||
|
|
thead tr {height:4.5rem;border-bottom:.1rem solid nth($cp, 1)}
|
||
|
|
thead th {padding:1rem .8rem;border:0;}
|
||
|
|
tbody tr {height:auto;@include ts(background, .3s);
|
||
|
|
&:hover {background:#f7f8fb;}
|
||
|
|
}
|
||
|
|
tbody td {padding:.9rem .8rem}
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-scrollbar {width:8px;height:8px;background:#f7f8fb;}
|
||
|
|
::-webkit-scrollbar:hover {background:#f3f5fb;}
|
||
|
|
::-webkit-scrollbar-button {display:none;}
|
||
|
|
::-webkit-scrollbar-thumb {background:nth($cp, 3);}
|
||
|
|
::-webkit-scrollbar-thumb:hover {background:nth($ct, 1);}
|
||
|
|
|
||
|
|
|
||
|
|
.do-mod-app {display:flex;position:fixed;left:0;top:0;width:100%;height:100%;
|
||
|
|
|
||
|
|
|
||
|
|
.menubar {position:absolute;left:1.2rem;top:0;z-index:99;width:auto;height:3rem;padding:.9rem 0;
|
||
|
|
|
||
|
|
.item {display:inline-block;width:1.2rem;height:1.2rem;margin:0 .2rem;background:url(/images/btn_gray@2x.png) no-repeat;background-size:cover;}
|
||
|
|
|
||
|
|
&.focus {
|
||
|
|
.quit {background-image:url(/images/btn_close_focus@2x.png);}
|
||
|
|
.min {background-image:url(/images/btn_min_focus@2x.png);}
|
||
|
|
.max {background-image:url(/images/btn_max_focus@2x.png);}
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
.quit {background-image:url(/images/btn_close_hover@2x.png);}
|
||
|
|
.min {background-image:url(/images/btn_min_hover@2x.png);}
|
||
|
|
.max {background-image:url(/images/btn_max_hover@2x.png);}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.menubar-win {position:absolute;right:1.2rem;top:0;z-index:99;width:auto;height:4rem;padding:.9rem 0;line-height:1.8rem;
|
||
|
|
|
||
|
|
.item {display:inline-block;width:2.2rem;height:2.2rem;margin:0 .2rem;padding:.2rem;font-size:1.6rem;
|
||
|
|
|
||
|
|
&:hover {transform:scale(1.1)}
|
||
|
|
&.opt {font-size:1.8rem;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.sidebar {flex:0 1 22rem;position:relative;height:100%;background:nth($cp, 1);
|
||
|
|
|
||
|
|
// 用户信息
|
||
|
|
.user-box {width:18rem;height:16.5rem;margin:4rem 2rem 0;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;}
|
||
|
|
&.active {border-radius:.3rem;background:nth($ct, 1);color:#fff;}
|
||
|
|
&.disabled {opacity:.25}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 播放控制按钮
|
||
|
|
.play-contrl {position:absolute;left:0;bottom:0;width:100%;height:8rem;background:rgba(255,255,255,.3);
|
||
|
|
|
||
|
|
.item {position:absolute;top:2rem;width:4rem;height:4rem;line-height:4rem;font-size:3.5rem;text-align:center;color:nth($ct, 2);@include ts();
|
||
|
|
|
||
|
|
&:hover {color:nth($ct, 1)}
|
||
|
|
&:active {color:nth($ct, 3)}
|
||
|
|
}
|
||
|
|
.prev {left:2.5rem;}
|
||
|
|
.play {left:50%;top:1.5rem;width:5rem;height:5rem;margin-left:-2.5rem;line-height:5rem;font-size:4.5rem;}
|
||
|
|
.next {right:2.5rem;}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// 主体样式
|
||
|
|
.main {flex:1;display:flex;flex-flow:column wrap;
|
||
|
|
|
||
|
|
// 工具栏
|
||
|
|
.tool-bar {flex:0 1 5rem;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;}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 功能模块
|
||
|
|
.module {flex:1;display:flex;flex-flow:column wrap;}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 播放条
|
||
|
|
.play-bar {position:relative;flex:0 1 8rem;display:flex;justify-content:center;align-items:center;background:#f5f6fc;
|
||
|
|
|
||
|
|
.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;}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes play {
|
||
|
|
from {transform:rotate(0deg)}
|
||
|
|
to {transform:rotate(360deg)}
|
||
|
|
}
|