(responsive) audio player

Author: antoine92190

src/ChatWindow/Message/AudioControl.vue

@@ -105,4 +105,21 @@ export default {
 		}
 	}
 }
+
+@media only screen and (max-width: 768px) {
+	.vac-player-bar {
+		margin-right: 5px;
+
+		.vac-player-progress .vac-line-container {
+			height: 3px;
+
+			.vac-line-dot {
+				height: 12px;
+				width: 12px;
+				top: -5px;
+				margin-left: -5px;
+			}
+		}
+	}
+}
 </style>

src/ChatWindow/Message/AudioPlayer.vue

@@ -113,11 +113,22 @@ export default {
 <style lang="scss">
 .vac-audio-player {
 	display: flex;
-	margin: 15px 0 5px;
+	margin: 8px 0 5px;
 
 	.vac-svg-button {
 		max-width: 20px;
 		margin-left: 7px;
 	}
 }
+
+@media only screen and (max-width: 768px) {
+	.vac-audio-player {
+		margin: 4px 0 0px;
+
+		.vac-svg-button {
+			max-width: 16px;
+			margin-left: 5px;
+		}
+	}
+}
 </style>

src/ChatWindow/Message/Message.vue

@@ -119,7 +119,7 @@
 
 						<div
 							v-if="message.file && message.file.audio && !message.deleted"
-							class="vac-player-time"
+							class="vac-progress-time"
 						>
 							{{ progressTime }}
 						</div>
@@ -493,7 +493,7 @@ export default {
 	text-align: right;
 }
 
-.vac-player-time {
+.vac-progress-time {
 	float: left;
 	margin: -2px 0 0 41px;
 	color: var(--chat-color);
@@ -557,5 +557,9 @@ export default {
 	.vac-offset-current {
 		margin-left: 20%;
 	}
+
+	.vac-progress-time {
+		margin-left: 37px;
+	}
 }
 </style>