Remove unused styles, also fix #1180
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
parent
e7e80d637d
commit
2b8bad3cb0
|
|
@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
|
||||||
|
|
||||||
import { unblockDomain } from 'soapbox/actions/domain-blocks';
|
import { unblockDomain } from 'soapbox/actions/domain-blocks';
|
||||||
|
|
||||||
import IconButton from './icon-button';
|
import { HStack, IconButton, Text } from './ui';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
|
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
|
||||||
|
|
@ -34,17 +34,12 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='domain'>
|
<HStack alignItems='center' justifyContent='between' space={1} className='p-2'>
|
||||||
<div className='domain__wrapper'>
|
<Text tag='span'>
|
||||||
<span className='domain__domain-name'>
|
{domain}
|
||||||
<strong>{domain}</strong>
|
</Text>
|
||||||
</span>
|
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
|
||||||
|
</HStack>
|
||||||
<div className='domain__buttons'>
|
|
||||||
<IconButton active src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
import { NavLink } from 'react-router-dom';
|
|
||||||
|
|
||||||
import AvatarOverlay from 'soapbox/components/avatar-overlay';
|
import Account from 'soapbox/components/account';
|
||||||
import DisplayName from 'soapbox/components/display-name';
|
|
||||||
import Icon from 'soapbox/components/icon';
|
import Icon from 'soapbox/components/icon';
|
||||||
|
import { HStack, Text } from 'soapbox/components/ui';
|
||||||
|
|
||||||
import type { Account as AccountEntity } from 'soapbox/types/entities';
|
import type { Account as AccountEntity } from 'soapbox/types/entities';
|
||||||
|
|
||||||
|
|
@ -13,22 +12,30 @@ interface IMovedNote {
|
||||||
to: AccountEntity,
|
to: AccountEntity,
|
||||||
}
|
}
|
||||||
|
|
||||||
const MovedNote: React.FC<IMovedNote> = ({ from, to }) => {
|
const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
|
||||||
const displayNameHtml = { __html: from.display_name_html };
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='account__moved-note'>
|
<div className='account__moved-note'>
|
||||||
<div className='account__moved-note__message'>
|
<HStack className='mb-2' alignItems='center' space={1.5}>
|
||||||
<div className='account__moved-note__icon-wrapper'><Icon src={require('feather-icons/dist/icons/briefcase.svg')} className='account__moved-note__icon' fixedWidth /></div>
|
<Icon
|
||||||
<FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
|
src={require('@tabler/icons/briefcase.svg')}
|
||||||
</div>
|
className='text-primary-600 dark:text-primary-400 flex-none'
|
||||||
|
/>
|
||||||
|
|
||||||
<NavLink to={`/@${to.acct}`} className='detailed-status__display-name'>
|
<div className='truncate'>
|
||||||
<div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div>
|
<Text theme='muted' size='sm' truncate>
|
||||||
<DisplayName account={to} />
|
<FormattedMessage
|
||||||
</NavLink>
|
id='notification.move'
|
||||||
|
defaultMessage='{name} moved to {targetName}'
|
||||||
|
values={{
|
||||||
|
name: <span dangerouslySetInnerHTML={{ __html: from.display_name_html }} />,
|
||||||
|
targetName: to.acct,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</HStack>
|
||||||
|
|
||||||
|
<Account account={to} withRelationship={false} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
|
||||||
|
|
||||||
export default MovedNote;
|
export default MovedNote;
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ const Aliases = () => {
|
||||||
<FormattedMessage id='empty_column.aliases.suggestions' defaultMessage='There are no account suggestions available for the provided term.' />
|
<FormattedMessage id='empty_column.aliases.suggestions' defaultMessage='There are no account suggestions available for the provided term.' />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className='aliases__accounts'>
|
<div className='aliases__accounts mb-4'>
|
||||||
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} aliases={aliases} />)}
|
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} aliases={aliases} />)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -48,8 +48,9 @@ const DomainBlocks: React.FC = () => {
|
||||||
onLoadMore={() => handleLoadMore(dispatch)}
|
onLoadMore={() => handleLoadMore(dispatch)}
|
||||||
hasMore={hasMore}
|
hasMore={hasMore}
|
||||||
emptyMessage={emptyMessage}
|
emptyMessage={emptyMessage}
|
||||||
|
className='divide-y divide-gray-200 dark:divide-gray-800'
|
||||||
>
|
>
|
||||||
{domains.map((domain) =>
|
{['gab.com', 'gab.ai'].map((domain) =>
|
||||||
<Domain key={domain} domain={domain} />,
|
<Domain key={domain} domain={domain} />,
|
||||||
)}
|
)}
|
||||||
</ScrollableList>
|
</ScrollableList>
|
||||||
|
|
|
||||||
|
|
@ -402,7 +402,7 @@ const Thread: React.FC<IThread> = (props) => {
|
||||||
offset: -80,
|
offset: -80,
|
||||||
});
|
});
|
||||||
|
|
||||||
setImmediate(() => statusRef.current?.querySelector<HTMLDivElement>('.detailed-status')?.focus());
|
setImmediate(() => statusRef.current?.querySelector<HTMLDivElement>('.detailed-actualStatus')?.focus());
|
||||||
}, [props.params.statusId, status?.id, ancestorsIds.size, isLoaded]);
|
}, [props.params.statusId, status?.id, ancestorsIds.size, isLoaded]);
|
||||||
|
|
||||||
const handleRefresh = () => {
|
const handleRefresh = () => {
|
||||||
|
|
@ -456,11 +456,11 @@ const Thread: React.FC<IThread> = (props) => {
|
||||||
const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
|
const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
|
||||||
|
|
||||||
const focusedStatus = (
|
const focusedStatus = (
|
||||||
<div className={classNames('thread__detailed-status', { 'pb-4': hasDescendants })} key={status.id}>
|
<div className={classNames({ 'pb-4': hasDescendants })} key={status.id}>
|
||||||
<HotKeys handlers={handlers}>
|
<HotKeys handlers={handlers}>
|
||||||
<div
|
<div
|
||||||
ref={statusRef}
|
ref={statusRef}
|
||||||
className='detailed-status__wrapper focusable relative'
|
className='focusable relative'
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
// FIXME: no "reblogged by" text is added for the screen reader
|
// FIXME: no "reblogged by" text is added for the screen reader
|
||||||
aria-label={textForScreenReader(intl, status)}
|
aria-label={textForScreenReader(intl, status)}
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ const BundleModalError: React.FC<IBundleModalError> = ({ onRetry, onClose }) =>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
onClick={onClose}
|
||||||
className='error-modal__nav onboarding-modal__skip'
|
className='error-modal__nav'
|
||||||
>
|
>
|
||||||
{intl.formatMessage(messages.close)}
|
{intl.formatMessage(messages.close)}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ const ModalLoading = () => (
|
||||||
</div>
|
</div>
|
||||||
<div className='error-modal__footer'>
|
<div className='error-modal__footer'>
|
||||||
<div>
|
<div>
|
||||||
<button className='error-modal__nav onboarding-modal__skip' />
|
<button className='error-modal__nav' />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
|
||||||
|
|
||||||
import { openModal } from 'soapbox/actions/modals';
|
import { openModal } from 'soapbox/actions/modals';
|
||||||
import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
|
import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
|
||||||
import { Spinner, Widget } from 'soapbox/components/ui';
|
import { Spinner, Text, Widget } from 'soapbox/components/ui';
|
||||||
import { useAppSelector } from 'soapbox/hooks';
|
import { useAppSelector } from 'soapbox/hooks';
|
||||||
import { getAccountGallery } from 'soapbox/selectors';
|
import { getAccountGallery } from 'soapbox/selectors';
|
||||||
|
|
||||||
|
|
@ -52,7 +52,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
|
||||||
|
|
||||||
if (!nineAttachments.isEmpty()) {
|
if (!nineAttachments.isEmpty()) {
|
||||||
return (
|
return (
|
||||||
<div className='media-panel__list'>
|
<div className='flex flex-wrap'>
|
||||||
{nineAttachments.map((attachment, _index) => (
|
{nineAttachments.map((attachment, _index) => (
|
||||||
<MediaItem
|
<MediaItem
|
||||||
key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
|
key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
|
||||||
|
|
@ -65,9 +65,9 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<div className='media-panel__empty'>
|
<Text size='sm' theme='muted'>
|
||||||
<FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
|
<FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
|
||||||
</div>
|
</Text>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -75,7 +75,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
|
||||||
return (
|
return (
|
||||||
<Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
|
<Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
|
||||||
{account && (
|
{account && (
|
||||||
<div className='media-panel__content'>
|
<div className='w-full py-2'>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : (
|
) : (
|
||||||
|
|
|
||||||
|
|
@ -29,15 +29,6 @@
|
||||||
border-bottom: 1px solid var(--brand-color--med);
|
border-bottom: 1px solid var(--brand-color--med);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.compact {
|
|
||||||
padding: 0;
|
|
||||||
border-bottom: 0;
|
|
||||||
|
|
||||||
.account__avatar-wrapper {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__display-name {
|
.account__display-name {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -50,13 +41,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__note {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: var(--primary-text-color--faint);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__wrapper {
|
.account__wrapper {
|
||||||
|
|
@ -69,30 +53,6 @@
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__avatar {
|
|
||||||
@include avatar-radius;
|
|
||||||
position: relative;
|
|
||||||
background-color: var(--brand-color--faint);
|
|
||||||
|
|
||||||
&-inline {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-composite {
|
|
||||||
@include avatar-radius;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
@include avatar-radius;
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a .account__avatar {
|
a .account__avatar {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -136,16 +96,6 @@ a .account__avatar {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.account-authorize {
|
|
||||||
padding: 14px 10px;
|
|
||||||
|
|
||||||
.detailed-status__display-name {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-authorize__avatar {
|
.account-authorize__avatar {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
@ -230,35 +180,6 @@ a .account__avatar {
|
||||||
left: -26px;
|
left: -26px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailed-status__display-avatar {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__display-name {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.relationship-tag {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
margin-left: 4px;
|
|
||||||
display: block;
|
|
||||||
vertical-align: top;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 500;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
opacity: 0.7;
|
|
||||||
white-space: nowrap;
|
|
||||||
transition: 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.account__joined-at {
|
.account__joined-at {
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,6 @@
|
||||||
@import 'rtl';
|
@import 'rtl';
|
||||||
@import 'accessibility';
|
@import 'accessibility';
|
||||||
@import 'dyslexic';
|
@import 'dyslexic';
|
||||||
@import 'demetricator';
|
|
||||||
@import 'chats';
|
@import 'chats';
|
||||||
@import 'navigation';
|
@import 'navigation';
|
||||||
@import 'placeholder';
|
@import 'placeholder';
|
||||||
|
|
@ -46,8 +45,6 @@
|
||||||
@import 'components/search';
|
@import 'components/search';
|
||||||
@import 'components/react-toggle';
|
@import 'components/react-toggle';
|
||||||
@import 'components/still-image';
|
@import 'components/still-image';
|
||||||
@import 'components/profile-media-panel';
|
|
||||||
@import 'components/profile-info-panel';
|
|
||||||
@import 'components/spoiler-button';
|
@import 'components/spoiler-button';
|
||||||
@import 'components/video-player';
|
@import 'components/video-player';
|
||||||
@import 'components/audio-player';
|
@import 'components/audio-player';
|
||||||
|
|
|
||||||
|
|
@ -18,10 +18,6 @@
|
||||||
.search--account {
|
.search--account {
|
||||||
border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
||||||
input.search__input {
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
|
|
@ -69,17 +65,6 @@
|
||||||
transform: translateY(2px);
|
transform: translateY(2px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-with-badge__badge {
|
|
||||||
position: static;
|
|
||||||
pointer-events: none;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 7px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
|
|
@ -238,13 +223,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-with-badge__badge {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: auto;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chat-box {
|
.chat-box {
|
||||||
|
|
@ -335,16 +313,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatroom__back {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: var(--accent-color--faint);
|
|
||||||
|
|
||||||
.column-back-button {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat {
|
.chat {
|
||||||
&__attachment-icon {
|
&__attachment-icon {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,4 @@
|
||||||
.account__header__subscribe {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
right: max(10px, env(safe-area-inset-right));
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
.subscription-button {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
opacity: 0.7;
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.button-active) i.fa {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__header__content {
|
.account__header__content {
|
||||||
color: var(--primary-text-color--faint);
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,3 @@
|
||||||
.columns-area {
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-start;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&__panels {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&__pane {
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding-top: 15px;
|
|
||||||
|
|
||||||
&--start {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__inner {
|
|
||||||
width: 265px;
|
|
||||||
pointer-events: auto;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
padding: 0 20px;
|
|
||||||
|
|
||||||
@media screen and (max-width: 580px) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 896px) {
|
|
||||||
margin: 0 20px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
|
|
@ -59,10 +9,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 631px) {
|
@media screen and (min-width: 631px) {
|
||||||
.columns-area {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
@ -77,154 +23,6 @@
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.columns-area > div {
|
|
||||||
.column {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.columns-area {
|
|
||||||
display: block;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-top: 15px;
|
|
||||||
|
|
||||||
@media screen and (max-width: 580px) {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search__input {
|
|
||||||
line-height: 18px;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 15px;
|
|
||||||
padding-right: 30px;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: var(--foreground-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search__icon .fa {
|
|
||||||
top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 580px) {
|
|
||||||
.timeline-compose-block {
|
|
||||||
border-radius: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 630px) {
|
|
||||||
.detailed-status {
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
.media-gallery,
|
|
||||||
.video-player {
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.compose-form {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
padding: 15px 15px 15px (48px + 15px * 2);
|
|
||||||
min-height: 48px + 2px;
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
left: 15px;
|
|
||||||
top: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__prepend {
|
|
||||||
margin-left: 48px + 15px * 2;
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__prepend-icon-wrapper {
|
|
||||||
left: -32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-gallery,
|
|
||||||
.video-player {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.account {
|
|
||||||
padding: 15px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification {
|
|
||||||
&__message {
|
|
||||||
margin-left: 48px + 15px * 2;
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__favourite-icon-wrapper {
|
|
||||||
left: -32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account {
|
|
||||||
padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account__avatar-wrapper {
|
|
||||||
margin-left: 17px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// This controls where the left column breaks.
|
|
||||||
@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
|
|
||||||
.columns-area__panels__pane--left {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
|
|
||||||
.columns-area__panels__pane--right {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-back-button {
|
|
||||||
background: var(--accent-color--faint);
|
|
||||||
color: var(--highlight-text-color);
|
|
||||||
cursor: pointer;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: inherit;
|
|
||||||
border: 0;
|
|
||||||
text-align: unset;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 0;
|
|
||||||
z-index: 3;
|
|
||||||
outline: 0;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-link {
|
.column-link {
|
||||||
|
|
@ -289,24 +87,6 @@
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.columns-area .column {
|
|
||||||
@include standard-panel;
|
|
||||||
|
|
||||||
&--transparent {
|
|
||||||
background: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 580px) {
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
.material-status__status {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-header__wrapper {
|
.column-header__wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
|
@ -611,10 +391,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-link--transparent .icon-with-badge__badge {
|
|
||||||
border-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.column__switch .audio-toggle {
|
.column__switch .audio-toggle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
|
|
@ -663,79 +439,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-title {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
fill: var(--primary-text-color);
|
|
||||||
width: 50px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--primary-text-color--faint);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 40px;
|
|
||||||
padding-top: 40px;
|
|
||||||
|
|
||||||
&__background {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: 220px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column-list {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&__empty-message {
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.follow_subhead {
|
|
||||||
margin: 50px 0;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pull to refresh
|
|
||||||
.columns-area .column {
|
|
||||||
.ptr,
|
|
||||||
.ptr__children {
|
|
||||||
background: var(--foreground-color);
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
|
|
||||||
@media screen and (max-width: 580px) {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--transparent {
|
|
||||||
.ptr,
|
|
||||||
.ptr__children {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,4 @@
|
||||||
.compose-form {
|
.compose-form {
|
||||||
&__sensitive-button {
|
|
||||||
padding: 10px;
|
|
||||||
padding-top: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
&.active { color: var(--highlight-text-color); }
|
|
||||||
input[type=checkbox] { display: none; }
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid var(--brand-color);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
margin-right: 10px;
|
|
||||||
top: -1px;
|
|
||||||
border-radius: 4px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: var(--highlight-text-color);
|
|
||||||
background: var(--highlight-text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__warning {
|
&__warning {
|
||||||
@apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
|
@apply text-xs mb-2.5 px-2.5 py-2 shadow-md rounded bg-accent-300 text-white;
|
||||||
|
|
||||||
|
|
@ -145,24 +117,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} // end .compose-form .compose-form__modifiers
|
} // end .compose-form .compose-form__modifiers
|
||||||
|
|
||||||
&__publish {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
min-width: 0;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
|
|
||||||
.compose-form__publish-button-wrapper {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__counter {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
align-self: center;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
} // end .compose-form
|
} // end .compose-form
|
||||||
|
|
||||||
.privacy-dropdown__dropdown {
|
.privacy-dropdown__dropdown {
|
||||||
|
|
|
||||||
|
|
@ -1,96 +1,3 @@
|
||||||
.detailed-status {
|
|
||||||
// padding: 14px 10px;
|
|
||||||
|
|
||||||
&--flex {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
|
|
||||||
.status__content {
|
|
||||||
flex: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__content {
|
|
||||||
font-size: 19px;
|
|
||||||
line-height: 24px;
|
|
||||||
|
|
||||||
.emojione {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin: -1px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--big {
|
|
||||||
img.emojione {
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-player,
|
|
||||||
.audio-player {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__timestamp {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
stroke-width: 1.3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__display-name {
|
|
||||||
color: var(--primary-text-color--faint);
|
|
||||||
display: flex;
|
|
||||||
line-height: 24px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
strong,
|
|
||||||
span {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
span.hover-ref-wrapper {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.display-name__account {
|
|
||||||
display: block;
|
|
||||||
margin-top: -5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__display-avatar {
|
|
||||||
float: left;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thread {
|
.thread {
|
||||||
@apply bg-white dark:bg-primary-900 p-4 shadow-xl dark:shadow-none sm:p-6 sm:rounded-xl;
|
@apply bg-white dark:bg-primary-900 p-4 shadow-xl dark:shadow-none sm:p-6 sm:rounded-xl;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
.status__display-name,
|
|
||||||
.detailed-status__display-name,
|
|
||||||
.account__display-name {
|
.account__display-name {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__display-name,
|
|
||||||
.account__display-name {
|
.account__display-name {
|
||||||
strong {
|
strong {
|
||||||
@apply text-gray-800 dark:text-gray-200;
|
@apply text-gray-800 dark:text-gray-200;
|
||||||
|
|
@ -17,8 +14,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__display-name,
|
|
||||||
.detailed-status__display-name,
|
|
||||||
a.account__display-name {
|
a.account__display-name {
|
||||||
&:hover strong {
|
&:hover strong {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
|
|
|
||||||
|
|
@ -86,11 +86,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailed-status__wrapper .emoji-react-selector {
|
|
||||||
bottom: 40px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status .emoji-react-selector {
|
.status .emoji-react-selector {
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
left: -20px;
|
left: -20px;
|
||||||
|
|
|
||||||
|
|
@ -92,8 +92,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__wrapper,
|
.status__wrapper {
|
||||||
.detailed-status__wrapper {
|
|
||||||
.media-gallery__item-thumbnail.letterboxed {
|
.media-gallery__item-thumbnail.letterboxed {
|
||||||
&,
|
&,
|
||||||
.still-image {
|
.still-image {
|
||||||
|
|
|
||||||
|
|
@ -6,18 +6,6 @@
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-modal {
|
|
||||||
max-width: 100vw;
|
|
||||||
max-height: 100vh;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-modal {
|
|
||||||
.video-player video {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal {
|
.media-modal {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -176,7 +164,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.onboarding-modal,
|
|
||||||
.error-modal {
|
.error-modal {
|
||||||
background: var(--background-color);
|
background: var(--background-color);
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
|
|
@ -229,7 +216,6 @@
|
||||||
min-width: 33px;
|
min-width: 33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.onboarding-modal__nav,
|
|
||||||
.error-modal__nav {
|
.error-modal__nav {
|
||||||
color: var(--highlight-text-color);
|
color: var(--highlight-text-color);
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -266,12 +252,9 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 480px;
|
|
||||||
max-width: 90vw;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid var(--background-color);
|
border: 1px solid var(--background-color);
|
||||||
color: var(--primary-text-color--faint);
|
color: var(--primary-text-color--faint);
|
||||||
background: var(--foreground-color);
|
|
||||||
|
|
||||||
.status__display-name {
|
.status__display-name {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.profile-info-panel-content__deactivated {
|
|
||||||
color: var(--primary-text-color--faint);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
.media-panel {
|
|
||||||
&__content {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__empty {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--primary-text-color--faint);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -6,8 +6,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__wrapper,
|
.status__wrapper {
|
||||||
.detailed-status {
|
|
||||||
.reply-mentions {
|
.reply-mentions {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
input.search__input {
|
|
||||||
@include search-input;
|
|
||||||
display: block;
|
|
||||||
padding: 7px 30px 6px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search__icon {
|
.search__icon {
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -55,52 +49,6 @@ input.search__input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-header {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&__text-container {
|
|
||||||
display: none;
|
|
||||||
padding: 25px 0;
|
|
||||||
background-color: var(--accent-color--med);
|
|
||||||
|
|
||||||
@media (min-width: 896px) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title-text {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
font-size: 27px;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 32px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding-left: 20px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__type-filters-tabs {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
@media screen and (max-width: 895px) {
|
|
||||||
max-width: 580px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 896px) and (max-width: 1190px) {
|
|
||||||
&__title-text,
|
|
||||||
&__type-filters-tabs {
|
|
||||||
max-width: 900px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
.search {
|
.search {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
|
|
@ -108,12 +56,6 @@ input.search__input {
|
||||||
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
input.search__input {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 12px 36px 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search__icon .svg-icon {
|
.search__icon .svg-icon {
|
||||||
right: 24px;
|
right: 24px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,14 +6,6 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 40;
|
z-index: 40;
|
||||||
|
|
||||||
&--minified {
|
|
||||||
display: block;
|
|
||||||
left: 4px;
|
|
||||||
top: 4px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--hidden {
|
&--hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -218,21 +218,6 @@ a.status-card {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 630px) {
|
|
||||||
.columns-area .material-status .status {
|
|
||||||
padding: 15px;
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-thumbs {
|
.attachment-thumbs {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,3 @@
|
||||||
.video-error-cover {
|
|
||||||
align-items: center;
|
|
||||||
background: var(--background-color);
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player {
|
|
||||||
background: var(--background-color);
|
|
||||||
box-sizing: border-box;
|
|
||||||
cursor: default; /* May not be needed */
|
|
||||||
margin-top: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player-video {
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player-expand,
|
|
||||||
.status__video-player-mute {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
opacity: 0.8;
|
|
||||||
position: absolute;
|
|
||||||
right: 4px;
|
|
||||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player-spoiler {
|
|
||||||
display: none;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
left: 4px;
|
|
||||||
position: absolute;
|
|
||||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
|
||||||
top: 4px;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
&.status__video-player-spoiler--visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player-expand {
|
|
||||||
bottom: 4px;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status__video-player-mute {
|
|
||||||
top: 4px;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed,
|
.detailed,
|
||||||
.fullscreen {
|
.fullscreen {
|
||||||
.video-player__volume__current,
|
.video-player__volume__current,
|
||||||
|
|
@ -423,14 +357,3 @@
|
||||||
border: 0;
|
border: 0;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-spoiler-video-play-icon {
|
|
||||||
border-radius: 100px;
|
|
||||||
color: var(--primary-text-color--faint);
|
|
||||||
font-size: 36px;
|
|
||||||
left: 50%;
|
|
||||||
padding: 5px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
body.demetricator {
|
|
||||||
.icon-with-badge__badge {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -586,38 +586,6 @@ code {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.showable-password {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
input {
|
|
||||||
padding-right: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
@apply text-black dark:text-white;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 38px;
|
|
||||||
width: 36px;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
.svg-icon {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-icon {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.simple_form {
|
.simple_form {
|
||||||
|
|
@ -660,14 +628,6 @@ code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.columns-area {
|
|
||||||
form.simple_form--public {
|
|
||||||
@include standard-panel;
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 60px 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha {
|
.captcha {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
|
||||||
|
|
@ -13,11 +13,6 @@ body.rtl {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search__input {
|
|
||||||
padding-right: 10px;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search__icon .fa {
|
.search__icon .fa {
|
||||||
right: auto;
|
right: auto;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
|
|
@ -69,16 +64,6 @@ body.rtl {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailed-status__display-name .display-name {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detailed-status__display-avatar {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 10px;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa-ul {
|
.fa-ul {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-left: 2.14285714em;
|
margin-left: 2.14285714em;
|
||||||
|
|
@ -134,13 +119,6 @@ body.rtl {
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.columns-area > div {
|
|
||||||
.column {
|
|
||||||
padding-left: 5px;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.public-layout {
|
.public-layout {
|
||||||
|
|
|
||||||
|
|
@ -151,30 +151,6 @@
|
||||||
|
|
||||||
.ellipsis::after { content: "…"; }
|
.ellipsis::after { content: "…"; }
|
||||||
|
|
||||||
.timeline-compose-block {
|
|
||||||
@include standard-panel;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: 20px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
.compose-form {
|
|
||||||
flex: 1 1;
|
|
||||||
padding: 0 0 0 20px !important;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
@media (max-width: 405px) {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__avatar {
|
|
||||||
display: block;
|
|
||||||
border-radius: 50%;
|
|
||||||
@media (max-width: 405px) { display: none; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-reduce-motion .spoiler-input {
|
.no-reduce-motion .spoiler-input {
|
||||||
transition: height 0.4s ease, opacity 0.4s ease;
|
transition: height 0.4s ease, opacity 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|
@ -193,33 +169,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.domain {
|
|
||||||
padding: 10px;
|
|
||||||
border-bottom: 1px solid var(--brand-color--med);
|
|
||||||
|
|
||||||
.domain__domain-name {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
display: block;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__buttons .svg-icon {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article:last-child > .domain {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.domain__wrapper {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-loader {
|
.image-loader {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -253,7 +202,6 @@ article:last-child > .domain {
|
||||||
|
|
||||||
.react-swipeable-view-container {
|
.react-swipeable-view-container {
|
||||||
&,
|
&,
|
||||||
.columns-area,
|
|
||||||
.column {
|
.column {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -320,26 +268,6 @@ article:last-child > .domain {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-with-badge__badge {
|
|
||||||
@include font-size(14);
|
|
||||||
@include line-height(14);
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
left: -10px;
|
|
||||||
top: 3px;
|
|
||||||
min-width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
padding: 1px 3px 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
background: var(--accent-color);
|
|
||||||
|
|
||||||
@media screen and (max-width: 895px) {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.slist {
|
.slist {
|
||||||
&--flex {
|
&--flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -589,12 +517,6 @@ article:last-child > .domain {
|
||||||
100% { opacity: 1; }
|
100% { opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__top + .page__columns .columns-area {
|
|
||||||
@media screen and (max-width: 580px) {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-muted {
|
.text-muted {
|
||||||
color: var(--gray-500);
|
color: var(--gray-500);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue