Compare commits
6 commits
master
...
favi-cherr
Author | SHA1 | Date | |
---|---|---|---|
|
408dd029eb | ||
|
a145ce5df3 | ||
|
fd2621d7f2 | ||
|
05ecdc9727 | ||
|
736500a92a | ||
|
499b4d90b5 |
22 changed files with 432 additions and 279 deletions
|
@ -5,7 +5,6 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||||
<link rel="icon" type="image/png" href="/public/favicon.png" />
|
|
||||||
|
|
||||||
<link rel="preload" href="/public/font/v1/300.woff" as="font" type="font/woff" crossorigin />
|
<link rel="preload" href="/public/font/v1/300.woff" as="font" type="font/woff" crossorigin />
|
||||||
<link rel="preload" href="/public/font/v1/300i.woff" as="font" type="font/woff" crossorigin />
|
<link rel="preload" href="/public/font/v1/300i.woff" as="font" type="font/woff" crossorigin />
|
||||||
|
|
|
@ -42,7 +42,10 @@ type Props = {
|
||||||
isReply: boolean,
|
isReply: boolean,
|
||||||
activeChannel: string,
|
activeChannel: string,
|
||||||
activeChannelClaim: ?ChannelClaim,
|
activeChannelClaim: ?ChannelClaim,
|
||||||
livestream?: boolean,
|
bottom: boolean,
|
||||||
|
onSubmit: (string, string) => void,
|
||||||
|
livestream: boolean,
|
||||||
|
embed?: boolean,
|
||||||
toast: (string) => void,
|
toast: (string) => void,
|
||||||
claimIsMine: boolean,
|
claimIsMine: boolean,
|
||||||
sendTip: ({}, (any) => void, (any) => void) => void,
|
sendTip: ({}, (any) => void, (any) => void) => void,
|
||||||
|
@ -63,7 +66,11 @@ export function CommentCreate(props: Props) {
|
||||||
isReply,
|
isReply,
|
||||||
parentId,
|
parentId,
|
||||||
activeChannelClaim,
|
activeChannelClaim,
|
||||||
|
onSubmit,
|
||||||
|
bottom,
|
||||||
livestream,
|
livestream,
|
||||||
|
embed,
|
||||||
|
toast,
|
||||||
claimIsMine,
|
claimIsMine,
|
||||||
sendTip,
|
sendTip,
|
||||||
doToast,
|
doToast,
|
||||||
|
@ -106,7 +113,7 @@ export function CommentCreate(props: Props) {
|
||||||
|
|
||||||
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
|
function altEnterListener(e: SyntheticKeyboardEvent<*>) {
|
||||||
const KEYCODE_ENTER = 13;
|
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();
|
e.preventDefault();
|
||||||
buttonref.current.click();
|
buttonref.current.click();
|
||||||
}
|
}
|
||||||
|
@ -256,6 +263,10 @@ export function CommentCreate(props: Props) {
|
||||||
setIsSupportComment(false);
|
setIsSupportComment(false);
|
||||||
setCommentFailure(false);
|
setCommentFailure(false);
|
||||||
|
|
||||||
|
if (onSubmit) {
|
||||||
|
onSubmit(commentValue, activeChannelClaim.name);
|
||||||
|
}
|
||||||
|
|
||||||
if (onDoneReplying) {
|
if (onDoneReplying) {
|
||||||
onDoneReplying();
|
onDoneReplying();
|
||||||
}
|
}
|
||||||
|
@ -280,6 +291,11 @@ export function CommentCreate(props: Props) {
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
if (embed) {
|
||||||
|
window.open(`https://odysee.com/$/${PAGES.AUTH}?redirect=/$/${PAGES.LIVESTREAM}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`;
|
const pathPlusRedirect = `/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`;
|
||||||
if (livestream) {
|
if (livestream) {
|
||||||
window.open(pathPlusRedirect);
|
window.open(pathPlusRedirect);
|
||||||
|
@ -344,6 +360,7 @@ export function CommentCreate(props: Props) {
|
||||||
className={classnames('comment__create', {
|
className={classnames('comment__create', {
|
||||||
'comment__create--reply': isReply,
|
'comment__create--reply': isReply,
|
||||||
'comment__create--nested-reply': isNested,
|
'comment__create--nested-reply': isNested,
|
||||||
|
'comment__create--bottom': bottom,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<FormField
|
<FormField
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
import * as REACTION_TYPES from 'constants/reactions';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
@ -15,18 +16,44 @@ type Props = {
|
||||||
likeCount: number,
|
likeCount: number,
|
||||||
dislikeCount: number,
|
dislikeCount: number,
|
||||||
myReaction: ?string,
|
myReaction: ?string,
|
||||||
|
livestream?: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
function FileReactions(props: Props) {
|
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 claimId = claim && claim.claim_id;
|
||||||
const channel = claim && claim.signing_channel && claim.signing_channel.name;
|
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 isCollection = claim && claim.value_type === 'collection'; // hack because nudge gets cut off by card on cols.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (claimId) {
|
function fetchReactions() {
|
||||||
doFetchReactions(claimId);
|
doFetchReactions(claimId);
|
||||||
}
|
}
|
||||||
}, [claimId, doFetchReactions]);
|
|
||||||
|
let fetchInterval;
|
||||||
|
if (claimId) {
|
||||||
|
fetchReactions();
|
||||||
|
|
||||||
|
if (livestream) {
|
||||||
|
fetchInterval = setInterval(fetchReactions, 45000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (fetchInterval) {
|
||||||
|
clearInterval(fetchInterval);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [claimId, doFetchReactions, livestream]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -41,20 +68,46 @@ function FileReactions(props: Props) {
|
||||||
title={__('I like this')}
|
title={__('I like this')}
|
||||||
requiresAuth={IS_WEB}
|
requiresAuth={IS_WEB}
|
||||||
authSrc="filereaction_like"
|
authSrc="filereaction_like"
|
||||||
className={classnames('button--file-action')}
|
className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
|
||||||
label={formatNumberWithCommas(likeCount, 0)}
|
label={
|
||||||
|
<>
|
||||||
|
{myReaction === REACTION_TYPES.LIKE && (
|
||||||
|
<>
|
||||||
|
<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}
|
iconSize={18}
|
||||||
icon={ICONS.UPVOTE}
|
icon={myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE}
|
||||||
onClick={() => doReactionLike(uri)}
|
onClick={() => doReactionLike(uri)}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
requiresAuth={IS_WEB}
|
requiresAuth={IS_WEB}
|
||||||
authSrc={'filereaction_dislike'}
|
authSrc={'filereaction_dislike'}
|
||||||
title={__('I dislike this')}
|
title={__('I dislike this')}
|
||||||
className={classnames('button--file-action')}
|
className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
|
||||||
label={formatNumberWithCommas(dislikeCount, 0)}
|
label={
|
||||||
|
<>
|
||||||
|
{myReaction === REACTION_TYPES.DISLIKE && (
|
||||||
|
<>
|
||||||
|
<div className="button__slime-stain" />
|
||||||
|
<div className="button__slime-drop1" />
|
||||||
|
<div className="button__slime-drop2" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{formatNumberWithCommas(dislikeCount, 0)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
iconSize={18}
|
iconSize={18}
|
||||||
icon={ICONS.DOWNVOTE}
|
icon={myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
|
||||||
onClick={() => doReactionDislike(uri)}
|
onClick={() => doReactionDislike(uri)}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -5,7 +5,8 @@ import FilePrice from 'component/filePrice';
|
||||||
import { formatLbryUrlForWeb } from 'util/url';
|
import { formatLbryUrlForWeb } from 'util/url';
|
||||||
import { withRouter } from 'react-router';
|
import { withRouter } from 'react-router';
|
||||||
import { URL } from 'config';
|
import { URL } from 'config';
|
||||||
import * as ICONS from 'constants/icons';
|
import OdyseeLogo from 'component/header/odysee_logo.png';
|
||||||
|
import OdyseeLogoWithText from 'component/header/odysee_white.png';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -36,7 +37,10 @@ function FileViewerEmbeddedTitle(props: Props) {
|
||||||
{...contentLinkProps}
|
{...contentLinkProps}
|
||||||
/>
|
/>
|
||||||
<div className="file-viewer__embedded-info">
|
<div className="file-viewer__embedded-info">
|
||||||
<Button className="file-viewer__overlay-logo" icon={ICONS.LBRY} aria-label={__('Home')} {...lbryLinkProps} />
|
<Button className="file-viewer__overlay-logo" aria-label={__('Home')} {...lbryLinkProps}>
|
||||||
|
<img src={OdyseeLogo} className=" mobile-only" />
|
||||||
|
<img src={OdyseeLogoWithText} className=" mobile-hidden" />
|
||||||
|
</Button>
|
||||||
{isInApp && <FilePrice uri={uri} />}
|
{isInApp && <FilePrice uri={uri} />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,6 +19,8 @@ import ChannelThumbnail from 'component/channelThumbnail';
|
||||||
import { remote } from 'electron';
|
import { remote } from 'electron';
|
||||||
import { IS_MAC } from 'component/app/view';
|
import { IS_MAC } from 'component/app/view';
|
||||||
// @endif
|
// @endif
|
||||||
|
import OdyseeLogoWithWhiteText from './odysee_white.png';
|
||||||
|
import OdyseeLogoWithText from './odysee.png';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
user: ?User,
|
user: ?User,
|
||||||
|
@ -251,14 +253,7 @@ const Header = (props: Props) => {
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
<Button
|
<Button
|
||||||
className="header__navigation-item header__navigation-item--lbry"
|
className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile"
|
||||||
// @if TARGET='app'
|
|
||||||
label={'LBRY'}
|
|
||||||
// @endif
|
|
||||||
// @if TARGET='web'
|
|
||||||
label={LOGO_TITLE} // eslint-disable-line
|
|
||||||
// @endif
|
|
||||||
icon={ICONS.LBRY}
|
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (history.location.pathname === '/') window.location.reload();
|
if (history.location.pathname === '/') window.location.reload();
|
||||||
}}
|
}}
|
||||||
|
@ -268,7 +263,12 @@ const Header = (props: Props) => {
|
||||||
}}
|
}}
|
||||||
// @endif
|
// @endif
|
||||||
{...homeButtonNavigationProps}
|
{...homeButtonNavigationProps}
|
||||||
/>
|
>
|
||||||
|
<img
|
||||||
|
src={currentTheme === 'light' ? OdyseeLogoWithText : OdyseeLogoWithWhiteText}
|
||||||
|
className="header__odysee"
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
|
||||||
{!authHeader && (
|
{!authHeader && (
|
||||||
<div className="header__center">
|
<div className="header__center">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import { SHOW_ADS, DOMAIN, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
|
import { SHOW_ADS, DOMAIN, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import * as PAGES from 'constants/pages';
|
import * as PAGES from 'constants/pages';
|
||||||
|
import * as CS from 'constants/claim_search';
|
||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import Page from 'component/page';
|
import Page from 'component/page';
|
||||||
import ClaimListDiscover from 'component/claimListDiscover';
|
import ClaimListDiscover from 'component/claimListDiscover';
|
||||||
|
@ -11,11 +12,11 @@ import { useIsMobile } from 'effects/use-screensize';
|
||||||
import analytics from 'analytics';
|
import analytics from 'analytics';
|
||||||
import HiddenNsfw from 'component/common/hidden-nsfw';
|
import HiddenNsfw from 'component/common/hidden-nsfw';
|
||||||
import Icon from 'component/common/icon';
|
import Icon from 'component/common/icon';
|
||||||
import * as CS from 'constants/claim_search';
|
|
||||||
import Ads from 'web/component/ads';
|
import Ads from 'web/component/ads';
|
||||||
import LbcSymbol from 'component/common/lbc-symbol';
|
import LbcSymbol from 'component/common/lbc-symbol';
|
||||||
import I18nMessage from 'component/i18nMessage';
|
import I18nMessage from 'component/i18nMessage';
|
||||||
import useGetLivestreams from 'effects/use-get-livestreams';
|
import useGetLivestreams from 'effects/use-get-livestreams';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
location: { search: string },
|
location: { search: string },
|
||||||
|
@ -97,8 +98,8 @@ function DiscoverPage(props: Props) {
|
||||||
} else {
|
} else {
|
||||||
headerLabel = (
|
headerLabel = (
|
||||||
<span>
|
<span>
|
||||||
<Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.DISCOVER} size={10} />
|
<Icon icon={(dynamicRouteProps && dynamicRouteProps.icon) || ICONS.WILD_WEST} size={10} />
|
||||||
{(dynamicRouteProps && dynamicRouteProps.title) || __('All Content')}
|
{(dynamicRouteProps && dynamicRouteProps.title) || __('Wild West')}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -106,9 +107,11 @@ function DiscoverPage(props: Props) {
|
||||||
return (
|
return (
|
||||||
<Page noFooter fullWidthPage={tileLayout}>
|
<Page noFooter fullWidthPage={tileLayout}>
|
||||||
<ClaimListDiscover
|
<ClaimListDiscover
|
||||||
limitClaimsPerChannel={3}
|
hideAdvancedFilter
|
||||||
|
hideFilters={!dynamicRouteProps}
|
||||||
header={repostedUri ? <span /> : undefined}
|
header={repostedUri ? <span /> : undefined}
|
||||||
tileLayout={repostedUri ? false : tileLayout}
|
tileLayout={repostedUri ? false : tileLayout}
|
||||||
|
defaultOrderBy={dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING}
|
||||||
claimType={claimType ? [claimType] : undefined}
|
claimType={claimType ? [claimType] : undefined}
|
||||||
headerLabel={headerLabel}
|
headerLabel={headerLabel}
|
||||||
tags={tags}
|
tags={tags}
|
||||||
|
@ -117,9 +120,18 @@ function DiscoverPage(props: Props) {
|
||||||
injectedItem={
|
injectedItem={
|
||||||
SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false
|
SHOW_ADS && IS_WEB ? (SIMPLE_SITE ? false : !isAuthenticated && <Ads small type={'video'} />) : false
|
||||||
}
|
}
|
||||||
|
// Assume wild west page if no dynamicRouteProps
|
||||||
|
// Not a very good solution, but just doing it for now
|
||||||
|
// until we are sure this page will stay around
|
||||||
|
releaseTime={!dynamicRouteProps && `>${Math.floor(moment().subtract(1, 'day').startOf('week').unix())}`}
|
||||||
|
feeAmount={!dynamicRouteProps && CS.FEE_AMOUNT_ANY}
|
||||||
channelIds={
|
channelIds={
|
||||||
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
|
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
|
||||||
}
|
}
|
||||||
|
limitClaimsPerChannel={
|
||||||
|
(dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) ||
|
||||||
|
undefined
|
||||||
|
}
|
||||||
meta={
|
meta={
|
||||||
!dynamicRouteProps ? (
|
!dynamicRouteProps ? (
|
||||||
<a
|
<a
|
||||||
|
|
|
@ -230,13 +230,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-viewer__overlay-logo {
|
.file-viewer__overlay-logo {
|
||||||
color: var(--color-white);
|
height: 3.5rem;
|
||||||
font-weight: bold;
|
width: 12rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.icon {
|
&:hover {
|
||||||
height: 30px;
|
filter: drop-shadow(1px 2px 10px var(--color-gray-3));
|
||||||
stroke-width: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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 {
|
.file-viewer--is-playing:not(:hover) .file-viewer__embedded-header {
|
||||||
|
@ -246,11 +261,15 @@
|
||||||
.file-viewer__embedded-header {
|
.file-viewer__embedded-header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
height: 4rem;
|
||||||
|
padding-left: var(--spacing-m);
|
||||||
|
padding-right: var(--spacing-s);
|
||||||
font-size: var(--font-large);
|
font-size: var(--font-large);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
@ -260,7 +279,6 @@
|
||||||
border-top-right-radius: var(--border-radius);
|
border-top-right-radius: var(--border-radius);
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
padding: var(--spacing-s);
|
|
||||||
color: var(--color-white);
|
color: var(--color-white);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|
||||||
|
|
|
@ -203,7 +203,7 @@ input-submit {
|
||||||
height: var(--height-checkbox);
|
height: var(--height-checkbox);
|
||||||
width: var(--height-checkbox);
|
width: var(--height-checkbox);
|
||||||
border: 1px solid var(--color-input-border);
|
border: 1px solid var(--color-input-border);
|
||||||
border-radius: var(--border-radius);
|
border-radius: 3px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: -1px;
|
top: -1px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,7 +58,6 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
color: var(--color-text);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
font-weight: var(--font-weight-bold);
|
font-weight: var(--font-weight-bold);
|
||||||
|
|
||||||
|
|
|
@ -1,57 +0,0 @@
|
||||||
:root {
|
|
||||||
// Generic colors
|
|
||||||
--color-primary: #257761;
|
|
||||||
--color-primary-alt: #e4f4ef;
|
|
||||||
--color-primary-alt-2: #4b8576;
|
|
||||||
--color-secondary: #295284;
|
|
||||||
--color-secondary-alt: #d9eaff;
|
|
||||||
--color-tertiary: #552470;
|
|
||||||
--color-tertiary-alt: #f7e8ff;
|
|
||||||
--color-danger: #9b2023;
|
|
||||||
--color-danger-alt: #fccdce;
|
|
||||||
--color-warning: #fff58c;
|
|
||||||
--color-cost: #ffd580;
|
|
||||||
--color-focus: #93cff2;
|
|
||||||
--color-notification: #f02849;
|
|
||||||
--color-live: #cc190f;
|
|
||||||
|
|
||||||
--color-black: #111;
|
|
||||||
--color-white: #fdfdfd;
|
|
||||||
--color-white-alt: #fafafa;
|
|
||||||
--color-gray-1: #eff1f4;
|
|
||||||
--color-gray-2: #d8dde1;
|
|
||||||
--color-gray-3: #ced4da;
|
|
||||||
--color-gray-4: #abb1b7;
|
|
||||||
--color-gray-5: #666a6d;
|
|
||||||
|
|
||||||
// Text
|
|
||||||
--color-text: var(--color-black);
|
|
||||||
--color-text-subtitle: var(--color-gray-5);
|
|
||||||
--color-text-inverse: #fdfdfd;
|
|
||||||
|
|
||||||
// Components
|
|
||||||
|
|
||||||
// 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: #b9d0e9;
|
|
||||||
--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-link: var(--color-primary);
|
|
||||||
--color-link-hover: var(--color-black);
|
|
||||||
|
|
||||||
// Table
|
|
||||||
--color-table-highlight: var(--color-white-alt);
|
|
||||||
|
|
||||||
// Tag
|
|
||||||
--color-tag: var(--color-gray-5);
|
|
||||||
--color-tag-bg: var(--color-button-alt-bg);
|
|
||||||
--color-tag-hover: var(--color-button-alt-text);
|
|
||||||
--color-tag-bg-hover: var(--color-button-alt-bg-hover);
|
|
||||||
}
|
|
|
@ -60,8 +60,12 @@ ol {
|
||||||
position: relative;
|
position: relative;
|
||||||
list-style-position: outside;
|
list-style-position: outside;
|
||||||
margin: var(--spacing-xs) 0;
|
margin: var(--spacing-xs) 0;
|
||||||
margin-left: var(--spacing-xl);
|
margin-left: var(--spacing-s);
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-small) {
|
||||||
|
margin-left: var(--spacing-xl);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -267,10 +271,10 @@ textarea {
|
||||||
margin-top: var(--spacing-s);
|
margin-top: var(--spacing-s);
|
||||||
|
|
||||||
&:not(:last-child) {
|
&: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);
|
margin-left: var(--spacing-s);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -282,7 +286,6 @@ textarea {
|
||||||
.help--warning {
|
.help--warning {
|
||||||
@extend .help;
|
@extend .help;
|
||||||
padding: var(--spacing-s);
|
padding: var(--spacing-s);
|
||||||
color: var(--color-black);
|
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background-color: var(--color-help-warning-bg);
|
background-color: var(--color-help-warning-bg);
|
||||||
color: var(--color-help-warning-text);
|
color: var(--color-help-warning-text);
|
||||||
|
@ -499,3 +502,16 @@ textarea {
|
||||||
height: 4rem;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ $breakpoint-medium: 1150px;
|
||||||
$breakpoint-large: 1600px;
|
$breakpoint-large: 1600px;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--border-radius: 5px;
|
--border-radius: 10px;
|
||||||
--height-input: 2.5rem;
|
--height-input: 2.5rem;
|
||||||
--height-button: 2.5rem;
|
--height-button: 2.5rem;
|
||||||
--height-checkbox: 24px;
|
--height-checkbox: 24px;
|
||||||
|
|
|
@ -1,30 +1,30 @@
|
||||||
[theme='dark'] {
|
[theme='dark'] {
|
||||||
// Color overrides
|
// Color overrides
|
||||||
--color-primary: #2bbb90;
|
--color-primary: #e50054;
|
||||||
--color-primary-alt: #3e675d;
|
--color-primary-alt: #66001880;
|
||||||
--color-primary-alt-2: #065f46;
|
--color-fire: #ff6635;
|
||||||
--color-primary-alt-3: #34e5b0;
|
--color-fire-outside: #ff9b20;
|
||||||
--color-secondary: #204166;
|
|
||||||
--color-secondary-alt: #dbeafe;
|
|
||||||
--color-secondary-alt-2: #bfdbfe;
|
|
||||||
--color-secondary-alt-3: #2c5c8c;
|
|
||||||
|
|
||||||
// Structure
|
// Structure
|
||||||
--color-background: var(--color-gray-9);
|
--color-background: #140e1b;
|
||||||
--color-background-overlay: #21252999;
|
--color-background-overlay: #0c0d0e95;
|
||||||
--color-border: #333338;
|
--color-border: #30243d;
|
||||||
--color-card-background: var(--color-gray-8);
|
--color-card-background: #181021;
|
||||||
--color-card-background-highlighted: var(--color-gray-7);
|
--color-card-background-highlighted: #241c30;
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
--color-text: var(--color-white);
|
--color-text: var(--color-gray-1);
|
||||||
--color-text-subtitle: var(--color-gray-4);
|
--color-text-subtitle: var(--color-gray-4);
|
||||||
--color-text-empty: var(--color-text-subtitle);
|
--color-text-empty: var(--color-text-subtitle);
|
||||||
--color-text-help: #bbbbbb;
|
--color-text-help: #bbbbbb;
|
||||||
--color-text-warning: #212529;
|
--color-text-warning: #212529;
|
||||||
--color-text-warning--background: var(--lbry-yellow-1);
|
--color-text-warning--background: var(--lbry-yellow-1);
|
||||||
--color-text-error: #f87171;
|
--color-text-error: var(--color-danger);
|
||||||
--color-error: #61373f;
|
--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)
|
// Tags (words)
|
||||||
--color-tag-words: var(--color-text);
|
--color-tag-words: var(--color-text);
|
||||||
|
@ -33,87 +33,73 @@
|
||||||
--color-tag-words-bg-hover: var(--color-gray-4);
|
--color-tag-words-bg-hover: var(--color-gray-4);
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
--color-header-background: var(--color-gray-8);
|
--color-header-button: #38274c;
|
||||||
--color-header-button: var(--color-gray-6);
|
--color-header-background: #231830;
|
||||||
--color-header-button-hover: var(--color-gray-6);
|
|
||||||
--color-header-button-active: var(--color-gray-6);
|
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
--color-button-primary-bg: var(--color-primary-alt);
|
--color-button-primary-text: white;
|
||||||
--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-primary-hover-text: var(--color-primary-alt);
|
||||||
--color-button-secondary-bg: var(--color-secondary);
|
--color-button-secondary-bg: #2c1543;
|
||||||
--color-button-secondary-border: var(--color-secondary);
|
--color-button-secondary-border: #4f1c82;
|
||||||
--color-button-secondary-bg-hover: var(--color-secondary-alt-3);
|
--color-button-secondary-bg-hover: #3b1c5b;
|
||||||
--color-button-secondary-text: var(--color-gray-2);
|
--color-button-secondary-text: #efefef;
|
||||||
--color-button-alt-bg: var(--color-gray-7);
|
--color-button-alt-bg: var(--color-header-button);
|
||||||
--color-button-alt-bg-hover: var(--color-gray-6);
|
--color-button-alt-bg-hover: #2b2037;
|
||||||
--color-button-alt-text: var(--color-gray-1);
|
--color-button-toggle-text: var(--color-text);
|
||||||
--color-button-border: var(--color-gray-5);
|
--color-button-toggle-bg: var(--color-primary-alt);
|
||||||
--color-button-toggle-text: var(--color-gray-1);
|
--color-button-toggle-bg-hover: var(--color-primary-alt);
|
||||||
--color-link: var(--color-primary-alt-3);
|
--color-button-alt-text: #e2e9f0;
|
||||||
--color-link-hover: var(--color-text);
|
--color-button-border: #5b4475;
|
||||||
--color-link-focus-bg: var(--color-gray-7);
|
--color-link: var(--color-primary);
|
||||||
|
--color-link-hover: #d75673;
|
||||||
|
--color-link-active: #ec1d4c;
|
||||||
|
--color-link-focus-bg: #3d2d4e;
|
||||||
|
|
||||||
// Input
|
// Input
|
||||||
--color-input: var(--color-white);
|
--color-input: #f4f4f5;
|
||||||
--color-input-label: var(--color-gray-3);
|
--color-input-label: #a7a7a7;
|
||||||
--color-input-placeholder: var(--color-gray-1);
|
--color-input-placeholder: #f4f4f5;
|
||||||
--color-input-bg: var(--color-header-button);
|
--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: var(--color-border);
|
||||||
--color-input-border-active: var(--color-secondary);
|
--color-input-border-active: var(--color-secondary);
|
||||||
--color-input-toggle: var(--color-primary-alt-3);
|
--color-input-toggle: var(--color-primary-alt-3);
|
||||||
--color-input-toggle-bg: var(--color-input-bg);
|
--color-input-toggle-bg: var(--color-input-bg);
|
||||||
--color-input-toggle-bg-hover: var(--color-secondary);
|
--color-input-toggle-bg-hover: var(--color-secondary);
|
||||||
--color-input-bg-selected: var(--color-primary-alt);
|
--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);
|
--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");
|
--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
|
// Navigation
|
||||||
--color-navigation-icon: var(--color-gray-4);
|
--color-navigation-icon: #76808a;
|
||||||
--color-navigation-link: var(--color-gray-4);
|
--color-navigation-link: #b9c3ce;
|
||||||
--color-navigation-active: var(--color-gray-7);
|
--color-navigation-active: #2b2037;
|
||||||
--color-navigation-active-text: var(--color-gray-3);
|
--color-navigation-active-text: #c6bcd2;
|
||||||
--color-navigation-hover: var(--color-gray-6);
|
--color-navigation-hover: #21182a;
|
||||||
--color-navigation-hover-text: var(--color-gray-3);
|
--color-navigation-hover-text: #c6bcd2;
|
||||||
|
|
||||||
// Tags
|
// Tags
|
||||||
--color-tag: var(--color-primary-alt-3);
|
--color-tag: #ff85b1;
|
||||||
--color-tag-bg: var(--color-gray-7);
|
--color-tag-bg: var(--color-navigation-hover);
|
||||||
--color-tag-hover: var(--color-white);
|
--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
|
// Menu
|
||||||
--color-menu-background: var(--color-header-background);
|
--color-menu-background: var(--color-header-background);
|
||||||
--color-menu-background--active: var(--color-gray-7);
|
--color-menu-background--active: var(--color-primary-alt);
|
||||||
--color-menu-icon: var(--color-gray-4);
|
--color-menu-icon: #928b9b;
|
||||||
|
--color-menu-icon-active: #d6d6d6;
|
||||||
|
|
||||||
// Comments
|
// Comments
|
||||||
--color-comment-menu: var(--color-gray-5);
|
--color-comment-menu: #6a6a6a;
|
||||||
--color-comment-menu-hovering: var(--color-gray-2);
|
--color-comment-menu-hovering: #e0e0e0;
|
||||||
--color-comment-threadline: #434b54;
|
|
||||||
--color-comment-threadline-hover: var(--color-gray-4);
|
|
||||||
--color-comment-highlighted: #484734;
|
--color-comment-highlighted: #484734;
|
||||||
|
--color-comment-threadline: #24192f;
|
||||||
// Snack
|
--color-comment-threadline-hover: var(--color-gray-4);
|
||||||
--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
|
// Other
|
||||||
--color-focus: #93c5fd50;
|
|
||||||
--color-nag: var(--color-orange);
|
|
||||||
--color-tab-text: var(--color-white);
|
--color-tab-text: var(--color-white);
|
||||||
--color-tabs-background: var(--color-card-background);
|
--color-tabs-background: var(--color-card-background);
|
||||||
--color-tab-divider: var(--color-white);
|
--color-tab-divider: var(--color-white);
|
||||||
|
@ -121,14 +107,12 @@
|
||||||
--color-notice: #58563b;
|
--color-notice: #58563b;
|
||||||
--color-purchased: #ffd580;
|
--color-purchased: #ffd580;
|
||||||
--color-purchased-alt: var(--color-purchased);
|
--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-thumbnail-background: var(--color-gray-5);
|
||||||
--color-tooltip-bg: #2f3337;
|
--color-tooltip-bg: #2f3337;
|
||||||
--color-help-warning-bg: #d97706;
|
--color-focus: #e91e6329;
|
||||||
--color-help-warning-text: white;
|
--color-placeholder-background: #261a35;
|
||||||
--color-blockquote: var(--color-gray-5);
|
--color-spinner-light: white;
|
||||||
--color-placeholder-background: #4e5862;
|
|
||||||
--color-spinner-light: #5a6570;
|
|
||||||
--color-spinner-dark: #212529;
|
--color-spinner-dark: #212529;
|
||||||
--color-login-graphic-background: var(--color-background);
|
--color-login-graphic-background: var(--color-background);
|
||||||
|
|
||||||
|
|
|
@ -1,2 +1,155 @@
|
||||||
:root {
|
: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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -337,6 +337,9 @@ export function GetLinksData(
|
||||||
rowData.push(LATEST_FROM_LBRY);
|
rowData.push(LATEST_FROM_LBRY);
|
||||||
if (!showPersonalizedChannels) rowData.push(TOP_CHANNELS);
|
if (!showPersonalizedChannels) rowData.push(TOP_CHANNELS);
|
||||||
}
|
}
|
||||||
(Object.values(all): any).map((row) => rowData.push(getHomepageRowForCat(row)));
|
// TODO: provide better method for exempting from homepage
|
||||||
|
(Object.values(all): any)
|
||||||
|
.filter((row) => !(isHomepage && row.name === 'news'))
|
||||||
|
.map((row) => rowData.push(getHomepageRowForCat(row)));
|
||||||
return rowData;
|
return rowData;
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@ import Button from 'component/button';
|
||||||
import { formatLbryUrlForWeb } from 'util/url';
|
import { formatLbryUrlForWeb } from 'util/url';
|
||||||
import { withRouter } from 'react-router';
|
import { withRouter } from 'react-router';
|
||||||
import { URL, SITE_NAME } from 'config';
|
import { URL, SITE_NAME } from 'config';
|
||||||
import * as ICONS from 'constants/icons';
|
import OdyseeLogoWithText from 'component/header/odysee_white.png';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -37,7 +37,9 @@ function FileViewerEmbeddedEnded(props: Props) {
|
||||||
return (
|
return (
|
||||||
<div className="file-viewer__overlay">
|
<div className="file-viewer__overlay">
|
||||||
<div className="file-viewer__overlay-secondary">
|
<div className="file-viewer__overlay-secondary">
|
||||||
<Button className="file-viewer__overlay-logo" label="LBRY" icon={ICONS.LBRY} href={URL} />
|
<Button className="file-viewer__overlay-logo--videoend" href={URL}>
|
||||||
|
<img src={OdyseeLogoWithText} />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="file-viewer__overlay-title">{prompt}</div>
|
<div className="file-viewer__overlay-title">{prompt}</div>
|
||||||
<div className="file-viewer__overlay-actions">
|
<div className="file-viewer__overlay-actions">
|
||||||
|
|
|
@ -1,101 +1,38 @@
|
||||||
import * as PAGES from 'constants/pages';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
|
import I18nMessage from 'component/i18nMessage';
|
||||||
const sections = [
|
import { SIMPLE_SITE } from 'config';
|
||||||
{
|
|
||||||
name: 'Community',
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
label: 'Twitter',
|
|
||||||
link: 'https://twitter.com/lbrycom',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Reddit',
|
|
||||||
link: 'https://reddit.com/r/lbry',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Chat (Discord)',
|
|
||||||
link: 'https://chat.lbry.org/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Telegram',
|
|
||||||
link: 'https://t.me/lbryofficial',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Facebook',
|
|
||||||
link: 'https://www.facebook.com/lbryio',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Resources',
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
label: 'FAQ',
|
|
||||||
link: 'https://lbry.com/faq',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Support --[used in footer; general help/support]--',
|
|
||||||
link: 'https://lbry.com/faq/support',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'YouTube Partner Program',
|
|
||||||
link: 'https://lbry.com/youtube',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'lbry.com',
|
|
||||||
link: 'https://lbry.com',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'lbry.tech',
|
|
||||||
link: 'https://lbry.tech',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'GitHub',
|
|
||||||
link: 'https://github.com/lbryio',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Policies',
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
label: 'Terms of Service',
|
|
||||||
link: 'https://www.lbry.com/termsofservice',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Privacy Policy',
|
|
||||||
link: 'https://lbry.com/privacypolicy',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '2257',
|
|
||||||
navigate: `/$/${PAGES.CODE_2257}`,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
|
if (!SIMPLE_SITE) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<footer className="footer">
|
<footer className="footer">
|
||||||
<ul className="navigation__tertiary footer__links ul--no-style">
|
<span className="footer__section-title">
|
||||||
{sections.map(({ name, links }) => {
|
<I18nMessage tokens={{ lbry_link: <Button button="link" label={'LBRY'} href="https://lbry.com" /> }}>
|
||||||
return (
|
POWERED BY %lbry_link%
|
||||||
<li key={name} className="footer__section">
|
</I18nMessage>
|
||||||
<ul className="ul--no-style">
|
</span>
|
||||||
<div className="footer__section-title">{__(name)}</div>
|
<ul className="navigation__tertiary footer__links">
|
||||||
{links.map(({ label, link, navigate }) => {
|
<li className="footer__link">
|
||||||
return (
|
<Button label={__('About --[link title in Sidebar or Footer]--')} href="https://lbry.com/about" />
|
||||||
<li key={label}>
|
</li>
|
||||||
<Button className="footer__link" label={__(label)} href={link} navigate={navigate} />
|
<li className="footer__link">
|
||||||
</li>
|
<Button label={__('Community Guidelines')} href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c" />
|
||||||
);
|
</li>
|
||||||
})}
|
<li className="footer__link">
|
||||||
</ul>
|
<Button label={__('FAQ')} href="https://odysee.com/@OdyseeHelp:b" />
|
||||||
</li>
|
</li>
|
||||||
);
|
<li className="footer__link">
|
||||||
})}
|
<Button label={__('Support --[used in footer; general help/support]--')} href="https://lbry.com/support" />
|
||||||
|
</li>
|
||||||
|
<li className="footer__link">
|
||||||
|
<Button label={__('Terms')} href="https://lbry.com/termsofservice" />
|
||||||
|
</li>
|
||||||
|
<li className="footer__link">
|
||||||
|
<Button label={__('Privacy Policy')} href="https://lbry.com/privacy" />
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
"koa-logger": "^3.2.1",
|
"koa-logger": "^3.2.1",
|
||||||
"koa-send": "^5.0.0",
|
"koa-send": "^5.0.0",
|
||||||
"koa-static": "^5.0.0",
|
"koa-static": "^5.0.0",
|
||||||
"lbry-redux": "lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264",
|
"lbry-redux": "lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da",
|
||||||
"lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
|
"lbryinc": "lbryio/lbryinc#8f9a58bfc8312a65614fd7327661cdcc502c4e59",
|
||||||
"mysql": "^2.17.1",
|
"mysql": "^2.17.1",
|
||||||
"node-fetch": "^2.6.1",
|
"node-fetch": "^2.6.1",
|
||||||
|
|
|
@ -8,6 +8,7 @@ const {
|
||||||
OG_IMAGE_URL,
|
OG_IMAGE_URL,
|
||||||
SITE_DESCRIPTION,
|
SITE_DESCRIPTION,
|
||||||
SITE_NAME,
|
SITE_NAME,
|
||||||
|
FAVICON,
|
||||||
} = require('../../config.js');
|
} = require('../../config.js');
|
||||||
const { generateEmbedUrl, generateStreamUrl, generateDirectUrl } = require('../../ui/util/web');
|
const { generateEmbedUrl, generateStreamUrl, generateDirectUrl } = require('../../ui/util/web');
|
||||||
const PAGES = require('../../ui/constants/pages');
|
const PAGES = require('../../ui/constants/pages');
|
||||||
|
@ -82,20 +83,31 @@ function buildOgMetadata(overrideOptions = {}) {
|
||||||
function conditionallyAddPWA() {
|
function conditionallyAddPWA() {
|
||||||
let head = '';
|
let head = '';
|
||||||
if (DOMAIN === 'odysee.com') {
|
if (DOMAIN === 'odysee.com') {
|
||||||
head += '<link rel="manifest" href="./public/pwa/manifest.json"/>';
|
head += '<link rel="manifest" href="./public/pwa/manifest.json"/>';
|
||||||
head += '<link rel="apple-touch-icon" sizes="180x180" href="./public/pwa/icon-180.png">';
|
head += '<link rel="apple-touch-icon" sizes="180x180" href="./public/pwa/icon-180.png">';
|
||||||
head += '<script src="./serviceWorker.js"></script>';
|
head += '<script src="./serviceWorker.js"></script>';
|
||||||
}
|
}
|
||||||
return head;
|
return head;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addFavicon() {
|
||||||
|
let head = '';
|
||||||
|
head += `<link rel="icon" type="image/png" href="${FAVICON || './public/favicon.png'}" />`;
|
||||||
|
return head;
|
||||||
|
}
|
||||||
|
|
||||||
function buildHead() {
|
function buildHead() {
|
||||||
const head = '<!-- VARIABLE_HEAD_BEGIN -->' + conditionallyAddPWA() + buildOgMetadata() + '<!-- VARIABLE_HEAD_END -->';
|
const head =
|
||||||
|
'<!-- VARIABLE_HEAD_BEGIN -->' +
|
||||||
|
addFavicon() +
|
||||||
|
conditionallyAddPWA() +
|
||||||
|
buildOgMetadata() +
|
||||||
|
'<!-- VARIABLE_HEAD_END -->';
|
||||||
return head;
|
return head;
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildBasicOgMetadata() {
|
function buildBasicOgMetadata() {
|
||||||
const head = '<!-- VARIABLE_HEAD_BEGIN -->' + buildOgMetadata() + '<!-- VARIABLE_HEAD_END -->';
|
const head = '<!-- VARIABLE_HEAD_BEGIN -->' + addFavicon() + buildOgMetadata() + '<!-- VARIABLE_HEAD_END -->';
|
||||||
return head;
|
return head;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -128,6 +140,7 @@ function buildClaimOgMetadata(uri, claim, overrideOptions = {}) {
|
||||||
|
|
||||||
let head = '';
|
let head = '';
|
||||||
|
|
||||||
|
head += `${addFavicon()}`;
|
||||||
head += '<meta charset="utf8"/>';
|
head += '<meta charset="utf8"/>';
|
||||||
head += `<title>${title}</title>`;
|
head += `<title>${title}</title>`;
|
||||||
head += `<meta name="description" content="${cleanDescription}"/>`;
|
head += `<meta name="description" content="${cleanDescription}"/>`;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
const { generateDownloadUrl } = require('../../ui/util/web');
|
const { generateDownloadUrl } = require('../../ui/util/web');
|
||||||
const { URL, SITE_NAME, LBRY_WEB_API } = require('../../config.js');
|
const { URL, SITE_NAME, LBRY_WEB_API, FAVICON } = require('../../config.js');
|
||||||
const { Lbry } = require('lbry-redux');
|
const { Lbry } = require('lbry-redux');
|
||||||
const Feed = require('feed').Feed;
|
const Feed = require('feed').Feed;
|
||||||
|
|
||||||
|
@ -82,7 +82,7 @@ async function getFeed(channelClaim, feedLink) {
|
||||||
const title = value ? value.title : channelClaim.name;
|
const title = value ? value.title : channelClaim.name;
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
favicon: URL + '/public/favicon.png',
|
favicon: FAVICON || URL + '/public/favicon.png',
|
||||||
generator: SITE_NAME + ' RSS Feed',
|
generator: SITE_NAME + ' RSS Feed',
|
||||||
title: title + ' on ' + SITE_NAME,
|
title: title + ' on ' + SITE_NAME,
|
||||||
description: fmtDescription(value && value.description ? value.description : ''),
|
description: fmtDescription(value && value.description ? value.description : ''),
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
const { URL, SITE_TITLE } = require('../../config.js');
|
const { URL, SITE_TITLE, FAVICON } = require('../../config.js');
|
||||||
|
const favicon = FAVICON || `${URL}/public/favicon.png`;
|
||||||
function getOpenSearchXml() {
|
function getOpenSearchXml() {
|
||||||
return (
|
return (
|
||||||
`<ShortName>${SITE_TITLE}</ShortName>` +
|
`<ShortName>${SITE_TITLE}</ShortName>` +
|
||||||
`<Description>Search ${SITE_TITLE}</Description>` +
|
`<Description>Search ${SITE_TITLE}</Description>` +
|
||||||
'<InputEncoding>UTF-8</InputEncoding>' +
|
'<InputEncoding>UTF-8</InputEncoding>' +
|
||||||
`<Image width="32" height="32" type="image/png">${URL}/public/favicon.png</Image>` +
|
`<Image width="32" height="32" type="image/png">${favicon}</Image>` +
|
||||||
`<Url type="text/html" method="get" template="${URL}/$/search?q={searchTerms}"/>` +
|
`<Url type="text/html" method="get" template="${URL}/$/search?q={searchTerms}"/>` +
|
||||||
`<moz:SearchForm>${URL}</moz:SearchForm>`
|
`<moz:SearchForm>${URL}</moz:SearchForm>`
|
||||||
);
|
);
|
||||||
|
|
|
@ -3331,9 +3331,9 @@ latest-version@^3.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
package-json "^4.0.0"
|
package-json "^4.0.0"
|
||||||
|
|
||||||
lbry-redux@lbryio/lbry-redux#508e8d36fd91106beb7d6b4edb9f726dae0e6264:
|
lbry-redux@lbryio/lbry-redux#b075c103445a9355d617116fbb491496ecb473da:
|
||||||
version "0.0.1"
|
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:
|
dependencies:
|
||||||
proxy-polyfill "0.1.6"
|
proxy-polyfill "0.1.6"
|
||||||
reselect "^3.0.0"
|
reselect "^3.0.0"
|
||||||
|
|
Loading…
Reference in a new issue