diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
index c858a9bfb..cd445ea6b 100644
--- a/app/javascript/styles/macaron/diff.scss
+++ b/app/javascript/styles/macaron/diff.scss
@@ -145,7 +145,8 @@ html {
 .box-widget input[type="email"],
 .box-widget input[type="password"],
 .box-widget textarea,
-.statuses-grid .detailed-status {
+.statuses-grid .detailed-status
+.audio-player {
   border: 1px solid lighten(#eeeeee, 4%);
 }
 
@@ -1050,3 +1051,23 @@ a.status-card.compact:hover {
     border-color: lighten($blue, 8%);
   }
 }
+
+.audio-player {
+  background: $ui-base-color;
+  border: 1px solid lighten($ui-base-color, 8%);
+
+  &__progress-placeholder {
+    background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
+  }
+
+  &__wave-placeholder {
+    background-color: lighten($ui-base-color, 16%);
+  }
+}
+
+.audio-player .video-player__controls button,
+.audio-player .video-player__time-sep,
+.audio-player .video-player__time-current,
+.audio-player .video-player__time-total {
+  color: $primary-text-color;
+}