j1-template 2024.3.18 → 2024.3.20

data/assets/theme/j1/modules/amplitudejs/scss/theme/uno/dark/player/large.scss

@@ -15,182 +15,204 @@
 
 // Variables
 // ---------------------------------------------------------
-$font-family:         "Lato", sans-serif;
 
-$color_1:             var(--ajs-theme-uno--white);
-$color_2:             var(--ajs-theme-uno--gray-200);
-$color_3:             var(--ajs-theme-uno--gray-300);
-$color_4:             var(--ajs-theme-uno--blue);
+$font-family_1: "Lato", sans-serif;
 
-$background-color_1:  var(--ajs-theme-uno--dark-silver);
-$background-color_2:  var(--ajs-theme-uno--black);
-$background-color_3:  var(--ajs-theme-uno--darker-silver);
-$background-color_4:  var(--ajs-theme-uno--blue-gray-900);
-$background-color_5:  var(--ajs-theme-uno--medium-silver);
+$color_1: var(--ajs-theme-uno--white);
+$color_2: var(--ajs-theme-uno--gray-200);
+$color_3: var(--ajs-theme-uno--gray-300);
+$color_4: var(--ajs-theme-uno--blue);
+$color_5: var(--ajs-theme-uno--gray-400);
 
-$border-color_1:      var(--ajs-theme-uno--medium-silver);
+$background-color_1: var(--ajs-theme-uno--dark-silver);
+$background-color_2: var(--ajs-theme-uno--black);
+$background-color_3: var(--ajs-theme-uno--darker-silver);
+$background-color_4: var(--ajs-theme-uno--blue-gray-900);
+$background-color_5: var(--ajs-theme-uno--medium-silver);
 
+$border-color_1: var(--ajs-theme-uno--medium-silver);
 
-// Styles
-// ---------------------------------------------------------
-div#large-player {
+.large-player {
+	-webkit-font-smoothing: antialiased;
+}
+.large-player-container {
 	display: flex;
 	max-width: fit-content;
 	background: var(--ajs-theme-uno--white);
 }
-div#playlist-header.player-expanded {
-	position: sticky;
-	cursor: default;
+.player-left-top {
+	img {
+		width: 500px;
+		height: 500px;
+		object-fit: cover;
+	}
+}
+.large-player-playlist-header {
+	cursor: pointer;
 	top: 0;
-	width: 100%;
+	position: sticky;
 	padding: 15px;
-	font-family: $font-family;
+	font-family: $font-family_1;
 	text-align: center;
 	color: $color_1;
 	background-color: $background-color_1;
 }
-div#amplitude-left {
+.large-player-title-list {
+	display: block;
+	max-height: 600px;
+	overflow-y: scroll;
+}
+.meta-container.large-player {
+	height: 120px;
+}
+.playlist-screen-meta-container {
+	width: calc(100% - 80px);
+	float: left;
+}
+.playlist-screen-controls {
+	cursor: default;
+	height: 100px;
+	padding: 15px;
+	max-width: -webkit-fill-available;
+	max-width: -moz-available;
+	font-family: $font-family_1;
+	color: $color_1;
+	background-color: $background-color_2;
+}
+div#large_player_left {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	width: 50vw;
+	max-width: fit-content;
+	border: solid 1px;
+	border-color: $border-color_1;
+	background-color: $background-color_3 !important;
 	img.album-art {
 		width: 100%;
 	}
 	div#player-left-bottom {
 		flex: 1;
-		background-color: $background-color_2;
-		div#volume-container {
-			&:after {
-				content: "";
-				display: table;
-				clear: both;
-			}
-		}
+		background-color: $background-color_4;
 	}
+}
+div#large_player_right {
 	display: flex;
+	flex: 1;
 	flex-direction: column;
-	overflow-y: clip;
-	padding: 0px;
-	width: 50%;
+	flex-grow: 1;
+	width: 50vw;
+	border-top: solid 1px;
+	border-right: solid 1px;
+	border-bottom: solid 1px;
+	border-color: $border-color_1;
 	background-color: $background-color_3 !important;
