diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css index b1fdfebb4..6430516bc 100644 --- a/ui/dist/themes/dark.css +++ b/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); } diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index f81f95e68..cfdc13099 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/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> ); } diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index fb1bd3420..0a8410372 100644 --- a/ui/js/component/video/view.jsx +++ b/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") { diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss index 43fe41bfe..96599a669 100644 --- a/ui/scss/_vars.scss +++ b/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); } diff --git a/ui/scss/all.scss b/ui/scss/all.scss index be7733a21..458493d81 100644 --- a/ui/scss/all.scss +++ b/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"; diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss new file mode 100644 index 000000000..e235123f1 --- /dev/null +++ b/ui/scss/component/_media.scss @@ -0,0 +1,5 @@ +.media { + /* temp fix for text files */ + background: var(--media-bg); + padding: 10px; +} diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 39e9a0209..3f3204308 100644 --- a/ui/scss/component/_video.scss +++ b/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%;