diff --git a/ui/scss/component/_claim-search.scss b/ui/scss/component/_claim-search.scss index 74a9049dc..f6e5eb1cc 100644 --- a/ui/scss/component/_claim-search.scss +++ b/ui/scss/component/_claim-search.scss @@ -29,7 +29,7 @@ } .claim-search__dropdown--selected { - background-color: var(--color-primary-alt); + background-color: var(--color-input-bg-selected); } .claim-search__input-container { diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index 084e0f929..bb1acfea4 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -16,6 +16,10 @@ .card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; + + &:first-child { + margin-bottom: 0; + } } .card + .file-render { @@ -242,14 +246,14 @@ .icon--Key { margin-right: var(--spacing-m); } + + @media (min-width: $breakpoint-small) { + padding: 0 var(--spacing-l); + } } .file-viewer__embedded-title { max-width: 75%; - - @media (max-width: $breakpoint-small) { - font-size: var(--font-small); - } } .file-viewer__embedded-info { @@ -258,6 +262,8 @@ font-size: var(--font-small); margin-left: var(--spacing-m); white-space: nowrap; + position: relative; + overflow: hidden; & > *:not(:last-child) { margin-right: var(--spacing-s); @@ -337,6 +343,8 @@ } .vjs-control-bar { + background-color: #00000095; + .vjs-remaining-time { display: none; } @@ -432,6 +440,15 @@ } } + .video-js--tap-to-unmute { + margin-top: var(--spacing-xl); + margin-left: var(--spacing-s); + + @media (min-width: $breakpoint-small) { + margin-left: calc(var(--spacing-m) + var(--spacing-s)); + } + } + .file-viewer { iframe, webview, diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index de3dc47df..74a43ccec 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -80,6 +80,7 @@ --color-input-toggle: var(--color-primary); --color-input-toggle-bg: var(--color-input-bg); --color-input-toggle-bg-hover: var(--color-secondary); + --color-input-bg-selected: var(--color-primary-alt); // Menu --color-menu-background: var(--color-header-background); diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss index 79a4b2237..c6399ae40 100644 --- a/ui/scss/themes/light.scss +++ b/ui/scss/themes/light.scss @@ -48,6 +48,7 @@ --color-text-warning--background: var(--lbry-yellow-1); --color-blockquote: var(--color-gray-3); --color-blockquote-bg: var(--color-gray-1); + --color-input-bg-selected: var(--color-primary-alt); --color-spinner-light: #ffffff; --color-spinner-dark: #212529; diff --git a/web/src/html.js b/web/src/html.js index 5f5ee090f..88d1f62db 100644 --- a/web/src/html.js +++ b/web/src/html.js @@ -50,9 +50,7 @@ function buildOgMetadata(overrideOptions = {}) { const head = `