-	flex: 1;
-}
-div#amplitude-right {
 	div.song.amplitude-active-song-container {
 		&:hover {
 			div.play-button-container {
 				display: none;
 			}
 		}
-		div.song-now-playing-icon-container {
+		div.song-number-now-playing {
 			span.number {
 				display: inline-flex;
 				opacity: 0.5;
-				font-family: $font-family;
+				font-family: $font-family_1;
 				font-size: 16px;
-				color: $color_7;
-				letter-spacing: 0.5px;
+				color: $color_2;
 			}
 			img.now-playing {
 				display: block;
 				margin-top: 5px;
-				margin-left: 8px;
+				margin-left: 4px;
 				height: 16px;
 				width: 16px;
 			}
 		}
 	}
 	div.song {
+		cursor: pointer;
+		padding: 12px;
+		background-color: $background-color_3;
 		div.audio-meta-data {
 			float: left;
 			width: calc(100% - 145px);
 			span.audio-artist {
-				display: block;
 				font-size: 16px;
+				line-height: 18px;
 				white-space: nowrap;
 				overflow: hidden;
 				text-overflow: ellipsis;
-				color: $color_2;
+				color: $color_3;
 			}
 			span.audio-title {
-				font-family: $font-family;
-				font-size: 20px;
-				line-height: 20px;
-				letter-spacing: 0.47px;
+				display: block;
+				width: calc(100% - 25px);
+				font-family: $font-family_1;
+				font-size: 18px;
+				line-height: 24px;
 				white-space: nowrap;
-				color: $color_6;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				color: $color_4;
 			}
 		}
-		img.audio-info-blue {
-			float: right;
-			display: block;
-			margin-top: 10px;
-			margin-right: 10px;
-		}
-		img.audio-info-white {
-			float: right;
-			display: none;
-			margin-top: 10px;
-			margin-right: 10px;
-		}
-		&:after {
-			content: "";
-			display: table;
-			clear: both;
-		}
-		cursor: pointer;
-		padding: 12px;
-		background-color: $background-color_3;
-		div.song-now-playing-icon-container {
+		div.song-number-now-playing {
+			float: left;
+			width: 40px;
+			height: 20px;
+			margin-top: 8px;
+			margin-right: 12px;
 			img.now-playing {
 				display: none;
 			}
-			float: left;
-			width: 26px;
-			height: 20px;
-			margin-top: 12px;
-			margin-right: 20px;
 		}
 		span.audio-duration {
 			float: left;
-			margin-left: 5px;
-			width: 50px;
-			font-family: $font-family;
-			text-align: center;
-			line-height: 45px;
+			margin-left: 28px;
+			font-family: $font-family_1;
 			font-size: 16px;
-			font-weight: 500;
-			color: $color_2;
+			color: $color_3;
 		}
 	}
-	display: flex;
-	flex-direction: column;
-	padding: 0px;
-	overflow-y: scroll;
-	width: 50%;
-	background-color: $background-color_3 !important;
-	flex: 1;
-	div#playlist-screen-controls {
-		div#playlist-screen-meta-container {
+	div.playlist-screen-controls {
+		div.playlist-screen-meta-container {
 			span.song-name {
-				font-family: $font-family;
-				font-size: 22px;
-				color: $color_1;
-				letter-spacing: 0.5px;
 				line-height: 24px;
-				margin-left: 38px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				font-family: $font-family_1;
+				font-size: 18px;
+				color: $color_1;
+			}
+			span.audio-rating {
+				display: flex;
+				align-items: center;
+				float: right;
+				margin-top: 4px;
+				margin-right: -48px;
+				font-family: $font-family_1;
+				font-size: 18px;
+				color: $color_5;
+			}
+			span.audio-info {
+				float: right;
+				margin-right: -80px;
 			}
 			div.song-artist-album {
 				opacity: 0.5;
-				font-family: $font-family;
+				font-family: $font-family_1;
 				font-size: 16px;
+				line-height: 18px;
 				color: $color_1;
-				letter-spacing: 0.5px;
-				line-height: 16px;
-				margin-left: 38px;
 			}
 		}
 		div.list-controls {
 			float: right;
 			width: 90px;
-			margin-top: -32px;
+			margin-top: 50px;
+			margin-right: -12px;
 			div.list-previous {
 				float: left;
 				cursor: pointer;
@@ -198,15 +220,13 @@ div#amplitude-right {
 				height: 17px;
 				margin-right: 15px;
 				margin-top: 4px;
-				background-repeat: no-repeat;
-				background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg);
+				background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg") no-repeat;
 				&:hover {
 					opacity: .5;
 				}
 			}
 			div.list-play-pause.amplitude-paused {
-				background-repeat: no-repeat;
-				background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg);
+				background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg") no-repeat;
 			}
 			div.list-play-pause {
 				float: left;
@@ -218,8 +238,7 @@ div#amplitude-right {
 				}
 			}
 			div.list-play-pause.amplitude-playing {
-				background-repeat: no-repeat;
-				background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg);
+				background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg") no-repeat;
 			}
 			div.list-next {
 				float: left;
@@ -228,8 +247,7 @@ div#amplitude-right {
 				height: 17px;
 				margin-left: 15px;
 				margin-top: 4px;
-				background-repeat: no-repeat;
-				background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg);
+				background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg")no-repeat;
 				&:hover {
 					opacity: .5;
 				}
