Compare commits
17 Commits
new-css-setup
...
next
| Author | SHA1 | Date | |
|---|---|---|---|
 Zoë Bijl
|
60731df277 | ||
|
tobi
|
ac7354ca62 | ||
|
Zoë Bijl
|
6e2caa1c2c | ||
|
kipvandenbos
|
5447f63a3c | ||
|
tobi
|
f5a55a64df | ||
|
Zoë Bijl
|
b976e9438f | ||
|
Zoë Bijl
|
d03bfe2ab8 | ||
|
Annika Backstrom
|
9e1c6c3646 | ||
|
Zoë Bijl
|
4b4b4b9d38 | ||
|
Zoë Bijl
|
7f073ccd59 | ||
|
Zoë Bijl
|
02c368b22a | ||
|
Zoë Bijl
|
39720bf7d2 | ||
|
Zoë Bijl
|
2dc019f1e9 | ||
|
Zoë Bijl
|
25af845912 | ||
|
prinlu
|
59c8cb987f | ||
|
Zoë Bijl
|
39b0552b6a | ||
|
tobi
|
075b46d050 |
@@ -0,0 +1,24 @@
|
||||
# https://woodpecker-ci.org/docs/usage/workflow-syntax#when---global-workflow-conditions
|
||||
when:
|
||||
- event: push
|
||||
branch: next
|
||||
|
||||
# https://goreleaser.com/ci/woodpecker/
|
||||
# https://woodpecker-ci.org/docs/usage/workflow-syntax#clone
|
||||
clone:
|
||||
git:
|
||||
image: woodpeckerci/plugin-git
|
||||
settings:
|
||||
tags: true
|
||||
|
||||
# https://woodpecker-ci.org/plugins/docker-buildx
|
||||
steps:
|
||||
publish:
|
||||
image: woodpeckerci/plugin-docker-buildx:5.2.2
|
||||
settings:
|
||||
pull_image: true
|
||||
username: gotosocial
|
||||
password:
|
||||
from_secret: gts_docker_password
|
||||
repo: superseriousbusiness/masto-fe-standalone
|
||||
tag: next
|
||||
+14
-2
@@ -11,19 +11,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
- Added documentation for `yarn dev` (#75)
|
||||
- Added an .editorconfig (#78)
|
||||
- Added a changelog basaed on “Keep a Changelog” (#80)
|
||||
- Added a CHANGELOG.md based on “Keep a Changelog” (#80)
|
||||
|
||||
### Changed
|
||||
|
||||
- Preserve ‘mastodon-settings’ in localStorage (#66)
|
||||
- Redesigned the login page (#76)
|
||||
- Changed all icons with the Phosphor icon set (#77)
|
||||
- Changed all icons to the Phosphor icon set (#77)
|
||||
- Changed AUTHORS.md to reflect fork contributors (#89)
|
||||
|
||||
### Fixed
|
||||
|
||||
- Updated caniuse-lite browserlist (#82)
|
||||
- Fixed various linter issues (#85)
|
||||
- Fixed various CSS issues (#100)
|
||||
- Updated Prettier to 3.6.2 (#86)
|
||||
- Updated Yarn to 4.10.3 (#90)
|
||||
- Updated Webpack to 5.102.1 (#83)
|
||||
- Updated ESlint to 9.37.0 (#88)
|
||||
- Fixed an issue where media items wouldn’t show correctly (#109)
|
||||
|
||||
### Removed
|
||||
|
||||
- Removed FontAwesome (#99)
|
||||
- Removed unused CSS files (#99)
|
||||
- Removed various unused assets
|
||||
|
||||
## [0.5.0] - 2025-07-14
|
||||
|
||||
|
||||
+3
-1
@@ -22,9 +22,11 @@ RUN yarn && yarn build:production
|
||||
### RUNTIME IMAGE ###
|
||||
FROM nginx:alpine AS runtime
|
||||
|
||||
# Ensure deps up to date.
|
||||
RUN apk upgrade --update --no-cache
|
||||
|
||||
# Copy bigger nested stuff.
|
||||
COPY --from=builder /build/public/packs/js/flavours/glitch /usr/share/nginx/html/packs/js/flavours/glitch
|
||||
COPY --from=builder /build/public/packs/js/flavours/vanilla /usr/share/nginx/html/packs/js/flavours/vanilla
|
||||
|
||||
# Copy remaining files.
|
||||
COPY --from=builder /build/public /usr/share/nginx/html/
|
||||
|
||||
@@ -28,7 +28,8 @@ export const Avatar: React.FC<Props> = ({
|
||||
...styleFromParent,
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
backgroundSize: `${size}px ${size}px`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
};
|
||||
|
||||
if (account) {
|
||||
|
||||
@@ -32,7 +32,7 @@ export default class ColumnBackButton extends PureComponent {
|
||||
|
||||
const component = (
|
||||
<button onClick={this.handleClick} className='column-back-button'>
|
||||
<Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
|
||||
<Icon id='arrow-left' className='column-back-button__icon' />
|
||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -27,7 +27,7 @@ export default class ColumnBackButtonSlim extends PureComponent {
|
||||
return (
|
||||
<div className='column-back-button--slim'>
|
||||
<div role='button' tabIndex={0} onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
|
||||
<Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
|
||||
<Icon id='arrow-left' className='column-back-button__icon' />
|
||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -133,7 +133,7 @@ class ColumnHeader extends PureComponent {
|
||||
if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
|
||||
backButton = (
|
||||
<button onClick={this.handleBackClick} className='column-header__back-button'>
|
||||
<Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
|
||||
<Icon id='arrow-left' className='column-back-button__icon' />
|
||||
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
|
||||
</button>
|
||||
);
|
||||
@@ -176,7 +176,7 @@ class ColumnHeader extends PureComponent {
|
||||
<h1 className={buttonClassName}>
|
||||
{hasTitle && (
|
||||
<button onClick={this.handleTitleClick}>
|
||||
<Icon id={icon} fixedWidth className='column-header__icon' />
|
||||
<Icon id={icon} className='column-header__icon' />
|
||||
{title}
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -5,17 +5,10 @@ import classNames from "classnames";
|
||||
interface Props extends React.HTMLAttributes<HTMLImageElement> {
|
||||
id: string,
|
||||
className?: string,
|
||||
fixedWidth?: boolean,
|
||||
children?: never,
|
||||
}
|
||||
|
||||
export const Icon: React.FC<Props> = ({
|
||||
id,
|
||||
className,
|
||||
fixedWidth,
|
||||
title,
|
||||
...other
|
||||
}) => (
|
||||
export const Icon: React.FC<Props> = ({ id, className, title, ...other }) => (
|
||||
<svg className={classNames("gts-icon", className)} {...other}>
|
||||
{title && <title>{title}</title>}
|
||||
<use href={`/icons.svg#${id}`} />
|
||||
|
||||
@@ -16,11 +16,11 @@ export const IconWithBadge: React.FC<Props> = ({
|
||||
issueBadge,
|
||||
className,
|
||||
}) => (
|
||||
<div className='gts-icon-with-badge'>
|
||||
<Icon id={id} fixedWidth className={className} />
|
||||
<div className="gts-icon-with-badge">
|
||||
<Icon id={id} className={className} />
|
||||
{count > 0 && (
|
||||
<span className='gts-icon-with-badge__badge'>{formatNumber(count)}</span>
|
||||
<span className="gts-icon-with-badge__badge">{formatNumber(count)}</span>
|
||||
)}
|
||||
{issueBadge && <div className='gts-icon-with-badge__issue-badge' />}
|
||||
{issueBadge && <div className="gts-icon-with-badge__issue-badge" />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -329,7 +329,6 @@ class StatusContent extends PureComponent {
|
||||
mediaIcons.forEach((mediaIcon, idx) => {
|
||||
toggleText.push(
|
||||
<Icon
|
||||
fixedWidth
|
||||
className='status__content__spoiler-icon'
|
||||
id={mediaIcon}
|
||||
aria-hidden='true'
|
||||
@@ -354,16 +353,12 @@ class StatusContent extends PureComponent {
|
||||
|
||||
return (
|
||||
<div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
|
||||
<p
|
||||
style={{ marginBottom: hidden && status.get("mentions").isEmpty() ? "0px" : null }}
|
||||
>
|
||||
<span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
|
||||
{" "}
|
||||
<button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
|
||||
<Icon id={hidden ? "eye-closed" : "eye"} />
|
||||
{toggleText}
|
||||
</button>
|
||||
</p>
|
||||
<span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
|
||||
{" "}
|
||||
<button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
|
||||
<Icon id={hidden ? "eye-closed" : "eye"} />
|
||||
{toggleText}
|
||||
</button>
|
||||
|
||||
{mentionsPlaceholder}
|
||||
|
||||
|
||||
@@ -86,7 +86,6 @@ class StatusIcons extends PureComponent {
|
||||
renderIcon (mediaIcon) {
|
||||
return (
|
||||
<Icon
|
||||
fixedWidth
|
||||
className='status__media-icon'
|
||||
key={`media-icon--${mediaIcon}`}
|
||||
id={mediaIcon}
|
||||
@@ -113,7 +112,6 @@ class StatusIcons extends PureComponent {
|
||||
{settings.get("reply") && status.get("in_reply_to_id", null) !== null ? (
|
||||
<Icon
|
||||
className='status__reply-icon'
|
||||
fixedWidth
|
||||
id='arrow-bend-double-up-left'
|
||||
aria-hidden='true'
|
||||
title={intl.formatMessage(messages.inReplyTo)}
|
||||
@@ -121,7 +119,6 @@ class StatusIcons extends PureComponent {
|
||||
) : null}
|
||||
{settings.get("local_only") && status.get("local_only") &&
|
||||
<Icon
|
||||
fixedWidth
|
||||
id='house-line'
|
||||
aria-hidden='true'
|
||||
title={intl.formatMessage(messages.localOnly)}
|
||||
|
||||
@@ -36,7 +36,6 @@ class VisibilityIcon extends ImmutablePureComponent {
|
||||
|
||||
const icon = (<Icon
|
||||
className='status__visibility-icon'
|
||||
fixedWidth
|
||||
id={visibilityIcon}
|
||||
title={label}
|
||||
aria-hidden='true'
|
||||
|
||||
@@ -72,7 +72,7 @@ class Section extends PureComponent {
|
||||
return (
|
||||
<div className={classNames("about__section", { active: !collapsed })}>
|
||||
<div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}>
|
||||
<Icon id={collapsed ? "caret-right" : "caret-down"} fixedWidth /> {title}
|
||||
<Icon id={collapsed ? "caret-right" : "caret-down"} /> {title}
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
|
||||
@@ -28,7 +28,7 @@ class ActionBar extends PureComponent {
|
||||
return (
|
||||
<div>
|
||||
<div className='account__disclaimer'>
|
||||
<Icon id='info' fixedWidth />
|
||||
<Icon id='info' />
|
||||
<FormattedMessage
|
||||
id='account.suspended_disclaimer_full'
|
||||
defaultMessage='This user has been suspended by a moderator.'
|
||||
@@ -43,7 +43,7 @@ class ActionBar extends PureComponent {
|
||||
if (account.get("acct") !== account.get("username")) {
|
||||
extraInfo = (
|
||||
<div className='account__disclaimer'>
|
||||
<Icon id='info' fixedWidth />
|
||||
<Icon id='info' />
|
||||
<FormattedMessage
|
||||
id='account.disclaimer_full'
|
||||
defaultMessage="Information below may reflect the user's profile incompletely."
|
||||
|
||||
@@ -22,12 +22,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
|
||||
|
||||
<div className='follow-request-banner__action'>
|
||||
<button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
|
||||
<Icon id='check' fixedWidth />
|
||||
<Icon id='check' />
|
||||
<FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
|
||||
</button>
|
||||
|
||||
<button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
|
||||
<Icon id='x' fixedWidth />
|
||||
<Icon id='x' />
|
||||
<FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -37,7 +37,7 @@ export default class MovedNote extends ImmutablePureComponent {
|
||||
return (
|
||||
<div className='account__moved-note'>
|
||||
<div className='account__moved-note__message'>
|
||||
<div className='account__moved-note__icon-wrapper'><Icon id='signpost' className='account__moved-note__icon' fixedWidth /></div>
|
||||
<div className='account__moved-note__icon-wrapper'><Icon id='signpost' className='account__moved-note__icon' /></div>
|
||||
<FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -564,8 +564,8 @@ class Audio extends PureComponent {
|
||||
<div className='video-player__controls active'>
|
||||
<div className='video-player__buttons-bar'>
|
||||
<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' onClick={this.togglePlay}><Icon id={paused ? "play" : "pause"} fixedWidth /></button>
|
||||
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth /></button>
|
||||
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? "play" : "pause"} /></button>
|
||||
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? "speaker-slash" : "speaker-high"} /></button>
|
||||
|
||||
<div className={classNames("video-player__volume", { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
|
||||
<div className='video-player__volume__current' style={{ width: `${muted ? 0 : volume * 100}%`, backgroundColor: this._getAccentColor() }} />
|
||||
@@ -585,9 +585,9 @@ class Audio extends PureComponent {
|
||||
</div>
|
||||
|
||||
<div className='video-player__buttons right'>
|
||||
{!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' fixedWidth /></button>}
|
||||
{!editable && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash' /></button>}
|
||||
<a title={intl.formatMessage(messages.download)} aria-label={intl.formatMessage(messages.download)} className='video-player__download__icon player-button' href={this.props.src} download>
|
||||
<Icon id={"file-arrow-down"} fixedWidth />
|
||||
<Icon id={"file-arrow-down"} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -155,7 +155,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
|
||||
if (!contents) {
|
||||
contents = (
|
||||
<>
|
||||
{icon && <Icon className='icon' fixedWidth id={icon} />}
|
||||
{icon && <Icon className='icon' id={icon} />}
|
||||
|
||||
<div className='privacy-dropdown__option__content'>
|
||||
<strong>{text}</strong>
|
||||
|
||||
@@ -393,7 +393,6 @@ class EmojiPickerDropdown extends PureComponent {
|
||||
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
|
||||
<button ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} onClick={this.onToggle} onKeyDown={this.onToggle}>
|
||||
{button || <Icon
|
||||
fixedWidth
|
||||
id='smiley'
|
||||
aria-hidden='true'
|
||||
className={classNames("emojione", { "pulse-loading": active && loading })}
|
||||
|
||||
@@ -80,7 +80,7 @@ class Header extends ImmutablePureComponent {
|
||||
title={intl.formatMessage(messages.start)}
|
||||
to='/getting-started'
|
||||
className='drawer__tab'
|
||||
><Icon id='asterisk' /></Link>
|
||||
><Icon id='gts-simple' /></Link>
|
||||
{renderForColumn("HOME", (
|
||||
<Link
|
||||
aria-label={intl.formatMessage(messages.home_timeline)}
|
||||
|
||||
@@ -62,9 +62,10 @@ class Publisher extends ImmutablePureComponent {
|
||||
} else if (privacy === "private" || privacy === "direct") {
|
||||
const iconId = privacyIcons[privacy];
|
||||
publishText = (
|
||||
<span>
|
||||
<Icon id={iconId} /> {intl.formatMessage(messages.publish)}
|
||||
</span>
|
||||
<>
|
||||
<Icon id={iconId} />
|
||||
<span>{intl.formatMessage(messages.publish)}</span>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
publishText = privacy !== "unlisted" ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
|
||||
@@ -80,26 +81,22 @@ class Publisher extends ImmutablePureComponent {
|
||||
return (
|
||||
<div className={computedClass}>
|
||||
{sideArm && !isEditing && sideArm !== "none" ? (
|
||||
<div className='compose-form__publish-button-wrapper'>
|
||||
<Button
|
||||
className='side_arm'
|
||||
disabled={disabled}
|
||||
onClick={onSecondarySubmit}
|
||||
style={{ padding: null }}
|
||||
text={<Icon id={privacyIcons[sideArm]} />}
|
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className='compose-form__publish-button-wrapper'>
|
||||
<Button
|
||||
className='primary'
|
||||
text={publishText}
|
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
|
||||
onClick={this.handleSubmit}
|
||||
className='side_arm'
|
||||
disabled={disabled}
|
||||
onClick={onSecondarySubmit}
|
||||
style={{ padding: null }}
|
||||
text={<Icon id={privacyIcons[sideArm]} />}
|
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<Button
|
||||
className='primary'
|
||||
text={publishText}
|
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
|
||||
onClick={this.handleSubmit}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
|
||||
if (results.get("accounts") && results.get("accounts").size > 0) {
|
||||
accounts = (
|
||||
<SearchSection title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
|
||||
<SearchSection title={<><Icon id='users' /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
|
||||
{withoutLastResult(results.get("accounts")).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
|
||||
{(results.get("accounts").size > INITIAL_PAGE_LIMIT && results.get("accounts").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
|
||||
</SearchSection>
|
||||
@@ -52,7 +52,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
|
||||
if (results.get("hashtags") && results.get("hashtags").size > 0) {
|
||||
hashtags = (
|
||||
<SearchSection title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
|
||||
<SearchSection title={<><Icon id='tag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
|
||||
{withoutLastResult(results.get("hashtags")).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
|
||||
{(results.get("hashtags").size > INITIAL_PAGE_LIMIT && results.get("hashtags").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
|
||||
</SearchSection>
|
||||
@@ -61,7 +61,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
|
||||
if (results.get("statuses") && results.get("statuses").size > 0) {
|
||||
statuses = (
|
||||
<SearchSection title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
|
||||
<SearchSection title={<><Icon id='chat-circle-dots' /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
|
||||
{withoutLastResult(results.get("statuses")).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
|
||||
{(results.get("statuses").size > INITIAL_PAGE_LIMIT && results.get("statuses").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
|
||||
</SearchSection>
|
||||
@@ -71,7 +71,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
return (
|
||||
<div className='drawer--results'>
|
||||
<header className='search-results__header'>
|
||||
<Icon id='magnifying-glass' fixedWidth />
|
||||
<Icon id='magnifying-glass' />
|
||||
<FormattedMessage id='explore.search_results' defaultMessage='Search results' />
|
||||
</header>
|
||||
|
||||
|
||||
@@ -46,7 +46,6 @@ class TextareaIcons extends ImmutablePureComponent {
|
||||
title={intl.formatMessage(message)}
|
||||
>
|
||||
<Icon
|
||||
fixedWidth
|
||||
id={icon}
|
||||
/>
|
||||
</span>
|
||||
|
||||
@@ -165,19 +165,19 @@ class Results extends PureComponent {
|
||||
filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? (
|
||||
<>
|
||||
{accounts.size > 0 && (
|
||||
<SearchSection key='accounts' title={<><Icon id='users' fixedWidth /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
|
||||
<SearchSection key='accounts' title={<><Icon id='users' /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
|
||||
{accounts.take(INITIAL_DISPLAY).map(id => <Account key={id} id={id} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
|
||||
{hashtags.size > 0 && (
|
||||
<SearchSection key='hashtags' title={<><Icon id='tag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
|
||||
<SearchSection key='hashtags' title={<><Icon id='tag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
|
||||
{hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
|
||||
{statuses.size > 0 && (
|
||||
<SearchSection key='statuses' title={<><Icon id='chat-circle-dots' fixedWidth /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
|
||||
<SearchSection key='statuses' title={<><Icon id='chat-circle-dots' /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
|
||||
{statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
|
||||
</SearchSection>
|
||||
)}
|
||||
|
||||
@@ -78,7 +78,7 @@ class SelectFilter extends PureComponent {
|
||||
renderCreateNew (name) {
|
||||
return (
|
||||
<div key='add-new-filter' role='button' tabIndex={0} className='language-dropdown__dropdown__results__item' onClick={this.handleNewFilterClick} onKeyDown={this.handleKeyDown}>
|
||||
<Icon id='plus' fixedWidth /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
|
||||
<Icon id='plus' /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@ class List extends ImmutablePureComponent {
|
||||
<div className='list'>
|
||||
<div className='list__wrapper'>
|
||||
<div className='list__display-name'>
|
||||
<Icon id='dot' className='column-link__icon' fixedWidth />
|
||||
<Icon id='dot' className='column-link__icon' />
|
||||
{list.get("title")}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@ export default class LocalSettingsPage extends PureComponent {
|
||||
active,
|
||||
}, className);
|
||||
|
||||
const iconElem = icon ? <Icon fixedWidth id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
|
||||
const iconElem = icon ? <Icon id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
|
||||
@@ -95,7 +95,7 @@ export default class AdminReport extends ImmutablePureComponent {
|
||||
<div className={classNames("notification notification-admin-report focusable", { unread })} tabIndex={0}>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__favourite-icon-wrapper'>
|
||||
<Icon id='flag' fixedWidth />
|
||||
<Icon id='flag' />
|
||||
</div>
|
||||
|
||||
<span title={notification.get("created_at")}>
|
||||
|
||||
@@ -86,7 +86,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
|
||||
<div className={classNames("notification notification-admin-sign-up focusable", { unread })} tabIndex={0}>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__favourite-icon-wrapper'>
|
||||
<Icon fixedWidth id='user-plus' />
|
||||
<Icon id='user-plus' />
|
||||
</div>
|
||||
|
||||
<FormattedMessage
|
||||
|
||||
@@ -66,42 +66,42 @@ class FilterBar extends PureComponent {
|
||||
onClick={this.onClick("mention")}
|
||||
title={intl.formatMessage(tooltips.mentions)}
|
||||
>
|
||||
<Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} fixedWidth />
|
||||
<Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "favourite" ? "active" : ""}
|
||||
onClick={this.onClick("favourite")}
|
||||
title={intl.formatMessage(tooltips.favourites)}
|
||||
>
|
||||
<Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} fixedWidth />
|
||||
<Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "reblog" ? "active" : ""}
|
||||
onClick={this.onClick("reblog")}
|
||||
title={intl.formatMessage(tooltips.boosts)}
|
||||
>
|
||||
<Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} fixedWidth />
|
||||
<Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "poll" ? "active" : ""}
|
||||
onClick={this.onClick("poll")}
|
||||
title={intl.formatMessage(tooltips.polls)}
|
||||
>
|
||||
<Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} fixedWidth />
|
||||
<Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "status" ? "active" : ""}
|
||||
onClick={this.onClick("status")}
|
||||
title={intl.formatMessage(tooltips.statuses)}
|
||||
>
|
||||
<Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} fixedWidth />
|
||||
<Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "follow" ? "active" : ""}
|
||||
onClick={this.onClick("follow")}
|
||||
title={intl.formatMessage(tooltips.follows)}
|
||||
>
|
||||
<Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} fixedWidth />
|
||||
<Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -86,7 +86,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
|
||||
<div className={classNames("notification notification-follow focusable", { unread })} tabIndex={0}>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__favourite-icon-wrapper'>
|
||||
<Icon fixedWidth id='user-plus' />
|
||||
<Icon id='user-plus' />
|
||||
</div>
|
||||
|
||||
<FormattedMessage
|
||||
|
||||
@@ -103,7 +103,7 @@ class FollowRequest extends ImmutablePureComponent {
|
||||
<div className={classNames("notification notification-follow-request focusable", { unread })} tabIndex={0}>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__favourite-icon-wrapper'>
|
||||
<Icon id='user' fixedWidth />
|
||||
<Icon id='user' />
|
||||
</div>
|
||||
|
||||
<FormattedMessage
|
||||
|
||||
@@ -24,7 +24,7 @@ export default class ColumnHeader extends PureComponent {
|
||||
let iconElement = "";
|
||||
|
||||
if (icon) {
|
||||
iconElement = <Icon id={icon} fixedWidth className='column-header__icon' />;
|
||||
iconElement = <Icon id={icon} className='column-header__icon' />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Icon } from "flavours/glitch/components/icon";
|
||||
const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => {
|
||||
const className = classNames("column-link", { "column-link--transparent": transparent });
|
||||
const badgeElement = typeof badge !== "undefined" ? <span className='column-link__badge'>{badge}</span> : null;
|
||||
const iconElement = typeof icon === "string" ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
|
||||
const iconElement = typeof icon === "string" ? <Icon id={icon} className='column-link__icon' /> : icon;
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
|
||||
@@ -19,7 +19,7 @@ const Account = connect(state => ({
|
||||
account: state.getIn(["accounts", me]),
|
||||
}))(({ account }) => (
|
||||
<Permalink href={account.get("url")} to={`/@${account.get("acct")}`} title={account.get("acct")}>
|
||||
<Avatar account={account} size={35} />
|
||||
<Avatar account={account} size={34} />
|
||||
</Permalink>
|
||||
));
|
||||
|
||||
@@ -108,8 +108,7 @@ class Header extends PureComponent {
|
||||
return (
|
||||
<div className='ui__header'>
|
||||
<Link to='/' className='ui__header__logo'>
|
||||
<WordmarkLogo />
|
||||
<SymbolLogo />
|
||||
<Icon id='gts-simple' />
|
||||
</Link>
|
||||
|
||||
<div className='ui__header__links'>
|
||||
|
||||
@@ -141,8 +141,8 @@ class MediaModal extends ImmutablePureComponent {
|
||||
|
||||
const index = this.getIndex();
|
||||
|
||||
const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='caret-left' fixedWidth /></button>;
|
||||
const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='caret-right' fixedWidth /></button>;
|
||||
const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='caret-left' /></button>;
|
||||
const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='caret-right' /></button>;
|
||||
|
||||
const content = media.map((image) => {
|
||||
const width = image.getIn(["meta", "original", "width"]) || null;
|
||||
|
||||
@@ -640,11 +640,11 @@ class Video extends PureComponent {
|
||||
<div className='video-player__buttons-bar'>
|
||||
<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' onClick={this.togglePlay} autoFocus={autoFocus}>
|
||||
<Icon id={paused ? "play" : "pause"} fixedWidth />
|
||||
<Icon id={paused ? "play" : "pause"} />
|
||||
</button>
|
||||
|
||||
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}>
|
||||
<Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth />
|
||||
<Icon id={muted ? "speaker-slash" : "speaker-high"} />
|
||||
</button>
|
||||
|
||||
<div className={classNames("video-player__volume", { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>
|
||||
@@ -667,10 +667,10 @@ class Video extends PureComponent {
|
||||
</div>
|
||||
|
||||
<div className='video-player__buttons right'>
|
||||
{(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash-filled' fixedWidth /></button>}
|
||||
{(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='arrows-out-simple' fixedWidth /></button>}
|
||||
{onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='arrows-in-simple' fixedWidth /></button>}
|
||||
<button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "arrows-in-simple" : "frame-corners"} fixedWidth /></button>
|
||||
{(!onCloseVideo && !editable && !fullscreen && !this.props.alwaysVisible) && <button type='button' title={intl.formatMessage(messages.hide)} aria-label={intl.formatMessage(messages.hide)} className='player-button' onClick={this.toggleReveal}><Icon id='eye-slash-filled' /></button>}
|
||||
{(!fullscreen && onOpenVideo) && <button type='button' title={intl.formatMessage(messages.expand)} aria-label={intl.formatMessage(messages.expand)} className='player-button' onClick={this.handleOpenVideo}><Icon id='arrows-out-simple' /></button>}
|
||||
{onCloseVideo && <button type='button' title={intl.formatMessage(messages.close)} aria-label={intl.formatMessage(messages.close)} className='player-button' onClick={this.handleCloseVideo}><Icon id='arrows-in-simple' /></button>}
|
||||
<button type='button' title={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} className='player-button' onClick={this.toggleFullscreen}><Icon id={fullscreen ? "arrows-in-simple" : "frame-corners"} /></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ const initialState = ImmutableMap({
|
||||
shared_state : true,
|
||||
}),
|
||||
collapsed : ImmutableMap({
|
||||
enabled : true,
|
||||
enabled : false,
|
||||
auto : ImmutableMap({
|
||||
all : false,
|
||||
notifications : false,
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
background-size: $size $size;
|
||||
}
|
||||
|
||||
@mixin single-column($media, $parent: '&') {
|
||||
@mixin single-column($media, $parent: "&") {
|
||||
.auto-columns #{$parent} {
|
||||
@media #{$media} {
|
||||
@content;
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin limited-single-column($media, $parent: '&') {
|
||||
@mixin limited-single-column($media, $parent: "&") {
|
||||
.auto-columns #{$parent},
|
||||
.single-column #{$parent} {
|
||||
@media #{$media} {
|
||||
@@ -30,7 +30,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin multi-columns($media, $parent: '&') {
|
||||
@mixin multi-columns($media, $parent: "&") {
|
||||
.auto-columns #{$parent} {
|
||||
@media #{$media} {
|
||||
@content;
|
||||
@@ -43,9 +43,9 @@
|
||||
|
||||
@mixin fullwidth-gallery {
|
||||
&.full-width {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
width: inherit;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
width: calc(100% + 30px);
|
||||
max-width: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
|
||||
'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
|
||||
'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
|
||||
'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;
|
||||
$emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
|
||||
"end" "heavy_check_mark" "heavy_division_sign" "heavy_dollar_sign"
|
||||
"heavy_minus_sign" "heavy_multiplication_x" "heavy_plus_sign" "on"
|
||||
"registered" "soon" "spider" "telephone_receiver" "tm" "top" "wavy_dash" !default;
|
||||
|
||||
%emoji-color-inversion {
|
||||
filter: invert(1);
|
||||
@@ -9,30 +9,28 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
|
||||
|
||||
.emojione {
|
||||
@each $emoji in $emojis-requiring-inversion {
|
||||
&[title=':#{$emoji}:'] {
|
||||
&[title=":#{$emoji}:"] {
|
||||
@extend %emoji-color-inversion;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hicolor-privacy-icons {
|
||||
.status__visibility-icon.fa-globe,
|
||||
.privacy-dropdown__option .fa-globe {
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option) use[href*="planet"] {
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.status__visibility-icon.fa-unlock,
|
||||
.privacy-dropdown__option .fa-unlock {
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option)
|
||||
use[href*="lock-open-simple"] {
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.status__visibility-icon.fa-lock,
|
||||
.privacy-dropdown__option .fa-lock {
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option)
|
||||
use[href*="lock-simple"] {
|
||||
color: #ffa000;
|
||||
}
|
||||
|
||||
.status__visibility-icon.fa-envelope,
|
||||
.privacy-dropdown__option .fa-envelope {
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option) use[href*="#at"] {
|
||||
color: #d32f2f;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use 'sass:math';
|
||||
@use "sass:math";
|
||||
|
||||
$no-columns-breakpoint: 600px;
|
||||
$sidebar-width: 240px;
|
||||
@@ -1456,7 +1456,7 @@ a.sparkline {
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
content: "";
|
||||
width: 50px;
|
||||
height: 21px;
|
||||
position: absolute;
|
||||
@@ -1850,7 +1850,7 @@ a.sparkline {
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
content: "";
|
||||
width: 1px;
|
||||
background: $highlight-text-color;
|
||||
bottom: 0;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@function hex-color($color) {
|
||||
@if type-of($color) == 'color' {
|
||||
@if type-of($color) == "color" {
|
||||
$color: str-slice(ie-hex-str($color), 4);
|
||||
}
|
||||
|
||||
@return '%23' + unquote($color);
|
||||
@return "%23" + unquote($color);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -14,7 +14,7 @@ body {
|
||||
font-weight: 400;
|
||||
color: var(--color-fg);
|
||||
text-rendering: optimizelegibility;
|
||||
font-feature-settings: 'kern';
|
||||
font-feature-settings: "kern";
|
||||
text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
@@ -35,13 +35,13 @@ body {
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
"Segoe UI",
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
"Fira Sans",
|
||||
"Droid Sans",
|
||||
"Helvetica Neue",
|
||||
$font-sans-serif,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
@@ -157,7 +157,7 @@
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
--size-icon: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -195,7 +195,7 @@
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size: 16px;
|
||||
--size-icon: 16px;
|
||||
|
||||
margin-inline-end: 5px;
|
||||
vertical-align: text-bottom;
|
||||
@@ -370,7 +370,7 @@
|
||||
}
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
--size-icon: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -467,12 +467,12 @@
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
background: var(--color-notifications-lines);
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
--size-icon: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -635,7 +635,7 @@
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
--size-icon: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -867,18 +867,13 @@
|
||||
}
|
||||
|
||||
.follow-request-banner .button {
|
||||
--size-icon: 20px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
}
|
||||
|
||||
.account-memorial-banner__message {
|
||||
|
||||
@@ -56,57 +56,6 @@
|
||||
|
||||
$ui-header-height: 55px;
|
||||
|
||||
.ui__header {
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
height: $ui-header-height;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__logo {
|
||||
display: inline-flex;
|
||||
padding: 15px;
|
||||
|
||||
.logo {
|
||||
height: $ui-header-height - 30px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo--wordmark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width >= 320px) {
|
||||
.logo--wordmark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo--icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.button-tertiary {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-bar__wrapper {
|
||||
background: darken($ui-base-color, 8%);
|
||||
position: sticky;
|
||||
@@ -295,7 +244,7 @@ $ui-header-height: 55px;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -13px;
|
||||
inset-inline-start: 0;
|
||||
@@ -335,6 +284,8 @@ $ui-header-height: 55px;
|
||||
.column-header__back-button,
|
||||
.column-header__footer-button,
|
||||
.column-header__setting-btn {
|
||||
--size-icon: 24px;
|
||||
|
||||
display: flex;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
@@ -343,8 +294,6 @@ $ui-header-height: 55px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -355,6 +304,7 @@ $ui-header-height: 55px;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 12px 0 13px 15px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.column-header__buttons {
|
||||
@@ -404,16 +354,14 @@ $ui-header-height: 55px;
|
||||
|
||||
.column-header__footer-button,
|
||||
.column-header__setting-btn {
|
||||
--size-icon: 20px;
|
||||
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
padding: 6px;
|
||||
border-radius: var(--button-border-radius);
|
||||
color: inherit;
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&.active {
|
||||
@@ -735,6 +683,8 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.column-inline-form {
|
||||
--size-icon: 20px;
|
||||
|
||||
padding: 7px 15px;
|
||||
padding-inline-end: 5px;
|
||||
display: flex;
|
||||
@@ -760,10 +710,6 @@ $ui-header-height: 55px;
|
||||
margin: 0 5px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.column-settings__outer {
|
||||
@@ -1054,6 +1000,8 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
--size-icon: 20px;
|
||||
|
||||
float: right;
|
||||
|
||||
.icon-button {
|
||||
@@ -1066,8 +1014,6 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
@include single-column('screen and (max-width: 630px)') {
|
||||
@include single-column("screen and (max-width: 630px)") {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -103,7 +103,7 @@
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -240,11 +240,11 @@
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@include single-column('screen and (max-width: 630px)') {
|
||||
@include single-column("screen and (max-width: 630px)") {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@include limited-single-column('screen and (max-width: 600px)') {
|
||||
@include limited-single-column("screen and (max-width: 600px)") {
|
||||
height: 100px !important; // prevent auto-resize textarea
|
||||
resize: vertical;
|
||||
}
|
||||
@@ -514,7 +514,7 @@
|
||||
}
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
--size-icon: 20px;
|
||||
|
||||
scale: 1.2;
|
||||
}
|
||||
@@ -565,16 +565,14 @@
|
||||
}
|
||||
|
||||
.privacy-dropdown__option {
|
||||
--size-icon: 24px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
color: $inverted-text-color;
|
||||
cursor: pointer;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 24px;
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
flex: 1 1 auto;
|
||||
color: $lighter-text-color;
|
||||
@@ -611,23 +609,22 @@
|
||||
|
||||
.compose-form__publish {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
column-gap: 5px;
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
min-width: 0;
|
||||
|
||||
.compose-form__publish-button-wrapper {
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
button {
|
||||
--size-icon: 18px;
|
||||
|
||||
button {
|
||||
padding: 7px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > .side_arm {
|
||||
width: 36px;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 5px;
|
||||
padding: 8px 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -42,8 +42,8 @@
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -35,8 +35,8 @@ $doodle-background: #d9e1e8;
|
||||
margin-inline-end: 2px;
|
||||
}
|
||||
|
||||
input[type='number'],
|
||||
input[type='text'] {
|
||||
input[type="number"],
|
||||
input[type="text"] {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
|
||||
@@ -16,11 +16,11 @@
|
||||
padding-inline-end: 10px;
|
||||
}
|
||||
|
||||
@include single-column('screen and (max-width: 630px)') {
|
||||
@include single-column("screen and (max-width: 630px)") {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
@include limited-single-column('screen and (max-width: 630px)') {
|
||||
@include limited-single-column("screen and (max-width: 630px)") {
|
||||
&,
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
@@ -34,7 +34,7 @@
|
||||
flex: 1 1 200px;
|
||||
}
|
||||
|
||||
@include single-column('screen and (max-width: 630px)') {
|
||||
@include single-column("screen and (max-width: 630px)") {
|
||||
:root & {
|
||||
// Overrides `.wide` for single-column view
|
||||
flex: auto;
|
||||
@@ -73,6 +73,8 @@
|
||||
}
|
||||
|
||||
.layout-multiple-columns .drawer__tab {
|
||||
--size-icon: 24px;
|
||||
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
@@ -88,8 +90,6 @@
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -109,11 +109,11 @@
|
||||
flex: none;
|
||||
|
||||
@include limited-single-column(
|
||||
'screen and (max-width: #{$no-gap-breakpoint})'
|
||||
"screen and (max-width: #{$no-gap-breakpoint})"
|
||||
) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@include single-column('screen and (max-width: 630px)') {
|
||||
@include single-column("screen and (max-width: 630px)") {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -149,12 +149,10 @@
|
||||
}
|
||||
|
||||
.navigation-bar .compose__action-bar button {
|
||||
--size-icon: 20px;
|
||||
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer--results {
|
||||
@@ -299,7 +297,7 @@
|
||||
.mbstobon-#{$i} .drawer__inner__mastodon {
|
||||
@if $i == 3 {
|
||||
background:
|
||||
url('~flavours/glitch/images/wave-drawer.png')
|
||||
url("~flavours/glitch/images/wave-drawer.png")
|
||||
no-repeat
|
||||
bottom /
|
||||
100%
|
||||
@@ -307,7 +305,7 @@
|
||||
lighten($ui-base-color, 4%);
|
||||
} @else {
|
||||
background:
|
||||
url('~flavours/glitch/images/wave-drawer-glitched.png')
|
||||
url("~flavours/glitch/images/wave-drawer-glitched.png")
|
||||
no-repeat
|
||||
bottom /
|
||||
100%
|
||||
@@ -316,7 +314,7 @@
|
||||
}
|
||||
|
||||
& > .mastodon {
|
||||
background: url('~flavours/glitch/images/mbstobon-ui-#{$i}.png')
|
||||
background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png")
|
||||
no-repeat
|
||||
left
|
||||
bottom /
|
||||
|
||||
@@ -77,8 +77,8 @@
|
||||
color: $inverted-text-color;
|
||||
background: transparent;
|
||||
|
||||
svg {
|
||||
--size: 24px;
|
||||
svg.gts-icon {
|
||||
--size-icon: 24px;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
|
||||
&:hover::before {
|
||||
z-index: 0;
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
@import 'misc';
|
||||
@import 'boost';
|
||||
@import 'accounts';
|
||||
@import 'domains';
|
||||
@import 'status';
|
||||
@import 'modal';
|
||||
@import 'compose_form';
|
||||
@import 'columns';
|
||||
@import 'regeneration_indicator';
|
||||
@import 'directory';
|
||||
@import 'search';
|
||||
@import 'emoji';
|
||||
@import 'doodle';
|
||||
@import 'drawer';
|
||||
@import 'media';
|
||||
@import 'sensitive';
|
||||
@import 'lists';
|
||||
@import 'emoji_picker';
|
||||
@import 'local_settings';
|
||||
@import 'single_column';
|
||||
@import 'announcements';
|
||||
@import 'explore';
|
||||
@import 'scrollbars';
|
||||
@import 'signed_out';
|
||||
@import 'privacy_policy';
|
||||
@import 'about';
|
||||
@import "misc";
|
||||
@import "boost";
|
||||
@import "accounts";
|
||||
@import "domains";
|
||||
@import "status";
|
||||
@import "modal";
|
||||
@import "compose_form";
|
||||
@import "columns";
|
||||
@import "regeneration_indicator";
|
||||
@import "directory";
|
||||
@import "search";
|
||||
@import "emoji";
|
||||
@import "doodle";
|
||||
@import "drawer";
|
||||
@import "media";
|
||||
@import "sensitive";
|
||||
@import "lists";
|
||||
@import "emoji_picker";
|
||||
@import "local_settings";
|
||||
@import "single_column";
|
||||
@import "announcements";
|
||||
@import "explore";
|
||||
@import "scrollbars";
|
||||
@import "signed_out";
|
||||
@import "privacy_policy";
|
||||
@import "about";
|
||||
|
||||
@@ -64,30 +64,7 @@
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.media-gallery {
|
||||
box-sizing: border-box;
|
||||
margin-top: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 64px;
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-rows: 50% 50%;
|
||||
gap: 2px;
|
||||
|
||||
@include fullwidth-gallery;
|
||||
}
|
||||
|
||||
.media-gallery__item {
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
&--tall {
|
||||
grid-row: span 2;
|
||||
}
|
||||
@@ -190,7 +167,7 @@
|
||||
color: rgba($white, 0.7);
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
--size-icon: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -284,11 +261,9 @@
|
||||
padding: 20px 0;
|
||||
|
||||
.icon-button {
|
||||
color: $white;
|
||||
--size-icon: 24px;
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
}
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
@@ -572,14 +547,14 @@
|
||||
}
|
||||
|
||||
&__buttons-bar {
|
||||
--size-icon: 20px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
margin: 0 -5px;
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -671,7 +646,7 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 50px;
|
||||
background: rgba($white, 0.35);
|
||||
border-radius: 4px;
|
||||
@@ -741,7 +716,7 @@
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 100%;
|
||||
background: rgba($white, 0.35);
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -180,7 +180,7 @@
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: darken($action-button-color, 13%);
|
||||
opacity: 0.3;
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -223,7 +223,6 @@
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($lighter-text-color, 7%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@@ -344,7 +343,7 @@ body > [data-popper-placement] {
|
||||
|
||||
.ellipsis {
|
||||
&::after {
|
||||
content: '…';
|
||||
content: "…";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -471,7 +470,7 @@ body > [data-popper-placement] {
|
||||
.image-loader__preview-canvas {
|
||||
max-width: $media-modal-media-max-width;
|
||||
max-height: $media-modal-media-max-height;
|
||||
background: url('~images/void.png') repeat;
|
||||
background: url("~images/void.png") repeat;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -729,7 +728,7 @@ body > [data-popper-placement] {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include multi-columns('screen and (min-width: 631px)') {
|
||||
@include multi-columns("screen and (min-width: 631px)") {
|
||||
background: lighten($ui-base-color, 14%);
|
||||
border-bottom-color: lighten($ui-base-color, 14%);
|
||||
}
|
||||
@@ -1054,7 +1053,7 @@ body > [data-popper-placement] {
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
@include limited-single-column('screen and (max-width: 600px)') {
|
||||
@include limited-single-column("screen and (max-width: 600px)") {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -1150,7 +1149,7 @@ button.icon-button.active i.fa-retweet {
|
||||
padding-top: 20px + 48px;
|
||||
|
||||
.regeneration-indicator__figure {
|
||||
background-image: url('~flavours/glitch/images/elephant_ui_disappointed.svg');
|
||||
background-image: url("~flavours/glitch/images/elephant_ui_disappointed.svg");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1316,6 +1315,8 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.spoiler-button {
|
||||
--size-icon: 18px;
|
||||
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
@@ -1324,8 +1325,6 @@ button.icon-button.active i.fa-retweet {
|
||||
z-index: 100;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 18px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -267,7 +267,7 @@
|
||||
}
|
||||
|
||||
.onboarding-modal__page__wrapper-0 {
|
||||
background: url('~images/elephant_ui_greeting.svg') no-repeat left bottom /
|
||||
background: url("~images/elephant_ui_greeting.svg") no-repeat left bottom /
|
||||
auto 250px;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
@@ -1060,15 +1060,13 @@
|
||||
padding: 15px;
|
||||
|
||||
.report-modal__close {
|
||||
--size-icon: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
inset-inline-end: 10px;
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1204,7 +1202,7 @@
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: url('~images/reticle.png') no-repeat 0 0;
|
||||
background: url("~images/reticle.png") no-repeat 0 0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
|
||||
}
|
||||
|
||||
@@ -87,14 +87,14 @@
|
||||
counter-increment: list-counter;
|
||||
|
||||
&::before {
|
||||
content: counter(list-counter) '.';
|
||||
content: counter(list-counter) ".";
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul > li::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: $darker-text-color;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
.search__icon,
|
||||
.search__icon.gts-icon {
|
||||
--size: 20px;
|
||||
--size-icon: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
@@ -35,6 +35,8 @@
|
||||
}
|
||||
|
||||
.search__button {
|
||||
--size-icon: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
@@ -48,8 +50,6 @@
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -154,13 +154,11 @@
|
||||
|
||||
.search-results__header,
|
||||
.search-results__section__header h3 {
|
||||
--size-icon: 20px;
|
||||
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results__header {
|
||||
|
||||
@@ -277,8 +277,8 @@
|
||||
|
||||
.layout-single-column .ui__header {
|
||||
display: flex;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
.layout-single-column {
|
||||
|
||||
@@ -89,16 +89,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.mention {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: $dark-text-color;
|
||||
}
|
||||
@@ -169,12 +159,8 @@
|
||||
outline: 0;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
||||
&.status.status-direct {
|
||||
background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
|
||||
|
||||
&.muted {
|
||||
background: transparent;
|
||||
}
|
||||
&.status.status-direct.muted {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.detailed-status,
|
||||
@@ -219,7 +205,8 @@
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
background: mix($ui-base-color, $ui-highlight-color, 95%);
|
||||
--color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)};
|
||||
|
||||
border-bottom-color: lighten($ui-base-color, 12%);
|
||||
}
|
||||
|
||||
@@ -277,7 +264,7 @@
|
||||
rgba($base-shadow-color, 0.8)
|
||||
);
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
|
||||
.display-name:hover .display-name__html {
|
||||
@@ -291,7 +278,7 @@
|
||||
padding-top: 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@@ -412,19 +399,11 @@
|
||||
}
|
||||
|
||||
.status__action-bar {
|
||||
--size-icon: 20px;
|
||||
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
|
||||
&.detailed-status__action-bar {
|
||||
svg.gts-icon {
|
||||
--size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status__action-bar-button,
|
||||
@@ -449,9 +428,9 @@
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
padding: 14px 10px;
|
||||
padding: 15px;
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
|
||||
&--flex {
|
||||
display: flex;
|
||||
@@ -582,9 +561,8 @@ a.status__display-name,
|
||||
|
||||
.status__avatar {
|
||||
flex: none;
|
||||
margin-inline-end: 10px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
height: var(--size-avatar);
|
||||
width: var(--size-avatar);
|
||||
}
|
||||
|
||||
.muted {
|
||||
@@ -918,7 +896,7 @@ a.status-card.compact:hover {
|
||||
|
||||
&.unread {
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
@@ -956,7 +934,7 @@ a.status-card.compact:hover {
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px - 4px;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@import 'contrast/variables';
|
||||
@import 'index';
|
||||
@import 'contrast/diff';
|
||||
@import "contrast/variables";
|
||||
@import "index";
|
||||
@import "contrast/diff";
|
||||
|
||||
@@ -309,9 +309,9 @@ code {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
background: url('images/void.png');
|
||||
background: url("images/void.png");
|
||||
|
||||
&[src$='missing.png'] {
|
||||
&[src$="missing.png"] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@@ -404,7 +404,7 @@ code {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
top: 5px;
|
||||
@@ -420,12 +420,12 @@ code {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type='url'],
|
||||
input[type='datetime-local'],
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="url"],
|
||||
input[type="datetime-local"],
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
@@ -463,11 +463,11 @@ code {
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type='datetime-local'] {
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="datetime-local"] {
|
||||
&:focus:invalid:not(:placeholder-shown),
|
||||
&:required:invalid:not(:placeholder-shown) {
|
||||
border-color: lighten($error-red, 12%);
|
||||
@@ -479,11 +479,11 @@ code {
|
||||
color: lighten($error-red, 12%);
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type='datetime-local'],
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="datetime-local"],
|
||||
textarea,
|
||||
select {
|
||||
border-color: lighten($error-red, 12%);
|
||||
@@ -619,7 +619,7 @@ code {
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -1019,7 +1019,7 @@ code {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
input[type="text"] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 10px;
|
||||
@@ -1205,7 +1205,7 @@ code {
|
||||
border-color: $highlight-text-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--drawer-border-radius: 8px;
|
||||
--button-border-radius: 6px;
|
||||
--drawer-border-radius: var(--size-layout-radius);
|
||||
--button-border-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* Icons debug */
|
||||
@@ -13,11 +13,10 @@
|
||||
|
||||
/* Diff */
|
||||
.gts-icon {
|
||||
--size: 1em;
|
||||
|
||||
display: inline-block;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
flex-shrink: 0;
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
}
|
||||
|
||||
.gts-icon-with-badge {
|
||||
@@ -59,7 +58,7 @@
|
||||
.column-header .gts-icon,
|
||||
.column-link .gts-icon,
|
||||
.local-settings__navigation__item .gts-icon {
|
||||
--size: 24px;
|
||||
--size-icon: 24px;
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
@@ -94,12 +93,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.notification__filter-bar svg,
|
||||
.status__info__icons svg {
|
||||
--size: 18px;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
.notification__filter-bar svg.gts-icon,
|
||||
.status__info__icons svg.gts-icon {
|
||||
--size-icon: 18px;
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
@@ -121,16 +117,25 @@
|
||||
}
|
||||
|
||||
.detailed-status__meta svg {
|
||||
--size: 16px;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
--size-icon: 16px;
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper svg {
|
||||
--size: 16px;
|
||||
--size-icon: 16px;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.drawer__pager {
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.drawer__inner {
|
||||
position: relative;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon,
|
||||
.drawer__inner.darker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -6,8 +6,10 @@
|
||||
*/
|
||||
|
||||
/* 🛠️ Config */
|
||||
@import 'colors';
|
||||
@import 'sizes';
|
||||
@import "colors";
|
||||
@import "sizes";
|
||||
|
||||
/* 🧩 Components */
|
||||
@import 'status';
|
||||
@import "media-gallery";
|
||||
@import "status";
|
||||
@import "ui-header";
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
--color-fg: #fff;
|
||||
--color-bg: #191b22;
|
||||
--color-lines: #3d4455;
|
||||
--color-logo: #c76c33;
|
||||
|
||||
/* Accent */
|
||||
--color-accent: #8c8dff;
|
||||
@@ -70,4 +71,5 @@
|
||||
/* Status */
|
||||
--color-status-fg: ;
|
||||
--color-status-bg: #282c37;
|
||||
--color-status-bg--focus: #313543;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
/* 🖼️ Media Gallery */
|
||||
.media-gallery {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: var(--size-ui-gap);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media-gallery:not(.full-width) {
|
||||
border-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
.media-gallery.full-width {
|
||||
margin-inline: -15px;
|
||||
|
||||
/* the `div` is there for specificity */
|
||||
div.media-gallery__item {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-gallery:not(.full-width) .spoiler-button__overlay {
|
||||
border-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
.media-gallery__item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Only one image */
|
||||
.media-gallery__item:nth-child(2):nth-last-child(1) {
|
||||
border-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* First image in a set of two */
|
||||
.media-gallery__item:nth-child(2):nth-last-child(2) {
|
||||
border-top-left-radius: var(--size-ui-radius);
|
||||
border-bottom-left-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* Second image in a set of two */
|
||||
.media-gallery__item:nth-child(3):nth-last-child(1) {
|
||||
border-top-right-radius: var(--size-ui-radius);
|
||||
border-bottom-right-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* First image in a set of at least two */
|
||||
.media-gallery__item:nth-child(2):not(:nth-last-child(1)) {
|
||||
border-top-left-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* Second image in a set of at least two */
|
||||
.media-gallery__item:nth-child(3):not(:nth-last-child(1)) {
|
||||
border-top-right-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* Second to last image in an even set */
|
||||
.media-gallery__item:nth-last-child(2):nth-child(even) {
|
||||
border-bottom-left-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* Last image in an even set */
|
||||
.media-gallery__item:last-child:nth-child(odd) {
|
||||
border-bottom-right-radius: var(--size-ui-radius);
|
||||
}
|
||||
|
||||
/* Last image in an uneven set */
|
||||
.media-gallery__item:last-child:nth-child(even) {
|
||||
grid-column: 1/-1;
|
||||
border-bottom-right-radius: var(--size-ui-radius);
|
||||
border-bottom-left-radius: var(--size-ui-radius);
|
||||
}
|
||||
@@ -1,4 +1,15 @@
|
||||
/* 📏 Sizes */
|
||||
:root {
|
||||
/* Layout: larger elements, mostly containers */
|
||||
--size-layout-gap: 10px;
|
||||
--size-layout-radius: 8px;
|
||||
|
||||
/* UI: smaller elements such as form elements and icons */
|
||||
--size-ui-gap: 5px;
|
||||
--size-ui-radius: 6px;
|
||||
|
||||
/* Components */
|
||||
--size-avatar: 46px;
|
||||
--size-icon: 20px;
|
||||
--size-header-block: #{$ui-header-height};
|
||||
}
|
||||
|
||||
@@ -1,15 +1,50 @@
|
||||
/* 🚥 Status */
|
||||
@import 'status/status-account';
|
||||
@import 'status/status-display-name';
|
||||
@import 'status/status-icons';
|
||||
@import 'status/status-info';
|
||||
@import 'status/status-prepend';
|
||||
@import 'status/status-spoiler';
|
||||
@import "status/status-account";
|
||||
@import "status/status-display-name";
|
||||
@import "status/status-icons";
|
||||
@import "status/status-info";
|
||||
@import "status/status-prepend";
|
||||
@import "status/status-spoiler";
|
||||
|
||||
.status__content {
|
||||
.status {
|
||||
background-color: var(--color-status-bg);
|
||||
|
||||
&.focusable:focus {
|
||||
--color-status-bg: var(--color-status-bg--focus);
|
||||
}
|
||||
}
|
||||
|
||||
.status__content,
|
||||
.detailed-status .status__content {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.status__content p {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.media-gallery {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.status__action-bar :is(a, button) {
|
||||
color: var(--color-secondary-fg);
|
||||
}
|
||||
|
||||
.status .mention {
|
||||
&,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status .mention:is(:focus, :hover) span {
|
||||
text-decoration-color: currentcolor;
|
||||
}
|
||||
|
||||
.status .mention span {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: var(--color-accent-lines);
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
.status__info__account {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 10px;
|
||||
gap: var(--size-layout-gap);
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* 🚥 Status: Display name */
|
||||
.status__display-name {
|
||||
align-self: start;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
color: var(--color-content-fg);
|
||||
font-size: 15px;
|
||||
@@ -12,6 +12,12 @@
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
.display-name__html,
|
||||
.display-name__account {
|
||||
display: block;
|
||||
line-height: max(21px, 1.4em);
|
||||
}
|
||||
|
||||
.display-name__html {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
/* 🚥 Status: Icons */
|
||||
.status__info__icons {
|
||||
--size-icon: 18px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
gap: var(--size-ui-gap);
|
||||
align-items: start;
|
||||
color: var(--color-secondary-fg);
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 18px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
right: calc(100% + 5px);
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
content: '';
|
||||
content: "";
|
||||
background: linear-gradient(90deg, transparent, var(--color-status-bg));
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* 🚥 Status: Info */
|
||||
.status__info {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
gap: var(--size-ui-gap);
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
.notification__message {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
gap: 5px;
|
||||
gap: var(--size-ui-gap);
|
||||
padding: 5px 10px;
|
||||
border: 1px solid var(--color-accent-lines);
|
||||
border-radius: 50px;
|
||||
@@ -19,11 +19,9 @@
|
||||
}
|
||||
|
||||
.status__prepend-icon {
|
||||
--size: 18px;
|
||||
--size-icon: 18px;
|
||||
|
||||
display: block;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.status__prepend-display-name {
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
/* 🚥 Status: Spoiler link */
|
||||
|
||||
.status__content__spoiler,
|
||||
.status__content__spoiler-link {
|
||||
margin-block-start: var(--size-ui-gap);
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
--size-icon: 14px;
|
||||
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-top: 5px;
|
||||
gap: var(--size-ui-gap);
|
||||
padding: 5px 8px;
|
||||
border: 1px solid var(--color-accent-lines);
|
||||
border-radius: 8px;
|
||||
@@ -12,10 +19,6 @@
|
||||
background: var(--color-accent-bg);
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-lines);
|
||||
color: var(--color-fg);
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
/* 🧑💻 UI: Header */
|
||||
.ui__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-inline-start: 7px;
|
||||
height: var(--size-header-block);
|
||||
box-sizing: border-box;
|
||||
|
||||
svg.gts-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.ui__header__logo {
|
||||
--size-icon: 32px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.ui__header__links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-inline: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.button-tertiary {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,28 +1,28 @@
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import 'styles/fonts/roboto';
|
||||
@import 'styles/fonts/roboto-mono';
|
||||
@import "mixins";
|
||||
@import "variables";
|
||||
@import "styles/fonts/roboto";
|
||||
@import "styles/fonts/roboto-mono";
|
||||
|
||||
@import 'reset';
|
||||
@import 'basics';
|
||||
@import 'branding';
|
||||
@import 'containers';
|
||||
@import 'lists';
|
||||
@import 'modal';
|
||||
@import 'widgets';
|
||||
@import 'forms';
|
||||
@import 'accounts';
|
||||
@import 'statuses';
|
||||
@import 'components/index';
|
||||
@import 'polls';
|
||||
@import 'about';
|
||||
@import 'tables';
|
||||
@import 'admin';
|
||||
@import 'accessibility';
|
||||
@import 'rtl';
|
||||
@import 'dashboard';
|
||||
@import 'rich_text';
|
||||
@import "reset";
|
||||
@import "basics";
|
||||
@import "branding";
|
||||
@import "containers";
|
||||
@import "lists";
|
||||
@import "modal";
|
||||
@import "widgets";
|
||||
@import "forms";
|
||||
@import "accounts";
|
||||
@import "statuses";
|
||||
@import "components/index";
|
||||
@import "polls";
|
||||
@import "about";
|
||||
@import "tables";
|
||||
@import "admin";
|
||||
@import "accessibility";
|
||||
@import "rtl";
|
||||
@import "dashboard";
|
||||
@import "rich_text";
|
||||
|
||||
@import 'gts';
|
||||
@import 'gts/config';
|
||||
@import 'tangerine/config';
|
||||
@import "gts";
|
||||
@import "gts/config";
|
||||
@import "tangerine/config";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'styles/fonts/roboto';
|
||||
@import 'reset';
|
||||
@import "styles/fonts/roboto";
|
||||
@import "reset";
|
||||
|
||||
:root {
|
||||
--color-bg: #191b22;
|
||||
@@ -91,7 +91,7 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
input[type="text"] {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'mastodon-light/variables';
|
||||
@import 'index';
|
||||
@import 'mastodon-light/diff';
|
||||
@import 'mastodon-light/colors';
|
||||
@import "mastodon-light/variables";
|
||||
@import "index";
|
||||
@import "mastodon-light/diff";
|
||||
@import "mastodon-light/colors";
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
--color-fg: #000;
|
||||
--color-bg: #eff3f5;
|
||||
--color-lines: #c0cdd9;
|
||||
--color-logo: #df8958;
|
||||
|
||||
/* Accent */
|
||||
--color-accent: #4d4eff;
|
||||
@@ -40,4 +41,5 @@
|
||||
/* Status */
|
||||
--color-status-fg: var(--color-fg);
|
||||
--color-status-bg: #fff;
|
||||
--color-status-bg--focus: hsl(0deg, 0%, 96%);
|
||||
}
|
||||
|
||||
@@ -141,7 +141,7 @@ html {
|
||||
}
|
||||
|
||||
.compose-form__autosuggest-wrapper,
|
||||
.poll__option input[type='text'],
|
||||
.poll__option input[type="text"],
|
||||
.compose-form .spoiler-input__input,
|
||||
.compose-form__poll-wrapper select,
|
||||
.search__input,
|
||||
@@ -495,10 +495,10 @@ html {
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
textarea {
|
||||
&:hover {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
|
||||
@@ -54,4 +54,4 @@ $account-background-color: $white !default;
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
}
|
||||
|
||||
$emojis-requiring-inversion: 'chains';
|
||||
$emojis-requiring-inversion: "chains";
|
||||
|
||||
@@ -76,8 +76,8 @@
|
||||
max-width: calc(100% - 45px - 25px);
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
input[type='checkbox'] {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
input[type="text"] {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
@@ -189,7 +189,8 @@
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
gap: min(0.22em, 4px);
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
color: $dark-text-color;
|
||||
@@ -217,8 +218,8 @@
|
||||
|
||||
.button {
|
||||
height: 36px;
|
||||
margin-inline-end: min(0.22em, 4px);
|
||||
padding: 0 16px;
|
||||
margin-inline-end: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -240,10 +241,10 @@
|
||||
}
|
||||
|
||||
.poll__footer {
|
||||
border-top: 1px solid darken($simple-background-color, 8%);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid darken($simple-background-color, 8%);
|
||||
padding: 10px;
|
||||
|
||||
button,
|
||||
select {
|
||||
@@ -303,10 +304,6 @@
|
||||
padding: 6px 10px;
|
||||
padding-inline-end: 30px;
|
||||
}
|
||||
|
||||
.icon-button.disabled {
|
||||
color: darken($simple-background-color, 14%);
|
||||
}
|
||||
}
|
||||
|
||||
.muted .poll {
|
||||
|
||||
@@ -107,11 +107,11 @@ body.rtl {
|
||||
}
|
||||
|
||||
.fa-chevron-left::before {
|
||||
content: '\F054';
|
||||
content: "\F054";
|
||||
}
|
||||
|
||||
.fa-chevron-right::before {
|
||||
content: '\F053';
|
||||
content: "\F053";
|
||||
}
|
||||
|
||||
.dismissable-banner,
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
}
|
||||
|
||||
.embed {
|
||||
.status__content[data-spoiler='folded'] {
|
||||
.status__content[data-spoiler="folded"] {
|
||||
.e-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
|
||||
/* 🛠️ Config */
|
||||
@import 'keyframes';
|
||||
@import "keyframes";
|
||||
|
||||
/* 🧩 Components */
|
||||
@import 'status-bar';
|
||||
@import "status-bar";
|
||||
|
||||
@@ -83,9 +83,9 @@ $media-modal-media-max-height: 80%;
|
||||
|
||||
$no-gap-breakpoint: 1175px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
$font-sans-serif: "mastodon-font-sans-serif" !default;
|
||||
$font-display: "mastodon-font-display" !default;
|
||||
$font-monospace: "mastodon-font-monospace" !default;
|
||||
|
||||
// Avatar border size (8% default, 100% for rounded avatars)
|
||||
$ui-avatar-border-size: 8%;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use 'sass:math';
|
||||
@use "sass:math";
|
||||
|
||||
.hero-widget {
|
||||
margin-bottom: 10px;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 339 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user