nodebb-plugin-cplayer/static/cplayer.less

cPlayer's simple and naive plugin for nodebb.

@var1: #eeeeee;
@var2: #dddddd;
@var3: #ffffff;
@var4: #ff6666;
@var5: #cccccc;

c-player {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	.lyric, .lyric lyric-body {
		display: -webkit-flex;
		display: -ms-flexbox;
		transition: all .25s;
	}
	.invisible {
		height: 0 !important;
		overflow: hidden !important;
	}
	* {
		text-decoration: none;
		font-size: initial;
		line-height: initial;
	}
	.lyric {
		will-change: height;
		display: flex;
		height: 45vh;
		background: @var1;
		overflow: hidden;
		lyric-body {
			will-change: transform;
			display: flex;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			width: 100%;
			text-align: center;
			-webkit-transform: translateY(6em);
			-ms-transform: translateY(6em);
			transform: translateY(6em);
			lrc {
				will-change: background;
				line-height: 3em;
				font-size: large;
				font-family: "LiHei Pro","Microsoft Yahei",sans-serif;
				width: 100%;
				transition: .25s background ease;
				&.now {
					background: @var2;
				}
			}
		}
	}
	.controls {
		background: @var3;
		height: 4em;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		.c-left, .c-left .music-description {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
		}
		.c-left .music-description .image, .c-left .music-description .image img {
			height: 100%;
			width: 4em;
		}
		.c-left .music-description .image img:hover+.music-meta, .c-left .music-description .image:hover+.music-meta {
			max-width: 9999px;
		}
		.c-left .music-description .music-meta {
			margin: 0 .5em;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			max-width: 0;
			width: auto;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			overflow: hidden;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			height: 100%;
			transition: 1.5s all .5s ease-in;
			.music-name {
				font-size: 1.5em;
			}
			.music-artist {
				font-size: .7em;
				color: grey;
			}
		}
		.c-left .play-icon {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			margin: auto .5em;
			width: 3.2em;
			height: 3.2em;
			border-radius: 100%;
			background-color: @var4;
			color: @var3;
			cursor: pointer;
			i {
				margin: auto;
				font-size: 2.5em;
			}
		}
		.c-center {
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			width: auto;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
			padding: .5em;
			.time {
				width: 100%;
				.time-body {
					margin: 0 1%;
					height: 2px;
					background-color: @var5;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					.time-line {
						width: 0;
						height: 2px;
						background-color: red;
					}
					.time-point {
						width: 10px;
						height: 10px;
						margin: -4px 0 0 -5px;
						background-color: @var4;
						border-radius: 100%;
					}
				}
			}
		}
		.c-right {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			margin: auto;
			&>* {
				width: 2em;
				height: 2em;
				margin: 0 .5em;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
			}
			.volume {
				-webkit-align-items: center;
				-ms-flex-align: center;
				-ms-grid-row-align: center;
				align-items: center;
				transition: width .2s;
				.volume-body {
					margin: 0 1%;
					height: 2px;
					background-color: @var5;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					.volume-line {
						width: 0;
						height: 2px;
						background-color: red;
					}
					.volume-point {
						width: 10px;
						height: 10px;
						margin: -4px 0 0 -5px;
						background-color: @var4;
						border-radius: 100%;
					}
				}
				.volume-body {
					visibility: hidden;
					width: 0;
					transition: width .2s;
				}
				&:hover {
					width: 12em;
					.volume-body {
						visibility: visible;
						width: 100%;
					}
				}
				.volume-button {
					width: 2em;
					height: 2em;
					margin: .5em;
					.volume-power {
						display: -webkit-flex;
						display: -ms-flexbox;
						display: flex;
						width: 100%;
						height: 100%;
						border-radius: 10%;
						color: grey;
						transition: all .2s ease-in;
						cursor: pointer;
					}
				}
			}
			.list-button .list-power:hover, .lyric-button .lyric-power:hover, .volume .volume-button .volume-power:hover {
				background: rgba(117,117,117,.3);
			}
			.list-button .list-power .material-icons, .lyric-button .lyric-power .material-icons, .volume .volume-button .volume-power .material-icons {
				margin: auto;
			}
			.list-button .list-power, .lyric-button .lyric-power {
				display: -webkit-flex;
				display: -ms-flexbox;
				width: 100%;
				height: 100%;
				border-radius: 10%;
				color: grey;
				transition: all .2s ease-in;
				cursor: pointer;
			}
			.list-button .list-power {
				display: flex;
			}
			.lyric-button .lyric-power {
				display: flex;
			}
		}
	}
	.list {
		will-change: height;
		transition: all .25s;
		height: 35vh;
		background: @var3;
		overflow: auto;
		list-body {
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			&>* {
				line-height: 2em;
				cursor: pointer;
				transition: .2s background 0s ease;
			}
			&>:nth-child(2n-1) {
				background: rgba(117,117,117,.23);
			}
			&>:hover {
				background: rgba(117,117,117,.5);
				&::before {
					width: .2em;
				}
			}
			&>::before {
				background: @var4;
				transition: .2s width 0s ease;
				float: left;
				height: 2em;
				width: 0;
				display: block;
				content: "";
			}
			.music-artist, .music-name {
				padding: 0 .5em;
			}
			.music-name {
				float: left;
			}
			.music-artist {
				float: right;
			}
		}
	}
}