@@ -237,209 +255,366 @@ div#amplitude-right {
 		}
 	}
 	div.song.amplitude-song-container.amplitude-play-pause.amplitude-active-song-container {
-		background-color: $background-color_4 !important;
+		background-color: $background-color_5 !important;
 	}
 }
-div#control-container {
-	margin-top: 40px;
+div#large_player_control_container {
+	margin-top: 20px;
 	margin-bottom: 20px;
-	div#repeat-container {
-		width: 25%;
-		float: left;
-		padding-top: 20px;
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
 	}
-	div#volume-container {
-		width: 88%;
+	div.volume-container {
 		float: left;
+		width: 88%;
 		margin-top: 20px;
 		margin-left: 12px;
+		&:after {
+			content: "";
+			display: table;
+			clear: both;
+		}
 		div.volume-controls {
 			input[type=range] {
 				width: calc(100% - 45px);
 			}
 		}
 	}
-	div.amplitude-mute {
-		cursor: pointer;
-		width: 25px;
-		height: 19px;
-		float: left;
+	div.amplitude-mute.amplitude-muted {
+		background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
 	}
 	div.amplitude-mute.amplitude-not-muted {
 		background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat;
 	}
-	div.amplitude-mute.amplitude-muted {
-		background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
+}
+.amplitude-mute {
+	float: left;
+	cursor: pointer;
+	width: 25px;
+	height: 19px;
+	margin-left: 40px;
+}
+.title-number {
+	display: inline-flex;
+	opacity: 0.5;
+	font-family: $font-family_1;
+	font-size: 16px;
+	color: $color_2;
+}
+div#large_player_controls {
+	height: 65px;
+	div.large-player-controls-container {
+		text-align: center;
 	}
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
+}
+.large-player-shuffle {
+	display: inline-block;
+	user-select: none;
+	width: 24px;
+	height: 24px;
+	cursor: pointer;
+	vertical-align: middle;
+	margin-right: 25px;
+	&:focus {
+		&:not(:focus-visible) {
+			outline: none;
+		}
 	}
 }
-div#time-container {
-	margin-top: 30px;
-	span.current-time {
-		color: $color_3;
-		font-size: 14px;
-		font-weight: bold;
-		float: left;
-		width: 15%;
-		text-align: center;
+.large-player-shufflee {
+	&::hover {
+		opacity: .5;
 	}
-	span.duration {
-		color: $color_3;
-		font-size: 14px;
-		font-weight: bold;
-		float: left;
-		width: 15%;
-		text-align: center;
+}
+.large-player-shuffle.eamplitude-shuffle-on {
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat;
+}
+.large-player-shuffle..amplitude-shuffle-off {
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat;
+}
+.large-player-previous {
+	display: inline-block;
+	user-select: none;
+	height: 24px;
+	width: 24px;
+	cursor: pointer;
+	vertical-align: middle;
+	margin-right: 20px;
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat;
+	&:hover {
+		opacity: .5;
 	}
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
+	&:focus {
+		&:not(:focus-visible) {
+			outline: none;
+		}
 	}
 }
-div#meta-container {
-	text-align: center;
-	margin-top: 20px;
-	span.song-name {
-		display: block;
-		color: $color_4;
-		font-size: 24px;
-		font-family: $font-family;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	div.song-artist-album {
-		color: $color_5;
-		font-size: 18px;
-		font-weight: bold;
-		font-family: $font-family;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		span {
-			display: block;
+.large-player-skip-backward {
+	display: inline-block;
+	user-select: none;
+	cursor: pointer;
+	height: 24px;
+	width: 24px;
+	margin-right: 20px;
+	vertical-align: middle;
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg") no-repeat;
+	&:focus {
+		&:not(:focus-visible) {
+			outline: none;
 		}
 	}
-	div.audio-artist-album {
-		color: $color_5;
-		font-size: 18px;
-		font-weight: bold;
-		font-family: $font-family;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		span {
-			display: block;
+	&:hover {
+		opacity: 0.5;
+	}
+}
+.large-player-play-pause {
+	display: inline-block;
+	user-select: none;
+	width: 60px;
+	height: 60px;
+	cursor: pointer;
+	vertical-align: middle;
+	&:hover {
+		opacity: .5;
+	}
+	&:focus {
+		&:not(:focus-visible) {
+			outline: none;
 		}
 	}
 }
-span.title-number {
-	display: inline-flex;
-	opacity: 0.5;
-	font-family: $font-family;
-	font-size: 16px;
-	color: $color_7;
-	letter-spacing: 0.5px;
+div.large-player-play-pause.amplitude-paused {
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
 }
-div#large-player-controls {
-	height: 65px;
-	div.large-player-controls-container {
-		text-align: center;
-		div#shuffle-black {
-			display: inline-block;
-			width: 24px;
-			height: 24px;
-			cursor: pointer;
-			vertical-align: middle;
-			margin-right: 25px;
-			margin-left: -16px;
-			&:hover {
-				opacity: .5;
-			}
-		}
-		div#shuffle-black.amplitude-shuffle-off {
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-disabled.svg") no-repeat;
-		}
-		div#shuffle-black.amplitude-shuffle-on {
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-enabled.svg") no-repeat;
+div.large-player-play-pause.amplitude-playing {
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
+}
+.large-player-skip-forward {
+	display: inline-block;
+	user-select: none;
+	cursor: pointer;
+	height: 24px;
+	width: 24px;
+	margin-left: 20px;
+	vertical-align: middle;
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-forward.svg") no-repeat;
+	&:focus {
+		&:not(:focus-visible) {
+			outline: none;
 		}
-		div#previous-black {
-			display: inline-block;
-			height: 24px;
-			width: 24px;
-			cursor: pointer;
-			vertical-align: middle;
-			margin-right: 20px;
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous-hover.svg") no-repeat;
-			&:hover {
-				opacity: .5;
-			}
+	}
+	&:hover {
+		opacity: .5;
+	}
+}
+.large-player-skip-forward.amplitude-playing {
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
+}
+.large-player-next {
+	display: inline-block;
+	user-select: none;
+	height: 24px;
+	width: 24px;
+	cursor: pointer;
+	vertical-align: middle;
+	margin-right: 25px;
+	margin-left: 20px;
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat;
+	&:focus {
+		&:not(:focus-visible) {
+			outline: none;
 		}
-		div#play-pause-black {
-			display: inline-block;
-			width: 60px;
-			height: 60px;
-			cursor: pointer;
-			vertical-align: middle;
-			margin-right: 10px;
-			&:hover {
-				opacity: .5;
-			}
+	}
+	&:hover {
+		opacity: .5;
+	}
+}
+.large-player-repeat {
+	display: inline-block;
+	user-select: none;
+	width: 24px;
+	height: 24px;
+	cursor: pointer;
+	vertical-align: middle;
+}
+.large_player_repeat {
+	&:focus {
+		&:not(:focus-visible) {
+			outline: none;
 		}
-		div#play-pause-black.amplitude-paused {
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/black-play.svg") no-repeat;
+	}
+	&::hover {
+		opacity: .5;
+	}
+}
+.large_player_repeat.amplitude-repeat-off {
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat;
+}
+.large_player_repeat.amplitude-repeat-on {
+	background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
+}
+@media screen and (max-width: 992px) {
+	.large-player {
+		max-width: -webkit-fill-available;
+		max-width: -moz-available;
+	}
+	div#large_player_left {
+		width: auto;
+		max-width: unset;
+		border: solid 1px;
+		border-color: $border-color_1;
+	}
+	div.large-player-container {
+		position: relative;
+		flex-direction: column;
+		max-height: fit-content;
+		max-width: fit-content;
+		div#large_player_right {
+			width: auto;
+			min-width: unset;
 		}
-		div#play-pause-black.amplitude-playing {
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/black-pause.svg") no-repeat;
+	}
+	.player-left-top {
+		img {
+			height: 700px;
+			width: -webkit-fill-available;
+			width: -moz-available;
 		}
-		div#next-black {
-			display: inline-block;
-			height: 24px;
-			width: 25px;
-			cursor: pointer;
-			vertical-align: middle;
-			margin-right: 25px;
-			margin-left: 20px;
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next-hover.svg") no-repeat;
-			&:hover {
-				opacity: .5;
+	}
+	div#large_player_control_container {
+		margin-top: 25px;
+		margin-bottom: 25px;
+	}
+	div#large_player_right {
+		div.playlist-screen-controls {
+			div.playlist-screen-meta-container {
+				span.song-name {
+					font-size: 16px;
+				}
 			}
 		}
-		div#repeat-black {
-			display: inline-block;
-			width: 24px;
-			height: 24px;
-			cursor: pointer;
-			vertical-align: middle;
-			&:hover {
-				opacity: .5;
-			}
+		border-top: 0px;
+		border-right: 1px solid;
+		border-bottom: 1px solid;
+		border-left: 1px solid;
+		border-color: $border-color_1;
+	}
+	.playlist-screen-controls.large-player {
+		display: none;
+	}
+	.large-player-title-list {
+		border-bottom: 1px solid;
+		border-color: $border-color_1;
+	}
+}
+@media screen and (max-width: 768px) {
+	.large-player {
+		max-width: -webkit-fill-available;
+		max-width: -moz-available;
+	}
+	div#large_player_left {
+		width: auto;
+		max-width: unset;
+		border: solid 1px;
+		border-color: $border-color_1;
+	}
+	div.large-player-container {
+		position: relative;
+		flex-direction: column;
+		max-height: fit-content;
+		max-width: fit-content;
+		div#large_player_right {
+			width: auto;
+			min-width: unset;
 		}
-		div#repeat-black.amplitude-repeat-off {
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-disabled.svg") no-repeat;
+	}
+	.player-left-top {
+		img {
+			height: 700px;
+			width: -webkit-fill-available;
+			width: -moz-available;
 		}
-		div#repeat-black.amplitude-repeat-on {
-			background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-enabled.svg") no-repeat;
+	}
+	div#large_player_control_container {
+		margin-top: 25px;
+		margin-bottom: 25px;
+	}
+	div#large_player_right {
+		div.playlist-screen-controls {
+			div.playlist-screen-meta-container {
+				span.song-name {
+					font-size: 16px;
+				}
+			}
 		}
+		border-top: 0px;
+		border-right: 1px solid;
+		border-bottom: 1px solid;
+		border-left: 1px solid;
+		border-color: $border-color_1;
+	}
+	.playlist-screen-controls.large-player {
+		display: none;
+	}
+	.large-player-title-list {
+		border-bottom: 1px solid;
+		border-color: $border-color_1;
 	}
 }
