bugfix

## Issue
6721 Notifications: Thumbnail for "new content" not showing up in Desktop layout

## Change
The `className` wasn't propagated during the `FileThumbnail` refactoring to `Thumbs`.

.env.defaults

@@ -68,6 +68,7 @@ AUTO_FOLLOW_CHANNELS=lbry://@lbry#3fda836a92faaceedfe398225fb9b2ee2ed1f01a
 
 ## FEATURES AND LIMITS
 SIMPLE_SITE=false
+#BRANDED_SITE
 
 ENABLE_COMMENT_REACTIONS=true
 ENABLE_FILE_REACTIONS=false

.lintstagedrc.json

@@ -3,7 +3,7 @@
     "ui/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
     "web/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
     "ui/**/*.{js,jsx}": ["eslint", "flow focus-check --color always", "git add"],
-    "web/**/*.{js,jsx,scss}": ["eslint", "git add"]
+    "web/**/*.{js,jsx}": ["eslint", "git add"]
   },
   "ignore": ["node_modules", "web/dist/**/*", "dist/**/*", "package-lock.json"]
 }

config.js

@@ -9,6 +9,7 @@ const config = {
   WEBPACK_ELECTRON_PORT: process.env.WEBPACK_ELECTRON_PORT,
   WEB_SERVER_PORT: process.env.WEB_SERVER_PORT,
   LBRY_WEB_API: process.env.LBRY_WEB_API, //api.na-backend.odysee.com',
+  LBRY_WEB_PUBLISH_API: process.env.LBRY_WEB_PUBLISH_API,
   LBRY_API_URL: process.env.LBRY_API_URL, //api.lbry.com',
   LBRY_WEB_STREAMING_API: process.env.LBRY_WEB_STREAMING_API, //cdn.lbryplayer.xyz',
   LBRY_WEB_BUFFER_API: process.env.LBRY_WEB_BUFFER_API,
@@ -41,7 +42,6 @@ const config = {
   DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
   AUTO_FOLLOW_CHANNELS: process.env.AUTO_FOLLOW_CHANNELS,
   UNSYNCED_SETTINGS: process.env.UNSYNCED_SETTINGS,
-  AVATAR_DEFAULT: process.env.AVATAR_DEFAULT,
 
   // ENABLE FEATURES
   ENABLE_COMMENT_REACTIONS: process.env.ENABLE_COMMENT_REACTIONS === 'true',
@@ -66,6 +66,7 @@ const config = {
   CUSTOM_HOMEPAGE: process.env.CUSTOM_HOMEPAGE === 'true',
   SHOW_TAGS_INTRO: process.env.SHOW_TAGS_INTRO === 'true',
   LIGHTHOUSE_DEFAULT_TYPES: process.env.LIGHTHOUSE_DEFAULT_TYPES,
+  BRANDED_SITE: process.env.BRANDED_SITE,
 };
 
 config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`;

ui/analytics.js

@@ -12,7 +12,7 @@ import { generateInitialUrl } from 'util/url';
 import { MATOMO_ID, MATOMO_URL, LBRY_WEB_BUFFER_API } from 'config';
 
 const isProduction = process.env.NODE_ENV === 'production';
-const devInternalApis = process.env.LBRY_API_URL;
+const devInternalApis = process.env.LBRY_API_URL && process.env.LBRY_API_URL.includes('dev');
 
 export const SHARE_INTERNAL = 'shareInternal';
 const SHARE_THIRD_PARTY = 'shareThirdParty';

ui/component/commentCreate/view.jsx

@@ -42,7 +42,9 @@ type Props = {
   isReply: boolean,
   activeChannel: string,
   activeChannelClaim: ?ChannelClaim,
+  bottom: boolean,
   livestream?: boolean,
+  embed?: boolean,
   toast: (string) => void,
   claimIsMine: boolean,
   sendTip: ({}, (any) => void, (any) => void) => void,
@@ -63,13 +65,14 @@ export function CommentCreate(props: Props) {
     isReply,
     parentId,
     activeChannelClaim,
+    bottom,
     livestream,
+    embed,
     claimIsMine,
     sendTip,
     doToast,
   } = props;
-  const buttonref: ElementRef<any> = React.useRef();
-
+  const buttonRef: ElementRef<any> = React.useRef();
   const {
     push,
     location: { pathname },
@@ -85,11 +88,8 @@ export function CommentCreate(props: Props) {
   const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
   const hasChannels = channels && channels.length;
   const charCount = commentValue.length;
-
   const [activeTab, setActiveTab] = React.useState('');
-
   const [tipError, setTipError] = React.useState();
-
   const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
   const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
 
@@ -106,9 +106,9 @@ export function CommentCreate(props: Props) {
 
   function altEnterListener(e: SyntheticKeyboardEvent<*>) {
     const KEYCODE_ENTER = 13;
-    if ((e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
+    if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODE_ENTER) {
       e.preventDefault();
-      buttonref.current.click();
+      buttonRef.current.click();
     }
   }
 
@@ -147,8 +147,6 @@ export function CommentCreate(props: Props) {
     const activeChannelName = activeChannelClaim && activeChannelClaim.name;
     const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
 
-    console.log(activeChannelClaim);
-
     setIsSubmitting(true);
 
     if (activeTab === TAB_LBC) {
@@ -184,8 +182,7 @@ export function CommentCreate(props: Props) {
       }
 
       const sourceClaimId = claim.claim_id;
-
-      var roundedAmount = Math.round(tipAmount * 100) / 100;
+      const roundedAmount = Math.round(tipAmount * 100) / 100;
 
       Lbryio.call(
         'customer',
@@ -204,8 +201,6 @@ export function CommentCreate(props: Props) {
         'post'
       )
         .then((customerTipResponse) => {
-          console.log(customerTipResponse);
-
           const paymentIntendId = customerTipResponse.payment_intent_id;
 
           handleCreateComment(null, paymentIntendId, stripeEnvironment);
@@ -225,14 +220,14 @@ export function CommentCreate(props: Props) {
 
           // handleCreateComment(null);
         })
-        .catch(function (error) {
-          var displayError = 'Sorry, there was an error in processing your payment!';
-
-          if (error.message !== 'payment intent failed to confirm') {
-            displayError = error.message;
-          }
-
-          doToast({ message: displayError, isError: true });
+        .catch((error) => {
+          doToast({
+            message:
+              error.message !== 'payment intent failed to confirm'
+                ? error.message
+                : 'Sorry, there was an error in processing your payment!',
+            isError: true,
+          });
         });
     }
   }
@@ -261,7 +256,7 @@ export function CommentCreate(props: Props) {
           }
         }
       })
-      .catch((e) => {
+      .catch(() => {
         setIsSubmitting(false);
         setCommentFailure(true);
       });
@@ -280,6 +275,11 @@ export function CommentCreate(props: Props) {
       <div
         role="button"
         onClick={() => {
+          if (embed) {
+            window.open(`https://odysee.com/$/${PAGES.AUTH}?redirect=/$/${PAGES.LIVESTREAM}`);
+            return;
+          }
+
           const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`;
           if (livestream) {
             window.open(pathPlusRedirect);
@@ -306,7 +306,7 @@ export function CommentCreate(props: Props) {
       <div className="comment__create">
         <div className="comment__sc-preview">
           <CreditAmount
-            className="comment__scpreview-amount"
+            className="comment__sc-preview-amount"
             isFiat={activeTab === TAB_FIAT}
             amount={tipAmount}
             size={activeTab === TAB_LBC ? 18 : 2}
@@ -344,6 +344,7 @@ export function CommentCreate(props: Props) {
       className={classnames('comment__create', {
         'comment__create--reply': isReply,
         'comment__create--nested-reply': isNested,
+        'comment__create--bottom': bottom,
       })}
     >
       <FormField
@@ -398,7 +399,7 @@ export function CommentCreate(props: Props) {
         ) : (
           <>
             <Button
-              ref={buttonref}
+              ref={buttonRef}
               button="primary"
               disabled={disabled}
               type="submit"

ui/component/fileReactions/view.jsx

@@ -1,10 +1,12 @@
 // @flow
+import * as REACTION_TYPES from 'constants/reactions';
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
 import { formatNumberWithCommas } from 'util/number';
 import NudgeFloating from 'component/nudgeFloating';
+import { SIMPLE_SITE } from 'config';
 
 type Props = {
   claim: StreamClaim,
@@ -15,18 +17,51 @@ type Props = {
   likeCount: number,
   dislikeCount: number,
   myReaction: ?string,
+  livestream?: boolean,
 };
 
 function FileReactions(props: Props) {
-  const { claim, uri, doFetchReactions, doReactionLike, doReactionDislike, likeCount, dislikeCount } = props;
+  const {
+    claim,
+    uri,
+    doFetchReactions,
+    doReactionLike,
+    doReactionDislike,
+    myReaction,
+    likeCount,
+    dislikeCount,
+    livestream,
+  } = props;
+
   const claimId = claim && claim.claim_id;
   const channel = claim && claim.signing_channel && claim.signing_channel.name;
   const isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols.
+  const likeIcon = SIMPLE_SITE ? (myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE) : ICONS.UPVOTE;
+  const dislikeIcon = SIMPLE_SITE
+    ? myReaction === REACTION_TYPES.DISLIKE
+      ? ICONS.SLIME_ACTIVE
+      : ICONS.SLIME
+    : ICONS.DOWNVOTE;
   React.useEffect(() => {
-    if (claimId) {
+    function fetchReactions() {
       doFetchReactions(claimId);
     }
-  }, [claimId, doFetchReactions]);
+
+    let fetchInterval;
+    if (claimId) {
+      fetchReactions();
+
+      if (livestream) {
+        fetchInterval = setInterval(fetchReactions, 45000);
+      }
+    }
+
+    return () => {
+      if (fetchInterval) {
+        clearInterval(fetchInterval);
+      }
+    };
+  }, [claimId, doFetchReactions, livestream]);
 
   return (
     <>
@@ -41,20 +76,46 @@ function FileReactions(props: Props) {
         title={__('I like this')}
         requiresAuth={IS_WEB}
         authSrc="filereaction_like"
-        className={classnames('button--file-action')}
-        label={formatNumberWithCommas(likeCount, 0)}
+        className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
+        label={
+          <>
+            {myReaction === REACTION_TYPES.LIKE && SIMPLE_SITE && (
+              <>
+                <div className="button__fire-glow" />
+                <div className="button__fire-particle1" />
+                <div className="button__fire-particle2" />
+                <div className="button__fire-particle3" />
+                <div className="button__fire-particle4" />
+                <div className="button__fire-particle5" />
+                <div className="button__fire-particle6" />
+              </>
+            )}
+            {formatNumberWithCommas(likeCount, 0)}
+          </>
+        }
         iconSize={18}
-        icon={ICONS.UPVOTE}
+        icon={likeIcon}
         onClick={() => doReactionLike(uri)}
       />
       <Button
         requiresAuth={IS_WEB}
         authSrc={'filereaction_dislike'}
         title={__('I dislike this')}
-        className={classnames('button--file-action')}
-        label={formatNumberWithCommas(dislikeCount, 0)}
+        className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
+        label={
+          <>
+            {myReaction === REACTION_TYPES.DISLIKE && SIMPLE_SITE && (
+              <>
+                <div className="button__slime-stain" />
+                <div className="button__slime-drop1" />
+                <div className="button__slime-drop2" />
+              </>
+            )}
+            {formatNumberWithCommas(dislikeCount, 0)}
+          </>
+        }
         iconSize={18}
-        icon={ICONS.DOWNVOTE}
+        icon={dislikeIcon}
         onClick={() => doReactionDislike(uri)}
       />
     </>

ui/component/fileThumbnail/thumb.jsx

@@ -7,15 +7,16 @@ import useLazyLoading from 'effects/use-lazy-loading';
 type Props = {
   thumb: string,
   children?: Node,
+  className?: string,
 };
 
 const Thumb = (props: Props) => {
-  const { thumb, children } = props;
+  const { thumb, children, className } = props;
   const thumbnailRef = React.useRef(null);
   useLazyLoading(thumbnailRef);
 
   return (
-    <div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb')}>
+    <div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb', className)}>
       {children}
     </div>
   );

ui/component/fileThumbnail/view.jsx

@@ -53,7 +53,11 @@ function FileThumbnail(props: Props) {
   const thumbnailUrl = url ? url.replace(/'/g, "\\'") : '';
 
   if (hasResolvedClaim || thumbnailUrl) {
-    return <Thumb thumb={thumbnailUrl}>{children}</Thumb>;
+    return (
+      <Thumb thumb={thumbnailUrl} className={className}>
+        {children}
+      </Thumb>
+    );
   }
   return (
     <div

ui/component/livestreamLayout/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { BITWAVE_EMBED_URL } from 'constants/livestream';
+import { LIVESTREAM_EMBED_URL } from 'constants/livestream';
 import React from 'react';
 import FileTitleSection from 'component/fileTitleSection';
 import LivestreamComments from 'component/livestreamComments';
@@ -29,7 +29,7 @@ export default function LivestreamLayout(props: Props) {
         <div className="file-render file-render--video livestream">
           <div className="file-viewer">
             <iframe
-              src={`${BITWAVE_EMBED_URL}/${channelClaimId}?skin=odysee&autoplay=1`}
+              src={`${LIVESTREAM_EMBED_URL}/${channelClaimId}?skin=odysee&autoplay=1`}
               scrolling="no"
               allowFullScreen
             />

ui/component/livestreamLink/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { BITWAVE_LIVE_API } from 'constants/livestream';
+import { LIVESTREAM_LIVE_API } from 'constants/livestream';
 import * as CS from 'constants/claim_search';
 import React from 'react';
 import Card from 'component/common/card';
@@ -39,8 +39,8 @@ export default function LivestreamLink(props: Props) {
 
   React.useEffect(() => {
     function fetchIsStreaming() {
-      // $FlowFixMe Bitwave's API can handle garbage
-      fetch(`${BITWAVE_LIVE_API}/${livestreamChannelId}`)
+      // $FlowFixMe livestream API can handle garbage
+      fetch(`${LIVESTREAM_LIVE_API}/${livestreamChannelId}`)
         .then((res) => res.json())
         .then((res) => {
           if (res && res.success && res.data && res.data.live) {

ui/component/livestreamList/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import { BITWAVE_LIVE_API } from 'constants/livestream';
+import { LIVESTREAM_LIVE_API } from 'constants/livestream';
 import React from 'react';
 import Icon from 'component/common/icon';
 import Spinner from 'component/spinner';
@@ -14,7 +14,7 @@ export default function LivestreamList() {
 
   React.useEffect(() => {
     function checkCurrentLivestreams() {
-      fetch(BITWAVE_LIVE_API)
+      fetch(LIVESTREAM_LIVE_API)
         .then((res) => res.json())
         .then((res) => {
           setLoading(false);

ui/component/publishForm/view.jsx

@@ -28,7 +28,7 @@ import * as PUBLISH_MODES from 'constants/publish_types';
 import { useHistory } from 'react-router';
 import Spinner from 'component/spinner';
 import { toHex } from 'util/hex';
-import { BITWAVE_REPLAY_API } from 'constants/livestream';
+import { LIVESTREAM_REPLAY_API } from 'constants/livestream';
 
 // @if TARGET='app'
 import fs from 'fs';
@@ -274,7 +274,7 @@ function PublishForm(props: Props) {
   // move this to lbryinc OR to a file under ui, and/or provide a standardized livestreaming config.
   function fetchLivestreams(channelId, signature, timestamp) {
     setCheckingLivestreams(true);
-    fetch(`${BITWAVE_REPLAY_API}/${channelId}?signature=${signature || ''}&signing_ts=${timestamp || ''}`) // claimChannelId
+    fetch(`${LIVESTREAM_REPLAY_API}/${channelId}?signature=${signature || ''}&signing_ts=${timestamp || ''}`) // claimChannelId
       .then((res) => res.json())
       .then((res) => {
         if (!res || !res.data) {

ui/constants/livestream.js

@@ -1,3 +1,4 @@
-export const BITWAVE_EMBED_URL = 'https://bitwave.tv/odysee';
-export const BITWAVE_LIVE_API = 'https://api.bitwave.tv/v1/odysee/live';
-export const BITWAVE_REPLAY_API = 'https://api.bitwave.tv/v1/replays/odysee';
+export const LIVESTREAM_EMBED_URL = 'https://player.live.odysee.com/odysee';
+export const LIVESTREAM_LIVE_API = 'https://api.live.odysee.com/v1/odysee/live';
+export const LIVESTREAM_REPLAY_API = 'https://api.live.odysee.com/v1/replays/odysee';
+export const LIVESTREAM_RTMP_URL = 'rtmp://stream.odysee.com/live';

ui/effects/use-get-livestreams.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { BITWAVE_LIVE_API } from 'constants/livestream';
+import { LIVESTREAM_LIVE_API } from 'constants/livestream';
 
 /**
  * Gets latest livestream info list. Returns null (instead of a blank object)
@@ -16,7 +16,7 @@ export default function useGetLivestreams(minViewers: number = 0, refreshMs: num
 
   React.useEffect(() => {
     function checkCurrentLivestreams() {
-      fetch(BITWAVE_LIVE_API)
+      fetch(LIVESTREAM_LIVE_API)
         .then((res) => res.json())
         .then((res) => {
           setLoading(false);

ui/index.jsx

@@ -35,7 +35,7 @@ import {
   doAuthTokenRefresh,
 } from 'util/saved-passwords';
 import { X_LBRY_AUTH_TOKEN } from 'constants/token';
-import { LBRY_WEB_API, DEFAULT_LANGUAGE, LBRY_API_URL } from 'config';
+import { LBRY_WEB_API, DEFAULT_LANGUAGE, LBRY_API_URL, LBRY_WEB_PUBLISH_API } from 'config';
 
 // Import 3rd-party styles before ours for the current way we are code-splitting.
 import 'scss/third-party.scss';
@@ -43,8 +43,12 @@ import 'scss/third-party.scss';
 // Import our app styles
 // If a style is not necessary for the initial page load, it should be removed from `all.scss`
 // and loaded dynamically in the component that consumes it
+// @if TARGET='app'
 import 'scss/all.scss';
-
+// @endif
+// @if TARGET='web'
+import 'web/theme';
+// @endif
 // @if TARGET='web'
 // These overrides can't live in web/ because they need to use the same instance of `Lbry`
 import apiPublishCallViaWeb from 'web/setup/publish';
@@ -65,12 +69,11 @@ if (process.env.SDK_API_URL) {
 }
 
 let sdkAPIHost = process.env.SDK_API_HOST || process.env.SDK_API_URL;
-// @if TARGET='web'
 sdkAPIHost = LBRY_WEB_API;
-// @endif
 
 export const SDK_API_PATH = `${sdkAPIHost}/api/v1`;
 const proxyURL = `${SDK_API_PATH}/proxy`;
+const publishURL = LBRY_WEB_PUBLISH_API; // || `${SDK_API_PATH}/proxy`;
 
 Lbry.setDaemonConnectionString(proxyURL);
 
@@ -80,7 +83,7 @@ Lbry.setOverride(
     new Promise((resolve, reject) => {
       apiPublishCallViaWeb(
         apiCall,
-        proxyURL,
+        publishURL,
         Lbry.getApiRequestHeaders() && Object.keys(Lbry.getApiRequestHeaders()).includes(X_LBRY_AUTH_TOKEN)
           ? Lbry.getApiRequestHeaders()[X_LBRY_AUTH_TOKEN]
           : '',

ui/page/livestream/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { BITWAVE_LIVE_API } from 'constants/livestream';
+import { LIVESTREAM_LIVE_API } from 'constants/livestream';
 import React from 'react';
 import Page from 'component/page';
 import LivestreamLayout from 'component/livestreamLayout';
@@ -56,8 +56,9 @@ export default function LivestreamPage(props: Props) {
   React.useEffect(() => {
     let interval;
     function checkIsLive() {
-      // $FlowFixMe Bitwave's API can handle garbage
-      fetch(`${BITWAVE_LIVE_API}/${livestreamChannelId}`)
+      // TODO: duplicate code below
+      // $FlowFixMe livestream API can handle garbage
+      fetch(`${LIVESTREAM_LIVE_API}/${livestreamChannelId}`)
         .then((res) => res.json())
         .then((res) => {
           if (!res || !res.data) {
@@ -105,7 +106,7 @@ export default function LivestreamPage(props: Props) {
 
   React.useEffect(() => {
     // Set playing uri to null so the popout player doesnt start playing the dummy claim if a user navigates back
-    // This can be removed when we start using the app video player, not a bitwave iframe
+    // This can be removed when we start using the app video player, not a LIVESTREAM iframe
     doSetPlayingUri({ uri: null });
   }, [doSetPlayingUri]);
 

ui/page/livestreamSetup/view.jsx

@@ -16,6 +16,7 @@ import CopyableText from 'component/copyableText';
 import Card from 'component/common/card';
 import ClaimList from 'component/claimList';
 import usePersistedState from 'effects/use-persisted-state';
+import { LIVESTREAM_RTMP_URL } from 'constants/livestream';
 
 type Props = {
   channels: Array<ChannelClaim>,
@@ -182,7 +183,7 @@ export default function LivestreamSetupPage(props: Props) {
                       primaryButton
                       name="stream-server"
                       label={__('Stream server')}
-                      copyable="rtmp://stream.odysee.com/live"
+                      copyable={LIVESTREAM_RTMP_URL}
                       snackMessage={__('Copied')}
                     />
                     <CopyableText

ui/scss/component/_comments.scss

@@ -127,7 +127,7 @@ $thumbnailWidthSmall: 1rem;
   margin-top: var(--spacing-xxs);
 }
 
-.comment__scpreview-amount {
+.comment__sc-preview-amount {
   margin-right: var(--spacing-m);
   font-size: var(--font-large);
 }

ui/scss/component/_file-render.scss

@@ -230,13 +230,28 @@
 }
 
 .file-viewer__overlay-logo {
-  color: var(--color-white);
-  font-weight: bold;
+  height: 3.5rem;
+  width: 12rem;
+  display: flex;
+  align-items: center;
 
-  .icon {
-    height: 30px;
-    stroke-width: 5px;
+  &:hover {
+    filter: drop-shadow(1px 2px 10px var(--color-gray-3));
   }
+
+  @media (max-width: $breakpoint-small) {
+    margin-right: var(--spacing-m);
+    width: 2.5rem;
+
+    .button__label {
+      display: none;
+    }
+  }
+}
+
+.file-viewer__overlay-logo--videoend {
+  height: 3.5rem;
+  width: 12rem;
 }
 
 .file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
@@ -246,11 +261,15 @@
 .file-viewer__embedded-header {
   position: absolute;
   display: flex;
+  align-items: center;
   justify-content: space-between;
   width: 100%;
   top: 0;
   opacity: 1;
   z-index: 2;
+  height: 4rem;
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-s);
   font-size: var(--font-large);
   overflow-x: hidden;
   overflow-y: hidden;
@@ -260,7 +279,6 @@
   border-top-right-radius: var(--border-radius);
 
   .button {
-    padding: var(--spacing-s);
     color: var(--color-white);
     z-index: 2;
 

ui/scss/component/_form-field.scss

@@ -1,4 +1,4 @@
-@import 'init/mixins';
+@import '../init/mixins';
 
 input,
 textarea,
@@ -203,7 +203,7 @@ input-submit {
     height: var(--height-checkbox);
     width: var(--height-checkbox);
     border: 1px solid var(--color-input-border);
-    border-radius: var(--border-radius);
+    border-radius: 3px;
     left: 0px;
     top: -1px;
   }

ui/scss/init/_gui.scss

@@ -60,8 +60,12 @@ ol {
     position: relative;
     list-style-position: outside;
     margin: var(--spacing-xs) 0;
-    margin-left: var(--spacing-xl);
+    margin-left: var(--spacing-s);
     margin-bottom: 0;
+
+    @media (min-width: $breakpoint-small) {
+      margin-left: var(--spacing-xl);
+    }
   }
 }
 
@@ -267,10 +271,10 @@ textarea {
   margin-top: var(--spacing-s);
 
   &:not(:last-child) {
-    margin-bottom: var(--spacing-s);
+    margin-bottom: var(--spacing-m);
   }
 
-  .button--link ~ .button--link {
+  .button--link + .button--link {
     margin-left: var(--spacing-s);
   }
 
@@ -282,7 +286,6 @@ textarea {
 .help--warning {
   @extend .help;
   padding: var(--spacing-s);
-  color: var(--color-black);
   border-radius: var(--border-radius);
   background-color: var(--color-help-warning-bg);
   color: var(--color-help-warning-text);
@@ -499,3 +502,16 @@ textarea {
     height: 4rem;
   }
 }
+
+.home__meme {
+  text-align: center;
+  font-weight: bold;
+  line-height: 1;
+  font-size: 1rem;
+  margin-bottom: var(--spacing-m);
+
+  @media (min-width: $breakpoint-small) {
+    font-size: 1.2rem;
+    margin-bottom: var(--spacing-l);
+  }
+}

ui/scss/init/_vars.scss

@@ -9,7 +9,7 @@ $breakpoint-medium: 1150px;
 $breakpoint-large: 1600px;
 
 :root {
-  --border-radius: 5px;
+  --border-radius: 10px;
   --height-input: 2.5rem;
   --height-button: 2.5rem;
   --height-checkbox: 24px;

ui/scss/themes/dark.scss

@@ -1,30 +1,30 @@
 [theme='dark'] {
   // Color overrides
-  --color-primary: #2bbb90;
-  --color-primary-alt: #3e675d;
-  --color-primary-alt-2: #065f46;
-  --color-primary-alt-3: #34e5b0;
-  --color-secondary: #204166;
-  --color-secondary-alt: #dbeafe;
-  --color-secondary-alt-2: #bfdbfe;
-  --color-secondary-alt-3: #2c5c8c;
+  --color-primary: #e50054;
+  --color-primary-alt: #66001880;
+  --color-fire: #ff6635;
+  --color-fire-outside: #ff9b20;
 
   // Structure
-  --color-background: var(--color-gray-9);
-  --color-background-overlay: #21252999;
-  --color-border: #333338;
-  --color-card-background: var(--color-gray-8);
-  --color-card-background-highlighted: var(--color-gray-7);
+  --color-background: #140e1b;
+  --color-background-overlay: #0c0d0e95;
+  --color-border: #30243d;
+  --color-card-background: #181021;
+  --color-card-background-highlighted: #241c30;
 
   // Text
-  --color-text: var(--color-white);
+  --color-text: var(--color-gray-1);
   --color-text-subtitle: var(--color-gray-4);
   --color-text-empty: var(--color-text-subtitle);
   --color-text-help: #bbbbbb;
   --color-text-warning: #212529;
   --color-text-warning--background: var(--lbry-yellow-1);
-  --color-text-error: #f87171;
-  --color-error: #61373f;
+  --color-text-error: var(--color-danger);
+  --color-error: var(--color-danger-alt);
+  --color-blockquote: var(--color-gray-5);
+  --color-blockquote-bg: var(--color-card-background-highlighted);
+  --color-help-warning-text: var(--color-white-alt);
+  --color-help-warning-bg: #fbbf2450;
 
   // Tags (words)
   --color-tag-words: var(--color-text);
@@ -33,87 +33,73 @@
   --color-tag-words-bg-hover: var(--color-gray-4);
 
   // Header
-  --color-header-background: var(--color-gray-8);
-  --color-header-button: var(--color-gray-6);
-  --color-header-button-hover: var(--color-gray-6);
-  --color-header-button-active: var(--color-gray-6);
+  --color-header-button: #38274c;
+  --color-header-background: #231830;
 
   // Button
-  --color-button-primary-bg: var(--color-primary-alt);
-  --color-button-primary-bg-hover: var(--color-primary-alt-2);
-  --color-button-primary-text: var(--color-gray-2);
+  --color-button-primary-text: white;
   --color-button-primary-hover-text: var(--color-primary-alt);
-  --color-button-secondary-bg: var(--color-secondary);
-  --color-button-secondary-border: var(--color-secondary);
-  --color-button-secondary-bg-hover: var(--color-secondary-alt-3);
-  --color-button-secondary-text: var(--color-gray-2);
-  --color-button-alt-bg: var(--color-gray-7);
-  --color-button-alt-bg-hover: var(--color-gray-6);
-  --color-button-alt-text: var(--color-gray-1);
-  --color-button-border: var(--color-gray-5);
-  --color-button-toggle-text: var(--color-gray-1);
-  --color-link: var(--color-primary-alt-3);
-  --color-link-hover: var(--color-text);
-  --color-link-focus-bg: var(--color-gray-7);
+  --color-button-secondary-bg: #2c1543;
+  --color-button-secondary-border: #4f1c82;
+  --color-button-secondary-bg-hover: #3b1c5b;
+  --color-button-secondary-text: #efefef;
+  --color-button-alt-bg: var(--color-header-button);
+  --color-button-alt-bg-hover: #2b2037;
+  --color-button-toggle-text: var(--color-text);
+  --color-button-toggle-bg: var(--color-primary-alt);
+  --color-button-toggle-bg-hover: var(--color-primary-alt);
+  --color-button-alt-text: #e2e9f0;
+  --color-button-border: #5b4475;
+  --color-link: var(--color-primary);
+  --color-link-hover: #d75673;
+  --color-link-active: #ec1d4c;
+  --color-link-focus-bg: #3d2d4e;
 
   // Input
-  --color-input: var(--color-white);
-  --color-input-label: var(--color-gray-3);
-  --color-input-placeholder: var(--color-gray-1);
+  --color-input: #f4f4f5;
+  --color-input-label: #a7a7a7;
+  --color-input-placeholder: #f4f4f5;
   --color-input-bg: var(--color-header-button);
-  --color-input-bg-copyable: var(--color-gray-6);
+  --color-input-bg-copyable: #4c3861;
   --color-input-border: var(--color-border);
   --color-input-border-active: var(--color-secondary);
   --color-input-toggle: var(--color-primary-alt-3);
   --color-input-toggle-bg: var(--color-input-bg);
   --color-input-toggle-bg-hover: var(--color-secondary);
   --color-input-bg-selected: var(--color-primary-alt);
-  --color-input-prefix-bg: var(--color-gray-5);
+  --color-input-prefix-bg: var(--color-input-bg-copyable);
   --color-input-prefix-border: var(--color-gray-4);
   --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
 
   // Navigation
-  --color-navigation-icon: var(--color-gray-4);
-  --color-navigation-link: var(--color-gray-4);
-  --color-navigation-active: var(--color-gray-7);
-  --color-navigation-active-text: var(--color-gray-3);
-  --color-navigation-hover: var(--color-gray-6);
-  --color-navigation-hover-text: var(--color-gray-3);
+  --color-navigation-icon: #76808a;
+  --color-navigation-link: #b9c3ce;
+  --color-navigation-active: #2b2037;
+  --color-navigation-active-text: #c6bcd2;
+  --color-navigation-hover: #21182a;
+  --color-navigation-hover-text: #c6bcd2;
 
   // Tags
-  --color-tag: var(--color-primary-alt-3);
-  --color-tag-bg: var(--color-gray-7);
+  --color-tag: #ff85b1;
+  --color-tag-bg: var(--color-navigation-hover);
   --color-tag-hover: var(--color-white);
-  --color-tag-bg-hover: var(--color-primary-alt);
+  --color-tag-bg-hover: var(--color-primary-alt-2);
+  --color-tag-mature-bg: var(--color-primary-alt-2);
 
   // Menu
   --color-menu-background: var(--color-header-background);
-  --color-menu-background--active: var(--color-gray-7);
-  --color-menu-icon: var(--color-gray-4);
+  --color-menu-background--active: var(--color-primary-alt);
+  --color-menu-icon: #928b9b;
+  --color-menu-icon-active: #d6d6d6;
 
   // Comments
-  --color-comment-menu: var(--color-gray-5);
-  --color-comment-menu-hovering: var(--color-gray-2);
-  --color-comment-threadline: #434b54;
-  --color-comment-threadline-hover: var(--color-gray-4);
+  --color-comment-menu: #6a6a6a;
+  --color-comment-menu-hovering: #e0e0e0;
   --color-comment-highlighted: #484734;
-
-  // Snack
-  --color-snack-bg: var(--color-secondary);
-
-  // Superchat
-  --color-superchat-text: var(--color-black);
-  --color-superchat-text__light: var(--color-text);
-  --color-superchat: #fcd34d;
-  --color-superchat__light: #ef4e1647;
-  --color-superchat-2: #fde68a;
-  --color-superchat-3: #fef3c7;
-  --color-superchat-3__light: #58066087;
-  --color-superchat-4: #fffbeb;
+  --color-comment-threadline: #24192f;
+  --color-comment-threadline-hover: var(--color-gray-4);
 
   // Other
-  --color-focus: #93c5fd50;
-  --color-nag: var(--color-orange);
   --color-tab-text: var(--color-white);
   --color-tabs-background: var(--color-card-background);
   --color-tab-divider: var(--color-white);
@@ -121,14 +107,12 @@
   --color-notice: #58563b;
   --color-purchased: #ffd580;
   --color-purchased-alt: var(--color-purchased);
-  --color-purchased-text: var(--color-gray-5);
+  --color-purchased-text: black;
   --color-thumbnail-background: var(--color-gray-5);
   --color-tooltip-bg: #2f3337;
-  --color-help-warning-bg: #d97706;
-  --color-help-warning-text: white;
-  --color-blockquote: var(--color-gray-5);
-  --color-placeholder-background: #4e5862;
-  --color-spinner-light: #5a6570;
+  --color-focus: #e91e6329;
+  --color-placeholder-background: #261a35;
+  --color-spinner-light: white;
   --color-spinner-dark: #212529;
   --color-login-graphic-background: var(--color-background);
 

ui/scss/themes/light.scss

@@ -1,2 +1,155 @@
 :root {
+  // Color overrides
+  --color-primary: #fa6165;
+  --color-primary-alt: #fef1f6;
+  --color-primary-alt-2: #fb7e82;
+  --color-primary-alt-3: #fbcbdd;
+  --color-secondary: #f9902a;
+  --color-secondary-alt: #fee8d2;
+  --color-secondary-alt-2: #fefcf6;
+
+  // Structure
+  --color-border: #ededed;
+  --color-background: #fafafa;
+  --color-background-overlay: #21252980;
+  --color-card-background: #ffffff;
+  --color-card-background-highlighted: #fff5f5;
+
+  // Text
+  --color-text-selection-bg: var(--color-primary-alt);
+  --color-text-selection: var(--color-primary);
+  --color-text-error: var(--color-danger);
+  --color-text-empty: #999999;
+  --color-text-help: #999999;
+  --color-text-subtitle: #767676;
+  --color-text-warning: #212529;
+  --color-help-warning-bg: #fef3c7;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-blockquote: var(--color-gray-3);
+  --color-blockquote-bg: var(--color-gray-1);
+  --color-tooltip-bg: #222;
+  --color-tooltip-text: #fafafa;
+
+  // Header
+  --color-header-button: var(--color-button-alt-bg);
+  --color-header-background: #ffffff;
+
+  // Button
+  --color-button-alt-bg: var(--color-gray-1);
+  --color-button-alt-bg-hover: var(--color-gray-2);
+  --color-button-alt-text: black;
+  --color-button-primary-bg: var(--color-primary);
+  --color-button-primary-bg-hover: var(--color-primary-alt-2);
+  --color-button-primary-text: var(--color-primary-alt);
+  --color-button-primary-hover-text: var(--color-white);
+  --color-button-secondary-bg: var(--color-primary-alt);
+  --color-button-secondary-border: var(--color-primary-alt-3);
+  --color-button-secondary-text: var(--color-primary);
+  --color-button-secondary-bg-hover: var(--color-primary-alt-3);
+  --color-button-toggle-text: var(--color-primary);
+  --color-button-toggle-bg: var(--color-primary-alt);
+  --color-button-toggle-bg-hover: var(--color-primary-alt);
+  --color-button-border: var(--color-gray-3);
+  --color-link-active: var(--color-primary);
+  --color-link-focus-bg: #f1f1f1;
+  --color-link: var(--color-primary);
+
+  // Input
+  --color-input-bg-selected: var(--color-primary-alt);
+  --color-input-color: #111111;
+  --color-input-label: var(--color-gray-5);
+  --color-input-placeholder: #212529;
+  --color-input-bg: var(--color-gray-1);
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+  --color-input-toggle: var(--color-secondary);
+  --color-input-toggle-bg: var(--color-gray-1);
+  --color-input-toggle-bg-hover: var(--color-secondary-alt);
+  --color-input-prefix-bg: var(--color-gray-2);
+  --color-input-prefix-border: var(--color-gray-5);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+
+  // Navigation
+  --color-navigation-icon: var(--color-gray-5);
+  --color-navigation-link: var(--color-gray-5);
+  --color-navigation-active: var(--color-primary-alt);
+  --color-navigation-active-text: var(--color-primary);
+  --color-navigation-hover: var(--color-gray-1);
+  --color-navigation-hover-text: #3f3f3f;
+
+  // Tags
+  --color-tag: var(--color-primary-alt-2);
+  --color-tag-bg: #f9f6f7;
+  --color-tag-hover: var(--color-button-alt-text);
+  --color-tag-bg-hover: var(--color-button-alt-bg-hover);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-icon: var(--color-navigation-link);
+  --color-menu-icon-active: var(--color-navigation-link);
+  --color-menu-background--selected: var(--color-secondary-alt);
+  --color-menu-background--active: var(--color-primary-alt);
+
+  // Comments
+  --color-comment-menu: #e0e0e0;
+  --color-comment-menu-hovering: #6a6a6a;
+  --color-comment-highlighted: #fff2d9;
+  --color-comment-threadline: var(--color-gray-1);
+  --color-comment-threadline-hover: var(--color-gray-4);
+
+  // Superchat
+  --color-superchat-text: var(--color-black);
+  --color-superchat: #fcd34d;
+  --color-superchat__light: #fcd34d50;
+  --color-superchat-2: #fde68a;
+  --color-superchat-3: #fef3c7;
+  --color-superchat-3__light: #fef3c750;
+  --color-superchat-4: #fffbeb;
+
+  // Color
+  --color-focus: #8dbff0;
+  --color-nag: #fa8700;
+  --color-error: #fcafca;
+  --color-notice: #fef3ca;
+  --color-purchased: var(--color-cost);
+  --color-purchased-alt: #ffebc2;
+  --color-purchased-text: black;
+  --color-thumbnail-background: var(--color-gray-1);
+  --color-spinner-light: #ffffff;
+  --color-spinner-dark: #212529;
+  --color-placeholder-background: #f0f0f0;
+  --color-file-viewer-background: var(--color-card-background);
+  --color-tabs-background: var(--color-card-background);
+  --color-tab-divider: var(--color-primary);
+  --color-modal-background: var(--color-card-background);
+
+  // Icons
+  --color-follow-bg: #ffd4da;
+  --color-follow-icon: #e2495e;
+  --color-view-bg: var(--color-secondary-alt);
+  --color-view-icon: var(--color-secondary);
+
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #707070;
+  --color-editor-tag: #ea9400;
+  --color-editor-attr: #04b0f4;
+  --color-editor-string: #ff7451;
+  --color-editor-inline-code-fg: var(--color-text);
+  --color-editor-inline-code-fg-preview: #2e3439;
+  --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
+  --color-editor-inline-code-bg-preview: #d0e8ff;
+  --color-editor-selected: #add6ff;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #cccccc;
+
+  // Ads
+  --color-ads-background: #fae5ff;
+  --color-ads-link: var(--color-link);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-track-bg: transparent;
 }

web/package.json

@@ -31,7 +31,7 @@
     "koa-logger": "^3.2.1",
     "koa-send": "^5.0.0",
     "koa-static": "^5.0.0",
-    "lbry-redux": "lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264",
+    "lbry-redux": "lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da",
     "lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
     "mysql": "^2.17.1",
     "node-fetch": "^2.6.1",

web/scss/lbrytv.scss

@@ -0,0 +1,70 @@
+@charset "utf-8";
+
+@import '../../ui/scss/init/reset';
+@import '../../ui/scss/init/vars';
+@import '../../ui/scss/init/mixins';
+@import '../../ui/scss/init/gui';
+@import '../../ui/scss/init/base-theme';
+
+@import 'themes/lbrytv/light.scss';
+@import 'themes/lbrytv/dark.scss';
+@import '../../ui/scss/component/ads';
+@import '../../ui/scss/component/animation';
+@import '../../ui/scss/component/badge';
+@import '../../ui/scss/component/block-list';
+@import '../../ui/scss/component/button';
+@import '../../ui/scss/component/card';
+@import '../../ui/scss/component/channel';
+@import '../../ui/scss/component/claim-list';
+@import '../../ui/scss/component/collection';
+@import '../../ui/scss/component/comments';
+@import '../../ui/scss/component/content';
+@import '../../ui/scss/component/dat-gui';
+@import '../../ui/scss/component/embed-player';
+@import '../../ui/scss/component/expandable';
+@import '../../ui/scss/component/expanding-details';
+@import '../../ui/scss/component/file-drop';
+@import '../../ui/scss/component/file-list';
+@import '../../ui/scss/component/file-properties';
+@import '../../ui/scss/component/file-render';
+@import '../../ui/scss/component/footer';
+@import '../../ui/scss/component/form-field';
+@import '../../ui/scss/component/header';
+@import '../../ui/scss/component/icon';
+@import '../../ui/scss/component/main';
+@import '../../ui/scss/component/markdown-editor';
+@import '../../ui/scss/component/markdown-preview';
+@import '../../ui/scss/component/media';
+@import '../../ui/scss/component/menu-button';
+@import '../../ui/scss/component/modal';
+@import '../../ui/scss/component/nag';
+@import '../../ui/scss/component/navigation';
+@import '../../ui/scss/component/notification';
+@import '../../ui/scss/component/nudge';
+@import '../../ui/scss/component/pagination';
+@import '../../ui/scss/component/post';
+@import '../../ui/scss/component/purchase';
+@import '../../ui/scss/component/placeholder';
+@import '../../ui/scss/component/progress';
+@import '../../ui/scss/component/search';
+@import '../../ui/scss/component/claim-search';
+@import '../../ui/scss/component/section';
+@import '../../ui/scss/component/share';
+@import '../../ui/scss/component/snack-bar';
+@import '../../ui/scss/component/spinner';
+@import '../../ui/scss/component/splash';
+@import '../../ui/scss/component/status-bar';
+@import '../../ui/scss/component/superchat';
+@import '../../ui/scss/component/syntax-highlighter';
+@import '../../ui/scss/component/table';
+@import '../../ui/scss/component/livestream';
+@import '../../ui/scss/component/tabs';
+@import '../../ui/scss/component/tooltip';
+@import '../../ui/scss/component/txo-list';
+@import '../../ui/scss/component/videojs';
+@import '../../ui/scss/component/tags';
+@import '../../ui/scss/component/wunderbar';
+@import '../../ui/scss/component/yrbl';
+@import '../../ui/scss/component/empty';
+@import '../../ui/scss/component/stripe-card';
+@import '../../ui/scss/component/wallet-tip-send';

web/scss/odysee.scss

@@ -0,0 +1,70 @@
+@charset "utf-8";
+
+@import 'themes/odysee/init/reset';
+@import 'themes/odysee/init/vars';
+@import 'themes/odysee/init/mixins';
+@import 'themes/odysee/init/gui';
+@import 'themes/odysee/init/base-theme';
+
+@import 'themes/odysee/light.scss';
+@import 'themes/odysee/dark.scss';
+@import '../../ui/scss/component/ads';
+@import '../../ui/scss/component/animation';
+@import '../../ui/scss/component/badge';
+@import '../../ui/scss/component/block-list';
+@import '../../ui/scss/component/button';
+@import '../../ui/scss/component/card';
+@import '../../ui/scss/component/channel';
+@import '../../ui/scss/component/claim-list';
+@import '../../ui/scss/component/collection';
+@import '../../ui/scss/component/comments';
+@import '../../ui/scss/component/content';
+@import '../../ui/scss/component/dat-gui';
+@import '../../ui/scss/component/embed-player';
+@import '../../ui/scss/component/expandable';
+@import '../../ui/scss/component/expanding-details';
+@import '../../ui/scss/component/file-drop';
+@import '../../ui/scss/component/file-list';
+@import '../../ui/scss/component/file-properties';
+@import '../../ui/scss/component/file-render';
+@import '../../ui/scss/component/footer';
+@import '../../ui/scss/component/form-field';
+@import '../../ui/scss/component/header';
+@import '../../ui/scss/component/icon';
+@import '../../ui/scss/component/main';
+@import '../../ui/scss/component/markdown-editor';
+@import '../../ui/scss/component/markdown-preview';
+@import '../../ui/scss/component/media';
+@import '../../ui/scss/component/menu-button';
+@import '../../ui/scss/component/modal';
+@import '../../ui/scss/component/nag';
+@import '../../ui/scss/component/navigation';
+@import '../../ui/scss/component/notification';
+@import '../../ui/scss/component/nudge';
+@import '../../ui/scss/component/pagination';
+@import '../../ui/scss/component/post';
+@import '../../ui/scss/component/purchase';
+@import '../../ui/scss/component/placeholder';
+@import '../../ui/scss/component/progress';
+@import '../../ui/scss/component/search';
+@import '../../ui/scss/component/claim-search';
+@import '../../ui/scss/component/section';
+@import '../../ui/scss/component/share';
+@import '../../ui/scss/component/snack-bar';
+@import '../../ui/scss/component/spinner';
+@import '../../ui/scss/component/splash';
+@import '../../ui/scss/component/status-bar';
+@import '../../ui/scss/component/superchat';
+@import '../../ui/scss/component/syntax-highlighter';
+@import '../../ui/scss/component/table';
+@import '../../ui/scss/component/livestream';
+@import '../../ui/scss/component/tabs';
+@import '../../ui/scss/component/tooltip';
+@import '../../ui/scss/component/txo-list';
+@import '../../ui/scss/component/videojs';
+@import '../../ui/scss/component/tags';
+@import '../../ui/scss/component/wunderbar';
+@import '../../ui/scss/component/yrbl';
+@import '../../ui/scss/component/empty';
+@import '../../ui/scss/component/stripe-card';
+@import '../../ui/scss/component/wallet-tip-send';

web/scss/themes/lbrytv/dark.scss

@@ -0,0 +1,159 @@
+[theme='dark'] {
+  // Color overrides
+  --color-primary: #2bbb90;
+  --color-primary-alt: #3e675d;
+  --color-primary-alt-2: #065f46;
+  --color-primary-alt-3: #34e5b0;
+  --color-secondary: #204166;
+  --color-secondary-alt: #dbeafe;
+  --color-secondary-alt-2: #bfdbfe;
+  --color-secondary-alt-3: #2c5c8c;
+
+  // Structure
+  --color-background: var(--color-gray-9);
+  --color-background-overlay: #21252999;
+  --color-border: #333338;
+  --color-card-background: var(--color-gray-8);
+  --color-card-background-highlighted: var(--color-gray-7);
+
+  // Text
+  --color-text: var(--color-white);
+  --color-text-subtitle: var(--color-gray-4);
+  --color-text-empty: var(--color-text-subtitle);
+  --color-text-help: #bbbbbb;
+  --color-text-warning: #212529;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-text-error: #f87171;
+  --color-error: #61373f;
+
+  // Tags (words)
+  --color-tag-words: var(--color-text);
+  --color-tag-words-bg: var(--color-gray-5);
+  --color-tag-words-hover: var(--color-white);
+  --color-tag-words-bg-hover: var(--color-gray-4);
+
+  // Header
+  --color-header-background: var(--color-gray-8);
+  --color-header-button: var(--color-gray-6);
+  --color-header-button-hover: var(--color-gray-6);
+  --color-header-button-active: var(--color-gray-6);
+
+  // Button
+  --color-button-primary-bg: var(--color-primary-alt);
+  --color-button-primary-bg-hover: var(--color-primary-alt-2);
+  --color-button-primary-text: var(--color-gray-2);
+  --color-button-primary-hover-text: var(--color-primary-alt);
+  --color-button-secondary-bg: var(--color-secondary);
+  --color-button-secondary-border: var(--color-secondary);
+  --color-button-secondary-bg-hover: var(--color-secondary-alt-3);
+  --color-button-secondary-text: var(--color-gray-2);
+  --color-button-alt-bg: var(--color-gray-7);
+  --color-button-alt-bg-hover: var(--color-gray-6);
+  --color-button-alt-text: var(--color-gray-1);
+  --color-button-border: var(--color-gray-5);
+  --color-button-toggle-text: var(--color-gray-1);
+  --color-link: var(--color-primary-alt-3);
+  --color-link-hover: var(--color-text);
+  --color-link-focus-bg: var(--color-gray-7);
+
+  // Input
+  --color-input: var(--color-white);
+  --color-input-label: var(--color-gray-3);
+  --color-input-placeholder: var(--color-gray-1);
+  --color-input-bg: var(--color-header-button);
+  --color-input-bg-copyable: var(--color-gray-6);
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+  --color-input-toggle: var(--color-primary-alt-3);
+  --color-input-toggle-bg: var(--color-input-bg);
+  --color-input-toggle-bg-hover: var(--color-secondary);
+  --color-input-bg-selected: var(--color-primary-alt);
+  --color-input-prefix-bg: var(--color-gray-5);
+  --color-input-prefix-border: var(--color-gray-4);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+
+  // Navigation
+  --color-navigation-icon: var(--color-gray-4);
+  --color-navigation-link: var(--color-gray-4);
+  --color-navigation-active: var(--color-gray-7);
+  --color-navigation-active-text: var(--color-gray-3);
+  --color-navigation-hover: var(--color-gray-6);
+  --color-navigation-hover-text: var(--color-gray-3);
+
+  // Tags
+  --color-tag: var(--color-primary-alt-3);
+  --color-tag-bg: var(--color-gray-7);
+  --color-tag-hover: var(--color-white);
+  --color-tag-bg-hover: var(--color-primary-alt);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-background--active: var(--color-gray-7);
+  --color-menu-icon: var(--color-gray-4);
+
+  // Comments
+  --color-comment-menu: var(--color-gray-5);
+  --color-comment-menu-hovering: var(--color-gray-2);
+  --color-comment-threadline: #434b54;
+  --color-comment-threadline-hover: var(--color-gray-4);
+  --color-comment-highlighted: #484734;
+
+  // Snack
+  --color-snack-bg: var(--color-secondary);
+
+  // Superchat
+  --color-superchat-text: var(--color-black);
+  --color-superchat-text__light: var(--color-text);
+  --color-superchat: #fcd34d;
+  --color-superchat__light: #ef4e1647;
+  --color-superchat-2: #fde68a;
+  --color-superchat-3: #fef3c7;
+  --color-superchat-3__light: #58066087;
+  --color-superchat-4: #fffbeb;
+
+  // Other
+  --color-focus: #93c5fd50;
+  --color-nag: var(--color-orange);
+  --color-tab-text: var(--color-white);
+  --color-tabs-background: var(--color-card-background);
+  --color-tab-divider: var(--color-white);
+  --color-modal-background: var(--color-card-background);
+  --color-notice: #58563b;
+  --color-purchased: #ffd580;
+  --color-purchased-alt: var(--color-purchased);
+  --color-purchased-text: var(--color-gray-5);
+  --color-thumbnail-background: var(--color-gray-5);
+  --color-tooltip-bg: #2f3337;
+  --color-help-warning-bg: #d97706;
+  --color-help-warning-text: white;
+  --color-blockquote: var(--color-gray-5);
+  --color-placeholder-background: #4e5862;
+  --color-spinner-light: #5a6570;
+  --color-spinner-dark: #212529;
+  --color-login-graphic-background: var(--color-background);
+
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #d3d3d3;
+  --color-editor-tag: #efbe5d;
+  --color-editor-attr: #68ccf9;
+  --color-editor-string: #ff8b6b;
+  --color-editor-inline-code-fg: #ce9178;
+  --color-editor-inline-code-fg-preview: #e8b692;
+  --color-editor-inline-code-bg: rgba(20, 68, 102, 0.3);
+  --color-editor-inline-code-bg-preview: #464b50;
+  --color-editor-selected: #264f78;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #a0a0a0;
+
+  // Ads
+  --color-ads-background: #475057;
+  --color-ads-text: #111;
+  --color-ads-link: var(--color-primary-alt);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
+  --color-scrollbar-track-bg: transparent;
+}

web/scss/themes/lbrytv/light.scss

@@ -0,0 +1,2 @@
+:root {
+}

web/scss/themes/odysee/component/_file-render.scss

@@ -0,0 +1,755 @@
+.file-page {
+  .file-page__video-container + .card,
+  .file-render + .card,
+  .content__cover + .card,
+  .card + .file-render,
+  .card + .file-page__video-container,
+  .card + .content__cover {
+    margin-top: var(--spacing-m);
+  }
+
+  .card + .file-render {
+    margin-top: var(--spacing-m);
+  }
+
+  .file-page__md {
+    .file-viewer--document {
+      margin-top: var(--spacing-l);
+
+      @media (min-width: $breakpoint-small) {
+        margin-top: var(--spacing-xl);
+      }
+
+      .button {
+        display: inline;
+
+        .button__content {
+          display: inline;
+        }
+      }
+
+      .claim-link {
+        .button {
+          display: block;
+
+          .button__content {
+            display: block;
+          }
+        }
+      }
+    }
+
+    .media__actions {
+      justify-content: center;
+    }
+
+    .file-page__secondary-content {
+      display: flex;
+      flex-direction: column;
+      padding: 0 var(--spacing-m);
+    }
+  }
+
+  > * {
+    width: 100%;
+  }
+
+  @media (max-width: $breakpoint-medium) {
+    flex-direction: column;
+  }
+}
+
+.file-render {
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+  max-height: var(--inline-player-max-height);
+}
+
+.file-render--video {
+  background-color: black;
+
+  &:after {
+    content: '';
+    position: absolute;
+    background-color: black;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+    animation: fadeInFromBlack 2s ease;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+@keyframes fadeInFromBlack {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.file-render--embed {
+  border-radius: 0;
+  position: fixed;
+  max-height: none;
+}
+
+.file-render--img-container {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.file-render--post-container {
+  min-height: 30vh;
+}
+
+.file-render__header {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.file-viewer {
+  width: 100%;
+  height: 100%;
+
+  iframe,
+  webview,
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    max-height: var(--inline-player-max-height);
+  }
+  video {
+    cursor: pointer;
+  }
+  .video-js.vjs-user-inactive.vjs-playing {
+    video {
+      cursor: none;
+    }
+  }
+}
+
+.file-render__viewer--comic {
+  position: relative;
+  overflow: hidden;
+  .comic-viewer {
+    width: 100%;
+    height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
+    max-height: var(--inline-player-max-height);
+  }
+}
+
+.file-viewer--iframe {
+  display: flex; /*this eliminates extra height from whitespace, if someone edits this with a better technique, tell Jeremy*/
+  /*
+  ideally iframes would dynamiclly grow, see <IframeReact> for a start at this
+  for now, since we don't know size, let's make as large as we can without being larger than available area
+  */
+  iframe {
+    height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
+  }
+}
+
+.file-render__viewer--three {
+  position: relative;
+  overflow: hidden;
+
+  .three-viewer {
+    height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
+    max-height: var(--inline-player-max-height);
+  }
+}
+
+.file-viewer__overlay {
+  position: absolute;
+  left: auto;
+  right: auto;
+  height: 100%;
+  width: 100%;
+  z-index: 2;
+  color: var(--color-white);
+  font-size: var(--font-body); /* put back font size from videojs change*/
+
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-l);
+
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-small);
+  }
+
+  .button--uri-indicator,
+  .button--link {
+    color: var(--color-white);
+  }
+}
+
+.content__viewer--floating {
+  .file-viewer__overlay-title,
+  .file-viewer__overlay-secondary {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}
+@media (max-width: $breakpoint-small) {
+  .file-viewer__overlay-title,
+  .file-viewer__overlay-secondary {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}
+
+.file-viewer__overlay-title {
+  text-align: center;
+  font-size: var(--font-large);
+  margin-bottom: var(--spacing-m);
+}
+.file-viewer__overlay-secondary {
+  color: var(--color-text-subtitle);
+  margin-bottom: var(--spacing-m);
+}
+.file-viewer__overlay-actions {
+  .button + .button {
+    margin-left: var(--spacing-m);
+  }
+}
+
+.file-viewer__overlay-logo {
+  height: 3.5rem;
+  width: 12rem;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    filter: drop-shadow(1px 2px 10px var(--color-gray-3));
+  }
+
+  @media (max-width: $breakpoint-small) {
+    margin-right: var(--spacing-m);
+    width: 2.5rem;
+
+    .button__label {
+      display: none;
+    }
+  }
+}
+
+.file-viewer__overlay-logo--videoend {
+  height: 3.5rem;
+  width: 12rem;
+}
+
+.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
+  display: none;
+}
+
+.file-viewer__embedded-header {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  top: 0;
+  opacity: 1;
+  z-index: 2;
+  height: 4rem;
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-s);
+  font-size: var(--font-large);
+  overflow-x: hidden;
+  overflow-y: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+
+  .button {
+    color: var(--color-white);
+    z-index: 2;
+
+    .button__label {
+      white-space: nowrap;
+    }
+
+    &:hover {
+      color: var(--color-white);
+    }
+  }
+
+  .credit-amount,
+  .icon--Key {
+    margin-right: var(--spacing-m);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 0 var(--spacing-l);
+  }
+}
+
+.file-viewer__embedded-gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  background: linear-gradient(#000000, #00000000 70%);
+  height: 75px;
+  z-index: 1;
+}
+
+.file-viewer__embedded-title {
+  max-width: 75%;
+  z-index: 2;
+}
+
+.file-viewer__embedded-info {
+  display: flex;
+  align-items: center;
+  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);
+  }
+}
+
+.file-render__content {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  max-width: 100vw;
+}
+
+//
+// Custom viewers live below here
+// These either have custom class names that can't be changed or have styles that need to be overridden
+//
+
+// Code-viewer
+.CodeMirror {
+  @extend .file-render__content;
+
+  .cm-invalidchar {
+    display: none;
+  }
+
+  .CodeMirror .CodeMirror-lines {
+    // is there really a .CodeMirror inside a .CodeMirror?
+    padding: var(--spacing-s) 0;
+  }
+
+  .CodeMirror-code {
+    @include font-sans;
+    letter-spacing: 0.1rem;
+  }
+
+  .CodeMirror-gutters {
+    background-color: var(--color-gray-1);
+    border-right: 1px solid var(--color-gray-4);
+    padding-right: var(--spacing-m);
+  }
+
+  .CodeMirror-line {
+    padding-left: var(--spacing-m);
+  }
+
+  .CodeMirror-linenumber {
+    color: var(--color-gray-5);
+  }
+}
+
+// ****************************************************************************
+// Video
+// ****************************************************************************
+
+.video-js-parent {
+  height: 100%;
+  width: 100%;
+}
+
+// By default no video js play button
+.vjs-big-play-button {
+  display: none;
+}
+
+.video-js {
+  height: 100%;
+  width: 100%;
+
+  .vjs-modal-dialog .vjs-modal-dialog-content {
+    position: relative;
+    padding-top: 5rem;
+    // Make sure no videojs message interferes with overlaying buttons
+    pointer-events: none;
+  }
+
+  .vjs-control-bar {
+    // background-color: rgba(0, 0, 0, 0.8);
+
+    .vjs-remaining-time {
+      display: none;
+    }
+
+    .vjs-current-time,
+    .vjs-time-divider,
+    .vjs-duration {
+      display: flex;
+    }
+  }
+
+  .vjs-picture-in-picture-control {
+    display: none;
+  }
+}
+
+// ****************************************************************************
+// Video::Overlays
+// ****************************************************************************
+
+.video-js {
+  .vjs-overlay-playrate,
+  .vjs-overlay-seeked {
+    background-color: rgba(0, 0, 0, 0.5);
+    font-size: var(--font-large);
+    width: auto;
+    padding: 10px 30px;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    animation: fadeOutAnimation ease-in 0.6s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes fadeOutAnimation {
+    0% {
+      opacity: 1;
+      visibility: visible;
+    }
+    100% {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}
+
+// ****************************************************************************
+// Video - Mobile UI
+// ****************************************************************************
+
+.video-js.vjs-mobile-ui {
+  .vjs-control-bar {
+    background-color: transparent;
+  }
+
+  .vjs-touch-overlay:not(.show-play-toggle) {
+    .vjs-control-bar {
+      // Sync the controlBar's visibility with the overlay's
+      display: none;
+    }
+  }
+
+  .vjs-touch-overlay {
+    &.show-play-toggle,
+    &.skip {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    // Override the original's 'display: block' to avoid the big play button
+    // from being squished to the side:
+    position: absolute;
+  }
+}
+
+video::-internal-media-controls-overlay-cast-button {
+  // Push the cast button above vjs-touch-overlay:
+  z-index: 3;
+
+  // Move it to the upper-right since it will clash with "tap to unmute":
+  left: unset;
+  right: 8px;
+}
+
+.video-js.video-js.vjs-user-inactive {
+  video::-internal-media-controls-overlay-cast-button {
+    // (1) Android-Chrome's original Cast button behavior:
+    // - If video is playing, fade out the button.
+    // - If video is paused and video is tapped, display the button and stay on.
+    // (2) We then injected another behavior:
+    // - Display the button when '.vjs-touch-overlay' is displayed. However,
+    // the 'controlslist' attribute hack that was used to do this results in the
+    // button staying displayed without a fade-out timer.
+    // (3) Ideally, we should sync the '.vjs-touch-overlay' visibility with the
+    // cast button, similar to how to controlBar's visibility is synced above.
+    // But I have no idea how to grab the sibling '.show-play-toggle' into the
+    // css logic.
+    // (4) So, this is the best that I can come up with: Whenever user is idle,
+    // the button goes away. The only downside I know is the scenario of
+    // "overlay is up and video is paused, but button goes away due to idle".
+    // The user just needs to re-tap any empty space on the overlay to get the
+    // Cast button again.
+    opacity: 0;
+    transition: opacity 1s ease;
+  }
+}
+
+// ****************************************************************************
+// Layout and control visibility
+// ****************************************************************************
+
+.video-js.vjs-fullscreen,
+.video-js:not(.vjs-fullscreen) {
+  // --- Unhide desired components per layout ---
+  &.vjs-layout-x-small {
+    .vjs-playback-rate {
+      display: flex !important;
+    }
+  }
+
+  &.vjs-layout-small {
+    .vjs-current-time,
+    .vjs-time-divider,
+    .vjs-duration,
+    .vjs-playback-rate {
+      display: flex !important;
+    }
+  }
+
+  // --- Adjust spacing ---
+  .vjs-current-time {
+    padding-right: 0;
+  }
+
+  .vjs-duration {
+    padding-left: 0;
+  }
+
+  .vjs-playback-rate .vjs-playback-rate-value {
+    // Reduce the gigantic font a bit. Default was 1.5em.
+    font-size: 1.25em;
+    line-height: 2.5;
+  }
+
+  .vjs-playback-rate .vjs-menu {
+    // Extend the width to prevent a potential scrollbar from blocking the text.
+    width: 8em;
+    left: -2em;
+  }
+}
+
+.video-js.vjs-fullscreen {
+  .vjs-button--theater-mode {
+    display: none;
+  }
+}
+
+// ****************************************************************************
+// Tap-to-unmute
+// ****************************************************************************
+
+.video-js--tap-to-unmute {
+  visibility: hidden; // Start off as hidden.
+  z-index: 2;
+  position: absolute;
+  top: var(--spacing-xs);
+  left: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-m); // Make it comfy for touch.
+  color: var(--color-gray-1);
+  background: black;
+  border: 1px solid var(--color-gray-4);
+  opacity: 0.9;
+
+  &:hover {
+    opacity: 1;
+    color: var(--color-white);
+  }
+}
+
+// ****************************************************************************
+// ****************************************************************************
+
+.video-js:hover {
+  .vjs-big-play-button {
+    background-color: var(--color-primary);
+  }
+}
+
+.file-render {
+  .video-js {
+    /*display: flex;*/
+    /*align-items: center;*/
+    /*justify-content: center;*/
+  }
+
+  .vjs-big-play-button {
+    @extend .button--icon;
+    @extend .button--play;
+    border: none;
+    /*position: static;*/
+    z-index: 2;
+
+    .vjs-icon-placeholder {
+      display: none;
+    }
+  }
+
+  .vjs-menu-item-text,
+  .vjs-icon-placeholder {
+    text-transform: capitalize;
+  }
+}
+
+// ****************************************************************************
+// ****************************************************************************
+
+.file-render--embed {
+  // on embeds, do not inject our colors until interaction
+  .video-js:hover {
+    .vjs-big-play-button {
+      background-color: var(--color-primary);
+    }
+  }
+
+  .vjs-paused {
+    .vjs-big-play-button {
+      display: block;
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  .vjs-ended {
+    .vjs-big-play-button {
+      display: none;
+    }
+  }
+
+  .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,
+    img {
+      max-height: none;
+    }
+  }
+}
+
+.file-viewer--ended-embed .vjs-big-play-button {
+  display: none !important; // yes this is dumb, but this was broken and the above CSS was overriding
+}
+
+// ****************************************************************************
+// Autoplay Countdown
+// ****************************************************************************
+
+.autoplay-countdown {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.autoplay-countdown__timer {
+  width: 100%;
+  text-align: center;
+  font-size: var(--font-small);
+}
+.autoplay-countdown__counter {
+  margin-top: var(--spacing-m);
+}
+
+.autoplay-countdown__button {
+  /* Border size and color */
+  border: 3px solid transparent;
+  /* Creates a circle */
+  border-radius: 50%;
+  /* Circle size */
+  display: inline-block;
+  height: 86px;
+  width: 86px;
+  /* Use transform to rotate to adjust where opening appears */
+  transition: border 1s;
+  transform: rotate(45deg);
+  .button {
+    background-color: transparent;
+    transform: rotate(-45deg);
+    &:hover {
+      background-color: var(--color-primary);
+    }
+  }
+}
+.autoplay-countdown__button--4 {
+  border-top-color: #fff;
+}
+.autoplay-countdown__button--3 {
+  border-top-color: #fff;
+  border-right-color: #fff;
+}
+.autoplay-countdown__button--2 {
+  border-top-color: #fff;
+  border-right-color: #fff;
+  border-bottom-color: #fff;
+}
+.autoplay-countdown__button--1 {
+  border-color: #fff;
+}
+
+// ****************************************************************************
+// ****************************************************************************
+
+.file__viewdate {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  margin-bottom: var(--spacing-s);
+
+  > :first-child {
+    margin-bottom: var(--spacing-s);
+  }
+
+  @media (max-width: $breakpoint-medium) {
+    flex-direction: row;
+    justify-content: start;
+
+    > :first-child {
+      margin-bottom: 0;
+      margin-right: 1rem;
+    }
+  }
+}
+
+.file-page__image {
+  img {
+    cursor: pointer;
+  }
+}

web/scss/themes/odysee/component/_form-field.scss

@@ -0,0 +1,713 @@
+@import '../init/mixins';
+
+input,
+textarea,
+select,
+.date-picker-input {
+  height: var(--height-input);
+  border-radius: var(--border-radius);
+  border: 1px solid;
+  color: var(--color-input);
+  border-color: var(--color-input-border);
+  background-color: var(--color-input-bg);
+  padding-right: var(--spacing-s);
+  padding-left: var(--spacing-s);
+
+  &:focus {
+    @include focus;
+  }
+
+  &::placeholder {
+    color: var(--color-input-placeholder);
+    opacity: 0.4;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+
+    & + label {
+      opacity: 0.4;
+    }
+  }
+
+  &[type='range'] {
+    height: auto;
+    height: 0.5rem;
+    background-color: var(--color-secondary);
+  }
+}
+
+checkbox-element,
+radio-element,
+select {
+  cursor: pointer;
+}
+
+select {
+  background-image: var(--select-toggle-background);
+  background-position: 99% center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-s);
+  font-weight: bold;
+}
+
+fieldset-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  &.fieldset-group--smushed {
+    fieldset-section + fieldset-section {
+      margin-top: 0;
+    }
+  }
+}
+
+fieldset-section,
+fieldset-group,
+form,
+.checkbox,
+.radio,
+.form-field--SimpleMDE,
+.form-field__help {
+  + fieldset-section,
+  + fieldset-group,
+  + form,
+  + .checkbox,
+  + .radio,
+  + .form-field--SimpleMDE {
+    margin-top: var(--spacing-l);
+  }
+
+  + .form-field__help {
+    margin-top: var(--spacing-s);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  input,
+  select {
+    width: 100%;
+  }
+}
+
+fieldset-section,
+.checkbox,
+.radio {
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  font-size: var(--font-small);
+  color: var(--color-input-label);
+  display: inline-block;
+  margin-bottom: 0.1rem;
+
+  .icon__lbc {
+    margin-bottom: 4px;
+  }
+}
+
+input-submit {
+  display: flex;
+
+  & > *:first-child,
+  & > *:nth-child(2) {
+    margin: 0;
+  }
+
+  & > *:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+  }
+
+  & > *:nth-child(2) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border: 1px solid var(--color-border);
+  }
+}
+
+.checkbox,
+.radio {
+  position: relative;
+
+  input[type='checkbox'],
+  input[type='radio'] {
+    height: var(--height-checkbox);
+    width: var(--height-checkbox);
+    position: absolute;
+    border: none;
+    left: 0;
+    padding: 0;
+    background-color: transparent;
+
+    &:disabled + label {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  label {
+    position: relative;
+    display: inline-block;
+    margin: 0;
+    font-size: var(--font-base);
+    padding-left: calc(var(--height-checkbox) + var(--spacing-s));
+    min-height: var(--height-checkbox);
+
+    &::before {
+      background-color: var(--color-input-toggle-bg);
+    }
+
+    &:hover {
+      &::before {
+        background-color: var(--color-input-toggle-bg-hover);
+      }
+    }
+  }
+
+  label::before,
+  label::after {
+    position: absolute;
+    content: '';
+  }
+
+  // Hide the checkmark by default
+  input[type='checkbox'] + label::after,
+  input[type='radio'] + label::after {
+    content: none;
+  }
+
+  // Unhide on the checked state
+  input[type='checkbox']:checked + label::after,
+  input[type='radio']:checked + label::after {
+    content: '';
+  }
+
+  input[type='checkbox']:focus + label::before,
+  input[type='radio']:focus + label::before {
+    @include focus;
+  }
+}
+
+.checkbox {
+  // Outer box of the fake checkbox
+  label::before {
+    height: var(--height-checkbox);
+    width: var(--height-checkbox);
+    border: 1px solid var(--color-input-border);
+    border-radius: var(--border-radius);
+    left: 0px;
+    top: -1px;
+  }
+
+  // Checkmark of the fake checkbox
+  label::after {
+    height: 6px;
+    width: 12px;
+    border-left: 2px solid;
+    border-bottom: 2px solid;
+    border-color: var(--color-input-toggle);
+    border-left-color: var(--color-input-toggle);
+    transform: rotate(-45deg);
+    left: 6px;
+    top: 6px;
+  }
+}
+
+.radio {
+  input[type='radio'] {
+    border-radius: 50%;
+  }
+
+  // Outer box of the fake radio
+  label::before {
+    height: var(--height-radio);
+    width: var(--height-radio);
+    border: 1px solid var(--color-input-border);
+    border-radius: calc(var(--height-radio) * 0.5);
+    left: 0px;
+    top: -1px;
+  }
+
+  // Checkmark of the fake radio
+  label::after {
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background-color: var(--color-primary);
+    left: 6px;
+    top: 5px;
+  }
+}
+
+.range__label {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: var(--spacing-m);
+
+  > * {
+    width: 33%;
+    text-align: center;
+
+    &:first-of-type {
+      text-align: left;
+    }
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+}
+
+.fieldset-group {
+  @extend fieldset-group;
+}
+
+.fieldset-section {
+  @extend fieldset-section;
+}
+
+.input-submit {
+  @extend input-submit;
+}
+
+input-submit {
+  align-items: center;
+
+  input {
+    z-index: 2;
+  }
+}
+
+input[type='number'] {
+  width: 8rem;
+}
+
+fieldset-group {
+  + fieldset-group {
+    margin-top: var(--spacing-s);
+  }
+
+  &.fieldset-group--smushed {
+    justify-content: flex-start;
+
+    fieldset-section {
+      width: auto;
+      margin: 0;
+
+      &:first-child {
+        input,
+        select {
+          border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &:nth-of-type(2) {
+        input,
+        select {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+
+        label {
+          margin-left: var(--spacing-s);
+        }
+      }
+    }
+
+    &.fieldgroup--paginate {
+      padding-bottom: var(--spacing-l);
+      margin-top: var(--spacing-l);
+      align-items: flex-end;
+      justify-content: center;
+    }
+  }
+
+  // This is a special case where the prefix appears "inside" the input
+  // It would be way simpler to just use position: absolute and give it a width
+  // but the width can change when we use it for the name prefix
+  // lbry:// {input}, lbry://@short {input}, @lbry://longername {input}
+  // The spacing/alignment isn't very robust and will probably need to be changed
+  // if we use this in more places
+  &.fieldset-group--disabled-prefix {
+    align-items: flex-end;
+
+    label {
+      min-height: 18px;
+      white-space: nowrap;
+      // Set width 0 and overflow visible so the label can act as if it's the input label and not a random text node in a side by side div
+      overflow: visible;
+      width: 0;
+    }
+
+    fieldset-section:first-child {
+      max-width: 40%;
+
+      .form-field__prefix {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding: 0.5rem;
+        height: var(--height-input);
+        border: 1px solid;
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
+        border-color: var(--color-input-border);
+        border-right-color: var(--color-input-prefix-border);
+        color: var(--color-text);
+        background-color: var(--color-input-prefix-bg);
+      }
+    }
+
+    fieldset-section:last-child {
+      width: 100%;
+
+      label {
+        // Overwrite the input's label to wrap instead. This is usually
+        // an error message, which could be long in other languages.
+        width: 100%;
+        white-space: normal;
+      }
+
+      input {
+        border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-color: var(--color-input-border);
+        padding-left: var(--spacing-xs);
+      }
+    }
+  }
+}
+
+.form-field--copyable {
+  padding: 0.2rem 0.75rem;
+  text-overflow: ellipsis;
+  user-select: text;
+  cursor: default;
+}
+
+.form-field--short {
+  width: 100%;
+  @media (min-width: $breakpoint-small) {
+    width: 25em;
+  }
+}
+
+.form-field--price-amount {
+  max-width: 6em;
+}
+
+.form-field--price-amount--auto {
+  width: auto;
+  min-width: 100%;
+}
+
+.form-field--address {
+  min-width: 18em;
+  @media (max-width: $breakpoint-xxsmall) {
+    min-width: 10em;
+  }
+}
+
+.form-field__help {
+  @extend .help;
+}
+
+.form-field__help + .checkbox,
+.form-field__help + .radio {
+  margin-top: var(--spacing-l);
+}
+
+.form-field__conjuction {
+  padding-top: 1rem;
+}
+
+.form-field__two-column {
+  @media (min-width: $breakpoint-small) {
+    column-count: 2;
+  }
+}
+
+.form-field__quick-action {
+  float: right;
+  font-size: var(--font-xsmall);
+  margin-top: 2.5%;
+}
+
+.form-field__textarea-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: var(--spacing-xxs);
+  margin-bottom: var(--spacing-s);
+}
+
+.form-field__quick-emojis {
+  > *:not(:last-child) {
+    margin-right: var(--spacing-s);
+  }
+}
+
+fieldset-section {
+  .form-field__internal-option {
+    margin-top: var(--spacing-s);
+    margin-left: 2.2rem;
+
+    &:first-of-type {
+      margin-top: var(--spacing-s); // Extra specificity needed here since _section.scss is applied after this file
+    }
+  }
+
+  .select--slim {
+    margin-bottom: var(--spacing-xxs);
+
+    @media (min-width: $breakpoint-small) {
+      max-width: none;
+    }
+
+    select {
+      max-height: 1.5rem !important;
+      padding: 0 var(--spacing-xs);
+      padding-right: var(--spacing-l);
+    }
+  }
+}
+
+#automatic_dark_mode_range_start,
+#automatic_dark_mode_range_end {
+  min-width: 6em;
+}
+
+.date-picker-input {
+  font-weight: bold;
+
+  .react-datetime-picker__wrapper {
+    border: 0;
+  }
+}
+
+.form-field-date-picker {
+  margin-bottom: var(--spacing-l);
+
+  label {
+    display: block;
+  }
+
+  .controls {
+    display: flex;
+
+    .date-picker-input,
+    .button--link {
+      margin-right: var(--spacing-m);
+    }
+  }
+
+  .react-datetime-picker__button {
+    svg {
+      stroke: var(--color-text);
+    }
+  }
+
+  .react-datetime-picker__button:enabled:hover .react-datetime-picker__button__icon,
+  .react-datetime-picker__button:enabled:focus .react-datetime-picker__button__icon {
+    stroke: var(--color-primary);
+  }
+
+  .react-date-picker__calendar {
+    z-index: 1000;
+  }
+
+  .react-calendar {
+    width: 350px;
+    max-width: 100%;
+    background: var(--color-card-background);
+    border: 1px solid #a0a096;
+    font-family: inherit;
+    line-height: 1;
+  }
+
+  .react-calendar--doubleView {
+    width: 700px;
+  }
+
+  .react-calendar--doubleView .react-calendar__viewContainer {
+    display: flex;
+    margin: -0.5em;
+  }
+
+  .react-calendar--doubleView .react-calendar__viewContainer > * {
+    width: 50%;
+    margin: 0.5em;
+  }
+
+  .react-calendar,
+  .react-calendar *,
+  .react-calendar *:before,
+  .react-calendar *:after {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 2px 1px;
+  }
+
+  .react-calendar button {
+    margin: 0;
+    border: 0;
+    outline: none;
+  }
+
+  .react-calendar button:enabled:hover {
+    cursor: pointer;
+  }
+
+  .react-calendar__navigation {
+    height: 44px;
+    margin-bottom: 1em;
+    color: var(--color-text);
+  }
+
+  .react-calendar__navigation__label {
+    color: var(--color-text);
+  }
+
+  .react-calendar__navigation button {
+    min-width: 44px;
+    background: none;
+    color: var(--color-text);
+  }
+
+  .react-calendar__navigation button:enabled:hover,
+  .react-calendar__navigation button:enabled:focus {
+    background: var(--color-button-alt-bg-hover);
+  }
+
+  .react-calendar__navigation button[disabled] {
+    color: var(--color-text);
+  }
+
+  .react-calendar__month-view__weekdays {
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.75em;
+    color: var(--color-text-alt);
+  }
+
+  .react-calendar__month-view__weekdays__weekday {
+    padding: 0.5em;
+  }
+
+  .react-calendar__month-view__weekNumbers {
+    font-weight: bold;
+  }
+
+  .react-calendar__month-view__weekNumbers .react-calendar__tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75em;
+    padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
+  }
+
+  .react-calendar__month-view__days__day,
+  .react-calendar__month-view__days__day--weekend {
+    color: var(--color-text);
+    font-weight: normal;
+  }
+
+  .react-calendar__month-view__days__day--neighboringMonth {
+    color: var(--color-gray-5);
+  }
+
+  .react-calendar__year-view .react-calendar__tile,
+  .react-calendar__decade-view .react-calendar__tile,
+  .react-calendar__century-view .react-calendar__tile {
+    padding: 2em 0.5em;
+  }
+
+  .react-calendar__tile {
+    max-width: 100%;
+    text-align: center;
+    padding: 0.75em 0.5em;
+    background: none;
+    border-radius: var(--border-radius);
+    color: var(--color-text);
+  }
+
+  .react-calendar__tile:enabled:hover,
+  .react-calendar__tile:enabled:focus {
+    background: var(--color-button-alt-bg-hover);
+  }
+
+  .react-calendar__tile--now {
+    background: var(--color-button-secondary-bg);
+  }
+
+  .react-calendar__tile--now:enabled:hover,
+  .react-calendar__tile--now:enabled:focus {
+    background: var(--color-button-secondary-bg-hover);
+  }
+
+  .react-calendar__tile--hasActive {
+    color: var(--color-button-primary-text);
+    background: var(--color-button-primary-bg);
+  }
+
+  .react-calendar__tile--hasActive:enabled:hover,
+  .react-calendar__tile--hasActive:enabled:focus {
+    background: var(--color-button-primary-bg-hover);
+  }
+
+  .react-calendar__tile--active {
+    color: var(--color-button-primary-text);
+    background: var(--color-button-primary-bg);
+  }
+
+  .react-calendar__tile--active:enabled:hover,
+  .react-calendar__tile--active:enabled:focus {
+    background: var(--color-button-primary-bg-hover);
+  }
+
+  .react-calendar--selectRange .react-calendar__tile--hover {
+    background-color: #e6e6e6;
+  }
+
+  .react-datetime-picker__inputGroup__amPm {
+    background: var(--color-input-bg);
+  }
+
+  .react-datetime-picker__inputGroup__leadingZero {
+    // Not perfect, but good enough for our standard zoom levels.
+    margin-bottom: 1px;
+  }
+
+  .react-datetime-picker__inputGroup__input--hasLeadingZero {
+    margin-left: -0.54em;
+    padding-left: calc(1px + 0.54em);
+  }
+
+  .react-calendar__month-view__days__day--neighboringMonth {
+    color: var(--color-gray-5);
+  }
+}
+
+.form-field-calendar {
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-border);
+  margin-left: calc(var(--spacing-xs) * -1);
+  margin-bottom: var(--spacing-xs);
+  animation: menu-animate-in var(--animation-duration) var(--animation-style);
+  box-shadow: 3px 3px rgba(0, 0, 0, 0.1);
+}

web/scss/themes/odysee/dark.scss

@@ -0,0 +1,143 @@
+[theme='dark'] {
+  // Color overrides
+  --color-primary: #e50054;
+  --color-primary-alt: #66001880;
+  --color-fire: #ff6635;
+  --color-fire-outside: #ff9b20;
+
+  // Structure
+  --color-background: #140e1b;
+  --color-background-overlay: #0c0d0e95;
+  --color-border: #30243d;
+  --color-card-background: #181021;
+  --color-card-background-highlighted: #241c30;
+
+  // Text
+  --color-text: var(--color-gray-1);
+  --color-text-subtitle: var(--color-gray-4);
+  --color-text-empty: var(--color-text-subtitle);
+  --color-text-help: #bbbbbb;
+  --color-text-warning: #212529;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-text-error: var(--color-danger);
+  --color-error: var(--color-danger-alt);
+  --color-blockquote: var(--color-gray-5);
+  --color-blockquote-bg: var(--color-card-background-highlighted);
+  --color-help-warning-text: var(--color-white-alt);
+  --color-help-warning-bg: #fbbf2450;
+
+  // Tags (words)
+  --color-tag-words: var(--color-text);
+  --color-tag-words-bg: var(--color-gray-5);
+  --color-tag-words-hover: var(--color-white);
+  --color-tag-words-bg-hover: var(--color-gray-4);
+
+  // Header
+  --color-header-button: #38274c;
+  --color-header-background: #231830;
+
+  // Button
+  --color-button-primary-text: white;
+  --color-button-primary-hover-text: var(--color-primary-alt);
+  --color-button-secondary-bg: #2c1543;
+  --color-button-secondary-border: #4f1c82;
+  --color-button-secondary-bg-hover: #3b1c5b;
+  --color-button-secondary-text: #efefef;
+  --color-button-alt-bg: var(--color-header-button);
+  --color-button-alt-bg-hover: #2b2037;
+  --color-button-toggle-text: var(--color-text);
+  --color-button-toggle-bg: var(--color-primary-alt);
+  --color-button-toggle-bg-hover: var(--color-primary-alt);
+  --color-button-alt-text: #e2e9f0;
+  --color-button-border: #5b4475;
+  --color-link: var(--color-primary);
+  --color-link-hover: #d75673;
+  --color-link-active: #ec1d4c;
+  --color-link-focus-bg: #3d2d4e;
+
+  // Input
+  --color-input: #f4f4f5;
+  --color-input-label: #a7a7a7;
+  --color-input-placeholder: #f4f4f5;
+  --color-input-bg: var(--color-header-button);
+  --color-input-bg-copyable: #4c3861;
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+  --color-input-toggle: var(--color-primary-alt-3);
+  --color-input-toggle-bg: var(--color-input-bg);
+  --color-input-toggle-bg-hover: var(--color-secondary);
+  --color-input-bg-selected: var(--color-primary-alt);
+  --color-input-prefix-bg: var(--color-input-bg-copyable);
+  --color-input-prefix-border: var(--color-gray-4);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+
+  // Navigation
+  --color-navigation-icon: #76808a;
+  --color-navigation-link: #b9c3ce;
+  --color-navigation-active: #2b2037;
+  --color-navigation-active-text: #c6bcd2;
+  --color-navigation-hover: #21182a;
+  --color-navigation-hover-text: #c6bcd2;
+
+  // Tags
+  --color-tag: #ff85b1;
+  --color-tag-bg: var(--color-navigation-hover);
+  --color-tag-hover: var(--color-white);
+  --color-tag-bg-hover: var(--color-primary-alt-2);
+  --color-tag-mature-bg: var(--color-primary-alt-2);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-background--active: var(--color-primary-alt);
+  --color-menu-icon: #928b9b;
+  --color-menu-icon-active: #d6d6d6;
+
+  // Comments
+  --color-comment-menu: #6a6a6a;
+  --color-comment-menu-hovering: #e0e0e0;
+  --color-comment-highlighted: #484734;
+  --color-comment-threadline: #24192f;
+  --color-comment-threadline-hover: var(--color-gray-4);
+
+  // Other
+  --color-tab-text: var(--color-white);
+  --color-tabs-background: var(--color-card-background);
+  --color-tab-divider: var(--color-white);
+  --color-modal-background: var(--color-card-background);
+  --color-notice: #58563b;
+  --color-purchased: #ffd580;
+  --color-purchased-alt: var(--color-purchased);
+  --color-purchased-text: black;
+  --color-thumbnail-background: var(--color-gray-5);
+  --color-tooltip-bg: #2f3337;
+  --color-focus: #e91e6329;
+  --color-placeholder-background: #261a35;
+  --color-spinner-light: white;
+  --color-spinner-dark: #212529;
+  --color-login-graphic-background: var(--color-background);
+
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #d3d3d3;
+  --color-editor-tag: #efbe5d;
+  --color-editor-attr: #68ccf9;
+  --color-editor-string: #ff8b6b;
+  --color-editor-inline-code-fg: #ce9178;
+  --color-editor-inline-code-fg-preview: #e8b692;
+  --color-editor-inline-code-bg: rgba(20, 68, 102, 0.3);
+  --color-editor-inline-code-bg-preview: #464b50;
+  --color-editor-selected: #264f78;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #a0a0a0;
+
+  // Ads
+  --color-ads-background: #475057;
+  --color-ads-text: #111;
+  --color-ads-link: var(--color-primary-alt);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(255, 255, 255, 0.2);
+  --color-scrollbar-track-bg: transparent;
+}

web/scss/themes/odysee/init/_base-theme.scss

@@ -0,0 +1,199 @@
+//
+// Colors are taken from this color palette
+// https://tailwindcss.com/docs/customizing-colors
+// New colors should be also taken from the same color palette (if possible)
+//
+:root {
+  // Generic colors
+  --color-primary: #047857;
+  --color-primary-alt: #e4f4ef;
+  --color-primary-alt-2: #065f46;
+  --color-primary-alt-3: #10b981;
+  --color-secondary: #1e3a8a;
+  --color-secondary-alt: #dbeafe;
+  --color-secondary-alt-2: #bfdbfe;
+  --color-secondary-alt-3: #1e40af;
+  --color-tertiary: #5b21b6;
+  --color-tertiary-alt: #f5f3ff;
+  --color-danger: #991b1b;
+  --color-danger-alt: #fecaca;
+  --color-warning: #fff58c;
+  --color-black: #111;
+  --color-white: #fdfdfd;
+  --color-white-alt: #fafafa;
+  --color-gray-1: #f3f4f6;
+  --color-gray-2: #e5e7eb;
+  --color-gray-3: #d1d5db;
+  --color-gray-4: #9ca3af;
+  --color-gray-5: #71717a;
+  --color-gray-6: #52525b;
+  --color-gray-7: #3f3f46;
+  --color-gray-8: #27272a;
+  --color-gray-9: #1f1f22;
+  --color-gray-10: #18181b;
+  --color-amber: #f26522;
+  --color-orange: #fb923c;
+
+  // Structure
+  --color-text: var(--color-black);
+  --color-text-inverse: #fdfdfd;
+  --color-background: #fafafa;
+  --color-background--splash: #212529;
+  --color-border: #ededed;
+  --color-background-overlay: #21252980;
+  --color-card-background: #ffffff;
+  --color-card-background-highlighted: #f1f7fe;
+
+  // Text
+  --color-text-selection-bg: var(--color-secondary-alt);
+  --color-text-selection: var(--color-secondary);
+  --color-text-empty: #999999;
+  --color-text-help: #999999;
+  --color-text-subtitle: #767676;
+  --color-text-warning: #212529;
+  --color-help-warning-bg: #fef3c7;
+  --color-help-warning-text: #555555;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-blockquote: var(--color-gray-3);
+  --color-text-error: var(--color-danger);
+  --color-error: var(--color-danger-alt);
+  --color-tooltip-bg: #222;
+  --color-tooltip-text: #fafafa;
+
+  // Header
+  --color-header-background: #ffffff;
+  --color-header-button: var(--color-button-alt-bg);
+  --color-header-button-active: var(--color-primary-alt);
+  --color-header-button-hover: var(--color-primary-alt);
+
+  // Button
+  --color-button-primary-bg: var(--color-primary);
+  --color-button-primary-text: var(--color-primary-alt);
+  --color-button-primary-bg-hover: var(--color-primary-alt-2);
+  --color-button-primary-hover-text: var(--color-primary-alt);
+  --color-button-secondary-bg: var(--color-secondary-alt);
+  --color-button-secondary-border: var(--color-secondary-alt);
+  --color-button-secondary-text: var(--color-secondary);
+  --color-button-secondary-bg-hover: var(--color-secondary-alt-2);
+  --color-button-alt-bg: var(--color-gray-1);
+  --color-button-alt-text: var(--color-text);
+  --color-button-alt-bg-hover: var(--color-gray-2);
+  --color-button-toggle-text: var(--color-primary);
+  --color-button-toggle-bg: var(--color-primary-alt);
+  --color-button-border: var(--color-gray-3);
+  --color-link: var(--color-primary);
+  --color-link-hover: var(--color-black);
+  --color-link-focus-bg: var(--color-gray-1);
+
+  // Input
+  --color-input-color: var(--color-black);
+  --color-input-label: var(--color-gray-5);
+  --color-input-placeholder: var(--color-gray-8);
+  --color-input-bg: var(--color-gray-1);
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+  --color-input-toggle: var(--color-secondary);
+  --color-input-toggle-bg: var(--color-gray-1);
+  --color-input-toggle-bg-hover: var(--color-secondary-alt);
+  --color-input-prefix-bg: var(--color-gray-2);
+  --color-input-prefix-border: var(--color-gray-5);
+  --color-input-bg-selected: var(--color-primary-alt);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+
+  // Navigation
+  --color-navigation-icon: var(--color-gray-5);
+  --color-navigation-link: var(--color-gray-5);
+  --color-navigation-active: var(--color-primary-alt);
+  --color-navigation-active-text: var(--color-primary);
+  --color-navigation-hover: var(--color-gray-1);
+  --color-navigation-hover-text: var(--color-primary);
+
+  // Tags
+  --color-tag: var(--color-gray-5);
+  --color-tag-bg: var(--color-button-alt-bg);
+  --color-tag-hover: var(--color-primary-alt);
+  --color-tag-bg-hover: var(--color-button-primary-bg);
+
+  // Tags (words)
+  --color-tag-words: var(--color-gray-5);
+  --color-tag-words-bg: var(--color-button-alt-bg);
+  --color-tag-words-hover: var(--color-button-alt-text);
+  --color-tag-words-bg-hover: var(--color-button-alt-bg-hover);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-background--active: var(--color-card-background-highlighted);
+  --color-menu-icon: var(--color-navigation-link);
+
+  // Comments
+  --color-comment-menu: var(--color-gray-3);
+  --color-comment-menu-hovering: var(--color-gray-6);
+  --color-comment-highlighted: #fff2d9;
+  --color-comment-threadline: var(--color-gray-1);
+  --color-comment-threadline-hover: var(--color-gray-4);
+
+  // Icons
+  --color-follow-bg: #ffd4da;
+  --color-follow-icon: #e2495e;
+  --color-view-bg: var(--color-secondary-alt);
+  --color-view-icon: var(--color-secondary);
+
+  // Snack
+  --color-snack-bg: var(--color-primary);
+  --color-snack: var(--color-white);
+  --color-snack-bg-error: var(--color-danger);
+  --color-snack-upgrade: var(--color-tertiary);
+
+  // Superchat
+  --color-superchat-text: var(--color-black);
+  --color-superchat: var(--color-cost);
+  --color-superchat__light: #fcd34d50;
+  --color-superchat-2: #fde68a;
+  --color-superchat-3: #fef3c7;
+  --color-superchat-3__light: #fef3c750;
+  --color-superchat-4: #fffbeb;
+
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #707070;
+  --color-editor-tag: #ea9400;
+  --color-editor-attr: #04b0f4;
+  --color-editor-string: #ff7451;
+  --color-editor-inline-code-fg: var(--color-text);
+  --color-editor-inline-code-fg-preview: #2e3439;
+  --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
+  --color-editor-inline-code-bg-preview: #d0e8ff;
+  --color-editor-selected: #add6ff;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #cccccc;
+
+  // Other
+  --color-focus: #bfdbfe;
+  --color-notification: #cc190f;
+  --color-live: #cc190f;
+  --color-nag: var(--color-orange);
+  --color-cost: #fcd34d;
+  --color-notice: #fef3ca;
+  --color-purchased: var(--color-cost);
+  --color-purchased-alt: #ffebc2;
+  --color-purchased-text: var(--color-gray-5);
+  --color-thumbnail-background: var(--color-gray-1);
+  --color-spinner-light: var(--color-white);
+  --color-spinner-dark: var(--color-black);
+  --color-placeholder-background: var(--color-gray-1);
+  --color-file-viewer-background: var(--color-card-background);
+  --color-tabs-background: var(--color-card-background);
+  --color-tab-divider: var(--color-primary);
+  --color-modal-background: var(--color-card-background);
+  --color-login-graphic-background: var(--color-primary-alt);
+
+  // Ads
+  --color-ads-background: #fae5ff;
+  --color-ads-link: var(--color-link);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-track-bg: transparent;
+}

web/scss/themes/odysee/init/_gui.scss

@@ -0,0 +1,517 @@
+// Generic html styles used across the App
+// component specific styling should go in the component scss file
+
+*::selection {
+  background-color: var(--color-text-selection-bg);
+  color: var(--color-text-selection);
+}
+
+*:focus {
+  outline: none;
+}
+
+html {
+  @include font-sans;
+  height: 100%;
+  min-height: 100%;
+  overflow-x: hidden;
+
+  color: var(--color-text);
+  background-color: var(--color-background);
+  font-size: 16px;
+}
+
+body {
+  font-size: 1em;
+  cursor: default;
+  line-height: 1.5;
+  font-weight: 400;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+hr {
+  height: 1px;
+  background-color: var(--color-gray-2);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1rem;
+}
+
+p,
+ol,
+ul {
+  & + p,
+  & + ul,
+  & + ol {
+    margin-top: var(--spacing-s);
+  }
+}
+
+ul,
+ol {
+  li {
+    position: relative;
+    list-style-position: outside;
+    margin: var(--spacing-xs) 0;
+    margin-left: var(--spacing-s);
+    margin-bottom: 0;
+
+    @media (min-width: $breakpoint-small) {
+      margin-left: var(--spacing-xl);
+    }
+  }
+}
+
+.ul--no-style {
+  list-style: none;
+  margin-bottom: 0;
+
+  li {
+    margin: 0;
+  }
+}
+
+dl {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  overflow-x: visible;
+  margin-top: var(--spacing-m);
+}
+
+dt {
+  flex-basis: 50%;
+  text-align: left;
+  font-weight: bold;
+}
+
+.dt__text {
+  margin-right: var(--spacing-s);
+}
+
+dd {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-basis: 45%;
+  flex-grow: 1;
+  margin: 0;
+  text-align: right;
+
+  .help--warning {
+    margin-bottom: 0;
+    margin-top: var(--spacing-s);
+    text-align: left;
+  }
+}
+
+.dd__text {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dd__button {
+  margin-right: var(--spacing-s);
+}
+
+dt,
+dd {
+  padding: var(--spacing-m) var(--spacing-s);
+  border-top: 1px solid var(--color-border);
+
+  &:last-of-type {
+    border-bottom: 1px solid var(--color-border);
+  }
+}
+
+blockquote {
+  padding: 0 0.8rem;
+  margin-top: var(--spacing-xxs);
+  margin-bottom: var(--spacing-xxs);
+  opacity: 0.9;
+  border-left: 0.2rem solid var(--color-blockquote);
+  color: var(--color-text-subtitle);
+}
+
+code {
+  @include font-mono;
+  font-size: 1.5rem;
+}
+
+hr {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-border);
+}
+
+img,
+a {
+  -webkit-user-drag: none;
+}
+
+img {
+  // Hide alt text when an image fails to load
+  text-indent: -9999px;
+}
+
+textarea {
+  min-height: calc(var(--height-input) * 2);
+}
+
+.columns {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  > * {
+    flex-grow: 1;
+    flex-basis: 0;
+    min-width: 15rem;
+    margin-bottom: var(--spacing-l);
+
+    &:first-child {
+      flex-basis: 1px;
+      margin-right: 1.5rem;
+    }
+  }
+
+  @media (max-width: $breakpoint-small) {
+    flex-direction: column;
+
+    & > * {
+      margin: 0;
+      margin-bottom: var(--spacing-m);
+      width: 100%;
+      flex-basis: auto;
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.disabled {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+.column {
+  display: flex;
+
+  .column__item:not(:first-child) {
+    padding-left: $spacing-width * 2/3;
+    flex: 1;
+  }
+
+  .column__item--between {
+    justify-content: space-between;
+  }
+
+  @media (max-width: $breakpoint-small) {
+    flex-direction: column;
+    .column__item:not(:first-child) {
+      padding-left: 0;
+      flex: 1;
+    }
+    & > * {
+      margin: 0;
+      margin-bottom: var(--spacing-m);
+      width: 100%;
+      flex-basis: auto;
+
+      &:first-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.truncated-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+}
+
+.busy-indicator__loader {
+  min-width: 16px;
+  min-height: 8px;
+  margin: -1rem 0;
+  padding: 0 30px;
+
+  background: url('../../static/img/busy.gif') no-repeat center center;
+  display: inline-block;
+  vertical-align: middle;
+
+  &:first-child {
+    padding-left: 2px;
+  }
+
+  &:last-child {
+    padding-right: 2px;
+  }
+}
+
+.help {
+  display: block;
+  font-size: var(--font-xsmall);
+  color: var(--color-text-help);
+  margin-top: var(--spacing-s);
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-m);
+  }
+
+  .button--link + .button--link {
+    margin-left: var(--spacing-s);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    font-size: var(--font-small);
+  }
+}
+
+.help--warning {
+  @extend .help;
+  padding: var(--spacing-s);
+  border-radius: var(--border-radius);
+  background-color: var(--color-help-warning-bg);
+  color: var(--color-help-warning-text);
+  margin-bottom: var(--spacing-s);
+  border: 1px solid var(--color-border);
+}
+
+.help--notice {
+  @extend .help--warning;
+  background-color: var(--color-card-background-highlighted);
+}
+
+.help--inline {
+  @extend .help;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
+
+  .icon--help {
+    top: 3px;
+    margin-left: 2px;
+  }
+}
+
+.help--card-actions {
+  @extend .help;
+  margin-top: var(--spacing-m);
+}
+
+.help--dt {
+  @extend .help;
+  display: inline-block;
+  margin-top: 0;
+}
+
+.help--spendable {
+  margin-left: var(--spacing-xxs);
+}
+
+.empty {
+  color: var(--color-text-empty);
+  font-style: italic;
+}
+
+.empty--centered {
+  text-align: center;
+  padding: calc(var(--spacing-l) * 3) 0;
+}
+
+.qr-code {
+  width: 134px;
+  height: 134px;
+  border: 3px solid white;
+
+  &.qr-code--right-padding {
+    margin-right: $spacing-vertical * 2/3;
+  }
+
+  &.qr-code--top-padding {
+    margin-top: $spacing-vertical * 2/3;
+  }
+}
+
+.error__wrapper {
+  background-color: var(--color-error);
+  padding: var(--spacing-s);
+  border-radius: var(--border-radius);
+}
+
+.error__wrapper--no-overflow {
+  @extend .error__wrapper;
+  max-height: 10rem;
+  overflow: hidden;
+}
+
+.error__text {
+  color: var(--color-text-error);
+}
+
+.help--error {
+  @extend .help;
+  color: var(--color-text-error);
+}
+
+.thumbnail-preview {
+  width: var(--thumbnail-preview-width);
+  height: var(--thumbnail-preview-height);
+  background-color: var(--color-thumbnail-background);
+  padding: var(--spacing-s);
+  font-size: var(--font-small);
+  border-radius: var(--border-radius);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.thumbnail-picker__preview {
+  width: calc(var(--thumbnail-preview-width) * 1.5);
+  height: calc(var(--thumbnail-preview-height) * 1.5);
+  background-color: var(--color-thumbnail-background);
+  padding: var(--spacing-s);
+  font-size: var(--font-small);
+  border-radius: var(--border-radius);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.emoji {
+  font-size: 1.3em;
+}
+
+.download-text {
+  font-size: var(--font-xsmall);
+}
+
+.notice-message {
+  position: relative;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-l);
+  background-color: var(--color-primary-alt);
+
+  ~ .card {
+    margin-top: var(--spacing-m);
+  }
+}
+
+.notice-message--loud {
+  @extend .notice-message;
+  background-color: #fef1f6;
+  color: var(--color-black);
+  font-weight: bold;
+
+  .button {
+    color: #fa6165;
+  }
+}
+
+.privacy-img {
+  height: 10rem;
+}
+
+.confirm__label {
+  @extend label;
+}
+
+.confirm__value {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing-m);
+  font-size: var(--font-large);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.confirm__value--no-gap {
+  margin-bottom: 0;
+}
+
+.confirm__value--subitem {
+  font-size: var(--font-xsmall);
+}
+
+.mobile-only {
+  display: none;
+
+  @media (max-width: $breakpoint-small) {
+    display: block;
+  }
+}
+
+.mobile-hidden {
+  @media (max-width: $breakpoint-small) {
+    display: none !important;
+  }
+}
+
+.ads-test {
+  height: 50vh;
+  position: relative;
+
+  .video-js {
+    height: 50vh;
+  }
+
+  .video-js .vjs-tech {
+    height: 50vh;
+  }
+}
+
+.adspruce-bannerspot {
+  height: 5rem;
+  width: 100%;
+}
+
+.release__notes {
+  max-height: 50vh;
+  overflow: scroll;
+}
+
+.signup__odysee-logo {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    margin-top: var(--spacing-xl);
+    height: 4rem;
+  }
+}
+
+.home__meme {
+  text-align: center;
+  font-weight: bold;
+  line-height: 1;
+  font-size: 1rem;
+  margin-bottom: var(--spacing-m);
+
+  @media (min-width: $breakpoint-small) {
+    font-size: 1.2rem;
+    margin-bottom: var(--spacing-l);
+  }
+}

web/scss/themes/odysee/init/_mixins.scss

@@ -0,0 +1,237 @@
+@mixin between {
+  display: flex;
+  justify-content: space-between;
+}
+
+@mixin breakpoint-max($breakpoint) {
+  @media (max-width: #{$breakpoint}px) {
+    @content;
+  }
+}
+
+@mixin breakpoint-min($breakpoint) {
+  @media (min-width: #{$breakpoint}px) {
+    @content;
+  }
+}
+
+@mixin center {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+@mixin clearfix {
+  clear: both;
+  content: '';
+  display: block;
+}
+
+// (Smart) text truncation
+// Pass in a width to customize how much text is allowed
+// Omit value for basic text truncation
+@mixin constrict($value: null) {
+  @if ($value) {
+    max-width: $value;
+  }
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin create-grid($items-per-row: 4) {
+  grid-template: repeat(1, 1fr) / repeat($items-per-row, 1fr);
+}
+
+// Smart font include
+// Simply pass in the font-weight you want to use and the normal/italicized versions will be added
+// No more weighing down the front-end with references to unused weights
+@mixin font-face($font-weight, $relative-font-path, $font-name) {
+  @font-face {
+    font-family: $font-name;
+    font-style: normal;
+    font-weight: $font-weight;
+    // sass-lint:disable indentation
+    src: url('#{$relative-font-path}/#{$font-weight}.woff2') format('woff2'),
+      url('#{$relative-font-path}/#{$font-weight}.woff') format('woff');
+    // sass-lint:enable indentation
+  }
+
+  @font-face {
+    font-family: $font-name;
+    font-style: italic;
+    font-weight: $font-weight;
+    // sass-lint:disable indentation
+    src: url('#{$relative-font-path}/#{$font-weight}i.woff2') format('woff2'),
+      url('#{$relative-font-path}/#{$font-weight}i.woff') format('woff');
+    // sass-lint:enable indentation
+  }
+}
+
+@mixin font-mono {
+  font-family: 'Fira Code', 'Courier New', monospace;
+}
+
+@mixin font-sans {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+@mixin font-serif {
+  font-family: Georgia, serif;
+}
+
+@mixin hide-text {
+  border: none;
+  color: transparent;
+  font: 0 / 0 a;
+  text-shadow: none;
+}
+
+// Cross-browser line-clamp support
+@mixin line-clamp($element-height: 2rem, $row-count: 2, $fade-color: var(--lbry-white), $computed-position: relative) {
+  height: $element-height;
+  overflow: hidden;
+  position: $computed-position;
+
+  &::after {
+    width: 50%;
+    height: calc(#{$element-height} / #{$row-count});
+    right: 0;
+    bottom: 0;
+
+    background-image: linear-gradient(to right, rgba($lbry-white, 0), #{$fade-color} 80%);
+    content: '';
+    position: absolute;
+  }
+}
+
+@mixin no-user-select {
+  user-select: none;
+
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+// Use CSS variables without upsetting Sass-Lint
+// https://github.com/sasstools/sass-lint/issues/1161#issuecomment-390537190
+@mixin root-prop($prop: null, $value: null) {
+  @if ($prop and $value) {
+    #{$prop}: $value;
+  }
+}
+
+@mixin selection($background-color: var(--lbry-white), $text-color: var(--lbry-black)) {
+  &::selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+
+  &::-moz-selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
+}
+
+@mixin thumbnail {
+  &::before,
+  &::after {
+    content: '';
+  }
+
+  &::before {
+    float: left;
+    padding-top: var(--aspect-ratio-standard);
+  }
+
+  &::after {
+    clear: both;
+    display: block;
+  }
+}
+
+@mixin focus {
+  box-shadow: 0 0 0 3px var(--color-focus);
+}
+
+@mixin linkFocus {
+  background-color: var(--color-link-focus-bg);
+  box-shadow: 0 0 0 5px var(--color-link-focus-bg);
+}
+
+@mixin underline($text-color: var(--lbry-black), $whitespace-color: var(--lbry-white)) {
+  @include selection($text-color, $whitespace-color);
+
+  background-image: linear-gradient($whitespace-color, $whitespace-color),
+    linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
+  background-position: 0 88%, 100% 88%, 0 88%;
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
+  box-decoration-break: clone;
+  display: inline;
+  text-decoration: none;
+  text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color,
+    0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color,
+    -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color,
+    -0.15rem 0 $whitespace-color;
+
+  @-moz-document url-prefix() {
+    // sass-lint:disable-line empty-args
+    background-position: 0 90%, 100% 90%, 0 90%;
+  }
+}
+
+@mixin placeholder {
+  animation: pulse 2s infinite ease-in-out;
+  background-color: var(--color-placeholder-background);
+  border-radius: var(--card-radius);
+  border-width: 0;
+}
+
+@mixin mediaThumbHoverZoom {
+  .media__thumb,
+  img {
+    transition: all 0.2s ease;
+  }
+
+  &:hover {
+    .media__thumb,
+    img {
+      transform: scale(1.05);
+    }
+  }
+}
+
+@mixin handleClaimTileGifThumbnail($width) {
+  .ff-canvas,
+  .freezeframe-img {
+    height: calc(#{$width} * (9 / 16)) !important;
+    width: $width;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+@mixin handleClaimListGifThumbnail($width) {
+  .ff-canvas,
+  .freezeframe-img {
+    height: calc(#{$width} * (9 / 16)) !important;
+    width: $width;
+  }
+}
+
+@mixin handleChannelGif($size) {
+  height: $size;
+  width: $size;
+
+  .ff-canvas,
+  .freezeframe-img {
+    border-radius: var(--border-radius);
+    height: $size !important;
+    width: $size !important;
+  }
+}

web/scss/themes/odysee/init/_reset.scss

@@ -0,0 +1,245 @@
+html {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+
+  border: none;
+  box-sizing: inherit;
+  outline: 0;
+}
+
+[disabled] {
+  pointer-events: none;
+  resize: none;
+}
+
+[readonly] {
+  cursor: not-allowed;
+}
+
+[for],
+[role='button'],
+[type='button'],
+[type='checkbox'],
+[type='file'],
+[type='radio'],
+[type='select'],
+[type='submit'] {
+  cursor: pointer;
+}
+
+a,
+area,
+button,
+[role='button'],
+input,
+label,
+select,
+summary,
+textarea {
+  // Remove touch delay on supported devices
+  touch-action: manipulation;
+}
+
+button,
+input,
+select,
+textarea {
+  background-color: transparent;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  &:disabled {
+    cursor: default;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  font-size: 1em;
+}
+
+ol,
+ul {
+  list-style-position: inside;
+
+  > li {
+    list-style-position: inside;
+  }
+}
+
+table {
+  border-spacing: 0;
+}
+
+dd {
+  width: 80%;
+  float: left;
+}
+
+dl {
+  width: 100%;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+dt {
+  width: 20%;
+  float: left;
+}
+
+img {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+a {
+  text-decoration: none;
+}
+
+button {
+  background-color: transparent;
+  line-height: inherit;
+
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}
+
+hr {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-gray-1);
+}
+
+input {
+  background-color: transparent;
+  color: inherit;
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.2;
+  }
+
+  &::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+}
+
+select {
+  outline: none;
+}
+
+textarea {
+  width: 100%;
+  min-height: var(--spacing-xxl);
+  padding: var(--spacing-s);
+  // border-color should be added in apps for blur/focus
+  border: 1px solid;
+
+  &:not([disabled]) {
+    resize: vertical;
+  }
+}
+
+@media print {
+  // sass-lint:disable-block no-important
+  // Intelligent print styles
+  pre,
+  blockquote {
+    border: 1px solid var(--color-gray-5) !important;
+    page-break-inside: avoid !important;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid !important;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  @page {
+    margin: 0.5cm !important;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3 !important;
+    widows: 3 !important;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid !important;
+  }
+
+  thead {
+    display: table-header-group !important;
+  }
+
+  // Faster, more stable printing
+  * {
+    background-color: transparent !important;
+    background-image: none !important;
+    color: var(--lbry-black) !important;
+    filter: none !important;
+    text-shadow: none !important;
+  }
+
+  p {
+    a {
+      &[href]::after {
+        // Show hypertext data for links and abbreviations
+        content: ' (' attr(href) ')' !important;
+      }
+
+      &[href^='javascript:'],
+      &[href^='#'] {
+        &::after {
+          content: '' !important;
+        }
+      }
+    }
+
+    abbr {
+      &[title]::after {
+        content: ' (' attr(title) ')' !important;
+      }
+    }
+
+    a,
+    abbr {
+      text-decoration: underline !important;
+      word-wrap: break-word !important;
+    }
+  }
+}

web/scss/themes/odysee/init/_vars.scss

@@ -0,0 +1,108 @@
+// Both of these should probably die and become variables as well
+$spacing-vertical: 2rem;
+$spacing-width: 36px;
+
+$breakpoint-xxsmall: 450px;
+$breakpoint-xsmall: 600px;
+$breakpoint-small: 900px;
+$breakpoint-medium: 1150px;
+$breakpoint-large: 1600px;
+
+:root {
+  --border-radius: 10px;
+  --height-input: 2.5rem;
+  --height-button: 2.5rem;
+  --height-checkbox: 24px;
+  --height-radio: 24px;
+  --height-badge: 24px;
+
+  // Spacing
+  --spacing-xxs: calc(2rem / 5);
+  --spacing-xs: calc(2rem / 4);
+  --spacing-s: calc(2rem / 3);
+  --spacing-m: calc(2rem / 2);
+  --spacing-l: 2rem;
+  --spacing-xl: 3rem;
+
+  // Aspect ratio
+  --aspect-ratio-bluray: 41.6666666667%; // 12:5
+  --aspect-ratio-panavision: 36.3636363636%; // 11:4
+  --aspect-ratio-sd: 75%; // 4:3
+  --aspect-ratio-standard: 56.25%; // 16:9
+
+  // Type
+  --font-mono: 'Fira Code';
+  --font-sans: Inter;
+  --font-serif: Georgia;
+  --font-weight-base: 400;
+  --font-weight-light: 300;
+  --font-weight-bold: 700;
+  --font-base: 14px;
+  --font-body: 1rem;
+  --font-xxsmall: 0.65rem;
+  --font-xsmall: 0.7344rem;
+  --font-small: 0.8571rem;
+  --font-large: 1.3rem;
+  --font-title: 1.71rem;
+  --font-heading: 2.94rem;
+
+  // Width & spacing
+  --page-max-width: 1280px;
+  --page-max-width--filepage: 1700px;
+  --mac-titlebar-height: 24px;
+  --mobile: 600px;
+  --side-nav-width: 230px;
+  --side-nav-width--micro: 125px;
+
+  --spacing-main-padding: var(--spacing-xl);
+  --floating-viewer-width: 32rem;
+  --floating-viewer-height: 18rem; // 32 * 9/16
+  --floating-viewer-info-height: 5rem;
+  --floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
+  --option-select-width: 8rem;
+
+  // Text
+  --text-max-width: 660px;
+  --text-link-padding: 4px;
+
+  // Tabs
+  --tab-indicator-size: 0.5rem;
+
+  // Header
+  // This is tied to the floating player so it knows where to attach to
+  // ui/component/fileRenderFloating/view.jsx
+  --header-height: 80px;
+
+  // Inline Player
+  --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2);
+
+  // Card
+  --card-radius: var(--border-radius);
+  --card-max-width: 1000px;
+  --card-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  // Modal
+  --modal-width: 550px;
+
+  // Animation :)
+  --animation-duration: 0.2s;
+  --animation-style: ease-in-out;
+
+  // Image
+  --thumbnail-preview-height: 100px;
+  --thumbnail-preview-width: 177px;
+  --cover-photo-height: 210px;
+  --channel-thumbnail-width: 10rem;
+  --channel-thumbnail-width--small: 4rem;
+  --file-list-thumbnail-width: 10rem;
+
+  --tag-height: 1.5rem;
+
+  --livestream-comments-width: 30rem;
+}
+
+@media (max-width: $breakpoint-small) {
+  :root {
+    --font-body: 0.8rem;
+  }
+}

web/scss/themes/odysee/light.scss

@@ -0,0 +1,155 @@
+:root {
+  // Color overrides
+  --color-primary: #fa6165;
+  --color-primary-alt: #fef1f6;
+  --color-primary-alt-2: #fb7e82;
+  --color-primary-alt-3: #fbcbdd;
+  --color-secondary: #f9902a;
+  --color-secondary-alt: #fee8d2;
+  --color-secondary-alt-2: #fefcf6;
+
+  // Structure
+  --color-border: #ededed;
+  --color-background: #fafafa;
+  --color-background-overlay: #21252980;
+  --color-card-background: #ffffff;
+  --color-card-background-highlighted: #fff5f5;
+
+  // Text
+  --color-text-selection-bg: var(--color-primary-alt);
+  --color-text-selection: var(--color-primary);
+  --color-text-error: var(--color-danger);
+  --color-text-empty: #999999;
+  --color-text-help: #999999;
+  --color-text-subtitle: #767676;
+  --color-text-warning: #212529;
+  --color-help-warning-bg: #fef3c7;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-blockquote: var(--color-gray-3);
+  --color-blockquote-bg: var(--color-gray-1);
+  --color-tooltip-bg: #222;
+  --color-tooltip-text: #fafafa;
+
+  // Header
+  --color-header-button: var(--color-button-alt-bg);
+  --color-header-background: #ffffff;
+
+  // Button
+  --color-button-alt-bg: var(--color-gray-1);
+  --color-button-alt-bg-hover: var(--color-gray-2);
+  --color-button-alt-text: black;
+  --color-button-primary-bg: var(--color-primary);
+  --color-button-primary-bg-hover: var(--color-primary-alt-2);
+  --color-button-primary-text: var(--color-primary-alt);
+  --color-button-primary-hover-text: var(--color-white);
+  --color-button-secondary-bg: var(--color-primary-alt);
+  --color-button-secondary-border: var(--color-primary-alt-3);
+  --color-button-secondary-text: var(--color-primary);
+  --color-button-secondary-bg-hover: var(--color-primary-alt-3);
+  --color-button-toggle-text: var(--color-primary);
+  --color-button-toggle-bg: var(--color-primary-alt);
+  --color-button-toggle-bg-hover: var(--color-primary-alt);
+  --color-button-border: var(--color-gray-3);
+  --color-link-active: var(--color-primary);
+  --color-link-focus-bg: #f1f1f1;
+  --color-link: var(--color-primary);
+
+  // Input
+  --color-input-bg-selected: var(--color-primary-alt);
+  --color-input-color: #111111;
+  --color-input-label: var(--color-gray-5);
+  --color-input-placeholder: #212529;
+  --color-input-bg: var(--color-gray-1);
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+  --color-input-toggle: var(--color-secondary);
+  --color-input-toggle-bg: var(--color-gray-1);
+  --color-input-toggle-bg-hover: var(--color-secondary-alt);
+  --color-input-prefix-bg: var(--color-gray-2);
+  --color-input-prefix-border: var(--color-gray-5);
+  --select-toggle-background: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
+
+  // Navigation
+  --color-navigation-icon: var(--color-gray-5);
+  --color-navigation-link: var(--color-gray-5);
+  --color-navigation-active: var(--color-primary-alt);
+  --color-navigation-active-text: var(--color-primary);
+  --color-navigation-hover: var(--color-gray-1);
+  --color-navigation-hover-text: #3f3f3f;
+
+  // Tags
+  --color-tag: var(--color-primary-alt-2);
+  --color-tag-bg: #f9f6f7;
+  --color-tag-hover: var(--color-button-alt-text);
+  --color-tag-bg-hover: var(--color-button-alt-bg-hover);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-icon: var(--color-navigation-link);
+  --color-menu-icon-active: var(--color-navigation-link);
+  --color-menu-background--selected: var(--color-secondary-alt);
+  --color-menu-background--active: var(--color-primary-alt);
+
+  // Comments
+  --color-comment-menu: #e0e0e0;
+  --color-comment-menu-hovering: #6a6a6a;
+  --color-comment-highlighted: #fff2d9;
+  --color-comment-threadline: var(--color-gray-1);
+  --color-comment-threadline-hover: var(--color-gray-4);
+
+  // Superchat
+  --color-superchat-text: var(--color-black);
+  --color-superchat: #fcd34d;
+  --color-superchat__light: #fcd34d50;
+  --color-superchat-2: #fde68a;
+  --color-superchat-3: #fef3c7;
+  --color-superchat-3__light: #fef3c750;
+  --color-superchat-4: #fffbeb;
+
+  // Color
+  --color-focus: #8dbff0;
+  --color-nag: #fa8700;
+  --color-error: #fcafca;
+  --color-notice: #fef3ca;
+  --color-purchased: var(--color-cost);
+  --color-purchased-alt: #ffebc2;
+  --color-purchased-text: black;
+  --color-thumbnail-background: var(--color-gray-1);
+  --color-spinner-light: #ffffff;
+  --color-spinner-dark: #212529;
+  --color-placeholder-background: #f0f0f0;
+  --color-file-viewer-background: var(--color-card-background);
+  --color-tabs-background: var(--color-card-background);
+  --color-tab-divider: var(--color-primary);
+  --color-modal-background: var(--color-card-background);
+
+  // Icons
+  --color-follow-bg: #ffd4da;
+  --color-follow-icon: #e2495e;
+  --color-view-bg: var(--color-secondary-alt);
+  --color-view-icon: var(--color-secondary);
+
+  // Editor
+  --color-editor-cursor: var(--color-text);
+  --color-editor-quote: #707070;
+  --color-editor-tag: #ea9400;
+  --color-editor-attr: #04b0f4;
+  --color-editor-string: #ff7451;
+  --color-editor-inline-code-fg: var(--color-text);
+  --color-editor-inline-code-fg-preview: #2e3439;
+  --color-editor-inline-code-bg: rgba(157, 161, 165, 0.3);
+  --color-editor-inline-code-bg-preview: #d0e8ff;
+  --color-editor-selected: #add6ff;
+  --color-editor-link: var(--color-link);
+  --color-editor-url: var(--color-editor-string);
+  --color-editor-hr: var(--color-editor-tag);
+  --color-editor-hr-preview: #cccccc;
+
+  // Ads
+  --color-ads-background: #fae5ff;
+  --color-ads-link: var(--color-link);
+
+  // Scrollbar
+  --color-scrollbar-thumb-bg: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-track-bg: transparent;
+}

web/theme.js

@@ -0,0 +1,6 @@
+// @if BRANDED_SITE='odysee'
+import './scss/odysee.scss';
+// @endif
+// @if BRANDED_SITE='lbrytv'
+import './scss/lbrytv.scss';
+// @endif

web/webpack.config.js

@@ -1,4 +1,4 @@
-const { WEBPACK_WEB_PORT, LBRY_WEB_API } = require('../config.js');
+const { WEBPACK_WEB_PORT, LBRY_WEB_API, BRANDED_SITE } = require('../config.js');
 const path = require('path');
 const fs = require('fs');
 const merge = require('webpack-merge');
@@ -153,6 +153,7 @@ const webConfig = {
         exclude: /node_modules/,
         options: {
           TARGET: 'web',
+          BRANDED_SITE: BRANDED_SITE,
           ppOptions: {
             type: 'js',
           },

web/yarn.lock

@@ -3331,9 +3331,9 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
-lbry-redux@lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264:
+lbry-redux@lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/508e8d36fd91106beb7d6b4edb9f726dae0e6264"
+  resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/b075c103445a9355d617116fbb491496ecb473da"
   dependencies:
     proxy-polyfill "0.1.6"
     reselect "^3.0.0"