Styles cleanup, I guess
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
52b1fa884d
commit
0ab9118dc4
52 changed files with 205 additions and 926 deletions
|
|
@ -21,7 +21,7 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
|
|||
const onOpenMedia = (media: ImmutableList<Attachment>, index: number) => dispatch(openModal('MEDIA', { media, index }));
|
||||
|
||||
return (
|
||||
<div className='attachment-thumbs'>
|
||||
<div className='relative'>
|
||||
<Suspense fallback={fallback}>
|
||||
<MediaGallery
|
||||
media={media}
|
||||
|
|
@ -34,7 +34,7 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
|
|||
</Suspense>
|
||||
|
||||
{onClick && (
|
||||
<div className='attachment-thumbs__clickable-region' onClick={onClick} />
|
||||
<div className='absolute inset-0 h-full w-full cursor-pointer' onClick={onClick} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='autosuggest-emoji' data-testid='emoji'>
|
||||
<div className='flex flex-row items-center justify-start text-sm leading-[18px]' data-testid='emoji'>
|
||||
<img
|
||||
className='emojione'
|
||||
className='emojione mr-2 block h-4 w-4'
|
||||
src={url}
|
||||
alt={alt}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
|
|||
const handleClick = () => onClick(maxId);
|
||||
|
||||
return (
|
||||
<button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
|
||||
<Icon src={require('@tabler/icons/outline/dots.svg')} />
|
||||
<button className='m-0 box-border block w-full border-0 bg-transparent p-4 text-gray-900' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
|
||||
<Icon className='mx-auto' src={require('@tabler/icons/outline/dots.svg')} />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import PlaceholderStatus from 'soapbox/features/placeholder/components/placehold
|
|||
import PendingStatus from 'soapbox/features/ui/components/pending-status';
|
||||
import { useSoapboxConfig } from 'soapbox/hooks';
|
||||
|
||||
import { Stack, Text } from './ui';
|
||||
|
||||
import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
|
||||
import type { VirtuosoHandle } from 'react-virtuoso';
|
||||
import type { IScrollableList } from 'soapbox/components/scrollable-list';
|
||||
|
|
@ -212,14 +214,15 @@ const StatusList: React.FC<IStatusList> = ({
|
|||
|
||||
if (isPartial) {
|
||||
return (
|
||||
<div className='regeneration-indicator'>
|
||||
<div>
|
||||
<div className='regeneration-indicator__label'>
|
||||
<FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' />
|
||||
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Stack className='py-2' space={2}>
|
||||
<Text size='2xl' weight='bold' tag='h2' align='center'>
|
||||
<FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' />
|
||||
</Text>
|
||||
|
||||
<Text size='sm' theme='muted' align='center'>
|
||||
<FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@ const StatusMedia: React.FC<IStatusMedia> = ({
|
|||
};
|
||||
|
||||
const renderLoadingVideoPlayer = (): JSX.Element => {
|
||||
return <div className='media-spoiler-video' style={{ height: '285px' }} />;
|
||||
return <div className='relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat' style={{ height: '285px' }} />;
|
||||
};
|
||||
|
||||
const renderLoadingAudioPlayer = (): JSX.Element => {
|
||||
return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
|
||||
return <div className='relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat' style={{ height: '285px' }} />;
|
||||
};
|
||||
|
||||
const openMedia = (media: ImmutableList<Attachment>, index: number) => {
|
||||
|
|
@ -93,7 +93,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
|
|||
backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
|
||||
foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
|
||||
accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}
|
||||
duration={attachment.meta.getIn(['original', 'duration'], 0) as number | undefined}
|
||||
duration={attachment.meta.getIn(['original', 'duration'], 0) as number | undefined}
|
||||
height={263}
|
||||
/>
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
|
|||
// Rare, but it can happen.
|
||||
if (to.size === 0) {
|
||||
return (
|
||||
<div className='reply-mentions'>
|
||||
<div className='mb-1 block text-sm text-gray-700 dark:text-gray-600'>
|
||||
<FormattedMessage
|
||||
id='reply_mentions.reply_empty'
|
||||
defaultMessage='Replying to post'
|
||||
|
|
@ -54,7 +54,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
|
|||
<Link
|
||||
key={account.id}
|
||||
to={`/@${account.acct}`}
|
||||
className='reply-mentions__account max-w-[200px] truncate align-bottom'
|
||||
className='inline-block max-w-[200px] truncate align-bottom text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
@{isPubkey(account.username) ? account.username.slice(0, 8) : account.username}
|
||||
|
|
@ -81,7 +81,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
|
|||
}
|
||||
|
||||
return (
|
||||
<div className='reply-mentions'>
|
||||
<div className='mb-1 block text-sm text-gray-700 dark:text-gray-600'>
|
||||
<FormattedMessage
|
||||
id='reply_mentions.reply.hoverable'
|
||||
defaultMessage='<hover>Replying to</hover> {accounts}'
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
|
|||
const icon = (active && activeSrc) || src;
|
||||
|
||||
return (
|
||||
<NavLink to={to} exact={exact} className='thumb-navigation__link'>
|
||||
<NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-2.5 text-lg text-gray-600'>
|
||||
{!demetricator && count !== undefined ? (
|
||||
<IconWithCounter
|
||||
src={icon}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='thumb-navigation'>
|
||||
<div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/90 lg:hidden dark:border-gray-800 dark:bg-primary-900/90'>
|
||||
<ThumbNavigationLink
|
||||
src={require('@tabler/icons/outline/home.svg')}
|
||||
activeSrc={require('@tabler/icons/filled/home.svg')}
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
|
|||
<Blurhash
|
||||
hash={attachment.blurhash}
|
||||
className={clsx('media-gallery__preview', {
|
||||
'media-gallery__preview--hidden': visible,
|
||||
'hidden': visible,
|
||||
})}
|
||||
/>
|
||||
{visible && thumbnail}
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ const AccountGallery = () => {
|
|||
</div>
|
||||
|
||||
{isLoading && attachments.size === 0 && (
|
||||
<div className='slist__append'>
|
||||
<div className='relative flex-auto px-8 py-4'>
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -507,8 +507,8 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className='video-player__controls active'>
|
||||
<div className='video-player__buttons-bar'>
|
||||
<div className='video-player__controls absolute bottom-0 left-0 z-[2] box-border px-4 py-0 opacity-100 ring-0 transition-opacity duration-100 ease-in-out'>
|
||||
<div className='-mx-[5px] my-0 flex justify-between pb-2'>
|
||||
<div className='video-player__buttons left'>
|
||||
|
||||
<button
|
||||
|
|
@ -551,11 +551,11 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<span className='video-player__time'>
|
||||
<span className='video-player__time-current'>{formatTime(Math.floor(currentTime))}</span>
|
||||
<span className='mx-[5px] my-0 inline flex-initial overflow-hidden text-ellipsis'>
|
||||
<span className='text-sm font-medium text-current'>{formatTime(Math.floor(currentTime))}</span>
|
||||
{getDuration() && (<>
|
||||
<span className='video-player__time-sep'>/</span>
|
||||
<span className='video-player__time-total'>{formatTime(Math.floor(getDuration()))}</span>
|
||||
<span className='mx-1.5 my-0 inline-block text-sm font-medium text-current'>/</span>
|
||||
<span className='text-sm font-medium text-current'>{formatTime(Math.floor(getDuration()))}</span>
|
||||
</>)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -564,7 +564,7 @@ const Audio: React.FC<IAudio> = (props) => {
|
|||
<a
|
||||
title={intl.formatMessage(messages.download)}
|
||||
aria-label={intl.formatMessage(messages.download)}
|
||||
className='video-player__download__icon player-button'
|
||||
className='text-inherit'
|
||||
href={src}
|
||||
download
|
||||
target='_blank'
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import OtpAuthForm from './otp-auth-form';
|
|||
|
||||
describe('<OtpAuthForm />', () => {
|
||||
it('renders correctly', () => {
|
||||
render(<OtpAuthForm mfa_token={'12345'} />);
|
||||
render(<OtpAuthForm mfa_token='12345' />);
|
||||
|
||||
expect(screen.getByRole('heading')).toHaveTextContent('OTP Login');
|
||||
expect(screen.getByTestId('form')).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
|
|||
|
||||
if (to.size === 0) {
|
||||
return (
|
||||
<a href='#' className='reply-mentions' onClick={handleClick}>
|
||||
<a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
|
||||
<FormattedMessage
|
||||
id='reply_mentions.reply_empty'
|
||||
defaultMessage='Replying to post'
|
||||
|
|
@ -55,7 +55,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
|
|||
const accounts = to.slice(0, 2).map((acct: string) => {
|
||||
const username = acct.split('@')[0];
|
||||
return (
|
||||
<span className='reply-mentions__account'>
|
||||
<span className='inline-block text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'>
|
||||
@{isPubkey(username) ? username.slice(0, 8) : username}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -68,7 +68,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<a href='#' className='reply-mentions' onClick={handleClick}>
|
||||
<a href='#' className='mb-1 text-sm text-gray-700 dark:text-gray-600' onClick={handleClick}>
|
||||
<FormattedMessage
|
||||
id='reply_mentions.reply'
|
||||
defaultMessage='Replying to {accounts}'
|
||||
|
|
|
|||
|
|
@ -12,12 +12,14 @@ interface ICryptoIcon {
|
|||
ticker: string;
|
||||
title?: string;
|
||||
className?: string;
|
||||
imgClassName?: string;
|
||||
}
|
||||
|
||||
const CryptoIcon: React.FC<ICryptoIcon> = ({ ticker, title, className }): JSX.Element => {
|
||||
const CryptoIcon: React.FC<ICryptoIcon> = ({ ticker, title, className, imgClassName }): JSX.Element => {
|
||||
return (
|
||||
<div className={className}>
|
||||
<img
|
||||
className={imgClassName}
|
||||
src={getIcon(ticker)}
|
||||
alt={title || ticker}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -20,22 +20,23 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
|
|||
const explorerUrl = getExplorerUrl(ticker, address);
|
||||
|
||||
return (
|
||||
<div className='crypto-address'>
|
||||
<div className='crypto-address__head'>
|
||||
<div className='flex flex-col'>
|
||||
<div className='mb-1.5 flex items-center'>
|
||||
<CryptoIcon
|
||||
className='crypto-address__icon'
|
||||
className='mr-2.5 flex w-6 items-start justify-center'
|
||||
imgClassName='w-full'
|
||||
ticker={ticker}
|
||||
title={title}
|
||||
/>
|
||||
<div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
|
||||
<div className='crypto-address__actions'>
|
||||
{explorerUrl && <a href={explorerUrl} target='_blank'>
|
||||
<Icon src={require('@tabler/icons/outline/external-link.svg')} />
|
||||
<div className='font-bold'>{title || ticker.toUpperCase()}</div>
|
||||
<div className='ml-auto flex'>
|
||||
{explorerUrl && <a className='ml-2 text-gray-400' href={explorerUrl} target='_blank'>
|
||||
<Icon className='h-4.5 w-4.5' src={require('@tabler/icons/outline/external-link.svg')} />
|
||||
</a>}
|
||||
</div>
|
||||
</div>
|
||||
{note && <div className='crypto-address__note'>{note}</div>}
|
||||
<div className='crypto-address__qrcode'>
|
||||
{note && <div className='mb-2.5'>{note}</div>}
|
||||
<div className='mb-3 flex items-center justify-center p-2.5'>
|
||||
<QRCode className='rounded-lg' value={address} includeMargin />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ const EditFilter: React.FC<IEditFilter> = ({ params }) => {
|
|||
<FormGroup labelText={intl.formatMessage(messages.expires)}>
|
||||
<SelectDropdown
|
||||
items={expirations}
|
||||
defaultValue={''}
|
||||
defaultValue=''
|
||||
onChange={handleSelectChange}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='thread__status'>
|
||||
<div className='thread__status relative pb-4'>
|
||||
{renderConnector()}
|
||||
{isLoaded ? (
|
||||
// @ts-ignore FIXME
|
||||
|
|
|
|||
|
|
@ -394,7 +394,7 @@ const Thread = (props: IThread) => {
|
|||
<div
|
||||
ref={node}
|
||||
className={
|
||||
clsx('thread', {
|
||||
clsx('bg-white black:bg-black dark:bg-primary-900', {
|
||||
'h-full': !useWindowScroll,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const ColumnForbidden = () => {
|
|||
|
||||
return (
|
||||
<Column label={intl.formatMessage(messages.title)}>
|
||||
<div className='error-column'>
|
||||
<div className='flex min-h-[160px] flex-1 items-center justify-center rounded-lg bg-primary-50 p-10 text-center text-gray-900 dark:bg-gray-700 dark:text-gray-300'>
|
||||
{intl.formatMessage(messages.body)}
|
||||
</div>
|
||||
</Column>
|
||||
|
|
|
|||
|
|
@ -135,16 +135,11 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
|
|||
const { alt, src, width, height, onClick } = this.props;
|
||||
const { loading } = this.state;
|
||||
|
||||
const className = clsx('image-loader', {
|
||||
'image-loader--loading': loading,
|
||||
'image-loader--amorphous': !this.hasSize(),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className='relative flex h-full w-full flex-col items-center justify-center'>
|
||||
{loading ? (
|
||||
<canvas
|
||||
className='image-loader__preview-canvas'
|
||||
className={clsx({ 'hidden': !this.hasSize() })}
|
||||
ref={this.setCanvasRef}
|
||||
width={width}
|
||||
height={height}
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@ interface IActionsModal {
|
|||
const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClose }) => {
|
||||
const renderAction = (action: MenuItem | null, i: number) => {
|
||||
if (action === null) {
|
||||
return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
|
||||
return <li key={`sep-${i}`} className='m-2 block h-[1px] bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />;
|
||||
}
|
||||
|
||||
const { icon = null, text, meta = null, active = false, href = '#', destructive } = action;
|
||||
const { icon = null, text, meta = null, href = '#', destructive } = action;
|
||||
|
||||
const Comp = href === '#' ? 'button' : 'a';
|
||||
const compProps = href === '#' ? { onClick: onClick } : { href: href, rel: 'noopener' };
|
||||
|
|
@ -36,12 +36,15 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
|
|||
{...compProps}
|
||||
space={2.5}
|
||||
data-index={i}
|
||||
className={clsx('w-full', { active, destructive })}
|
||||
className={clsx(
|
||||
'flex w-full items-center px-4 py-3 text-left text-gray-700 no-underline hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800',
|
||||
{ 'text-danger-600 dark:text-danger-400': destructive },
|
||||
)}
|
||||
element={Comp}
|
||||
>
|
||||
{icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
|
||||
{icon && <Icon className='first:h-5 first:w-5 first:min-w-[1.25rem]' title={text} src={icon} role='presentation' tabIndex={-1} />}
|
||||
<div>
|
||||
<div className={clsx({ 'actions-modal__item-label': !!meta })}>{text}</div>
|
||||
<div className={clsx({ 'font-medium': meta })}>{text}</div>
|
||||
<div>{meta}</div>
|
||||
</div>
|
||||
</HStack>
|
||||
|
|
@ -52,18 +55,21 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
|
|||
return (
|
||||
<Motion defaultStyle={{ top: 100 }} style={{ top: spring(0) }}>
|
||||
{({ top }) => (
|
||||
<div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}>
|
||||
<div
|
||||
className='actions-modal pointer-events-auto relative z-[9999] m-auto flex max-h-[calc(100vh-3rem)] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white text-gray-400 shadow-xl black:bg-black dark:bg-gray-900'
|
||||
style={{ top: `${top}%` }}
|
||||
>
|
||||
{status && (
|
||||
<ReplyIndicator className='actions-modal__status rounded-b-none' status={status} hideActions />
|
||||
<ReplyIndicator className='max-h-[300px] overflow-y-auto rounded-b-none' status={status} hideActions />
|
||||
)}
|
||||
|
||||
<ul className={clsx({ 'with-status': !!status })}>
|
||||
<ul className={clsx('my-2 max-h-[calc(100vh-147px)] shrink-0 overflow-y-auto', { 'max-h-[calc(80vh-75px)]': status })}>
|
||||
{actions && actions.map(renderAction)}
|
||||
|
||||
<li className='dropdown-menu__separator' />
|
||||
<li className='m-2 block h-[1px] bg-gray-200 black:bg-gray-800 dark:bg-gray-600' />
|
||||
|
||||
<li>
|
||||
<button type='button' onClick={onClose}>
|
||||
<button className='w-full justify-center text-center' type='button' onClick={onClose}>
|
||||
<FormattedMessage id='lightbox.close' defaultMessage='Close' />
|
||||
</button>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ composeId, onClose
|
|||
closeIcon={require('@tabler/icons/outline/arrow-left.svg')}
|
||||
closePosition='left'
|
||||
>
|
||||
<div className='reply-mentions-modal__accounts'>
|
||||
<div className='block min-h-[300px] flex-1 flex-row overflow-y-auto'>
|
||||
{mentions.map(accountId => <Account composeId={composeId} key={accountId} accountId={accountId} author={author === accountId} />)}
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const SelectBookmarkFolderModal: React.FC<ISelectBookmarkFolderModal> = ({ statu
|
|||
</HStack>
|
||||
}
|
||||
checked={selectedFolder === null}
|
||||
value={''}
|
||||
value=''
|
||||
/>,
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
|
|||
secondaryAction={isOpen ? onRegister : undefined}
|
||||
secondaryText={isOpen ? <FormattedMessage id='account.register' defaultMessage='Sign up' /> : undefined}
|
||||
>
|
||||
<div className='remote-interaction-modal__content'>
|
||||
<Form className='remote-interaction-modal__fields' onSubmit={onSubmit}>
|
||||
<div className='flex flex-col gap-2.5'>
|
||||
<Form className='flex w-full flex-col gap-2.5' onSubmit={onSubmit}>
|
||||
<Input
|
||||
placeholder={intl.formatMessage(messages.accountPlaceholder)}
|
||||
name='remote_follow[acct]'
|
||||
|
|
@ -117,9 +117,9 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
|
|||
onChange={onAccountChange}
|
||||
required
|
||||
/>
|
||||
<Button type='submit' theme='primary'>{button}</Button>
|
||||
<Button className='self-end' type='submit' theme='primary'>{button}</Button>
|
||||
</Form>
|
||||
<div className='remote-interaction-modal__divider'>
|
||||
<div className={'-mx-2.5 my-0 flex items-center gap-2.5 before:flex-1 before:border-b before:border-gray-300 before:content-[\'\'] after:flex-1 after:border-b after:border-gray-300 after:content-[\'\'] before:dark:border-gray-600 after:dark:border-gray-600'}>
|
||||
<Text align='center'>
|
||||
<FormattedMessage id='remote_interaction.divider' defaultMessage='or' />
|
||||
</Text>
|
||||
|
|
|
|||
|
|
@ -124,11 +124,12 @@ class ZoomableImage extends React.PureComponent<IZoomableImage> {
|
|||
|
||||
return (
|
||||
<div
|
||||
className='zoomable-image'
|
||||
className='relative flex h-full w-full items-center justify-center'
|
||||
ref={this.setContainerRef}
|
||||
style={{ overflow }}
|
||||
>
|
||||
<img
|
||||
className='h-auto max-h-[80%] w-auto max-w-full object-contain shadow-2xl'
|
||||
role='presentation'
|
||||
ref={this.setImageRef}
|
||||
alt={alt}
|
||||
|
|
|
|||
|
|
@ -463,7 +463,7 @@ const Video: React.FC<IVideo> = ({
|
|||
return (
|
||||
<div
|
||||
role='menuitem'
|
||||
className={clsx('video-player', { detailed, 'video-player--inline': inline && !fullscreen, fullscreen })}
|
||||
className={clsx('video-player relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white [direction:ltr] focus:outline-0', { 'h-full w-full m-0': fullscreen })}
|
||||
style={playerStyle}
|
||||
ref={player}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
|
|
@ -477,6 +477,10 @@ const Video: React.FC<IVideo> = ({
|
|||
)}
|
||||
|
||||
<video
|
||||
className={clsx('relative z-[1] block', {
|
||||
'object-contain max-h-full': inline && !fullscreen,
|
||||
'h-full w-full outline-0 !max-h-full !max-w-full': fullscreen,
|
||||
})}
|
||||
ref={video}
|
||||
src={src}
|
||||
loop
|
||||
|
|
@ -496,7 +500,7 @@ const Video: React.FC<IVideo> = ({
|
|||
onVolumeChange={handleVolumeChange}
|
||||
/>
|
||||
|
||||
<div className={clsx('video-player__controls', { active: paused || hovered })}>
|
||||
<div className={clsx('video-player__controls absolute bottom-0 left-0 z-[2] box-border px-4 py-0 opacity-0 ring-0 transition-opacity duration-100 ease-in-out', { 'opacity-100': paused || hovered })}>
|
||||
<div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
|
||||
<div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
|
||||
<div className='video-player__seek__progress' style={{ width: `${progress}%` }} />
|
||||
|
|
@ -509,13 +513,13 @@ const Video: React.FC<IVideo> = ({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className='video-player__buttons-bar'>
|
||||
<div className='-mx-[5px] my-0 flex justify-between pb-2'>
|
||||
<div className='video-player__buttons left'>
|
||||
<button
|
||||
type='button'
|
||||
title={intl.formatMessage(paused ? messages.play : messages.pause)}
|
||||
aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
|
||||
className='player-button'
|
||||
className={clsx('player-button', detailed || fullscreen && 'py-2.5')}
|
||||
onClick={togglePlay}
|
||||
autoFocus={autoFocus}
|
||||
>
|
||||
|
|
@ -526,7 +530,7 @@ const Video: React.FC<IVideo> = ({
|
|||
type='button'
|
||||
title={intl.formatMessage(muted ? messages.unmute : messages.mute)}
|
||||
aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
|
||||
className='player-button'
|
||||
className={clsx('player-button', detailed || fullscreen && 'py-2.5')}
|
||||
onClick={toggleMute}
|
||||
>
|
||||
<Icon src={muted ? require('@tabler/icons/outline/volume-3.svg') : require('@tabler/icons/outline/volume.svg')} />
|
||||
|
|
@ -543,9 +547,9 @@ const Video: React.FC<IVideo> = ({
|
|||
|
||||
{(detailed || fullscreen) && (
|
||||
<span>
|
||||
<span className='video-player__time-current'>{formatTime(currentTime)}</span>
|
||||
<span className='video-player__time-sep'>/</span>
|
||||
<span className='video-player__time-total'>{formatTime(duration)}</span>
|
||||
<span className='text-sm font-medium text-white'>{formatTime(currentTime)}</span>
|
||||
<span className='mx-1.5 my-0 inline-block text-sm font-medium text-white'>/</span>
|
||||
<span className='text-sm font-medium'>{formatTime(duration)}</span>
|
||||
</span>
|
||||
)}
|
||||
|
||||
|
|
@ -559,7 +563,7 @@ const Video: React.FC<IVideo> = ({
|
|||
type='button'
|
||||
title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
|
||||
aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
|
||||
className='player-button'
|
||||
className={clsx('player-button', detailed || fullscreen && 'py-2.5')}
|
||||
onClick={toggleFullscreen}
|
||||
>
|
||||
<Icon src={fullscreen ? require('@tabler/icons/outline/arrows-minimize.svg') : require('@tabler/icons/outline/arrows-maximize.svg')} />
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
useSoapboxConfig,
|
||||
useTheme,
|
||||
useLocale,
|
||||
useAppSelector,
|
||||
} from 'soapbox/hooks';
|
||||
import { normalizeSoapboxConfig } from 'soapbox/normalizers';
|
||||
import { startSentry } from 'soapbox/sentry';
|
||||
|
|
@ -24,14 +25,17 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
|
|||
const soapboxConfig = useSoapboxConfig();
|
||||
const theme = useTheme();
|
||||
|
||||
const withModals = useAppSelector((state) => !state.modals.isEmpty());
|
||||
|
||||
const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
|
||||
const dsn = soapboxConfig.sentryDsn;
|
||||
|
||||
const bodyClass = clsx('h-full bg-white text-base black:bg-black dark:bg-gray-800', {
|
||||
const bodyClass = clsx('h-full bg-white text-base antialiased black:bg-black dark:bg-gray-800', {
|
||||
'no-reduce-motion': !reduceMotion,
|
||||
'underline-links': underlineLinks,
|
||||
'demetricator': demetricator,
|
||||
'system-font': systemFont,
|
||||
'overflow-hidden': withModals,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,13 @@
|
|||
@import 'variables';
|
||||
@import 'fonts';
|
||||
@import 'basics';
|
||||
@import 'loading';
|
||||
@import 'ui';
|
||||
@import 'emoji-picker';
|
||||
@import 'accessibility';
|
||||
@import 'navigation';
|
||||
@import 'autosuggest';
|
||||
|
||||
// COMPONENTS
|
||||
@import 'components/modal';
|
||||
@import 'components/compose-form';
|
||||
@import 'components/status';
|
||||
@import 'components/reply-mentions';
|
||||
@import 'components/detailed-status';
|
||||
@import 'components/media-gallery';
|
||||
@import 'components/notification';
|
||||
|
|
@ -20,8 +15,6 @@
|
|||
@import 'components/search';
|
||||
@import 'components/video-player';
|
||||
@import 'components/audio-player';
|
||||
@import 'components/crypto-donate';
|
||||
@import 'components/aliases';
|
||||
@import 'components/icon';
|
||||
@import 'forms';
|
||||
@import 'utilities';
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
.autosuggest-emoji {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.autosuggest-emoji img {
|
||||
display: block;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
|
@ -1,17 +1,12 @@
|
|||
body {
|
||||
@apply antialiased;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
|
||||
body.with-modals {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
|
||||
// Note: this is needed for React HotKeys performance. Removing this
|
||||
// will cause severe performance degradation on Safari.
|
||||
div[tabindex='-1']:focus {
|
||||
outline: 0;
|
||||
@apply outline-0;
|
||||
}
|
||||
|
||||
::selection {
|
||||
|
|
@ -19,7 +14,7 @@ div[tabindex='-1']:focus {
|
|||
}
|
||||
|
||||
noscript {
|
||||
text-align: center;
|
||||
@apply text-center;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
|
|
@ -29,13 +24,14 @@ noscript {
|
|||
// Virtuoso empty placeholder fix.
|
||||
// https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
|
||||
div[data-viewport-type='window'] {
|
||||
position: static !important;
|
||||
@apply static;
|
||||
}
|
||||
|
||||
body.system-font, body.system-font .font-sans {
|
||||
body.system-font,
|
||||
body.system-font .font-sans {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
body.system-font .font-mono {
|
||||
font-family: ui-monospace, mono;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.aliases__accounts.empty-column-indicator {
|
||||
min-height: unset;
|
||||
}
|
||||
|
|
@ -1,14 +1,17 @@
|
|||
.audio-player {
|
||||
@apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
|
||||
direction: ltr;
|
||||
@apply [direction:ltr] relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
|
||||
|
||||
&.editable {
|
||||
@apply rounded-none h-full;
|
||||
}
|
||||
|
||||
.video-player__volume::before,
|
||||
.video-player__seek::before {
|
||||
@apply bg-white/10;
|
||||
.video-player__seek {
|
||||
@apply before:top-0;
|
||||
}
|
||||
|
||||
.video-player__volume,
|
||||
.video-player__seek {
|
||||
@apply before:bg-white/10;
|
||||
}
|
||||
|
||||
.video-player__seek__buffer {
|
||||
|
|
@ -25,13 +28,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.video-player__time-sep,
|
||||
.video-player__time-total,
|
||||
.video-player__time-current {
|
||||
@apply text-current;
|
||||
}
|
||||
|
||||
.video-player__seek::before,
|
||||
.video-player__seek__buffer,
|
||||
.video-player__seek__progress {
|
||||
@apply top-0;
|
||||
|
|
@ -45,7 +41,3 @@
|
|||
@apply pt-2.5 bg-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler-audio {
|
||||
@apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
.empty-column-indicator,
|
||||
.error-column {
|
||||
.empty-column-indicator {
|
||||
@apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
|
||||
|
||||
@supports (display: grid) { // hack to fix Chrome <57
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
& > span {
|
||||
@apply max-w-[400px];
|
||||
}
|
||||
|
|
@ -14,13 +9,3 @@
|
|||
@apply text-primary-600 dark:text-primary-400 no-underline hover:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.error-column {
|
||||
flex-direction: column;
|
||||
|
||||
.svg-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
// Language codes that uses CJK fonts
|
||||
/* stylelint-disable-next-line value-keyword-case -- locale filenames */
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
.compose-form {
|
||||
&__warning {
|
||||
@apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
.crypto-address {
|
||||
@apply flex flex-col p-5;
|
||||
|
||||
&__head {
|
||||
@apply flex items-center mb-1.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@apply flex items-start justify-center w-6 mr-2.5;
|
||||
|
||||
img {
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
@apply flex ml-auto;
|
||||
|
||||
a {
|
||||
@apply text-gray-400 ml-2;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
@apply h-4.5 w-4.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__note {
|
||||
@apply mb-2.5;
|
||||
}
|
||||
|
||||
&__qrcode {
|
||||
@apply flex items-center justify-center mb-3 p-2.5;
|
||||
}
|
||||
|
||||
&__address {
|
||||
@apply mt-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-donate-modal .crypto-address {
|
||||
@apply p-0;
|
||||
}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.react-datepicker__current-month {
|
||||
margin-top: 2px;
|
||||
@apply mt-0.5;
|
||||
}
|
||||
|
||||
.react-datepicker__navigation {
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
.react-datepicker__navigation--next {
|
||||
right: 16px;
|
||||
@apply right-4;
|
||||
|
||||
&--with-time:not(.react-datepicker__navigation--next--with-today-button) {
|
||||
right: 100px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,9 @@
|
|||
.thread {
|
||||
@apply bg-white black:bg-black dark:bg-primary-900;
|
||||
|
||||
&__status {
|
||||
@apply relative pb-4;
|
||||
|
||||
.status__wrapper {
|
||||
@apply shadow-none p-0;
|
||||
}
|
||||
.thread__status {
|
||||
.status__wrapper {
|
||||
@apply shadow-none p-0;
|
||||
}
|
||||
|
||||
.status__content-wrapper {
|
||||
@apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
|
||||
@apply pl-[54px] rtl:pl-0 rtl:pr-[calc(54px)];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,12 @@
|
|||
.svg-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.2s;
|
||||
@apply h-4 w-4 flex items-center justify-center transition duration-200;
|
||||
|
||||
svg {
|
||||
// Apparently this won't skew the image as long as it has a viewbox
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: 0.2s;
|
||||
@apply h-full w-full transition duration-200;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,143 +1,76 @@
|
|||
$media-compact-size: 50px;
|
||||
|
||||
.media-gallery {
|
||||
@apply rounded-lg;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@apply rounded-lg box-border overflow-hidden isolate relative w-full h-auto;
|
||||
|
||||
&__item {
|
||||
@apply rounded-sm;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@apply rounded-sm border-0 box-border block float-left relative overflow-hidden;
|
||||
|
||||
&__icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
||||
|
||||
.svg-icon {
|
||||
@apply h-24 w-24;
|
||||
@apply size-24;
|
||||
}
|
||||
}
|
||||
|
||||
&-overflow {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
z-index: 2;
|
||||
@apply absolute w-full h-full inset-0 bg-white/75 z-[2] text-center font-bold text-5xl flex items-center justify-center pointer-events-none;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-thumbnail {
|
||||
@apply text-gray-400;
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@apply text-gray-400 cursor-zoom-in block no-underline leading-[0] relative z-[1] h-full w-full;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
@apply w-full h-full object-cover
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
@apply bg-gray-200 dark:bg-gray-900 rounded-lg;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
@apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__gifv {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@apply h-full overflow-hidden relative w-full;
|
||||
}
|
||||
|
||||
&__item-gifv-thumbnail {
|
||||
@apply rounded-md;
|
||||
cursor: zoom-in;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
top: 0;
|
||||
@apply rounded-md cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
|
||||
}
|
||||
|
||||
&__gifv__label,
|
||||
&__filename__label,
|
||||
&__file-extension__label {
|
||||
@apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
|
||||
font-size: 11px;
|
||||
@apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90 text-xs leading-[18px];
|
||||
transition: opacity 0.1s ease;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&__gifv {
|
||||
&.autoplay {
|
||||
.media-gallery__gifv__label {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.media-gallery__gifv__label {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--compact {
|
||||
height: $media-compact-size !important;
|
||||
background: transparent;
|
||||
@apply bg-transparent h-12;
|
||||
|
||||
.media-gallery__item {
|
||||
width: $media-compact-size !important;
|
||||
height: $media-compact-size !important;
|
||||
inset: auto !important;
|
||||
float: left !important;
|
||||
margin-right: 5px;
|
||||
@apply h-12 w-12 inset-auto float-left mr-[5px] #{!important};
|
||||
|
||||
&-overflow {
|
||||
font-size: 20px;
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
&__icons .svg-icon {
|
||||
|
|
@ -146,7 +79,7 @@ $media-compact-size: 50px;
|
|||
}
|
||||
|
||||
.media-gallery__file-extension__label {
|
||||
display: none;
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,3 @@
|
|||
.modal-root__modal {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
z-index: 9999;
|
||||
max-height: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
.audio-player.detailed,
|
||||
.extended-video-player {
|
||||
|
|
@ -29,101 +21,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.actions-modal {
|
||||
@apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white black:bg-black dark:bg-gray-900 shadow-xl rounded-2xl;
|
||||
max-height: calc(100vh - 3rem);
|
||||
|
||||
&__item-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-menu__separator {
|
||||
@apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600 black:bg-gray-800;
|
||||
}
|
||||
|
||||
&__status {
|
||||
@apply overflow-y-auto max-h-[300px];
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply my-2 flex-shrink-0 overflow-y-auto;
|
||||
max-height: calc(100vh - 147px);
|
||||
|
||||
&.with-status { max-height: calc(80vh - 75px); }
|
||||
|
||||
li:not(:empty) {
|
||||
a,
|
||||
button {
|
||||
@apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 no-underline text-left;
|
||||
|
||||
&.destructive {
|
||||
@apply text-danger-600 dark:text-danger-400;
|
||||
}
|
||||
|
||||
.svg-icon:first-child {
|
||||
@apply min-w-[1.25rem] w-5 h-5;
|
||||
|
||||
svg {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button[type='button'] {
|
||||
@apply w-full justify-center text-center;
|
||||
}
|
||||
.actions-modal ul li {
|
||||
a,
|
||||
button {
|
||||
.svg-icon svg {
|
||||
@apply stroke-[1.5];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply-mentions-modal__accounts {
|
||||
display: block;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.remote-interaction-modal {
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10px;
|
||||
}
|
||||
|
||||
&__fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0 -10px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@apply border-b border-gray-300 dark:border-gray-600;
|
||||
content: '';
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 895px) {
|
||||
margin: 0;
|
||||
border-radius: 6px;
|
||||
height: unset !important;
|
||||
width: 440px !important;
|
||||
}
|
||||
|
||||
@media screen and (width <= 480px) {
|
||||
width: 330px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.notification .status__wrapper {
|
||||
@apply p-0 shadow-none rounded-none;
|
||||
@apply p-0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
.reply-mentions {
|
||||
@apply text-gray-700 dark:text-gray-600 mb-1 text-sm;
|
||||
|
||||
&__account {
|
||||
@apply text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue no-underline hover:underline inline-block;
|
||||
direction: ltr;
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper {
|
||||
.reply-mentions {
|
||||
display: block;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +1,23 @@
|
|||
.search__icon {
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
@apply focus:outline-0 #{!important};
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus {
|
||||
outline: 0 !important;
|
||||
&::-moz-focus-inner {
|
||||
@apply border-0 outline-0 #{!important};
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
@apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
|
||||
@include font-size(16);
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
@apply right-4 rtl:left-4 rtl:right-auto text-gray-400 cursor-default inline-block absolute top-1/2 -translate-y-1/2 z-[2] w-4.5 h-4.5 opacity-0 pointer-events-none text-lg;
|
||||
|
||||
&.active {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
@apply pointer-events-auto opacity-100;
|
||||
}
|
||||
|
||||
&--search.active {
|
||||
pointer-events: none;
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
&--backspace {
|
||||
cursor: pointer;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@apply cursor-pointer w-[22px] h-[22px];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,10 @@
|
|||
.status {
|
||||
@apply min-h-[54px] cursor-default;
|
||||
|
||||
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
|
||||
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
|
||||
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
|
||||
padding-right: 26px; // 10px + 16px
|
||||
}
|
||||
@apply min-h-[54px] cursor-default opacity-100;
|
||||
|
||||
@keyframes fade {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
opacity: 1;
|
||||
animation: fade 150ms linear;
|
||||
}
|
||||
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
@apply py-2;
|
||||
|
||||
.media-gallery {
|
||||
max-width: 250px;
|
||||
@apply max-w-[250px];
|
||||
}
|
||||
|
||||
.status__content {
|
||||
|
|
@ -36,28 +29,23 @@
|
|||
|
||||
.video-player,
|
||||
.audio-player {
|
||||
margin-top: 8px;
|
||||
max-width: 250px;
|
||||
@apply mt-2 max-w-[250px];
|
||||
}
|
||||
|
||||
.media-gallery__item-thumbnail {
|
||||
cursor: default;
|
||||
@apply cursor-default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-check-box-toggle {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@apply items-center flex justify-center p-2.5;
|
||||
flex: 0 0 auto;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.focusable:focus,
|
||||
.focusable-within:focus-within {
|
||||
outline: 0; /* Required b/c HotKeys lib sets this outline */
|
||||
@apply ring-2 ring-primary-300;
|
||||
@apply outline-0 ring-2 ring-primary-300;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
|
|
@ -68,36 +56,22 @@ a.status-card {
|
|||
@apply cursor-pointer hover:bg-gray-100 dark:hover:bg-primary-800/30 hover:no-underline;
|
||||
}
|
||||
|
||||
.status-card-video,
|
||||
.status-card-audio {
|
||||
iframe {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.status-card__image {
|
||||
@apply relative overflow-hidden;
|
||||
flex: 0 0 40%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& > .svg-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
@apply h-10 w-10 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
||||
transform-origin: 50% 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
svg {
|
||||
stroke-width: 1px;
|
||||
@apply stroke-[1px];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-card.horizontal {
|
||||
display: block;
|
||||
@apply block;
|
||||
}
|
||||
|
||||
.status-card.compact {
|
||||
|
|
@ -113,34 +87,18 @@ a.status-card {
|
|||
}
|
||||
|
||||
.material-status {
|
||||
padding-bottom: 10px;
|
||||
@apply pb-2.5;
|
||||
|
||||
&__status {
|
||||
padding: 15px 0 10px;
|
||||
@apply pt-4 pb-0 px-2.5 rounded-[10px];
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 8px 10px;
|
||||
@apply px-2.5 py-2;
|
||||
|
||||
&__content {
|
||||
padding-top: 10px;
|
||||
@apply pt-2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-thumbs {
|
||||
position: relative;
|
||||
|
||||
&__clickable-region {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.detailed,
|
||||
.fullscreen {
|
||||
.video-player__volume__current,
|
||||
.video-player__volume__currnt,
|
||||
.video-player__volume::before {
|
||||
bottom: 27px;
|
||||
}
|
||||
|
|
@ -11,151 +11,41 @@
|
|||
}
|
||||
|
||||
.video-player {
|
||||
@apply relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white;
|
||||
direction: ltr;
|
||||
|
||||
&.editable {
|
||||
@apply rounded-none;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
|
||||
video {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--inline {
|
||||
video {
|
||||
object-fit: contain;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
|
||||
padding: 0 15px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
margin: 0 -5px;
|
||||
|
||||
.video-player__download__icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
@apply flex min-w-[30px] items-center text-base whitespace-nowrap overflow-hidden text-ellipsis flex-initial;
|
||||
flex: 0 1 auto;
|
||||
min-width: 30px;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.player-button {
|
||||
display: inline-block;
|
||||
outline: 0;
|
||||
@apply inline-block outline-0 bg-transparent text-base border-0 text-white/75;
|
||||
flex: 0 0 auto;
|
||||
background: transparent;
|
||||
padding: 5px 6px;
|
||||
font-size: 16px;
|
||||
border: 0;
|
||||
color: rgba(#fff, 0.75);
|
||||
|
||||
.svg-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@apply w-5 h-5;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__time {
|
||||
display: inline;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
&__time-sep,
|
||||
&__time-total,
|
||||
&__time-current {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__time-current {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__time-sep {
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
&__time-sep,
|
||||
&__time-total {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__volume {
|
||||
@apply inline-flex cursor-pointer h-6 relative overflow-hidden;
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.active {
|
||||
overflow: visible;
|
||||
width: 50px;
|
||||
margin-right: 16px;
|
||||
@apply overflow-visible w-12 mr-4;
|
||||
}
|
||||
|
||||
&::before {
|
||||
|
|
@ -172,29 +62,14 @@
|
|||
}
|
||||
|
||||
&__current {
|
||||
@apply bg-accent-500;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
@apply bg-accent-500 block absolute h-1 rounded left-0 top-1/2;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
&__handle {
|
||||
@apply bg-accent-500;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-left: -6px;
|
||||
@apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 top-1/2 left-0 -ml-1.5 opacity-0;
|
||||
transform: translate(0, -50%);
|
||||
box-shadow: 1px 2px 6px #0003;
|
||||
opacity: 0;
|
||||
|
||||
.no-reduce-motion & {
|
||||
transition: opacity 100ms linear;
|
||||
|
|
@ -202,24 +77,15 @@
|
|||
}
|
||||
|
||||
&.active &__handle {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
padding: 2px 10px;
|
||||
@apply py-0.5 px-2.5;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@apply no-underline text-sm font-medium text-white hover:underline active:underline focus:underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -239,33 +105,16 @@
|
|||
top: 14px;
|
||||
}
|
||||
|
||||
&__progress,
|
||||
&__buffer {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
&__progress {
|
||||
@apply bg-accent-500;
|
||||
@apply block absolute h-1 rounded top-3.5 bg-accent-500;
|
||||
}
|
||||
|
||||
&__buffer {
|
||||
background: rgba(#fff, 0.2);
|
||||
@apply block absolute h-1 rounded top-3.5 bg-white/20;
|
||||
}
|
||||
|
||||
&__handle {
|
||||
@apply bg-accent-500;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 10px;
|
||||
margin-left: -6px;
|
||||
@apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 top-2.5 -ml-1.5;
|
||||
box-shadow: 1px 2px 6px #0003;
|
||||
|
||||
.no-reduce-motion & {
|
||||
|
|
@ -273,35 +122,14 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.video-player__seek__handle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.detailed,
|
||||
&.fullscreen {
|
||||
.video-player__buttons {
|
||||
.player-button {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
@apply opacity-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler-video {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
@use 'sass:math';
|
||||
|
||||
// TYPEOGRAPHY MIXINS
|
||||
|
||||
// Use these mixins to define font-size and line-height
|
||||
// html and body declaration allows developer to pass px value as argument
|
||||
// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
|
||||
@mixin font-size($size) {
|
||||
$rem: math.div($size, 10);
|
||||
$px: $size;
|
||||
font-size: #{$px + 'px'};
|
||||
font-size: #{$rem + 'rem'};
|
||||
}
|
||||
|
|
@ -3,27 +3,10 @@ select {
|
|||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.form-error::before,
|
||||
.form-error::after {
|
||||
border: solid transparent;
|
||||
bottom: 100%;
|
||||
content: '';
|
||||
height: 0;
|
||||
left: 10px;
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.form-error::before {
|
||||
--tw-bg-opacity: 1;
|
||||
border-bottom-color: rgba(254, 202, 202, var(--tw-bg-opacity));
|
||||
border-width: 6px;
|
||||
margin-left: -1px;
|
||||
.form-error {
|
||||
@apply before:border-solid before:border-transparent before:h-0 before:left-2.5 before:pointer-events-none before:w-0 before:absolute before:border-[6px] before:ml-[-1px] after:border-solid after:border-transparent after:h-0 after:left-2.5 after:pointer-events-none after:w-0 after:absolute before:border-b-red-200;
|
||||
}
|
||||
|
||||
.input.with_label.toggle .label_input {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
@apply flex text-sm items-center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,88 +89,3 @@
|
|||
transform-origin: center center;
|
||||
animation: heartbeat 1.5s ease-in-out infinite both;
|
||||
}
|
||||
|
||||
@keyframes shake-bottom {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 50% 100%;
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60% {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70% {
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
}
|
||||
|
||||
.no-reduce-motion .shake-bottom {
|
||||
transform-origin: 50% 100%;
|
||||
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
@apply block w-full m-0 p-4 border-0 box-border text-gray-900 bg-transparent;
|
||||
|
||||
.svg-icon {
|
||||
@apply mx-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.regeneration-indicator {
|
||||
@apply text-gray-900;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
|
||||
@media screen and (width <= 580px) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& > div {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&__label {
|
||||
strong {
|
||||
@apply block mb-2.5 text-gray-900;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ptr,
|
||||
.ptr__children {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
.thumb-navigation {
|
||||
@apply fixed lg:hidden bottom-0 bg-white/90 black:bg-black/90 dark:bg-primary-900/90 backdrop-blur-md border-t border-solid border-gray-200 dark:border-gray-800 left-0 right-0 shadow-2xl w-full flex z-50;
|
||||
padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #fff;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@apply px-2 py-2.5 space-y-1 flex flex-col flex-1 items-center text-gray-600 text-lg;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +1,28 @@
|
|||
.icon-button {
|
||||
@apply text-black dark:text-white;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: 100ms ease-in;
|
||||
opacity: 0.4;
|
||||
@apply text-black dark:text-white inline-flex items-center p-0 border-0 bg-transparent cursor-pointer transition duration-100 ease-in opacity-40;
|
||||
|
||||
&__text {
|
||||
padding-left: 2px;
|
||||
@apply pl-0.5;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: 0.6;
|
||||
transition: color 200ms ease-out;
|
||||
@apply opacity-60 transition-colors duration-200 ease-out;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.2;
|
||||
cursor: default;
|
||||
@apply opacity-20 cursor-default;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
@apply border-0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
outline: 0!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,87 +30,24 @@
|
|||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.ellipsis::after { content: '…'; }
|
||||
|
||||
.image-loader {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.image-loader__preview-canvas {
|
||||
@apply max-w-full max-h-[80%];
|
||||
background: url('../assets/images/void.png') repeat;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.image-loader--amorphous .image-loader__preview-canvas {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.zoomable-image {
|
||||
@apply relative w-full h-full flex items-center justify-center;
|
||||
|
||||
img {
|
||||
@apply w-auto h-auto max-w-full max-h-[80%] object-contain shadow-2xl;
|
||||
}
|
||||
.ellipsis::after {
|
||||
content: '…';
|
||||
}
|
||||
|
||||
.react-swipeable-view-container {
|
||||
& {
|
||||
height: 100%;
|
||||
@apply h-full;
|
||||
}
|
||||
}
|
||||
|
||||
.react-swipeable-view-container > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 0 calc(var(--thumb-navigation-height) + 86px);
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.slist__append {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
||||
.setting-text {
|
||||
@apply block w-full mb-2.5 border-0 border-b-2 border-solid box-border text-gray-400 bg-transparent;
|
||||
font-family: inherit;
|
||||
padding: 7px 0;
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
.react-swipeable-view-container>* {
|
||||
@apply flex items-center justify-center h-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0% { opacity: 1; }
|
||||
30% { opacity: 0.75; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.underline-line-through {
|
||||
text-decoration: underline line-through;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
.divide-x-dot > *:not(:last-child)::after {
|
||||
@apply px-1;
|
||||
content: '·';
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.mention {
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
// Language codes that uses CJK fonts
|
||||
/* stylelint-disable-next-line value-keyword-case -- locale filenames */
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// CSS variables
|
||||
// NOTE: Prefer CSS variables whenever possible.
|
||||
// They're future-proof and more flexible.
|
||||
:root {
|
||||
--thumb-navigation-height: calc(60px + env(safe-area-inset-bottom));
|
||||
}
|
||||
Loading…
Reference in a new issue