Merge branch 'cleanup-styles' into 'develop'
Remove unused styles, also fix #1180 Closes #1180 See merge request soapbox-pub/soapbox!1911
This commit is contained in:
marcin mikołajczak
commit
2cc1007e56
30 changed files with 46 additions and 987 deletions
|
|
@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
|
|||
|
||||
import { unblockDomain } from 'soapbox/actions/domain-blocks';
|
||||
|
||||
import IconButton from './icon-button';
|
||||
import { HStack, IconButton, Text } from './ui';
|
||||
|
||||
const messages = defineMessages({
|
||||
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
|
||||
|
|
@ -34,17 +34,12 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='domain'>
|
||||
<div className='domain__wrapper'>
|
||||
<span className='domain__domain-name'>
|
||||
<strong>{domain}</strong>
|
||||
</span>
|
||||
|
||||
<div className='domain__buttons'>
|
||||
<IconButton active src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HStack alignItems='center' justifyContent='between' space={1} className='p-2'>
|
||||
<Text tag='span'>
|
||||
{domain}
|
||||
</Text>
|
||||
<IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
|
||||
</HStack>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
import AvatarOverlay from 'soapbox/components/avatar-overlay';
|
||||
import DisplayName from 'soapbox/components/display-name';
|
||||
import Account from 'soapbox/components/account';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { HStack, Text } from 'soapbox/components/ui';
|
||||
|
||||
import type { Account as AccountEntity } from 'soapbox/types/entities';
|
||||
|
||||
|
|
@ -13,22 +12,30 @@ interface IMovedNote {
|
|||
to: AccountEntity,
|
||||
}
|
||||
|
||||
const MovedNote: React.FC<IMovedNote> = ({ from, to }) => {
|
||||
const displayNameHtml = { __html: from.display_name_html };
|
||||
const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
|
||||
<div className='account__moved-note'>
|
||||
<HStack className='mb-2' alignItems='center' space={1.5}>
|
||||
<Icon
|
||||
src={require('@tabler/icons/briefcase.svg')}
|
||||
className='text-primary-600 dark:text-primary-400 flex-none'
|
||||
/>
|
||||
|
||||
return (
|
||||
<div className='account__moved-note'>
|
||||
<div className='account__moved-note__message'>
|
||||
<div className='account__moved-note__icon-wrapper'><Icon src={require('feather-icons/dist/icons/briefcase.svg')} className='account__moved-note__icon' fixedWidth /></div>
|
||||
<FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
|
||||
<div className='truncate'>
|
||||
<Text theme='muted' size='sm' truncate>
|
||||
<FormattedMessage
|
||||
id='notification.move'
|
||||
defaultMessage='{name} moved to {targetName}'
|
||||
values={{
|
||||
name: <span dangerouslySetInnerHTML={{ __html: from.display_name_html }} />,
|
||||
targetName: to.acct,
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</div>
|
||||
</HStack>
|
||||
|
||||
<NavLink to={`/@${to.acct}`} className='detailed-status__display-name'>
|
||||
<div className='detailed-status__display-avatar'><AvatarOverlay account={to} friend={from} /></div>
|
||||
<DisplayName account={to} />
|
||||
</NavLink>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<Account account={to} withRelationship={false} />
|
||||
</div>
|
||||
);
|
||||
|
||||
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.' />
|
||||
</div>
|
||||
) : (
|
||||
<div className='aliases__accounts'>
|
||||
<div className='aliases__accounts mb-4'>
|
||||
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} aliases={aliases} />)}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -48,8 +48,9 @@ const DomainBlocks: React.FC = () => {
|
|||
onLoadMore={() => handleLoadMore(dispatch)}
|
||||
hasMore={hasMore}
|
||||
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} />,
|
||||
)}
|
||||
</ScrollableList>
|
||||
|
|
|
|||
|
|
@ -402,7 +402,7 @@ const Thread: React.FC<IThread> = (props) => {
|
|||
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]);
|
||||
|
||||
const handleRefresh = () => {
|
||||
|
|
@ -456,11 +456,11 @@ const Thread: React.FC<IThread> = (props) => {
|
|||
const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
|
||||
|
||||
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}>
|
||||
<div
|
||||
ref={statusRef}
|
||||
className='detailed-status__wrapper focusable relative'
|
||||
className='focusable relative'
|
||||
tabIndex={0}
|
||||
// FIXME: no "reblogged by" text is added for the screen reader
|
||||
aria-label={textForScreenReader(intl, status)}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const BundleModalError: React.FC<IBundleModalError> = ({ onRetry, onClose }) =>
|
|||
<div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className='error-modal__nav onboarding-modal__skip'
|
||||
className='error-modal__nav'
|
||||
>
|
||||
{intl.formatMessage(messages.close)}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const ModalLoading = () => (
|
|||
</div>
|
||||
<div className='error-modal__footer'>
|
||||
<div>
|
||||
<button className='error-modal__nav onboarding-modal__skip' />
|
||||
<button className='error-modal__nav' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
|
|||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
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 { getAccountGallery } from 'soapbox/selectors';
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
|
|||
|
||||
if (!nineAttachments.isEmpty()) {
|
||||
return (
|
||||
<div className='media-panel__list'>
|
||||
<div className='flex flex-wrap'>
|
||||
{nineAttachments.map((attachment, _index) => (
|
||||
<MediaItem
|
||||
key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
|
||||
|
|
@ -65,9 +65,9 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
|
|||
);
|
||||
} else {
|
||||
return (
|
||||
<div className='media-panel__empty'>
|
||||
<Text size='sm' theme='muted'>
|
||||
<FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
|
||||
</div>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -75,7 +75,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
|
|||
return (
|
||||
<Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
|
||||
{account && (
|
||||
<div className='media-panel__content'>
|
||||
<div className='w-full py-2'>
|
||||
{loading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -29,15 +29,6 @@
|
|||
border-bottom: 1px solid var(--brand-color--med);
|
||||
}
|
||||
|
||||
&.compact {
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
|
||||
.account__avatar-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account__display-name {
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
|
|
@ -50,13 +41,6 @@
|
|||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__note {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--primary-text-color--faint);
|
||||
}
|
||||
}
|
||||
|
||||
.account__wrapper {
|
||||
|
|
@ -69,30 +53,6 @@
|
|||
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 {
|
||||
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 {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
|
|
@ -230,35 +180,6 @@ a .account__avatar {
|
|||
left: -26px;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
@import 'rtl';
|
||||
@import 'accessibility';
|
||||
@import 'dyslexic';
|
||||
@import 'demetricator';
|
||||
@import 'chats';
|
||||
@import 'navigation';
|
||||
@import 'placeholder';
|
||||
|
|
@ -46,8 +45,6 @@
|
|||
@import 'components/search';
|
||||
@import 'components/react-toggle';
|
||||
@import 'components/still-image';
|
||||
@import 'components/profile-media-panel';
|
||||
@import 'components/profile-info-panel';
|
||||
@import 'components/spoiler-button';
|
||||
@import 'components/video-player';
|
||||
@import 'components/audio-player';
|
||||
|
|
|
|||
|
|
@ -18,10 +18,6 @@
|
|||
.search--account {
|
||||
border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
||||
padding: 5px;
|
||||
|
||||
input.search__input {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
|
|
@ -69,17 +65,6 @@
|
|||
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 {
|
||||
|
|
@ -238,13 +223,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-with-badge__badge {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
|
|
@ -335,16 +313,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.chatroom__back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--accent-color--faint);
|
||||
|
||||
.column-back-button {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.chat {
|
||||
&__attachment-icon {
|
||||
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 {
|
||||
color: var(--primary-text-color--faint);
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
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 {
|
||||
width: 350px;
|
||||
|
|
@ -59,10 +9,6 @@
|
|||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.columns-area {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 0 0 auto;
|
||||
padding: 10px;
|
||||
|
|
@ -77,154 +23,6 @@
|
|||
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 {
|
||||
|
|
@ -289,24 +87,6 @@
|
|||
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 {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -611,10 +391,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.column-link--transparent .icon-with-badge__badge {
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
|
||||
.column__switch .audio-toggle {
|
||||
position: absolute;
|
||||
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 {
|
||||
&__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 {
|
||||
@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
|
||||
|
||||
&__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
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.status__display-name,
|
||||
.account__display-name {
|
||||
strong {
|
||||
@apply text-gray-800 dark:text-gray-200;
|
||||
|
|
@ -17,8 +14,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status__display-name,
|
||||
.detailed-status__display-name,
|
||||
a.account__display-name {
|
||||
&:hover strong {
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -86,11 +86,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.detailed-status__wrapper .emoji-react-selector {
|
||||
bottom: 40px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.status .emoji-react-selector {
|
||||
bottom: 100%;
|
||||
left: -20px;
|
||||
|
|
|
|||
|
|
@ -92,8 +92,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.status__wrapper,
|
||||
.detailed-status__wrapper {
|
||||
.status__wrapper {
|
||||
.media-gallery__item-thumbnail.letterboxed {
|
||||
&,
|
||||
.still-image {
|
||||
|
|
|
|||
|
|
@ -6,18 +6,6 @@
|
|||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.video-modal {
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-modal {
|
||||
.video-player video {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -176,7 +164,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.onboarding-modal,
|
||||
.error-modal {
|
||||
background: var(--background-color);
|
||||
color: var(--primary-text-color);
|
||||
|
|
@ -229,7 +216,6 @@
|
|||
min-width: 33px;
|
||||
}
|
||||
|
||||
.onboarding-modal__nav,
|
||||
.error-modal__nav {
|
||||
color: var(--highlight-text-color);
|
||||
border: 0;
|
||||
|
|
@ -266,12 +252,9 @@
|
|||
position: relative;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
width: 480px;
|
||||
max-width: 90vw;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--background-color);
|
||||
color: var(--primary-text-color--faint);
|
||||
background: var(--foreground-color);
|
||||
|
||||
.status__display-name {
|
||||
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,
|
||||
.detailed-status {
|
||||
.status__wrapper {
|
||||
.reply-mentions {
|
||||
display: block;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
input.search__input {
|
||||
@include search-input;
|
||||
display: block;
|
||||
padding: 7px 30px 6px 10px;
|
||||
}
|
||||
|
||||
.search__icon {
|
||||
&::-moz-focus-inner {
|
||||
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 {
|
||||
.search {
|
||||
padding: 10px 15px;
|
||||
|
|
@ -108,12 +56,6 @@ input.search__input {
|
|||
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 {
|
||||
right: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,6 @@
|
|||
position: absolute;
|
||||
z-index: 40;
|
||||
|
||||
&--minified {
|
||||
display: block;
|
||||
left: 4px;
|
||||
top: 4px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
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 {
|
||||
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,
|
||||
.fullscreen {
|
||||
.video-player__volume__current,
|
||||
|
|
@ -423,14 +357,3 @@
|
|||
border: 0;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -660,14 +628,6 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
form.simple_form--public {
|
||||
@include standard-panel;
|
||||
margin-top: 20px;
|
||||
padding: 60px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.captcha {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
|
|
@ -13,11 +13,6 @@ body.rtl {
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.search__input {
|
||||
padding-right: 10px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.search__icon .fa {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
|
|
@ -69,16 +64,6 @@ body.rtl {
|
|||
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 {
|
||||
margin-left: 0;
|
||||
margin-left: 2.14285714em;
|
||||
|
|
@ -134,13 +119,6 @@ body.rtl {
|
|||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area > div {
|
||||
.column {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-layout {
|
||||
|
|
|
|||
|
|
@ -151,30 +151,6 @@
|
|||
|
||||
.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 {
|
||||
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 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
@ -253,7 +202,6 @@ article:last-child > .domain {
|
|||
|
||||
.react-swipeable-view-container {
|
||||
&,
|
||||
.columns-area,
|
||||
.column {
|
||||
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 {
|
||||
&--flex {
|
||||
display: flex;
|
||||
|
|
@ -589,12 +517,6 @@ article:last-child > .domain {
|
|||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.page__top + .page__columns .columns-area {
|
||||
@media screen and (max-width: 580px) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--gray-500);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue