Wpe on ody #6729
25 changed files with 3480 additions and 46 deletions
|
|
@ -68,6 +68,7 @@ AUTO_FOLLOW_CHANNELS=lbry://@lbry#3fda836a92faaceedfe398225fb9b2ee2ed1f01a
|
||||||
|
|
||||||
## FEATURES AND LIMITS
|
## FEATURES AND LIMITS
|
||||||
SIMPLE_SITE=false
|
SIMPLE_SITE=false
|
||||||
|
#BRANDED_SITE
|
||||||
|
|
||||||
ENABLE_COMMENT_REACTIONS=true
|
ENABLE_COMMENT_REACTIONS=true
|
||||||
ENABLE_FILE_REACTIONS=false
|
ENABLE_FILE_REACTIONS=false
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
"ui/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
|
"ui/**/*.{js,jsx,scss,json}": ["prettier --write", "git add"],
|
||||||
"web/**/*.{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"],
|
"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"]
|
"ignore": ["node_modules", "web/dist/**/*", "dist/**/*", "package-lock.json"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ const config = {
|
||||||
WEBPACK_ELECTRON_PORT: process.env.WEBPACK_ELECTRON_PORT,
|
WEBPACK_ELECTRON_PORT: process.env.WEBPACK_ELECTRON_PORT,
|
||||||
WEB_SERVER_PORT: process.env.WEB_SERVER_PORT,
|
WEB_SERVER_PORT: process.env.WEB_SERVER_PORT,
|
||||||
LBRY_WEB_API: process.env.LBRY_WEB_API, //api.na-backend.odysee.com',
|
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_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_STREAMING_API: process.env.LBRY_WEB_STREAMING_API, //cdn.lbryplayer.xyz',
|
||||||
LBRY_WEB_BUFFER_API: process.env.LBRY_WEB_BUFFER_API,
|
LBRY_WEB_BUFFER_API: process.env.LBRY_WEB_BUFFER_API,
|
||||||
|
|
@ -41,7 +42,6 @@ const config = {
|
||||||
DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
|
DEFAULT_LANGUAGE: process.env.DEFAULT_LANGUAGE,
|
||||||
AUTO_FOLLOW_CHANNELS: process.env.AUTO_FOLLOW_CHANNELS,
|
AUTO_FOLLOW_CHANNELS: process.env.AUTO_FOLLOW_CHANNELS,
|
||||||
UNSYNCED_SETTINGS: process.env.UNSYNCED_SETTINGS,
|
UNSYNCED_SETTINGS: process.env.UNSYNCED_SETTINGS,
|
||||||
AVATAR_DEFAULT: process.env.AVATAR_DEFAULT,
|
|
||||||
|
|
||||||
// ENABLE FEATURES
|
// ENABLE FEATURES
|
||||||
ENABLE_COMMENT_REACTIONS: process.env.ENABLE_COMMENT_REACTIONS === 'true',
|
ENABLE_COMMENT_REACTIONS: process.env.ENABLE_COMMENT_REACTIONS === 'true',
|
||||||
|
|
@ -66,6 +66,7 @@ const config = {
|
||||||
CUSTOM_HOMEPAGE: process.env.CUSTOM_HOMEPAGE === 'true',
|
CUSTOM_HOMEPAGE: process.env.CUSTOM_HOMEPAGE === 'true',
|
||||||
SHOW_TAGS_INTRO: process.env.SHOW_TAGS_INTRO === 'true',
|
SHOW_TAGS_INTRO: process.env.SHOW_TAGS_INTRO === 'true',
|
||||||
LIGHTHOUSE_DEFAULT_TYPES: process.env.LIGHTHOUSE_DEFAULT_TYPES,
|
LIGHTHOUSE_DEFAULT_TYPES: process.env.LIGHTHOUSE_DEFAULT_TYPES,
|
||||||
|
BRANDED_SITE: process.env.BRANDED_SITE,
|
||||||
};
|
};
|
||||||
|
|
||||||
config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`;
|
config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ import { generateInitialUrl } from 'util/url';
|
||||||
import { MATOMO_ID, MATOMO_URL, LBRY_WEB_BUFFER_API } from 'config';
|
import { MATOMO_ID, MATOMO_URL, LBRY_WEB_BUFFER_API } from 'config';
|
||||||
|
|
||||||
const isProduction = process.env.NODE_ENV === 'production';
|
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';
|
export const SHARE_INTERNAL = 'shareInternal';
|
||||||
const SHARE_THIRD_PARTY = 'shareThirdParty';
|
const SHARE_THIRD_PARTY = 'shareThirdParty';
|
||||||
|
|
|
||||||
|
|
@ -43,8 +43,7 @@ type Props = {
|
||||||
activeChannel: string,
|
activeChannel: string,
|
||||||
activeChannelClaim: ?ChannelClaim,
|
activeChannelClaim: ?ChannelClaim,
|
||||||
bottom: boolean,
|
bottom: boolean,
|
||||||
onSubmit: (string, string) => void,
|
livestream?: boolean,
|
||||||
livestream: boolean,
|
|
||||||
embed?: boolean,
|
embed?: boolean,
|
||||||
toast: (string) => void,
|
toast: (string) => void,
|
||||||
claimIsMine: boolean,
|
claimIsMine: boolean,
|
||||||
|
|
@ -66,17 +65,14 @@ export function CommentCreate(props: Props) {
|
||||||
isReply,
|
isReply,
|
||||||
parentId,
|
parentId,
|
||||||
activeChannelClaim,
|
activeChannelClaim,
|
||||||
onSubmit,
|
|
||||||
bottom,
|
bottom,
|
||||||
livestream,
|
livestream,
|
||||||
embed,
|
embed,
|
||||||
toast,
|
|
||||||
claimIsMine,
|
claimIsMine,
|
||||||
sendTip,
|
sendTip,
|
||||||
doToast,
|
doToast,
|
||||||
} = props;
|
} = props;
|
||||||
const buttonref: ElementRef<any> = React.useRef();
|
const buttonRef: ElementRef<any> = React.useRef();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
push,
|
push,
|
||||||
location: { pathname },
|
location: { pathname },
|
||||||
|
|
@ -92,11 +88,8 @@ export function CommentCreate(props: Props) {
|
||||||
const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
|
const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
|
||||||
const hasChannels = channels && channels.length;
|
const hasChannels = channels && channels.length;
|
||||||
const charCount = commentValue.length;
|
const charCount = commentValue.length;
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = React.useState('');
|
const [activeTab, setActiveTab] = React.useState('');
|
||||||
|
|
||||||
const [tipError, setTipError] = React.useState();
|
const [tipError, setTipError] = React.useState();
|
||||||
|
|
||||||
const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
|
const disabled = isSubmitting || !activeChannelClaim || !commentValue.length;
|
||||||
const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
|
const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
|
||||||
|
|
||||||
|
|
@ -115,7 +108,7 @@ export function CommentCreate(props: Props) {
|
||||||
const KEYCODE_ENTER = 13;
|
const KEYCODE_ENTER = 13;
|
||||||
if ((livestream || 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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -154,8 +147,6 @@ export function CommentCreate(props: Props) {
|
||||||
const activeChannelName = activeChannelClaim && activeChannelClaim.name;
|
const activeChannelName = activeChannelClaim && activeChannelClaim.name;
|
||||||
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
|
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
|
||||||
|
|
||||||
console.log(activeChannelClaim);
|
|
||||||
|
|
||||||
setIsSubmitting(true);
|
setIsSubmitting(true);
|
||||||
|
|
||||||
if (activeTab === TAB_LBC) {
|
if (activeTab === TAB_LBC) {
|
||||||
|
|
@ -191,8 +182,7 @@ export function CommentCreate(props: Props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const sourceClaimId = claim.claim_id;
|
const sourceClaimId = claim.claim_id;
|
||||||
|
const roundedAmount = Math.round(tipAmount * 100) / 100;
|
||||||
var roundedAmount = Math.round(tipAmount * 100) / 100;
|
|
||||||
|
|
||||||
Lbryio.call(
|
Lbryio.call(
|
||||||
'customer',
|
'customer',
|
||||||
|
|
@ -211,8 +201,6 @@ export function CommentCreate(props: Props) {
|
||||||
'post'
|
'post'
|
||||||
)
|
)
|
||||||
.then((customerTipResponse) => {
|
.then((customerTipResponse) => {
|
||||||
console.log(customerTipResponse);
|
|
||||||
|
|
||||||
const paymentIntendId = customerTipResponse.payment_intent_id;
|
const paymentIntendId = customerTipResponse.payment_intent_id;
|
||||||
|
|
||||||
handleCreateComment(null, paymentIntendId, stripeEnvironment);
|
handleCreateComment(null, paymentIntendId, stripeEnvironment);
|
||||||
|
|
@ -232,14 +220,14 @@ export function CommentCreate(props: Props) {
|
||||||
|
|
||||||
// handleCreateComment(null);
|
// handleCreateComment(null);
|
||||||
})
|
})
|
||||||
.catch(function (error) {
|
.catch((error) => {
|
||||||
var displayError = 'Sorry, there was an error in processing your payment!';
|
doToast({
|
||||||
|
message:
|
||||||
if (error.message !== 'payment intent failed to confirm') {
|
error.message !== 'payment intent failed to confirm'
|
||||||
displayError = error.message;
|
? error.message
|
||||||
}
|
: 'Sorry, there was an error in processing your payment!',
|
||||||
|
isError: true,
|
||||||
doToast({ message: displayError, isError: true });
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -263,16 +251,12 @@ 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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch(() => {
|
||||||
setIsSubmitting(false);
|
setIsSubmitting(false);
|
||||||
setCommentFailure(true);
|
setCommentFailure(true);
|
||||||
});
|
});
|
||||||
|
|
@ -322,7 +306,7 @@ export function CommentCreate(props: Props) {
|
||||||
<div className="comment__create">
|
<div className="comment__create">
|
||||||
<div className="comment__sc-preview">
|
<div className="comment__sc-preview">
|
||||||
<CreditAmount
|
<CreditAmount
|
||||||
className="comment__scpreview-amount"
|
className="comment__sc-preview-amount"
|
||||||
isFiat={activeTab === TAB_FIAT}
|
isFiat={activeTab === TAB_FIAT}
|
||||||
amount={tipAmount}
|
amount={tipAmount}
|
||||||
size={activeTab === TAB_LBC ? 18 : 2}
|
size={activeTab === TAB_LBC ? 18 : 2}
|
||||||
|
|
@ -415,7 +399,7 @@ export function CommentCreate(props: Props) {
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<Button
|
<Button
|
||||||
ref={buttonref}
|
ref={buttonRef}
|
||||||
button="primary"
|
button="primary"
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@ import classnames from 'classnames';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import { formatNumberWithCommas } from 'util/number';
|
import { formatNumberWithCommas } from 'util/number';
|
||||||
import NudgeFloating from 'component/nudgeFloating';
|
import NudgeFloating from 'component/nudgeFloating';
|
||||||
|
import { SIMPLE_SITE } from 'config';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
claim: StreamClaim,
|
claim: StreamClaim,
|
||||||
|
|
@ -31,9 +32,16 @@ function FileReactions(props: Props) {
|
||||||
dislikeCount,
|
dislikeCount,
|
||||||
livestream,
|
livestream,
|
||||||
} = props;
|
} = 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.
|
||||||
|
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(() => {
|
React.useEffect(() => {
|
||||||
function fetchReactions() {
|
function fetchReactions() {
|
||||||
doFetchReactions(claimId);
|
doFetchReactions(claimId);
|
||||||
|
|
@ -71,7 +79,7 @@ function FileReactions(props: Props) {
|
||||||
className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
|
className={classnames('button--file-action', { 'button--fire': myReaction === REACTION_TYPES.LIKE })}
|
||||||
label={
|
label={
|
||||||
<>
|
<>
|
||||||
{myReaction === REACTION_TYPES.LIKE && (
|
{myReaction === REACTION_TYPES.LIKE && SIMPLE_SITE && (
|
||||||
<>
|
<>
|
||||||
<div className="button__fire-glow" />
|
<div className="button__fire-glow" />
|
||||||
<div className="button__fire-particle1" />
|
<div className="button__fire-particle1" />
|
||||||
|
|
@ -86,7 +94,7 @@ function FileReactions(props: Props) {
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
iconSize={18}
|
iconSize={18}
|
||||||
icon={myReaction === REACTION_TYPES.LIKE ? ICONS.FIRE_ACTIVE : ICONS.FIRE}
|
icon={likeIcon}
|
||||||
onClick={() => doReactionLike(uri)}
|
onClick={() => doReactionLike(uri)}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -96,7 +104,7 @@ function FileReactions(props: Props) {
|
||||||
className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
|
className={classnames('button--file-action', { 'button--slime': myReaction === REACTION_TYPES.DISLIKE })}
|
||||||
label={
|
label={
|
||||||
<>
|
<>
|
||||||
{myReaction === REACTION_TYPES.DISLIKE && (
|
{myReaction === REACTION_TYPES.DISLIKE && SIMPLE_SITE && (
|
||||||
<>
|
<>
|
||||||
<div className="button__slime-stain" />
|
<div className="button__slime-stain" />
|
||||||
<div className="button__slime-drop1" />
|
<div className="button__slime-drop1" />
|
||||||
|
|
@ -107,7 +115,7 @@ function FileReactions(props: Props) {
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
iconSize={18}
|
iconSize={18}
|
||||||
icon={myReaction === REACTION_TYPES.DISLIKE ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
|
icon={dislikeIcon}
|
||||||
onClick={() => doReactionDislike(uri)}
|
onClick={() => doReactionDislike(uri)}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
13
ui/index.jsx
13
ui/index.jsx
|
|
@ -35,7 +35,7 @@ import {
|
||||||
doAuthTokenRefresh,
|
doAuthTokenRefresh,
|
||||||
} from 'util/saved-passwords';
|
} from 'util/saved-passwords';
|
||||||
import { X_LBRY_AUTH_TOKEN } from 'constants/token';
|
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 3rd-party styles before ours for the current way we are code-splitting.
|
||||||
import 'scss/third-party.scss';
|
import 'scss/third-party.scss';
|
||||||
|
|
@ -43,8 +43,12 @@ import 'scss/third-party.scss';
|
||||||
// Import our app styles
|
// Import our app styles
|
||||||
// If a style is not necessary for the initial page load, it should be removed from `all.scss`
|
// 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
|
// and loaded dynamically in the component that consumes it
|
||||||
|
// @if TARGET='app'
|
||||||
import 'scss/all.scss';
|
import 'scss/all.scss';
|
||||||
|
// @endif
|
||||||
|
// @if TARGET='web'
|
||||||
|
import 'web/theme';
|
||||||
|
// @endif
|
||||||
// @if TARGET='web'
|
// @if TARGET='web'
|
||||||
// These overrides can't live in web/ because they need to use the same instance of `Lbry`
|
// These overrides can't live in web/ because they need to use the same instance of `Lbry`
|
||||||
import apiPublishCallViaWeb from 'web/setup/publish';
|
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;
|
let sdkAPIHost = process.env.SDK_API_HOST || process.env.SDK_API_URL;
|
||||||
// @if TARGET='web'
|
|
||||||
sdkAPIHost = LBRY_WEB_API;
|
sdkAPIHost = LBRY_WEB_API;
|
||||||
// @endif
|
|
||||||
|
|
||||||
export const SDK_API_PATH = `${sdkAPIHost}/api/v1`;
|
export const SDK_API_PATH = `${sdkAPIHost}/api/v1`;
|
||||||
const proxyURL = `${SDK_API_PATH}/proxy`;
|
const proxyURL = `${SDK_API_PATH}/proxy`;
|
||||||
|
const publishURL = LBRY_WEB_PUBLISH_API; // || `${SDK_API_PATH}/proxy`;
|
||||||
|
|
||||||
Lbry.setDaemonConnectionString(proxyURL);
|
Lbry.setDaemonConnectionString(proxyURL);
|
||||||
|
|
||||||
|
|
@ -80,7 +83,7 @@ Lbry.setOverride(
|
||||||
new Promise((resolve, reject) => {
|
new Promise((resolve, reject) => {
|
||||||
apiPublishCallViaWeb(
|
apiPublishCallViaWeb(
|
||||||
apiCall,
|
apiCall,
|
||||||
proxyURL,
|
publishURL,
|
||||||
Lbry.getApiRequestHeaders() && Object.keys(Lbry.getApiRequestHeaders()).includes(X_LBRY_AUTH_TOKEN)
|
Lbry.getApiRequestHeaders() && Object.keys(Lbry.getApiRequestHeaders()).includes(X_LBRY_AUTH_TOKEN)
|
||||||
? Lbry.getApiRequestHeaders()[X_LBRY_AUTH_TOKEN]
|
? Lbry.getApiRequestHeaders()[X_LBRY_AUTH_TOKEN]
|
||||||
: '',
|
: '',
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,7 @@ $thumbnailWidthSmall: 1rem;
|
||||||
margin-top: var(--spacing-xxs);
|
margin-top: var(--spacing-xxs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment__scpreview-amount {
|
.comment__sc-preview-amount {
|
||||||
margin-right: var(--spacing-m);
|
margin-right: var(--spacing-m);
|
||||||
font-size: var(--font-large);
|
font-size: var(--font-large);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@import 'init/mixins';
|
@import '../init/mixins';
|
||||||
|
|
||||||
input,
|
input,
|
||||||
textarea,
|
textarea,
|
||||||
|
|
|
||||||
70
web/scss/lbrytv.scss
Normal file
70
web/scss/lbrytv.scss
Normal file
|
|
@ -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';
|
||||||
70
web/scss/odysee.scss
Normal file
70
web/scss/odysee.scss
Normal file
|
|
@ -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';
|
||||||
159
web/scss/themes/lbrytv/dark.scss
Normal file
159
web/scss/themes/lbrytv/dark.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
2
web/scss/themes/lbrytv/light.scss
Normal file
2
web/scss/themes/lbrytv/light.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
:root {
|
||||||
|
}
|
||||||
755
web/scss/themes/odysee/component/_file-render.scss
Normal file
755
web/scss/themes/odysee/component/_file-render.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
713
web/scss/themes/odysee/component/_form-field.scss
Normal file
713
web/scss/themes/odysee/component/_form-field.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
143
web/scss/themes/odysee/dark.scss
Normal file
143
web/scss/themes/odysee/dark.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
199
web/scss/themes/odysee/init/_base-theme.scss
Normal file
199
web/scss/themes/odysee/init/_base-theme.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
57
web/scss/themes/odysee/init/_color.scss
Normal file
57
web/scss/themes/odysee/init/_color.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
: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);
|
||||||
|
}
|
||||||
517
web/scss/themes/odysee/init/_gui.scss
Normal file
517
web/scss/themes/odysee/init/_gui.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
237
web/scss/themes/odysee/init/_mixins.scss
Normal file
237
web/scss/themes/odysee/init/_mixins.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
245
web/scss/themes/odysee/init/_reset.scss
Normal file
245
web/scss/themes/odysee/init/_reset.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
108
web/scss/themes/odysee/init/_vars.scss
Normal file
108
web/scss/themes/odysee/init/_vars.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
155
web/scss/themes/odysee/light.scss
Normal file
155
web/scss/themes/odysee/light.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
6
web/theme.js
Normal file
6
web/theme.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
// @if BRANDED_SITE='odysee'
|
||||||
|
import './scss/odysee.scss';
|
||||||
|
// @endif
|
||||||
|
// @if BRANDED_SITE='lbrytv'
|
||||||
|
import './scss/lbrytv.scss';
|
||||||
|
// @endif
|
||||||
|
|
@ -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 path = require('path');
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const merge = require('webpack-merge');
|
const merge = require('webpack-merge');
|
||||||
|
|
@ -153,6 +153,7 @@ const webConfig = {
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
options: {
|
options: {
|
||||||
TARGET: 'web',
|
TARGET: 'web',
|
||||||
|
BRANDED_SITE: BRANDED_SITE,
|
||||||
ppOptions: {
|
ppOptions: {
|
||||||
type: 'js',
|
type: 'js',
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue