Cleanup

layout/sidebar/audioplayer/audioplayer.scarlet

@@ -0,0 +1,181 @@
+const audio-player-volume-background = rgba(0, 0, 0, 0.03)
+
+#audio-player
+	vertical
+	default-transition
+	justify-content center
+	position relative
+	margin-bottom 0.8rem
+	flex-shrink 0
+
+#audio-player-anime-info
+	display flex
+	justify-content center
+	align-items center
+	width 100%
+	margin-top 0.8rem
+
+#audio-player-anime-link
+	width anime-image-medium-width
+	height anime-image-medium-width
+	overflow-y hidden
+	border-radius ui-element-border-radius
+	opacity 0.75
+	transform opacity transition-speed ease
+
+	:hover
+		opacity 1 !important
+
+#audio-player-anime-image
+	width 100%
+	transform translateY(0)
+	will-change transform
+	animation bounce-up-down 45s linear infinite
+
+	// The element-found class doesn't set opacity,
+	// because we're overwriting the animation.
+	// That's why we have to manually add it here.
+	&.element-found
+		opacity 1
+
+animation bounce-up-down
+	50%
+		transform translateY(-30%) rotate(0.002deg)
+
+#audio-player-track-title
+	width 100%
+	color text-color
+	font-size 0.7rem
+	line-height 1.7em
+	opacity 0.8
+	text-align center
+	padding 0.8rem
+	animation rotate-x-once 5s ease infinite alternate
+
+animation rotate-x-once
+	0%
+		transform rotateX(0)
+	90%
+		transform rotateX(0)
+	100%
+		transform rotateX(90deg)
+
+#audio-player-controls
+	horizontal
+	justify-content center
+	align-items center
+	justify-content space-evenly
+
+.audio-player-play-pause-container
+	position relative
+	width 48px
+	height 48px
+
+#audio-player-play,
+#audio-player-pause
+	position absolute
+	left 0
+	top 0
+	display flex
+	justify-content center
+	align-items center
+	font-size 1.5rem
+
+	border-radius 50%
+	width 100%
+	height 100%
+
+	:hover
+		color button-hover-color
+		background button-hover-background
+
+	&.fade-out
+		pointer-events none
+
+	svg-icon
+		[name="play"]
+			transform translateX(3px)
+
+#audio-player-play,
+#audio-player-pause,
+.audio-player-side-button
+	color text-color
+	background rgba(0, 0, 0, 0.03)
+	border none
+
+.audio-player-side-button
+	width 32px
+	height 32px
+	display flex
+	justify-content center
+	align-items center
+
+#audio-player-prev
+	//
+
+#audio-player-next
+	//
+
+mixin volume-slider-thumb
+	appearance none
+	width 18px
+	height 18px
+	transform scale(0.5)
+	border none
+	border-radius 50%
+	background text-color
+	cursor pointer
+	opacity 0.25
+	box-shadow shadow-medium
+	default-transition
+
+mixin volume-slider-hover-thumb
+	background link-hover-color
+	opacity 1
+	transform scale(1)
+
+#audio-player-volume
+	appearance none
+	-webkit-appearance none
+	width 100%
+	height 6px
+	background audio-player-volume-background
+	outline none !important
+	border none !important
+	box-shadow none !important
+	border-radius 0
+	padding 0
+	margin 0
+	margin-top 1rem
+
+	::-moz-range-track
+		background transparent
+
+	::-moz-focus-outer
+		border 0
+
+	::-webkit-slider-thumb
+		volume-slider-thumb
+		-webkit-appearance none
+
+	::-moz-range-thumb
+		volume-slider-thumb
+		-moz-appearance none
+
+	:active
+		transform none
+
+	:hover
+		cursor pointer
+		background rgba(0, 0, 0, 0.06)
+
+		// Chrome parsing bug forces us to make the following 2 thumb definitions have different statements.
+		// That is why we're adding the appearance statements here, even though they are not really needed.
+
+		::-webkit-slider-thumb
+			volume-slider-hover-thumb
+			-webkit-appearance none
+
+		::-moz-range-thumb
+			volume-slider-hover-thumb
+			-moz-appearance none