moonpay
This commit is contained in:
Sean Yesmunt
parent
78422ccfb2
commit
e7cdd6c13d
63 changed files with 809 additions and 455 deletions
|
|
@ -94,6 +94,7 @@
|
|||
"copy-webpack-plugin": "^4.6.0",
|
||||
"country-data": "^0.0.31",
|
||||
"cross-env": "^5.2.0",
|
||||
"crypto-js": "^4.0.0",
|
||||
"css-doodle": "^0.7.1",
|
||||
"css-loader": "^2.1.0",
|
||||
"cssnano": "^4.1.10",
|
||||
|
|
|
|||
|
|
@ -638,7 +638,26 @@ export const icons = {
|
|||
<g>
|
||||
<polyline points="23 4 23 10 17 10" />
|
||||
<polyline points="1 20 1 14 7 14" />
|
||||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />{' '}
|
||||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
|
||||
</g>
|
||||
),
|
||||
[ICONS.BUY]: buildIcon(
|
||||
<g>
|
||||
<circle cx="9" cy="21" r="1" />
|
||||
<circle cx="20" cy="21" r="1" />
|
||||
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
|
||||
</g>
|
||||
),
|
||||
[ICONS.SEND]: buildIcon(
|
||||
<g>
|
||||
<line x1="22" y1="2" x2="11" y2="13" />
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||||
</g>
|
||||
),
|
||||
[ICONS.RECEIVE]: buildIcon(
|
||||
<g>
|
||||
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
|
||||
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
|
||||
</g>
|
||||
),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,17 +15,18 @@ type Props = {
|
|||
authPage: boolean,
|
||||
noHeader: boolean,
|
||||
noFooter: boolean,
|
||||
noSideNavigation: boolean,
|
||||
};
|
||||
|
||||
function Page(props: Props) {
|
||||
const { children, className, authPage = false, noHeader, noFooter } = props;
|
||||
const { children, className, authPage = false, noHeader = false, noFooter = false, noSideNavigation = false } = props;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{!noHeader && <Header authHeader={authPage} />}
|
||||
<div className={classnames('main-wrapper__inner')}>
|
||||
<main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
|
||||
{!authPage && !noHeader && <SideNavigation />}
|
||||
{!authPage && !noSideNavigation && <SideNavigation />}
|
||||
</div>
|
||||
{/* @if TARGET='web' */}
|
||||
{!noFooter && <Footer />}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ import Welcome from 'page/welcome';
|
|||
import CreatorDashboard from 'page/creatorDashboard';
|
||||
import RewardsVerifyPage from 'page/rewardsVerify';
|
||||
import CheckoutPage from 'page/checkoutPage';
|
||||
import BuyPage from 'page/buy';
|
||||
|
||||
import { parseURI } from 'lbry-redux';
|
||||
import { SITE_TITLE, WELCOME_VERSION } from 'config';
|
||||
|
|
@ -196,6 +197,7 @@ function AppRouter(props: Props) {
|
|||
<PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
|
||||
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
|
||||
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
|
||||
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />
|
||||
|
||||
<Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
|
||||
<Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ function UserPasswordReset(props: Props) {
|
|||
<Button
|
||||
button="primary"
|
||||
type="submit"
|
||||
label={loading ? __('Update Password') : __('Updating Password')}
|
||||
label={loading ? __('Updating Password') : __('Update Password')}
|
||||
disabled={!password || loading}
|
||||
/>
|
||||
<Button button="link" label={__('Cancel')} onClick={handleRestart} />
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
import { connect } from 'react-redux';
|
||||
import {
|
||||
selectBalance,
|
||||
selectTotalBalance,
|
||||
selectClaimsBalance,
|
||||
selectSupportsBalance,
|
||||
selectTipsBalance,
|
||||
} from 'lbry-redux';
|
||||
import { selectBalance, selectClaimsBalance, selectSupportsBalance, selectTipsBalance } from 'lbry-redux';
|
||||
import { doOpenModal } from 'redux/actions/app';
|
||||
import { selectClaimedRewards, selectSyncHash } from 'lbryinc';
|
||||
import WalletBalance from './view';
|
||||
|
||||
const select = state => ({
|
||||
balance: selectBalance(state),
|
||||
totalBalance: selectTotalBalance(state),
|
||||
claimsBalance: selectClaimsBalance(state) || 0,
|
||||
supportsBalance: selectSupportsBalance(state) || 0,
|
||||
tipsBalance: selectTipsBalance(state) || 0,
|
||||
|
|
@ -20,9 +13,6 @@ const select = state => ({
|
|||
hasSynced: Boolean(selectSyncHash(state)),
|
||||
});
|
||||
|
||||
export default connect(
|
||||
select,
|
||||
{
|
||||
doOpenModal,
|
||||
}
|
||||
)(WalletBalance);
|
||||
export default connect(select, {
|
||||
doOpenModal,
|
||||
})(WalletBalance);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import CreditAmount from 'component/common/credit-amount';
|
|||
import Button from 'component/button';
|
||||
import Icon from 'component/common/icon';
|
||||
import HelpLink from 'component/common/help-link';
|
||||
import Card from 'component/common/card';
|
||||
|
||||
type Props = {
|
||||
balance: number,
|
||||
|
|
@ -24,88 +25,101 @@ const WalletBalance = (props: Props) => {
|
|||
return (
|
||||
<React.Fragment>
|
||||
<section className="columns">
|
||||
<Card
|
||||
title={
|
||||
<span>
|
||||
{(balance || balance === 0) && (
|
||||
<CreditAmount badge={false} amount={balance} precision={8} showLBC={false} />
|
||||
)}{' '}
|
||||
<span className="section__title--small">LBC</span>
|
||||
</span>
|
||||
}
|
||||
subtitle={__('Available Balance')}
|
||||
actions={
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Buy')} icon={ICONS.BUY} navigate={`/$/${PAGES.BUY}`} />
|
||||
<Button
|
||||
button="secondary"
|
||||
label={__('Receive')}
|
||||
icon={ICONS.RECEIVE}
|
||||
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
|
||||
/>
|
||||
<Button
|
||||
button="secondary"
|
||||
label={__('Send')}
|
||||
icon={ICONS.SEND}
|
||||
onClick={() => doOpenModal(MODALS.WALLET_SEND)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<h2 className="section__title">{__('Available Balance')}</h2>
|
||||
<span className="section__title--large">
|
||||
{(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
|
||||
</span>
|
||||
<React.Fragment>
|
||||
{/* @if TARGET='app' */}
|
||||
{hasSynced ? (
|
||||
<div className="section">
|
||||
<div className="section__flex">
|
||||
<Icon sectionIcon icon={ICONS.LOCK} />
|
||||
<h2 className="section__title--small">
|
||||
{__('A backup of your wallet is synced with lbry.tv.')}
|
||||
<HelpLink href="https://lbry.com/faq/account-sync" />
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="section">
|
||||
<div className="section__flex">
|
||||
<Icon sectionIcon icon={ICONS.UNLOCK} />
|
||||
<h2 className="section__title--small">
|
||||
{__(
|
||||
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
|
||||
)}
|
||||
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* @endif */}
|
||||
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Your Address')} onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)} />
|
||||
<Button
|
||||
button="secondary"
|
||||
icon={ICONS.SEND}
|
||||
label={__('Send Credits')}
|
||||
onClick={() => doOpenModal(MODALS.WALLET_SEND)}
|
||||
/>
|
||||
</div>
|
||||
{/* @if TARGET='app' */}
|
||||
{hasSynced ? (
|
||||
<div className="section">
|
||||
<div className="section__flex">
|
||||
<Icon sectionIcon iconColor={'blue'} icon={ICONS.LOCK} />
|
||||
<h2 className="section__title--small">
|
||||
{__('A backup of your wallet is synced with lbry.tv.')}
|
||||
<HelpLink href="https://lbry.com/faq/account-sync" />
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="section">
|
||||
<div className="section__flex">
|
||||
<Icon sectionIcon iconColor={'blue'} icon={ICONS.UNLOCK} />
|
||||
<h2 className="section__title--small">
|
||||
{__(
|
||||
'Your wallet is not currently synced with lbry.tv. You are in control of backing up your wallet.'
|
||||
)}
|
||||
<HelpLink navigate={`/$/${PAGES.BACKUP}`} />
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* @endif */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="section">
|
||||
<div className="section__flex">
|
||||
<Icon sectionIcon icon={ICONS.TIP} />
|
||||
<h2 className="section__title--small">
|
||||
<strong>
|
||||
<CreditAmount badge={false} amount={tipsBalance} precision={8} />
|
||||
</strong>{' '}
|
||||
{__('earned and bound in tips')}
|
||||
<HelpLink href="https://lbry.com/faq/tipping" />
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section">
|
||||
<div className="section__flex">
|
||||
<Icon sectionIcon icon={ICONS.LOCK} />
|
||||
<div>
|
||||
<Icon sectionIcon icon={ICONS.TIP} />
|
||||
<h2 className="section__title--small">
|
||||
<strong>
|
||||
<CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
|
||||
<CreditAmount badge={false} amount={tipsBalance} precision={8} />
|
||||
</strong>{' '}
|
||||
{__('currently staked')}
|
||||
{__('earned and bound in tips')}
|
||||
</h2>
|
||||
<div className="section__subtitle">
|
||||
<dl>
|
||||
<dt>{__('... in your publishes')}</dt>
|
||||
<dd>
|
||||
<CreditAmount badge={false} amount={claimsBalance} precision={8} />
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dt>{__('... in your supports')}</dt>
|
||||
<dd>
|
||||
<CreditAmount badge={false} amount={supportsBalance} precision={8} />
|
||||
</dd>
|
||||
</dl>
|
||||
<div className="section">
|
||||
<div className="section__flex">
|
||||
<Icon sectionIcon icon={ICONS.LOCK} />
|
||||
<div>
|
||||
<h2 className="section__title--small">
|
||||
<strong>
|
||||
<CreditAmount badge={false} amount={claimsBalance + supportsBalance} precision={8} />
|
||||
</strong>{' '}
|
||||
{__('currently staked')}
|
||||
</h2>
|
||||
<div className="section__subtitle">
|
||||
<dl>
|
||||
<dt>{__('... in your publishes')}</dt>
|
||||
<dd>
|
||||
<CreditAmount badge={false} amount={claimsBalance} precision={8} />
|
||||
</dd>
|
||||
|
||||
<dt>{__('... in your supports')}</dt>
|
||||
<dd>
|
||||
<CreditAmount badge={false} amount={supportsBalance} precision={8} />
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
</section>
|
||||
</React.Fragment>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ export const MENU = 'Menu';
|
|||
export const BACKUP = 'Database';
|
||||
export const TRANSACTIONS = 'FileText';
|
||||
export const LBRY = 'Lbry';
|
||||
export const SEND = 'Send';
|
||||
export const DISCOVER = 'Compass';
|
||||
export const VISUALIZER_ON = 'Eye';
|
||||
export const VISUALIZER_OFF = 'EyeOff';
|
||||
|
|
@ -102,3 +101,6 @@ export const ANALYTICS = 'BarChart2';
|
|||
export const PURCHASED = 'Key';
|
||||
export const CIRCLE = 'Circle';
|
||||
export const PINNED = 'Pinned';
|
||||
export const BUY = 'Buy';
|
||||
export const SEND = 'Send';
|
||||
export const RECEIVE = 'Receive';
|
||||
|
|
|
|||
62
ui/constants/moonpay.js
Normal file
62
ui/constants/moonpay.js
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
export const SUPPORTED_MOONPAY_COUNTRIES = [
|
||||
'Argentina',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Belgium',
|
||||
'Brazil',
|
||||
'Bulgaria',
|
||||
'Canada',
|
||||
'Chile',
|
||||
'Colombia',
|
||||
'Croatia',
|
||||
'Cyprus',
|
||||
'Czech Republic',
|
||||
'Denmark',
|
||||
'Estonia',
|
||||
'Finland',
|
||||
'France',
|
||||
'Germany',
|
||||
'Greece',
|
||||
'Hong Kong',
|
||||
'Hungary',
|
||||
'Iceland',
|
||||
'India',
|
||||
'Indonesia',
|
||||
'Ireland',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Japan',
|
||||
'Kuwait',
|
||||
'Latvia',
|
||||
'Liechtenstein',
|
||||
'Lithuania',
|
||||
'Luxembourg',
|
||||
'Malaysia',
|
||||
'Malta',
|
||||
'Mauritius',
|
||||
'Mexico',
|
||||
'Netherlands',
|
||||
'New Zealand',
|
||||
'Norway',
|
||||
'Philippines',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Qatar',
|
||||
'Romania',
|
||||
'Russia',
|
||||
'Saudi Arabia',
|
||||
'Singapore',
|
||||
'Slovakia',
|
||||
'Slovenia',
|
||||
'South Africa',
|
||||
'South Korea',
|
||||
'Spain',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Taiwan',
|
||||
'Thailand',
|
||||
'Turkey',
|
||||
'United Arab Emirates',
|
||||
'United Kingdom',
|
||||
'Viet Nam',
|
||||
];
|
||||
|
|
@ -37,3 +37,4 @@ exports.WELCOME = 'welcome';
|
|||
exports.CREATOR_DASHBOARD = 'dashboard';
|
||||
exports.CHECKOUT = 'checkout';
|
||||
exports.CODE_2257 = '2257';
|
||||
exports.BUY = 'buy';
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ import ModalMobileNavigation from 'modal/modalMobileNavigation';
|
|||
import ModalSetReferrer from 'modal/modalSetReferrer';
|
||||
import ModalRepost from 'modal/modalRepost';
|
||||
import ModalSignOut from 'modal/modalSignOut';
|
||||
import ModalLiquidateSupports from 'modal/modalSupportsLiquidate';
|
||||
import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
|
||||
import ModalConfirmAge from 'modal/modalConfirmAge';
|
||||
import ModalFileSelection from 'modal/modalFileSelection';
|
||||
|
||||
|
|
@ -137,12 +137,12 @@ function ModalRouter(props: Props) {
|
|||
return <ModalRepost {...modalProps} />;
|
||||
case MODALS.SIGN_OUT:
|
||||
return <ModalSignOut {...modalProps} />;
|
||||
case MODALS.LIQUIDATE_SUPPORTS:
|
||||
return <ModalLiquidateSupports {...modalProps} />;
|
||||
case MODALS.CONFIRM_AGE:
|
||||
return <ModalConfirmAge {...modalProps} />;
|
||||
case MODALS.FILE_SELECTION:
|
||||
return <ModalFileSelection {...modalProps} />;
|
||||
case MODALS.LIQUIDATE_SUPPORTS:
|
||||
return <ModalSupportsLiquidate {...modalProps} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
16
ui/page/buy/index.js
Normal file
16
ui/page/buy/index.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { selectGettingNewAddress, selectReceiveAddress, doGetNewAddress } from 'lbry-redux';
|
||||
import { selectUserEmail, selectUser, doUserSetCountry } from 'lbryinc';
|
||||
import BuyPage from './view';
|
||||
|
||||
const select = state => ({
|
||||
receiveAddress: selectReceiveAddress(state),
|
||||
gettingNewAddress: selectGettingNewAddress(state),
|
||||
email: selectUserEmail(state),
|
||||
user: selectUser(state),
|
||||
});
|
||||
|
||||
export default connect(select, {
|
||||
doGetNewAddress,
|
||||
doUserSetCountry,
|
||||
})(BuyPage);
|
||||
161
ui/page/buy/view.jsx
Normal file
161
ui/page/buy/view.jsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import Page from 'component/page';
|
||||
import Card from 'component/common/card';
|
||||
import Spinner from 'component/spinner';
|
||||
import hmacSHA256 from 'crypto-js/hmac-sha256';
|
||||
import Base64 from 'crypto-js/enc-base64';
|
||||
import { countries as countryData } from 'country-data';
|
||||
import { FormField } from 'component/common/form';
|
||||
import { SUPPORTED_MOONPAY_COUNTRIES } from 'constants/moonpay';
|
||||
import { useHistory } from 'react-router';
|
||||
import Button from 'component/button';
|
||||
import Nag from 'component/common/nag';
|
||||
|
||||
const MOONPAY_KEY = process.env.MOONPAY_SECRET_KEY;
|
||||
const COUNTRIES = Array.from(
|
||||
new Set(
|
||||
countryData.all
|
||||
.map(country => country.name)
|
||||
.sort((a, b) => {
|
||||
if (a > b) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (b > a) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
type Props = {
|
||||
receiveAddress: ?string,
|
||||
gettingNewAddress: boolean,
|
||||
email: string,
|
||||
user: ?User,
|
||||
doGetNewAddress: () => void,
|
||||
doUserSetCountry: string => void,
|
||||
};
|
||||
|
||||
export default function BuyPage(props: Props) {
|
||||
const { receiveAddress, gettingNewAddress, doGetNewAddress, email, user, doUserSetCountry } = props;
|
||||
const initialCountry = user && user.country;
|
||||
const [url, setUrl] = React.useState();
|
||||
const [country, setCountry] = React.useState(initialCountry);
|
||||
const [ShowPurchaseScreen, setShowPurchaseScreen] = React.useState(false);
|
||||
const isValid = SUPPORTED_MOONPAY_COUNTRIES.includes(country);
|
||||
const { goBack } = useHistory();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (country) {
|
||||
doUserSetCountry(country);
|
||||
}
|
||||
|
||||
// uncomment to auto show the purchase screen based on their chosen country
|
||||
// if (isValid) {
|
||||
// setShowPurchaseScreen(true);
|
||||
// }
|
||||
}, [country, doUserSetCountry, isValid, setShowPurchaseScreen]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!receiveAddress && !gettingNewAddress) {
|
||||
doGetNewAddress();
|
||||
}
|
||||
}, [doGetNewAddress, receiveAddress, gettingNewAddress]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (MOONPAY_KEY && !url && receiveAddress) {
|
||||
let url = `https://buy.moonpay.io?apiKey=pk_live_xNFffrN5NWKy6fu0ggbV8VQIwRieRzy&colorCode=%23257761¤cyCode=lbc&showWalletAddressForm=true&walletAddress=${receiveAddress}`;
|
||||
if (email) {
|
||||
url += `&email=${encodeURIComponent(email)}`;
|
||||
}
|
||||
|
||||
const query = new URL(url).search;
|
||||
const signature = Base64.stringify(hmacSHA256(query, MOONPAY_KEY));
|
||||
|
||||
setUrl(`${url}&signature=${encodeURIComponent(signature)}`);
|
||||
}
|
||||
}, [url, setUrl, receiveAddress, email]);
|
||||
|
||||
return (
|
||||
<Page noSideNavigation className="main--buy">
|
||||
{!user && (
|
||||
<div className="main--empty">
|
||||
<Spinner delayed />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user && (
|
||||
<>
|
||||
{ShowPurchaseScreen ? (
|
||||
<Card
|
||||
title={__('Purchase LBC')}
|
||||
subtitle={__('You can purchase LBC now.')}
|
||||
actions={
|
||||
url ? (
|
||||
<iframe
|
||||
allow="accelerometer; autoplay; camera; gyroscope; payment"
|
||||
frameBorder="0"
|
||||
src={url}
|
||||
width="100%"
|
||||
>
|
||||
<p>{__('Your browser does not support iframes.')}</p>
|
||||
</iframe>
|
||||
) : (
|
||||
<div className="main--empty">
|
||||
<Spinner delayed />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Card
|
||||
title={__('What Country Do You Live In?')}
|
||||
subtitle={__('Only people from certain countries are elligible to purchase LBC.')}
|
||||
nag={country && !isValid && <Nag relative type="helpful" message={"This country isn't supported yet."} />}
|
||||
actions={
|
||||
<div>
|
||||
<div className="section">
|
||||
<FormField
|
||||
label={__('Country')}
|
||||
type="select"
|
||||
name="country-codes"
|
||||
value={country}
|
||||
onChange={e => setCountry(e.target.value)}
|
||||
>
|
||||
<option value="" disabled defaultValue>
|
||||
{__('Select your country')}
|
||||
</option>
|
||||
{COUNTRIES.map((country, index) => (
|
||||
<option key={country} value={country}>
|
||||
{country}
|
||||
</option>
|
||||
))}
|
||||
</FormField>
|
||||
</div>
|
||||
{country && (
|
||||
<div className="section">
|
||||
{isValid ? (
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Continue')} onClick={() => setShowPurchaseScreen(true)} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Go Back')} onClick={() => goBack()} />
|
||||
<Button button="link" label={__('Try Anyway')} onClick={() => setShowPurchaseScreen(true)} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
@ -40,11 +40,16 @@ class RewardsPage extends PureComponent<Props> {
|
|||
|
||||
if (user && !user.is_reward_approved && rewardsEnabled) {
|
||||
if (!user.primary_email || !user.has_verified_email || !user.is_identity_verified) {
|
||||
return <RewardAuthIntro />;
|
||||
return (
|
||||
<div className="section">
|
||||
<RewardAuthIntro />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="section"
|
||||
title={__('Reward Validation Pending')}
|
||||
body={
|
||||
<React.Fragment>
|
||||
|
|
@ -156,7 +161,7 @@ class RewardsPage extends PureComponent<Props> {
|
|||
return (
|
||||
<Page>
|
||||
{this.renderPageHeader()}
|
||||
{this.renderUnclaimedRewards()}
|
||||
<div className="section">{this.renderUnclaimedRewards()}</div>
|
||||
{<RewardListClaimed />}
|
||||
</Page>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { selectBalance } from 'lbry-redux';
|
||||
import { doOpenModal } from 'redux/actions/app';
|
||||
import Wallet from './view';
|
||||
|
||||
const select = state => ({});
|
||||
const select = state => ({
|
||||
balance: selectBalance(state),
|
||||
});
|
||||
|
||||
const perform = dispatch => ({});
|
||||
|
||||
export default connect(
|
||||
select,
|
||||
perform
|
||||
)(Wallet);
|
||||
export default connect(select, {
|
||||
doOpenModal,
|
||||
})(Wallet);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,69 @@
|
|||
// @flow
|
||||
import * as ICONS from 'constants/icons';
|
||||
import * as PAGES from 'constants/pages';
|
||||
import * as MODALS from 'constants/modal_types';
|
||||
import React from 'react';
|
||||
import { withRouter } from 'react-router';
|
||||
import WalletBalance from 'component/walletBalance';
|
||||
import TxoList from 'component/txoList';
|
||||
import Page from 'component/page';
|
||||
import Yrbl from 'component/yrbl';
|
||||
import Button from 'component/button';
|
||||
import Spinner from 'component/spinner';
|
||||
|
||||
type Props = {
|
||||
history: { action: string, push: string => void, replace: string => void },
|
||||
location: { search: string, pathname: string },
|
||||
balance: number,
|
||||
doOpenModal: string => void,
|
||||
};
|
||||
|
||||
const WalletPage = (props: Props) => {
|
||||
const { location } = props;
|
||||
const { location, balance, doOpenModal } = props;
|
||||
const { search } = location;
|
||||
const showIntro = balance === 0;
|
||||
const loading = balance === undefined;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<WalletBalance />
|
||||
<TxoList search={search} />
|
||||
{loading && (
|
||||
<div className="main--empty">
|
||||
<Spinner delayed />
|
||||
</div>
|
||||
)}
|
||||
{!loading && (
|
||||
<>
|
||||
{showIntro ? (
|
||||
<div className="main--empty">
|
||||
<Yrbl
|
||||
title={__('Your Wallet is Empty')}
|
||||
subtitle={
|
||||
<div>
|
||||
<p>
|
||||
There are a lot of ways to get LBC! You can have your friend send you a few, earn rewards, or
|
||||
purchase your own.
|
||||
</p>
|
||||
<div className="section__actions">
|
||||
<Button button="primary" label={__('Earn Rewards')} navigate={`/$/${PAGES.REWARDS}`} />
|
||||
<Button
|
||||
button="secondary"
|
||||
label={__('Send To Your Address')}
|
||||
onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)}
|
||||
/>
|
||||
<Button button="alt" icon={ICONS.SEND} label={__('Buy Credits')} navigate={`/$/${PAGES.BUY}`} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<WalletBalance />
|
||||
<TxoList search={search} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import Page from 'component/page';
|
|||
|
||||
export default function Welcome() {
|
||||
return (
|
||||
<Page noHeader className="main--auth-page">
|
||||
<Page noHeader noSideNavigation className="main--auth-page">
|
||||
<PrivacyAgreement />
|
||||
</Page>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
// Inline Video Ads
|
||||
.ads__claim-item {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
background-color: var(--color-ads-background);
|
||||
display: flex;
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: var(--spacing-large);
|
||||
padding-left: var(--spacing-l);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding-left: 0;
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
.button--close {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: var(--spacing-miniscule);
|
||||
right: var(--spacing-miniscule);
|
||||
top: var(--spacing-xxs);
|
||||
right: var(--spacing-xxs);
|
||||
padding: 0.3rem;
|
||||
transition: all var(--transition-duration) var(--transition-style);
|
||||
border-radius: var(--card-radius);
|
||||
|
|
@ -56,13 +56,13 @@
|
|||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-medium) var(--spacing-small);
|
||||
padding: var(--spacing-m) var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.button--header-close {
|
||||
background-color: var(--color-primary-alt);
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
|
||||
.button--download-link {
|
||||
|
|
@ -88,11 +88,11 @@
|
|||
// Handle icons on the left or right side of the button label
|
||||
svg + .button__label,
|
||||
.button__label + svg {
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.button-toggle {
|
||||
padding: 0 var(--spacing-medium);
|
||||
padding: 0 var(--spacing-m);
|
||||
height: var(--height-button);
|
||||
font-size: var(--font-base);
|
||||
border: 1px solid var(--color-border);
|
||||
|
|
@ -101,7 +101,7 @@ svg + .button__label,
|
|||
margin: 0;
|
||||
background-color: var(--color-card-background);
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-medium) var(--spacing-small);
|
||||
padding: var(--spacing-m) var(--spacing-s);
|
||||
}
|
||||
svg {
|
||||
opacity: 0.5;
|
||||
|
|
@ -116,7 +116,7 @@ svg + .button__label,
|
|||
&:last-of-type {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
border: 1px solid var(--color-border);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
.card--section {
|
||||
position: relative;
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
|
||||
.card--reward-total {
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.card--inline {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--card-radius);
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
.card--claim-preview-wrap {
|
||||
@extend .card;
|
||||
margin: var(--spacing-xlarge) 0;
|
||||
margin: var(--spacing-xl) 0;
|
||||
min-width: 35rem;
|
||||
}
|
||||
|
||||
|
|
@ -56,19 +56,19 @@
|
|||
.card__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
|
||||
&:only-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
> * {
|
||||
padding-bottom: var(--spacing-medium);
|
||||
padding-bottom: var(--spacing-m);
|
||||
}
|
||||
flex-flow: wrap;
|
||||
justify-content: space-between;
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
.card__title-section {
|
||||
@extend .section__flex;
|
||||
padding: var(--spacing-medium) var(--spacing-large);
|
||||
padding: var(--spacing-m) var(--spacing-l);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: 0;
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
}
|
||||
|
||||
.card__title-section--body-list {
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: 0;
|
||||
|
|
@ -117,18 +117,18 @@
|
|||
|
||||
.card-stack {
|
||||
.card:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.card__list {
|
||||
column-count: 2;
|
||||
column-gap: var(--spacing-large);
|
||||
column-gap: var(--spacing-l);
|
||||
display: block;
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
|
||||
.card__message {
|
||||
border-left: 0.5rem solid;
|
||||
padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
|
||||
padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-l);
|
||||
background-color: var(--color-primary-alt);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
|
@ -162,19 +162,19 @@
|
|||
font-size: var(--font-title);
|
||||
font-weight: var(--font-weight-light);
|
||||
& > *:not(:last-child) {
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
/* .badge rule inherited from file page prices, should be refactored */
|
||||
.badge {
|
||||
float: right;
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
|
||||
}
|
||||
}
|
||||
|
||||
.card__title-actions {
|
||||
align-self: flex-start;
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: 0;
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
}
|
||||
|
||||
.card__title.card__title--deprecated {
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.card__title--between {
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
align-items: flex-start;
|
||||
|
||||
.icon__wrapper {
|
||||
margin-right: var(--spacing-large);
|
||||
margin-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -221,12 +221,12 @@
|
|||
|
||||
.card__subtitle {
|
||||
color: var(--color-text-subtitle);
|
||||
margin: var(--spacing-small) 0;
|
||||
margin: var(--spacing-s) 0;
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
|
||||
.card__body {
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
|
||||
&:not(.card__body--no-title) {
|
||||
padding-top: 0;
|
||||
|
|
@ -238,14 +238,14 @@
|
|||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.card__main-actions {
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
padding-bottom: 0;
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
border-top: 1px solid var(--color-border);
|
||||
|
||||
&:only-child {
|
||||
|
|
@ -254,15 +254,15 @@
|
|||
}
|
||||
|
||||
.card__body-actions {
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.card__header-actions {
|
||||
border-top: 1px solid var(--color-border);
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -276,12 +276,12 @@
|
|||
align-items: center;
|
||||
|
||||
:not(:first-child) {
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.card__expand-btn {
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: 0;
|
||||
|
|
@ -292,10 +292,10 @@
|
|||
.card__body,
|
||||
.card__main-actions {
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -303,7 +303,7 @@
|
|||
@extend .help;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
|
||||
&:only-child,
|
||||
&:first-child {
|
||||
|
|
@ -311,6 +311,6 @@
|
|||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $metadata-z-index: 1;
|
|||
@media (max-width: $breakpoint-small) {
|
||||
// Yikes
|
||||
// I, Sean Yesmunt, take full responsibility for this monster
|
||||
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xlarge) + var(--spacing-medium));
|
||||
min-height: calc(var(--cover-photo-height) + 2 * var(--spacing-xl) + var(--spacing-m));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ $metadata-z-index: 1;
|
|||
height: 5rem;
|
||||
width: 5rem;
|
||||
background-size: cover;
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
.channel-thumbnail--small {
|
||||
|
|
@ -49,9 +49,9 @@ $metadata-z-index: 1;
|
|||
position: absolute;
|
||||
height: var(--channel-thumbnail-width);
|
||||
width: var(--channel-thumbnail-width);
|
||||
left: var(--spacing-medium);
|
||||
left: var(--spacing-m);
|
||||
top: 4rem;
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
|
|
@ -102,22 +102,22 @@ $metadata-z-index: 1;
|
|||
z-index: $metadata-z-index;
|
||||
// Jump over the thumbnail photo because it is absolutely positioned
|
||||
// Then add normal page spacing, _then_ add the actual padding
|
||||
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
|
||||
padding-right: var(--spacing-medium);
|
||||
padding-bottom: var(--spacing-medium);
|
||||
margin-top: var(--spacing-xlarge);
|
||||
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
|
||||
padding-right: var(--spacing-m);
|
||||
padding-bottom: var(--spacing-m);
|
||||
margin-top: var(--spacing-xl);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding-left: var(--spacing-medium);
|
||||
padding-left: var(--spacing-m);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.channel__title {
|
||||
display: inline;
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: xx-large;
|
||||
|
|
@ -126,11 +126,11 @@ $metadata-z-index: 1;
|
|||
// Quick hack to get this to work
|
||||
// We should have a generic style for "header with button next to it"
|
||||
.button {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding-top: var(--spacing-xlarge);
|
||||
padding-top: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -151,37 +151,37 @@ $metadata-z-index: 1;
|
|||
.channel__quick-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: var(--spacing-small);
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-top: var(--spacing-s);
|
||||
margin-left: var(--spacing-m);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: var(--spacing-medium);
|
||||
margin-top: var(--spacing-medium);
|
||||
right: var(--spacing-m);
|
||||
margin-top: var(--spacing-m);
|
||||
z-index: $metadata-z-index;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--font-base);
|
||||
|
||||
> * {
|
||||
padding: 0 var(--spacing-xsmall);
|
||||
padding: 0 var(--spacing-xs);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
> * {
|
||||
margin-bottom: var(--spacing-xsmall);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-name--inline {
|
||||
margin-left: var(--spacing-xsmall);
|
||||
margin-left: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.menu__list.channel__list {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
margin-left: 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: transparent;
|
||||
|
|
@ -210,7 +210,7 @@ $metadata-z-index: 1;
|
|||
}
|
||||
|
||||
.channel__list-item {
|
||||
padding-right: calc(var(--spacing-xlarge) + var(--spacing-small) * 2);
|
||||
padding-right: calc(var(--spacing-xl) + var(--spacing-s) * 2);
|
||||
border-left: 1px solid var(--color-border);
|
||||
border-right: 1px solid var(--color-border);
|
||||
}
|
||||
|
|
@ -221,7 +221,7 @@ $metadata-z-index: 1;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-card-background);
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
.channel-thumbnail {
|
||||
|
|
@ -231,8 +231,8 @@ $metadata-z-index: 1;
|
|||
|
||||
.icon {
|
||||
color: var(--color-menu-icon);
|
||||
margin-left: var(--spacing-large);
|
||||
margin-right: var(--spacing-small);
|
||||
margin-left: var(--spacing-l);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -4,21 +4,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
.claim-list--card-body {
|
||||
.claim-preview {
|
||||
padding: 0 var(--spacing-m);
|
||||
padding-right: 0;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claim-list__header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: var(--spacing-medium) 0;
|
||||
margin: var(--spacing-m) 0;
|
||||
margin-top: 0;
|
||||
font-size: var(--font-body);
|
||||
|
||||
.spinner {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
.claim-list__dropdown {
|
||||
padding: 0 var(--spacing-medium);
|
||||
padding: 0 var(--spacing-m);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-left: 0;
|
||||
|
|
@ -32,7 +43,7 @@
|
|||
color: var(--color-text-subtitle);
|
||||
|
||||
.icon {
|
||||
margin-right: var(--spacing-xsmall);
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
|
|
@ -51,10 +62,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
padding-top: var(--spacing-medium);
|
||||
padding-top: var(--spacing-m);
|
||||
|
||||
& > * {
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
|
|
@ -63,7 +74,7 @@
|
|||
}
|
||||
|
||||
.claim-preview__wrapper {
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +87,7 @@
|
|||
}
|
||||
|
||||
.claim-preview__wrapper--small {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
|
||||
.claim-preview {
|
||||
|
|
@ -95,7 +106,7 @@
|
|||
@include handleClaimListGifThumbnail($width);
|
||||
|
||||
flex-shrink: 0;
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
.channel-thumbnail {
|
||||
|
|
@ -149,7 +160,7 @@
|
|||
}
|
||||
|
||||
.claim-preview--padded {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
|
||||
.claim-preview--inline {
|
||||
|
|
@ -205,7 +216,7 @@
|
|||
flex: 1;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -248,12 +259,12 @@
|
|||
display: flex;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
|
||||
.media__thumb {
|
||||
width: var(--file-list-thumbnail-width);
|
||||
flex-shrink: 0;
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +274,7 @@
|
|||
|
||||
.claim-upload__progress--inner {
|
||||
background: var(--color-primary-alt);
|
||||
padding: var(--spacing-miniscule);
|
||||
padding: var(--spacing-xxs);
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -280,21 +291,21 @@
|
|||
|
||||
.claim-grid__wrapper {
|
||||
&:not(:first-of-type) {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
&:not(:first-of-type) {
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claim-grid__title {
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-top: var(--spacing-xlarge);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -307,14 +318,14 @@
|
|||
}
|
||||
|
||||
.claim-preview--tile {
|
||||
$width: calc((100% - var(--spacing-medium) * 3) / 4);
|
||||
$width: calc((100% - var(--spacing-m) * 3) / 4);
|
||||
width: $width;
|
||||
@include handleClaimTileGifThumbnail($width);
|
||||
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
justify-content: flex-start;
|
||||
|
||||
@media (min-width: $breakpoint-medium) {
|
||||
|
|
@ -334,7 +345,7 @@
|
|||
}
|
||||
|
||||
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
|
||||
$width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 2) / 3);
|
||||
$width: calc((100vw - var(--side-nav-width) - (var(--spacing-l) * 4) - var(--spacing-m) * 2) / 3);
|
||||
width: $width;
|
||||
@include handleClaimTileGifThumbnail($width);
|
||||
|
||||
|
|
@ -349,7 +360,7 @@
|
|||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
$width: calc((100vw / 2) - var(--spacing-small) * 2);
|
||||
$width: calc((100vw / 2) - var(--spacing-s) * 2);
|
||||
width: $width;
|
||||
@include handleClaimTileGifThumbnail($width);
|
||||
margin-bottom: var(--spacing-large);
|
||||
|
|
@ -367,7 +378,7 @@
|
|||
|
||||
.claim-tile__title {
|
||||
margin-bottom: 0;
|
||||
margin: var(--spacing-small);
|
||||
margin: var(--spacing-s);
|
||||
font-weight: 600;
|
||||
font-size: var(--font-small);
|
||||
color: var(--color-text);
|
||||
|
|
@ -380,14 +391,14 @@
|
|||
|
||||
.claim-tile__info {
|
||||
display: flex;
|
||||
margin-top: var(--spacing-small);
|
||||
padding: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
padding: var(--spacing-s);
|
||||
border-top: 1px solid var(--color-border);
|
||||
color: var(--color-subtitle);
|
||||
|
||||
.channel-thumbnail {
|
||||
@include handleChannelGif(2.1rem);
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -414,8 +425,8 @@
|
|||
|
||||
.claim-tile__file-properties {
|
||||
position: absolute;
|
||||
bottom: var(--spacing-miniscule);
|
||||
right: var(--spacing-miniscule);
|
||||
bottom: var(--spacing-xxs);
|
||||
right: var(--spacing-xxs);
|
||||
background-color: var(--color-black);
|
||||
padding: 0.3rem;
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -442,31 +453,31 @@
|
|||
}
|
||||
|
||||
.claim-preview__repost-author {
|
||||
transform: translateY(calc(var(--spacing-xsmall) * -1));
|
||||
transform: translateY(calc(var(--spacing-xs) * -1));
|
||||
font-size: var(--font-xsmall);
|
||||
color: var(--color-text-subtitle);
|
||||
|
||||
.icon {
|
||||
margin-right: var(--spacing-miniscule);
|
||||
margin-right: var(--spacing-xxs);
|
||||
margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
|
||||
}
|
||||
}
|
||||
|
||||
.claim-tile__repost-author {
|
||||
margin: var(--spacing-small);
|
||||
margin: var(--spacing-s);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.claim-preview__hover-actions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: var(--spacing-miniscule);
|
||||
right: var(--spacing-miniscule);
|
||||
top: var(--spacing-xxs);
|
||||
right: var(--spacing-xxs);
|
||||
|
||||
& > * {
|
||||
color: var(--color-black);
|
||||
background-color: var(--color-white);
|
||||
padding: var(--spacing-xsmall);
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: var(--spacing-medium);
|
||||
padding-bottom: var(--spacing-small);
|
||||
margin-top: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
padding-bottom: var(--spacing-s);
|
||||
margin-top: var(--spacing-m);
|
||||
color: var(--color-text-subtitle);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.claim-search__dropdown {
|
||||
padding: 0 var(--spacing-medium);
|
||||
padding: 0 var(--spacing-m);
|
||||
max-width: 400px;
|
||||
font-size: var(--font-body);
|
||||
background-color: var(--color-card-background);
|
||||
|
|
@ -45,14 +45,14 @@
|
|||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
padding-left: var(--spacing-medium);
|
||||
padding-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding-left: 0px;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
|
|
@ -80,6 +80,6 @@
|
|||
flex-wrap: nowrap;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.comments {
|
||||
padding-top: var(--spacing-large);
|
||||
padding-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.comment {
|
||||
|
|
@ -10,10 +10,10 @@
|
|||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: var(--spacing-medium) 0;
|
||||
padding: var(--spacing-m) 0;
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-top: var(--spacing-medium);
|
||||
padding-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
.channel-thumbnail {
|
||||
|
|
@ -22,24 +22,24 @@
|
|||
}
|
||||
|
||||
.comment__create--reply {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.comment__reply {
|
||||
border-left: 5px solid var(--color-primary-alt);
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
|
||||
.comment__author-thumbnail {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
.comment__reply-button {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.comment__body_container {
|
||||
padding-right: var(--spacing-small);
|
||||
padding-right: var(--spacing-s);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.comment__meta-information {
|
||||
|
|
@ -57,12 +57,12 @@
|
|||
|
||||
.comment__message {
|
||||
white-space: pre-line;
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.comment__author {
|
||||
text-overflow: ellipsis;
|
||||
padding-right: var(--spacing-xsmall);
|
||||
padding-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.comment__time {
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
.comment__menu-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
font-size: var(--font-small);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
.content__viewer {
|
||||
@extend .card;
|
||||
position: absolute;
|
||||
top: var(--spacing-large);
|
||||
top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.content__viewer--inline {
|
||||
max-height: var(--inline-player-max-height);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-top: var(--spacing-xsmall);
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
margin-bottom: 0;
|
||||
height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
|
||||
overflow: hidden;
|
||||
left: calc(var(--spacing-large) + var(--spacing-small));
|
||||
left: calc(var(--spacing-l) + var(--spacing-s));
|
||||
z-index: 9999;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
height: 1.5rem;
|
||||
top: 0;
|
||||
position: relative;
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
|
||||
svg {
|
||||
color: var(--color-white);
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
.content__info {
|
||||
cursor: grab;
|
||||
height: var(--floating-viewer-info-height);
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
|
@ -154,12 +154,12 @@
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 var(--spacing-large);
|
||||
padding: 0 var(--spacing-l);
|
||||
background-color: #000;
|
||||
|
||||
&.content__loading--document {
|
||||
background-color: var(--color-card-background);
|
||||
padding: calc(var(--spacing-xlarge) * 3) 0;
|
||||
padding: calc(var(--spacing-xl) * 3) 0;
|
||||
|
||||
.content__loading-text {
|
||||
color: var(--color-text);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.expandable--closed,
|
||||
.expandable--open {
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.expandable--closed {
|
||||
|
|
|
|||
|
|
@ -26,14 +26,14 @@
|
|||
min-width: 400px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
|
||||
.main-icon {
|
||||
margin: var(--spacing-small);
|
||||
margin: var(--spacing-s);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
width: 100%;
|
||||
overflow: auto;
|
||||
max-height: 220px;
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
align-items: center;
|
||||
font-size: var(--font-small);
|
||||
color: var(--color-text-help);
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
white-space: nowrap;
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xsmall) {
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
|
||||
.file-properties--large {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
margin-left: 0;
|
||||
|
||||
& > * {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: var(--spacing-miniscule);
|
||||
margin-right: var(--spacing-xxs);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xsmall) {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
.card + .file-render,
|
||||
.card + .file-page__video-container,
|
||||
.card + .content__cover {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.card + .file-render {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.file-page__md {
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
width: 100%;
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
overflow: hidden;
|
||||
.comic-viewer {
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
|
||||
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
|
||||
max-height: var(--inline-player-max-height);
|
||||
}
|
||||
}
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
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-medium) * 2);
|
||||
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
overflow: hidden;
|
||||
|
||||
.three-viewer {
|
||||
height: calc(100vh - var(--header-height) - var(--spacing-medium) * 2);
|
||||
height: calc(100vh - var(--header-height) - var(--spacing-m) * 2);
|
||||
max-height: var(--inline-player-max-height);
|
||||
}
|
||||
}
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
font-size: var(--font-small);
|
||||
|
|
@ -175,15 +175,15 @@
|
|||
.file-viewer__overlay-title {
|
||||
text-align: center;
|
||||
font-size: var(--font-large);
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
.file-viewer__overlay-secondary {
|
||||
color: var(--color-text-subtitle);
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
.file-viewer__overlay-actions {
|
||||
.button + .button {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
|
||||
|
||||
.button {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
color: var(--color-white);
|
||||
|
||||
.button__label {
|
||||
|
|
@ -230,7 +230,7 @@
|
|||
|
||||
.credit-amount,
|
||||
.icon--Key {
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -246,11 +246,11 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--font-small);
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
white-space: nowrap;
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
|
||||
.CodeMirror .CodeMirror-lines {
|
||||
// is there really a .CodeMirror inside a .CodeMirror?
|
||||
padding: var(--spacing-small) 0;
|
||||
padding: var(--spacing-s) 0;
|
||||
}
|
||||
|
||||
.CodeMirror-code {
|
||||
|
|
@ -287,11 +287,11 @@
|
|||
.CodeMirror-gutters {
|
||||
background-color: var(--color-gray-1);
|
||||
border-right: 1px solid var(--color-gray-4);
|
||||
padding-right: var(--spacing-medium);
|
||||
padding-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
padding-left: var(--spacing-medium);
|
||||
padding-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
|
|
@ -405,7 +405,7 @@
|
|||
font-size: var(--font-small);
|
||||
}
|
||||
.autoplay-countdown__counter {
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
.autoplay-countdown__button {
|
||||
|
|
|
|||
|
|
@ -3,28 +3,28 @@
|
|||
justify-content: center;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
padding: var(--spacing-xlarge);
|
||||
padding: var(--spacing-xl);
|
||||
font-size: var(--font-small);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
max-width: 100%;
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__section {
|
||||
margin-left: var(--spacing-xlarge);
|
||||
margin-left: var(--spacing-xl);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-left: var(--spacing-large);
|
||||
margin-left: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.footer__section-title {
|
||||
@extend .help;
|
||||
font-weight: 300;
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
.footer__link {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ input[type='number'] {
|
|||
|
||||
fieldset-group {
|
||||
+ fieldset-group {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
&.fieldset-group--smushed {
|
||||
|
|
@ -46,8 +46,8 @@ fieldset-group {
|
|||
}
|
||||
|
||||
&.fieldgroup--paginate {
|
||||
padding-bottom: var(--spacing-large);
|
||||
margin-top: var(--spacing-large);
|
||||
padding-bottom: var(--spacing-l);
|
||||
margin-top: var(--spacing-l);
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@ fieldset-group {
|
|||
.form-field__prefix {
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem;
|
||||
padding-right: var(--spacing-small);
|
||||
padding-right: var(--spacing-s);
|
||||
height: var(--height-input);
|
||||
border: 1px solid;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
|
|
@ -95,7 +95,7 @@ fieldset-group {
|
|||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-color: var(--color-input-border);
|
||||
padding-left: var(--spacing-xsmall);
|
||||
padding-left: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -122,13 +122,13 @@ fieldset-group {
|
|||
|
||||
.form-field__help {
|
||||
@extend .help;
|
||||
margin-top: var(--spacing-miniscule);
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-top: var(--spacing-xxs);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.form-field__help + .checkbox,
|
||||
.form-field__help + .radio {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.form-field__conjuction {
|
||||
|
|
@ -147,11 +147,11 @@ fieldset-group {
|
|||
|
||||
fieldset-section {
|
||||
.form-field__internal-option {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
margin-left: 2.2rem;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: var(--spacing-small); // Extra specificity needed here since _section.scss is applied after this file
|
||||
margin-top: var(--spacing-s); // Extra specificity needed here since _section.scss is applied after this file
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
align-items: flex-end;
|
||||
|
||||
&:not(.form-row--padded):not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
&:not(:first-of-type) {
|
||||
padding-left: var(--spacing-medium);
|
||||
padding-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
&.form-field--stretch {
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
button + input,
|
||||
input + button {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
|
||||
.form-row--padded {
|
||||
// Ignore the class name, margin allows these to collapse with other items
|
||||
margin-top: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
|
||||
.form-row--right {
|
||||
|
|
|
|||
|
|
@ -36,10 +36,10 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
padding: 0 var(--spacing-large);
|
||||
padding: 0 var(--spacing-l);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
display: block;
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
|
||||
svg {
|
||||
stroke: var(--color-text);
|
||||
|
|
@ -80,14 +80,14 @@
|
|||
|
||||
.header__menu--with-balance {
|
||||
button:first-child {
|
||||
margin-left: var(--spacing-large);
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-left: var(--spacing-l);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation-arrows {
|
||||
display: flex;
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
|
||||
.header__navigation-item {
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
width: var(--height-button);
|
||||
background-color: var(--color-header-button);
|
||||
border-radius: 1.5rem;
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary-alt);
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
|
||||
.header__navigation-item--lbry {
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
|
||||
.lbry-icon {
|
||||
height: 2rem;
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
}
|
||||
|
||||
.header__navigation-item--balance {
|
||||
margin: 0 var(--spacing-medium);
|
||||
margin: 0 var(--spacing-m);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
|
||||
.header__navigation-button {
|
||||
margin: 0;
|
||||
padding: var(--spacing-miniscule) var(--spacing-medium);
|
||||
padding: var(--spacing-xxs) var(--spacing-m);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
.header__navigation-button-help {
|
||||
@extend .help;
|
||||
margin-top: 0;
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.header__auth-buttons {
|
||||
|
|
@ -191,6 +191,6 @@
|
|||
font-weight: var(--font-weight-bold);
|
||||
|
||||
& > *:not(:last-child) {
|
||||
margin: 0 var(--spacing-medium);
|
||||
margin: 0 var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@
|
|||
|
||||
.icon--help {
|
||||
color: var(--color-subtitle);
|
||||
margin-left: var(--spacing-xsmall);
|
||||
margin-left: var(--spacing-xs);
|
||||
opacity: 0.7;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.icon--hidden {
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
.item-list {
|
||||
background-color: black; //white;
|
||||
margin-bottom: var(--spacing-large);
|
||||
padding: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
padding: var(--spacing-l);
|
||||
|
||||
.card__actions {
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-left: var(--spacing-small);
|
||||
margin-top: var(--spacing-m);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.item-list__row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
|
||||
fieldset-section {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
white-space: nowrap;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
padding-left: var(--spacing-small);
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,16 +15,16 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: var(--header-height);
|
||||
padding: var(--spacing-large); // Unfortunately this is coupled with .claim-preview--tile width calculation
|
||||
padding: var(--spacing-l); // Unfortunately this is coupled with .claim-preview--tile width calculation
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
width: calc(100% - var(--side-nav-width) - var(--spacing-large));
|
||||
width: calc(100% - var(--side-nav-width) - var(--spacing-l));
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
width: 100%;
|
||||
|
|
@ -40,6 +40,29 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.main--buy {
|
||||
@extend .main--auth-page;
|
||||
max-width: 30rem;
|
||||
min-height: 400px;
|
||||
|
||||
.card {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
min-height: 420px;
|
||||
background-color: var(--color-card-background);
|
||||
margin: -0.8rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.sm:bg-grey-lighter {
|
||||
background-color: var(--color-card-background);
|
||||
}
|
||||
}
|
||||
|
||||
.main--empty {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
|
|
@ -53,7 +76,7 @@
|
|||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: 0 var(--spacing-medium);
|
||||
padding: 0 var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
|
||||
.form-field--SimpleMDE {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
|
||||
// Override hyperlink styles
|
||||
.cm-s-easymde .cm-link {
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,12 +53,12 @@
|
|||
ol,
|
||||
pre,
|
||||
table {
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
white-space: normal;
|
||||
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
// Tables
|
||||
table {
|
||||
margin-bottom: 1.2rem;
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
word-break: normal;
|
||||
|
||||
tr {
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
th:first-of-type,
|
||||
td:last-of-type,
|
||||
th:last-of-type {
|
||||
padding: var(--spacing-small) var(--spacing-medium);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,8 +99,8 @@
|
|||
|
||||
// Image
|
||||
img {
|
||||
margin-bottom: var(--spacing-medium);
|
||||
padding-top: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
padding-top: var(--spacing-m);
|
||||
max-height: var(--inline-player-max-height);
|
||||
object-position: left;
|
||||
|
||||
|
|
@ -123,8 +123,8 @@
|
|||
word-break: break-all;
|
||||
|
||||
code {
|
||||
margin-bottom: var(--spacing-medium);
|
||||
padding: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
padding: var(--spacing-m);
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
@ -134,10 +134,10 @@
|
|||
code {
|
||||
background-color: var(--color-blockquote);
|
||||
display: inline-block;
|
||||
margin: var(--spacing-miniscule);
|
||||
margin: var(--spacing-xxs);
|
||||
border-radius: 0.2rem;
|
||||
font-size: var(--font-small);
|
||||
padding: calc(var(--spacing-miniscule) - 4px) var(--spacing-miniscule);
|
||||
padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs);
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
}
|
||||
|
||||
.preview-link__description {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@
|
|||
@media (max-width: $breakpoint-small) {
|
||||
position: static;
|
||||
transform: none;
|
||||
margin-bottom: var(--spacing-xsmall);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// This is terrible and should not be removed
|
||||
.icon {
|
||||
margin-right: var(--spacing-xsmall) / 2;
|
||||
margin-right: var(--spacing-xs) / 2;
|
||||
margin-bottom: -0.08rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -67,13 +67,14 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.media__info-text {
|
||||
word-break: break-word;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
|
||||
&.media__info-text--constrained {
|
||||
|
|
@ -89,11 +90,11 @@
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
justify-content: flex-start;
|
||||
padding-top: var(--spacing-small);
|
||||
padding-top: var(--spacing-s);
|
||||
|
||||
> * {
|
||||
margin-right: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
min-width: 500px;
|
||||
max-width: var(--modal-width);
|
||||
overflow: auto;
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
word-break: break-word;
|
||||
|
||||
&:focus {
|
||||
|
|
@ -50,13 +50,13 @@
|
|||
.navigation {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
|
||||
.navigation-links:not(.navigation-links--small) {
|
||||
.navigation-link {
|
||||
font-size: var(--font-large);
|
||||
border-bottom: 1px solid var(--color-gray-3);
|
||||
padding: var(--spacing-medium) 0;
|
||||
padding: var(--spacing-m) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
.error-modal__content {
|
||||
display: flex;
|
||||
padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
|
||||
padding: 0 var(--spacing-m) var(--spacing-m) var(--spacing-m);
|
||||
}
|
||||
|
||||
.error-modal {
|
||||
|
|
@ -87,8 +87,8 @@
|
|||
.error-modal__error-list {
|
||||
max-width: var(--modal-width);
|
||||
max-height: 400px;
|
||||
margin-top: var(--spacing-small);
|
||||
padding: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
padding: var(--spacing-s);
|
||||
|
||||
background-color: var(--color-error);
|
||||
border-left: 2px solid var(--color-text-error);
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
}
|
||||
|
||||
.navigation + .ads-wrapper {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.navigation__secondary {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.navigation-links {
|
||||
|
|
@ -30,11 +30,11 @@
|
|||
}
|
||||
|
||||
.navigation-links__inline {
|
||||
margin-left: calc(var(--spacing-medium) + var(--spacing-small));
|
||||
margin-left: calc(var(--spacing-m) + var(--spacing-s));
|
||||
}
|
||||
|
||||
.navigation-link__wrapper {
|
||||
margin: var(--spacing-miniscule) 0;
|
||||
margin: var(--spacing-xxs) 0;
|
||||
}
|
||||
|
||||
.navigation-link {
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--color-navigation-link);
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
|
||||
.icon {
|
||||
stroke: var(--color-link-icon);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
align-items: center;
|
||||
|
||||
+ .form-field {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
.pagination__item--next {
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
padding-top: var(--spacing-small);
|
||||
padding-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.pagination__item--selected {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
&.media__subtitle {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
|
||||
width: 30%;
|
||||
height: 1.5em;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.credit-amount,
|
||||
.icon--Key {
|
||||
position: relative;
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -40,16 +40,16 @@
|
|||
|
||||
.file-price--filepage {
|
||||
font-size: var(--font-body);
|
||||
top: calc(var(--spacing-miniscule) * -1);
|
||||
margin-left: var(--spacing-medium);
|
||||
top: calc(var(--spacing-xxs) * -1);
|
||||
margin-left: var(--spacing-m);
|
||||
|
||||
.credit-amount {
|
||||
margin: 0 var(--spacing-medium);
|
||||
margin: 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 250%;
|
||||
left: calc(var(--spacing-medium) * -1);
|
||||
left: calc(var(--spacing-m) * -1);
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-width: 5px;
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
|
||||
&::before {
|
||||
height: 140%;
|
||||
|
|
@ -74,18 +74,18 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
margin: 0 var(--spacing-medium);
|
||||
margin: 0 var(--spacing-m);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
&::before {
|
||||
top: calc(-1 * var(--spacing-small));
|
||||
top: calc(-1 * var(--spacing-s));
|
||||
height: 110%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
top: calc(-1 * var(--spacing-small));
|
||||
margin: 0 var(--spacing-xsmall);
|
||||
top: calc(-1 * var(--spacing-s));
|
||||
margin: 0 var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,8 +94,8 @@
|
|||
border: 5px solid var(--color-purchased);
|
||||
|
||||
.credit-amount {
|
||||
margin: 0 var(--spacing-medium);
|
||||
margin-left: var(--spacing-large);
|
||||
margin: 0 var(--spacing-m);
|
||||
margin-left: var(--spacing-l);
|
||||
font-weight: var(--font-bold);
|
||||
}
|
||||
}
|
||||
|
|
@ -123,12 +123,12 @@
|
|||
|
||||
.file-price__key--modal {
|
||||
@extend .file-price--modal;
|
||||
top: var(--spacing-medium);
|
||||
top: var(--spacing-m);
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
left: calc(var(--spacing-xlarge) * 1.5);
|
||||
left: calc(var(--spacing-xl) * 1.5);
|
||||
animation: moveKey 2.5s 1 ease-out;
|
||||
overflow: visible;
|
||||
stroke: var(--color-black);
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
|
||||
> *:first-child {
|
||||
width: 60%;
|
||||
padding-right: var(--spacing-small);
|
||||
padding-right: var(--spacing-s);
|
||||
}
|
||||
|
||||
.file-price,
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
border-width: 0;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-top: calc(var(--spacing-xlarge) * 2);
|
||||
margin-top: calc(var(--spacing-xl) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -174,8 +174,8 @@
|
|||
font-size: var(--font-title);
|
||||
color: var(--color-black);
|
||||
position: absolute;
|
||||
top: calc(var(--spacing-xlarge) * 1.6);
|
||||
left: var(--spacing-large);
|
||||
top: calc(var(--spacing-xl) * 1.6);
|
||||
left: var(--spacing-l);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 9999999999;
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
.purchase_stuff__subtext--purchased {
|
||||
color: var(--color-black);
|
||||
font-size: var(--font-body);
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
@keyframes display {
|
||||
|
|
@ -225,15 +225,15 @@
|
|||
}
|
||||
|
||||
20% {
|
||||
left: calc(var(--spacing-xlarge) * 1.5);
|
||||
left: calc(var(--spacing-xl) * 1.5);
|
||||
}
|
||||
|
||||
50% {
|
||||
left: calc(var(--spacing-xlarge) * 1.5);
|
||||
left: calc(var(--spacing-xl) * 1.5);
|
||||
}
|
||||
|
||||
70% {
|
||||
left: calc(var(--spacing-xlarge) * 1.5);
|
||||
left: calc(var(--spacing-xl) * 1.5);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.search__header {
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
|
||||
.placeholder {
|
||||
background-color: var(--color-placeholder-background);
|
||||
|
|
@ -7,17 +7,17 @@
|
|||
}
|
||||
|
||||
.search__options {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
|
||||
.search__legend {
|
||||
background-color: var(--color-secondary-alt);
|
||||
color: var(--color-secondary);
|
||||
margin-bottom: var(--spacing-small);
|
||||
padding: var(--spacing-miniscule);
|
||||
margin-bottom: var(--spacing-s);
|
||||
padding: var(--spacing-xxs);
|
||||
}
|
||||
|
||||
fieldset:not(:first-child) {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
.radio,
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
display: inline-block;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
background-color: var(--color-snack-bg);
|
||||
color: var(--color-snack);
|
||||
border-radius: 0.5rem;
|
||||
padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);
|
||||
padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing-m);
|
||||
position: fixed;
|
||||
transition: all var(--transition-duration) var(--transition-type);
|
||||
z-index: 10000; // hack to get it over react modal
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
|
||||
.snack-bar__action {
|
||||
display: inline-block;
|
||||
margin: var(--spacing-small) 0;
|
||||
margin: var(--spacing-s) 0;
|
||||
min-width: min-content;
|
||||
color: var(--color-white);
|
||||
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
div {
|
||||
&:nth-of-type(1) {
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
height: 40px;
|
||||
|
||||
font-size: 10px;
|
||||
margin: var(--spacing-small);
|
||||
margin: var(--spacing-s);
|
||||
text-align: center;
|
||||
|
||||
.rect {
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@
|
|||
|
||||
.splash__animation-toggle {
|
||||
position: fixed;
|
||||
top: var(--spacing-large);
|
||||
right: var(--spacing-large);
|
||||
padding: var(--spacing-medium);
|
||||
top: var(--spacing-l);
|
||||
right: var(--spacing-l);
|
||||
padding: var(--spacing-m);
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, 0.205);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.table__header-text {
|
||||
width: 100%;
|
||||
margin: var(--spacing-medium) var(--spacing-large);
|
||||
margin: var(--spacing-m) var(--spacing-l);
|
||||
}
|
||||
|
||||
.table__header-text--between {
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
.table--invites {
|
||||
svg {
|
||||
margin-bottom: -2px;
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@
|
|||
|
||||
.tag {
|
||||
margin-left: 0;
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-right: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
.tags--remove {
|
||||
@extend .tags;
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
|
||||
.tag {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
.tags--selected {
|
||||
@extend .tags;
|
||||
margin: var(--spacing-large) 0;
|
||||
margin: var(--spacing-l) 0;
|
||||
}
|
||||
|
||||
.tags__input-wrapper {
|
||||
|
|
@ -41,9 +41,9 @@
|
|||
.tag__input {
|
||||
@extend .tag--remove;
|
||||
height: var(--tag-height);
|
||||
padding: calc(var(--spacing-miniscule) + 1px) var(--spacing-small);
|
||||
padding: calc(var(--spacing-xxs) + 1px) var(--spacing-s);
|
||||
background-color: var(--color-input-bg);
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
> .icon {
|
||||
top: 0;
|
||||
left: var(--spacing-small);
|
||||
left: var(--spacing-s);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
background-color: var(--color-input-bg);
|
||||
color: var(--color-input);
|
||||
border: none;
|
||||
padding-right: var(--spacing-small);
|
||||
padding-right: var(--spacing-s);
|
||||
padding-left: 2.5rem;
|
||||
transition: all 0.2s;
|
||||
-webkit-app-region: no-drag;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-items: flex-start;
|
||||
padding: var(--spacing-small) var(--spacing-small);
|
||||
padding: var(--spacing-s) var(--spacing-s);
|
||||
|
||||
&:not(:first-of-type) {
|
||||
border-top: 1px solid transparent;
|
||||
|
|
@ -85,13 +85,13 @@
|
|||
|
||||
.wunderbar__suggestion-label {
|
||||
overflow: hidden;
|
||||
padding-left: var(--spacing-small);
|
||||
padding-left: var(--spacing-s);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.wunderbar__suggestion-label--action {
|
||||
margin-left: var(--spacing-medium);
|
||||
margin-left: var(--spacing-m);
|
||||
opacity: 0.6;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.yrbl {
|
||||
height: 20rem;
|
||||
margin-right: calc(var(--spacing-xlarge) * 2);
|
||||
margin-right: calc(var(--spacing-xl) * 2);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
display: none;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
align-self: center;
|
||||
height: 250px;
|
||||
width: auto;
|
||||
margin: 0 var(--spacing-large);
|
||||
margin: 0 var(--spacing-l);
|
||||
}
|
||||
|
||||
.yrbl--search {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
background-color: var(--color-card-background);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-left: var(--spacing-small);
|
||||
padding-left: var(--spacing-s);
|
||||
}
|
||||
|
||||
.expanding-details {
|
||||
|
|
@ -11,5 +11,5 @@
|
|||
|
||||
.expanding-details__body {
|
||||
border-radius: var(--card-radius);
|
||||
padding: 0 var(--spacing-small);
|
||||
padding: 0 var(--spacing-s);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
.menu__list {
|
||||
margin-left: calc(var(--spacing-medium) * -1);
|
||||
margin-left: calc(var(--spacing-m) * -1);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
animation: menu-animate-in var(--animation-duration) var(--animation-style);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
|
|
@ -66,16 +66,16 @@
|
|||
.menu__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-medium);
|
||||
padding-right: var(--spacing-large);
|
||||
padding: var(--spacing-m);
|
||||
padding-right: var(--spacing-l);
|
||||
|
||||
.icon {
|
||||
stroke: var(--color-menu-icon);
|
||||
margin-right: var(--spacing-small);
|
||||
margin-right: var(--spacing-s);
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-left: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $nag-error-z-index: 100001;
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
background-color: var(--color-nag);
|
||||
color: var(--color-white);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
|
@ -61,11 +61,11 @@ $nag-error-z-index: 100001;
|
|||
|
||||
.nag__button {
|
||||
line-height: 1;
|
||||
margin-left: var(--spacing-small);
|
||||
margin-right: var(--spacing-small);
|
||||
margin-left: var(--spacing-s);
|
||||
margin-right: var(--spacing-s);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--color-white);
|
||||
padding: var(--spacing-miniscule);
|
||||
padding: var(--spacing-xxs);
|
||||
color: var(--color-white);
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ $nag-error-z-index: 100001;
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-left: 0;
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +99,7 @@ $nag-error-z-index: 100001;
|
|||
|
||||
.nag__close {
|
||||
margin-left: auto;
|
||||
right: var(--spacing-medium);
|
||||
right: var(--spacing-m);
|
||||
position: absolute;
|
||||
border: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,16 +2,12 @@
|
|||
position: relative;
|
||||
|
||||
~ .section {
|
||||
margin-top: var(--spacing-large);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin-top: var(--spacing-medium);
|
||||
}
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
.section--padded {
|
||||
padding: var(--spacing-medium);
|
||||
padding: var(--spacing-m);
|
||||
}
|
||||
|
||||
.section--small {
|
||||
|
|
@ -19,14 +15,14 @@
|
|||
}
|
||||
|
||||
.section__header {
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
}
|
||||
|
||||
.section__flex {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
> .icon__wrapper:first-child {
|
||||
margin-right: var(--spacing-large);
|
||||
margin-right: var(--spacing-l);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -39,13 +35,13 @@
|
|||
.section__title--small {
|
||||
@extend .section__title;
|
||||
font-size: var(--font-body);
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
.section__title--large {
|
||||
@extend .section__title;
|
||||
margin-right: var(--spacing-medium);
|
||||
display: inline-block;
|
||||
margin-right: var(--spacing-m);
|
||||
font-weight: var(--font-weight-bold);
|
||||
font-size: var(--font-heading);
|
||||
|
||||
|
|
@ -56,13 +52,13 @@
|
|||
|
||||
.section__subtitle {
|
||||
color: var(--color-text-subtitle);
|
||||
margin: var(--spacing-small) 0;
|
||||
margin: var(--spacing-s) 0;
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
|
||||
.section__subtitle--status {
|
||||
@extend .section__subtitle;
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
background-color: var(--color-text-warning);
|
||||
}
|
||||
|
||||
|
|
@ -71,7 +67,7 @@
|
|||
flex-direction: column;
|
||||
|
||||
hr {
|
||||
margin: var(--spacing-large) 0;
|
||||
margin: var(--spacing-l) 0;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -81,23 +77,23 @@
|
|||
font-weight: var(--font-weight-base);
|
||||
background-color: var(--color-background);
|
||||
transform: translateY(-150%);
|
||||
padding: 0 var(--spacing-large);
|
||||
padding: 0 var(--spacing-l);
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.section__body {
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
.section__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
|
||||
~ .section {
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
||||
&:only-child,
|
||||
|
|
@ -106,14 +102,14 @@
|
|||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: var(--spacing-medium);
|
||||
margin-right: var(--spacing-m);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * {
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,8 +123,8 @@
|
|||
}
|
||||
|
||||
.button--primary ~ .button--link {
|
||||
margin-left: var(--spacing-small);
|
||||
padding: var(--spacing-xsmall);
|
||||
margin-left: var(--spacing-s);
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,7 +144,7 @@
|
|||
.section__start-at {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-large);
|
||||
margin-top: var(--spacing-l);
|
||||
fieldset-section {
|
||||
width: 6em;
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-tabs-background);
|
||||
padding: var(--spacing-medium) var(--spacing-main-padding);
|
||||
padding: var(--spacing-m) var(--spacing-main-padding);
|
||||
|
||||
& > *:not(.tab) {
|
||||
// If there is anything after the tabs, render it on the opposite side of the page
|
||||
|
|
@ -15,21 +15,21 @@
|
|||
}
|
||||
|
||||
.tabs__list--channel-page {
|
||||
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
|
||||
padding-right: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-large);
|
||||
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
|
||||
padding-right: var(--spacing-m);
|
||||
margin-bottom: var(--spacing-l);
|
||||
height: 4rem;
|
||||
border-bottom-left-radius: var(--card-radius);
|
||||
border-bottom-right-radius: var(--card-radius);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding-left: var(--spacing-medium);
|
||||
padding-left: var(--spacing-m);
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
@extend .button--link;
|
||||
margin-right: var(--spacing-large);
|
||||
margin-right: var(--spacing-l);
|
||||
padding: 5px 0;
|
||||
color: var(--color-tab-text);
|
||||
position: relative;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
.tab__divider {
|
||||
position: absolute;
|
||||
margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-large));
|
||||
margin-top: calc(var(--tab-indicator-size) * -1 - var(--spacing-l));
|
||||
}
|
||||
|
||||
.tab::after,
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ h6 {
|
|||
|
||||
p {
|
||||
& + p {
|
||||
margin-top: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ ul,
|
|||
ol {
|
||||
li {
|
||||
list-style-position: outside;
|
||||
margin: var(--spacing-xsmall) var(--spacing-medium);
|
||||
margin: var(--spacing-xs) var(--spacing-m);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -63,17 +63,17 @@ dl {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
overflow-x: visible;
|
||||
margin-top: var(--spacing-medium);
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
dt {
|
||||
flex-basis: 40%;
|
||||
flex-basis: 45%;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
flex-basis: 55%;
|
||||
flex-basis: 50%;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
|
|
@ -81,7 +81,7 @@ dd {
|
|||
|
||||
dt,
|
||||
dd {
|
||||
padding: var(--spacing-medium) var(--spacing-small);
|
||||
padding: var(--spacing-m) var(--spacing-s);
|
||||
|
||||
border-top: 1px solid var(--color-border);
|
||||
|
||||
|
|
@ -125,15 +125,15 @@ textarea {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
min-width: 15rem;
|
||||
margin-bottom: var(--spacing-large);
|
||||
margin-bottom: var(--spacing-l);
|
||||
|
||||
&:first-child {
|
||||
flex-basis: 1;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -143,7 +143,7 @@ textarea {
|
|||
|
||||
& > * {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing-medium);
|
||||
margin-bottom: var(--spacing-m);
|
||||
width: 100%;
|
||||
flex-basis: auto;
|
||||
|
||||
|
|
@ -202,8 +202,8 @@ textarea {
|
|||
display: block;
|
||||
font-size: var(--font-small);
|
||||
color: var(--color-text-help);
|
||||
margin-top: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-small);
|
||||
margin-top: var(--spacing-s);
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
|
||||
.help--warning {
|
||||
|
|
@ -224,7 +224,7 @@ textarea {
|
|||
|
||||
.empty--centered {
|
||||
text-align: center;
|
||||
padding: calc(var(--spacing-large) * 3) 0;
|
||||
padding: calc(var(--spacing-l) * 3) 0;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
|
|
@ -243,7 +243,7 @@ textarea {
|
|||
|
||||
.error__wrapper {
|
||||
background-color: var(--color-error);
|
||||
padding: var(--spacing-small);
|
||||
padding: var(--spacing-s);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
|
|
@ -281,7 +281,7 @@ textarea {
|
|||
|
||||
.notice-message {
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--spacing-large);
|
||||
padding: var(--spacing-l);
|
||||
background-color: var(--color-primary-alt);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,8 @@ $breakpoint-medium: 1150px;
|
|||
--mac-titlebar-height: 1.5rem;
|
||||
--mobile: 600px;
|
||||
--side-nav-width: 170px;
|
||||
--spacing-miniscule: calc(2rem / 5);
|
||||
--spacing-xsmall: calc(2rem / 4);
|
||||
--spacing-small: calc(2rem / 3);
|
||||
--spacing-medium: calc(2rem / 2);
|
||||
--spacing-large: 2rem;
|
||||
--spacing-xlarge: 3rem;
|
||||
--spacing-main-padding: var(--spacing-xlarge);
|
||||
|
||||
--spacing-main-padding: var(--spacing-xl);
|
||||
--floating-viewer-width: 32rem;
|
||||
--floating-viewer-height: 18rem; // 32 * 9/16
|
||||
--floating-viewer-info-height: 5rem;
|
||||
|
|
@ -36,7 +31,7 @@ $breakpoint-medium: 1150px;
|
|||
--header-height: 5rem;
|
||||
|
||||
// Inline Player
|
||||
--inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-large) * 2);
|
||||
--inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 2);
|
||||
|
||||
// Card
|
||||
--card-radius: var(--border-radius);
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@ export default function Footer() {
|
|||
<div key={name} className="footer__section">
|
||||
<div className="footer__section-title">{name}</div>
|
||||
<ul className="ul--no-style">
|
||||
{/* $FlowFixMe */}
|
||||
{links.map(({ label, link, navigate }) => {
|
||||
return (
|
||||
<li key={label}>
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ let baseConfig = {
|
|||
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
|
||||
'process.env.LBRY_API_URL': JSON.stringify(process.env.LBRY_API_URL),
|
||||
'process.env.SENTRY_AUTH_TOKEN': JSON.stringify(process.env.SENTRY_AUTH_TOKEN),
|
||||
'process.env.MOONPAY_SECRET_KEY': JSON.stringify(process.env.MOONPAY_SECRET_KEY),
|
||||
}),
|
||||
new Dotenv({
|
||||
allowEmptyValues: true, // allow empty variables (e.g. `FOO=`) (treat it as empty string, rather than missing)
|
||||
|
|
|
|||
|
|
@ -2953,6 +2953,11 @@ crypto-browserify@^3.11.0:
|
|||
randombytes "^2.0.0"
|
||||
randomfill "^1.0.3"
|
||||
|
||||
crypto-js@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc"
|
||||
integrity sha512-bzHZN8Pn+gS7DQA6n+iUmBfl0hO5DJq++QP3U6uTucDtk/0iGpXd/Gg7CGR0p8tJhofJyaKoWBuJI4eAO00BBg==
|
||||
|
||||
crypto-random-string@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
|
||||
|
|
|
|||
Loading…
Reference in a new issue