minor css fixes

fix dark theme issues

minor css fix for #620

ui/dist/themes/dark.css

@@ -48,6 +48,9 @@
     --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
     --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
 
+    /* Media */
+    --media-bg: #CCC;
+
     /* Divider */
     --divider: 1px solid rgba(255,255,255, 0.12);
 }

ui/js/component/video/internal/player.jsx

@@ -176,7 +176,7 @@ class VideoPlayer extends React.PureComponent {
           <LoadingScreen status={noMetadataMessage} />}
         {unplayable &&
           <LoadingScreen status={unplayableMessage} spinner={false} />}
-        <div ref="media" />
+        <div ref="media" className="media" />
       </div>
     );
   }

ui/js/component/video/view.jsx

@@ -80,7 +80,7 @@ class Video extends React.PureComponent {
       loadStatusMessage = __("Downloading stream... not long left now!");
     }
 
-    let klasses = [];
+    let klasses = ["card"];
     klasses.push(obscureNsfw ? "video--obscured " : "");
     if (isLoading || isDownloading) klasses.push("video-embedded", "video");
     if (mediaType === "video") {

ui/scss/_vars.scss

@@ -133,6 +133,9 @@ $text-color: #000;
   --scrollbar-thumb-active-bg: var(--color-primary);
   --scrollbar-track-bg: transparent;
 
+  /* Media */
+  --media-bg: #FFF;
+
   /* Divider */
   --divider: 1px solid rgba(0, 0, 0, 0.12);
 }

ui/scss/all.scss

@@ -23,5 +23,6 @@
 @import "component/_markdown-editor.scss";
 @import "component/_scrollbar.scss";
 @import "component/_tabs.scss";
+@import "component/_media.scss";
 @import "page/_developer.scss";
 @import "page/_show.scss";

ui/scss/component/_media.scss

@@ -0,0 +1,5 @@
+.media {
+  /* temp fix for text files */
+  background: var(--media-bg);
+  padding: 10px;
+}

ui/scss/component/_video.scss

@@ -21,7 +21,6 @@ video {
   max-height: $height-video-embedded;
   height: $height-video-embedded;
   position: relative;
-  background: #000;
   video {
     height: 100%;
     width: 100%;