embedded fonts

cybort · Dec 9, 2018 · 1927242 · 1927242
1 parent 1b32bec
commit 1927242
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 98 deletions.
diff --git a/css/base.css b/css/base.css
@@ -2,6 +2,21 @@
 	font-family: 'groove style';
 	src: url('./groove.ttf') format('truetype');
 }
+@font-face{
+	font-family: 'Noble Scarlet';
+	src: url('./msyhl.ttc') format('truetype');
+	font-weight: 200
+}
+@font-face{
+	font-family: 'Noble Scarlet';
+	src: url('./msyh.ttc') format('truetype');
+	font-weight: 400
+}
+@font-face{
+	font-family: 'Noble Scarlet';
+	src: url('./msyhbd.ttc') format('truetype');
+	font-weight: 600
+}
 
 html,body{
 	margin: 0;
@@ -10,7 +25,7 @@ html,body{
 }
 body{
 	display: flex;
-	font-family: 'Microsoft YaHei';
+	font-family: 'Noble Scarlet';
 	-webkit-user-select: none;
 	overflow: hidden;
 }
@@ -29,6 +44,11 @@ body{
 	background-color: rgba(0,0,0,0.3);
 }
 
+.filler{
+	flex: auto;
+	pointer-events: none;
+}
+
 button{
 	-webkit-app-region: no-drag;
 	display: block;
@@ -42,18 +62,75 @@ button{
 }
 
 button.play::after{
-	content: "\e768";
+	content: '\e768';
+}
+button.pause::after{
+	content: '\e769';
 }
 button.remove::after{
-	content: "\e711";
+	content: '\e711';
 }
 button.add::after{
-	content: "\e710";
+	content: '\e710';
+}
+button.previous::after{
+	content: '\e892';
+}
+button.next::after{
+	content: '\e893';
+}
+button.random::after{
+	content: '\e8b1';
+}
+button.cycle::after{
+	content: '\e8ee';
+}
+button.cycle.single::after{
+	content: '\e8ed';
+}
+button.list::after{
+	content: '\e93f';
+}
+button.fullscreen::after{
+	content: '\e740';
+}
+button.fullscreen.on::after{
+	content: '\e73f';
+}
+button.download::after{
+	content: '\e896';
+}
+button.fold::after{
+	content: '\e70d';
 }
 
 button.close::after{
 	content: '\e711';
 }
 button.minimize::after{
 	content: '\e738';
+}
+button.back::after{
+	content: "\e72b";
+}
+button.search::after{
+	content: "\e721";
+}
+button.explore::after{
+	content: "\e942";
+}
+button.user::after{
+	content: "\e940";
+}
+button.playlist::after{
+	content: "\e90b";
+}
+button.album:after{
+	content:"\e93c";
+}
+button.artist::after{
+	content: "\e77b";
+}
+button.setting::after{
+	content:"\e713";
 }
diff --git a/css/msyh.ttc b/css/msyh.ttc
diff --git a/css/msyhbd.ttc b/css/msyhbd.ttc
diff --git a/css/msyhl.ttc b/css/msyhl.ttc
diff --git a/css/playbar.css b/css/playbar.css
@@ -16,7 +16,6 @@
 .playbar .mediainfo,
 .playbar .timeline,
 .playbar .controller,
-.playbar .extra,
 .playbar .playlist,
 .playbar .blur,
 .playbar .drag
@@ -163,67 +162,27 @@
 	height: 64px;
 	width: 240px;
 	display: flex;
+	overflow: hidden;
 }
-.playbar .extra{
-	bottom: 24px;
-	height: 64px;
-	width: 144px;
-	right: 10px;
-	display: flex;
-}
-.controller button,.extra button{
+.controller button{
 	font-family: "groove style";
-	width: 36px;height: 36px;
-	margin: auto;
+	width: 36px; height: 36px;
+	flex: none;
+	margin: auto 6px;
 	border-radius: 50%;
 	color: rgba(255,255,255,1);
 	font-size: 20px;
 	cursor: pointer;
-	-webkit-transition:all 0.08s linear;
+	-webkit-transition: all 0.08s linear;
 }
-.controller button:hover,.extra button:hover{
+.controller button:hover{
 	color: rgba(255,255,255,0.4);
 }
-.controller button:active,.extra button:active{
+.controller button:active{
 	color: rgba(255,255,255,1);
 	background-color: rgba(0,0,0,0.2);
 }
-button.previous::after{
-	content: "\e892";
-}
-button.play::after{
-	content: "\e768";
-}
-button.pause::after{
-	content: "\e769";
-}
-button.next::after{
-	content: "\e893";
-}
-button.random::after{
-	content: "\e8b1";
-}
-button.cycle::after{
-	content: "\e8ee";
-}
-button.cycle.single::after{
-	content: "\e8ed";
-}
-button.list::after{
-	content: "\e93f";
-}
-button.fullscreen::after{
-	content: "\e740";
-}
-button.fullscreen.on::after{
-	content: "\e73f";
-}
-button.download::after{
-	content: "\e896";
-}
-button.fold::after{
-	content: "\e70d";
-}
+
 button.random.on,button.cycle.all,button.cycle.single{
 	background-color: rgba(255,255,255,0.2);
 }
@@ -249,7 +208,6 @@ button.download.ing{
 .playbar .mediainfo>.related,
 .playbar .timeline,
 .playbar .controller,
-.playbar .extra,
 .playbar .blur
 {
 	-webkit-transition: all 0.36s cubic-bezier(0.37, -0.11, 0.14, 0.85);
@@ -293,7 +251,6 @@ button.download.ing{
 
 .playbar .blur,
 .playbar .drag,
-.playbar .extra,
 .playbar .playlist
 {
 	opacity: 0;
@@ -306,8 +263,7 @@ button.download.ing{
 	height: 100%;
 }
 .playbar.extend .blur,
-.playbar.extend .drag,
-.playbar.extend .extra
+.playbar.extend .drag
 {
 	opacity: 1;
 	visibility: visible;
@@ -351,10 +307,9 @@ button.download.ing{
 .playbar.extend .controller{
 	bottom: 24px;
 	left: 10px;
+	width: calc(100% - 20px);
 }
-.playbar.extend .controller button:active,
-.playbar.extend .extra button:active
-{
+.playbar.extend .controller button:active{
 	background-color: rgba(255,255,255,0.12);
 }
 
@@ -379,9 +334,6 @@ button.download.ing{
 .playbar.list .controller{
 	bottom: calc(24px + 100% - 280px);
 }
-.playbar.list .extra{
-	bottom: calc(24px + 100% - 280px); 
-}
 .playbar.list .playlist{
 	opacity: 1;
 	visibility: visible;

diff --git a/css/sidebar.css b/css/sidebar.css
@@ -1,7 +1,3 @@
-.filler{
-	flex-grow: 1;
-	pointer-events: none;
-}
 .sidebar{
 	-webkit-app-region: drag;
 	width: 48px;
@@ -40,28 +36,4 @@
 }
 .sidebar button::after{
 	font-family: "groove style";
-}
-button.back::after{
-	content: "\e72b";
-}
-button.search::after{
-	content: "\e721";
-}
-button.explore::after{
-	content: "\e942";
-}
-button.mine::after{
-	content: "\e940";
-}
-button.playlist::after{
-	content: "\e90b";
-}
-button.album:after{
-	content:"\e93c";
-}
-button.artist::after{
-	content: "\e77b";
-}
-button.setting::after{
-	content:"\e713";
 }
diff --git a/js/nav.js b/js/nav.js
@@ -3,7 +3,7 @@
 	const backButton = sideBar.appendChild(createElement('button','back'))
 	const searchButton = sideBar.appendChild(createElement('button','search'))
 	const exploreButton = sideBar.appendChild(createElement('button','explore'))
-	const mineButton = sideBar.appendChild(createElement('button','mine'))
+	const userButton = sideBar.appendChild(createElement('button','user'))
 	const playlistButton = sideBar.appendChild(createElement('button','playlist'))
 	const albumButton = sideBar.appendChild(createElement('button','album'))
 	const artistButton = sideBar.appendChild(createElement('button','artist'))

diff --git a/js/play.js b/js/play.js
@@ -17,7 +17,7 @@ const player = (() => {
 		index = parseInt(localStorage.getItem('index'))
 		control.play(false)
 		if(localStorage.getItem('random') == 'true') button.random.click()
-		Array.apply(null, {length: parseInt(localStorage.getItem('cycle')) || 0}).forEach(_ => button.cycle.click())		
+		Array.apply(null, {length: parseInt(localStorage.getItem('cycle')) || 0}).forEach(() => button.cycle.click())		
 	}
 
 	const element = {
@@ -43,7 +43,6 @@ const player = (() => {
 		},
 
 		controller: createElement('div', 'controller'),
-		extra: createElement('div', 'extra'),
 		drag: createElement('div', 'drag'),
 
 	}
@@ -342,12 +341,12 @@ const player = (() => {
 
 	init = () => {
 		Array.from(['cover', 'name' ,'related']).forEach(key => element.mediaInfo.appendChild(element[key]))
-		Array.from(['previous', 'play', 'next', 'random', 'cycle']).forEach(key => element.controller.appendChild(button[key]))
 		Array.from([element.filler.played, element.cursor, element.filler.unplayed]).forEach(item => element.progressBar.appendChild(item))
 		Array.from([element.time.played, element.progressBar, element.time.total]).forEach(item => element.timeLine.appendChild(item))
-		Array.from(['list', 'download', 'fullscreen']).forEach(key => element.extra.appendChild(button[key]))
+		Array.from(['previous', 'play', 'next', 'random', 'cycle', 'list', 'download', 'fullscreen']).forEach(key => element.controller.appendChild(button[key]))
 		Array.from(['fold']).forEach(key => element.drag.appendChild(button[key]))
-		Array.from([element.blur, element.mediaInfo, element.timeLine, element.controller, element.extra, element.playList, element.drag]).forEach(item => element.playBar.appendChild(item))
+		Array.from([element.blur, element.mediaInfo, element.timeLine, element.controller, element.playList, element.drag]).forEach(item => element.playBar.appendChild(item))
+		element.controller.insertBefore(createElement('div', 'filler'), element.controller.children[5])
 		document.body.appendChild(element.playBar)
 		recover()
 	}