-@media screen and (max-width: 39.9375em) {
-	div#large-player {
+@media screen and (max-width: 576px) {
+	.large-player {
+		max-width: -webkit-fill-available;
+		max-width: -moz-available;
+	}
+	div#large_player_left {
+		width: auto;
+		max-width: unset;
+		border: solid 1px;
+		border-color: $border-color_1;
+	}
+	div.large-player-container {
+		position: relative;
 		flex-direction: column;
-		div#amplitude-right {
-			width: 100%;
+		max-height: fit-content;
+		max-width: fit-content;
+		div#large_player_right {
+			width: auto;
+			min-width: unset;
+		}
+	}
+	.player-left-top {
+		img {
+			height: 700px;
+			width: -webkit-fill-available;
+			width: -moz-available;
 		}
-		div#amplitude-left {
-			width: 100%;
-			img[amplitude-song-info="cover_art_url"] {
-				width: auto;
-				height: auto;
+	}
+	div#large_player_control_container {
+		margin-top: 25px;
+		margin-bottom: 25px;
+	}
+	div#large_player_right {
+		div.playlist-screen-controls {
+			div.playlist-screen-meta-container {
+				span.song-name {
+					font-size: 16px;
+				}
 			}
 		}
+		border-top: 0px;
+		border-right: 1px solid;
+		border-bottom: 1px solid;
+		border-left: 1px solid;
+		border-color: $border-color_1;
+	}
+	.playlist-screen-controls.large-player {
+		display: none;
+	}
+	.large-player-title-list {
+		border-bottom: 1px solid;
+		border-color: $border-color_1;
 	}
 }