Dome/Masto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[bugfix] further CSS fixes for Phosphor update

Browse Source 
commit 242cfc4b06
Author: Zoë Bijl <code@moiety.me>
Date:   Tue Oct 21 00:22:46 2025 +0200

    [bugfix] tweak display name alignment

commit 23e5d9840f
Author: Zoë Bijl <code@moiety.me>
Date:   Tue Oct 21 00:00:59 2025 +0200

    [bugfix] improve display name alignment

commit 1664835c94
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 17:03:52 2025 +0200

    [feature] add text-decoration to usernames and hashtags

commit d4fdb18549
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 16:38:08 2025 +0200

    [bugfix] correct spacing in status__content__spoiler

commit c19307a115
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 16:28:30 2025 +0200

    [feature] remove giant logo in multi-column view

commit 51e2c6e1c3
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 16:24:52 2025 +0200

    [feature] add gts logo in the multi-column menu

commit edc83b0f54
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 16:23:26 2025 +0200

    [bugfix] fix width of fullwidth media gallery

commit 9923c1b6da
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 15:17:25 2025 +0200

    [chore] remove `fixedWith` from icons

commit 935d6b73ef
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 15:09:43 2025 +0200

    [chore] lint

commit 776f02bd5f
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 15:07:52 2025 +0200

    [bugfix] correctly align multiline column-header button

commit d988d35671
Author: Zoë Bijl <code@moiety.me>
Date:   Mon Oct 20 15:04:35 2025 +0200

    [feat] add new size variables

commit 34bcbb669d
Author: Zoë Bijl <code@moiety.me>
Date:   Sun Oct 19 23:47:20 2025 +0200

    [bugfix] re-enable hicolor privacy icons

commit 97f2cb8f69
Author: Zoë Bijl <code@moiety.me>
Date:   Sun Oct 19 23:26:16 2025 +0200

    [bugfix] correctly align “toot” buttons

commit 52bcd4b6d0
Author: Zoë Bijl <code@moiety.me>
Date:   Thu Oct 16 16:22:44 2025 +0200

    [bugfix] replace `--size` with global `--size-icon`

    BREAKING CHANGE: any user styles that overwrote `--size` in a `,gts-icon` class will need to be updated.

commit 9812a2611f
Author: Zoë Bijl <code@moiety.me>
Date:   Thu Oct 16 15:53:37 2025 +0200

    [bugfix] further tweaks to `.poll__footer` alignment

commit 798d6fbf79
Author: Zoë Bijl <code@moiety.me>
Date:   Thu Oct 16 15:38:45 2025 +0200

    [bugfix] correctly align .poll__footer
This commit is contained in:
Zoë Bijl
2025-10-21 00:31:41 +02:00
parent 9e1c6c3646
commit d03bfe2ab8
57 changed files with 232 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/flavours/glitch/components/column_back_button.jsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default class ColumnBackButton extends PureComponent {
const component = ( const component = (
<button onClick={this.handleClick} className='column-back-button'> <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' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button> </button>
); );
app/javascript/flavours/glitch/components/column_back_button_slim.jsx
+1 -1
View File
@@ -27,7 +27,7 @@ export default class ColumnBackButtonSlim extends PureComponent {
return ( return (
<div className='column-back-button--slim'> <div className='column-back-button--slim'>
<div role='button' tabIndex={0} onClick={this.handleClick} className='column-back-button column-back-button--slim-button'> <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' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div> </div>
</div> </div>
app/javascript/flavours/glitch/components/column_header.jsx
+2 -2
View File
@@ -133,7 +133,7 @@ class ColumnHeader extends PureComponent {
if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) { if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
backButton = ( backButton = (
<button onClick={this.handleBackClick} className='column-header__back-button'> <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' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button> </button>
); );
@@ -176,7 +176,7 @@ class ColumnHeader extends PureComponent {
<h1 className={buttonClassName}> <h1 className={buttonClassName}>
{hasTitle && ( {hasTitle && (
<button onClick={this.handleTitleClick}> <button onClick={this.handleTitleClick}>
<Icon id={icon} fixedWidth className='column-header__icon' /> <Icon id={icon} className='column-header__icon' />
{title} {title}
</button> </button>
)} )}
app/javascript/flavours/glitch/components/icon.tsx
+1 -8
View File
@@ -5,17 +5,10 @@ import classNames from "classnames";
interface Props extends React.HTMLAttributes<HTMLImageElement> { interface Props extends React.HTMLAttributes<HTMLImageElement> {
id: string, id: string,
className?: string, className?: string,
fixedWidth?: boolean,
children?: never, children?: never,
} }
export const Icon: React.FC<Props> = ({ export const Icon: React.FC<Props> = ({ id, className, title, ...other }) => (
id,
className,
fixedWidth,
title,
...other
}) => (
<svg className={classNames("gts-icon", className)} {...other}> <svg className={classNames("gts-icon", className)} {...other}>
{title && <title>{title}</title>} {title && <title>{title}</title>}
<use href={`/icons.svg#${id}`} /> <use href={`/icons.svg#${id}`} />
app/javascript/flavours/glitch/components/icon_with_badge.tsx
+4 -4
View File
@@ -16,11 +16,11 @@ export const IconWithBadge: React.FC<Props> = ({
issueBadge, issueBadge,
className, className,
}) => ( }) => (
<div className='gts-icon-with-badge'> <div className="gts-icon-with-badge">
<Icon id={id} fixedWidth className={className} /> <Icon id={id} className={className} />
{count > 0 && ( {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> </div>
); );
app/javascript/flavours/glitch/components/status_content.jsx
-1
View File
@@ -329,7 +329,6 @@ class StatusContent extends PureComponent {
mediaIcons.forEach((mediaIcon, idx) => { mediaIcons.forEach((mediaIcon, idx) => {
toggleText.push( toggleText.push(
<Icon <Icon
fixedWidth
className='status__content__spoiler-icon' className='status__content__spoiler-icon'
id={mediaIcon} id={mediaIcon}
aria-hidden='true' aria-hidden='true'
app/javascript/flavours/glitch/components/status_icons.jsx
-3
View File
@@ -86,7 +86,6 @@ class StatusIcons extends PureComponent {
renderIcon (mediaIcon) { renderIcon (mediaIcon) {
return ( return (
<Icon <Icon
fixedWidth
className='status__media-icon' className='status__media-icon'
key={`media-icon--${mediaIcon}`} key={`media-icon--${mediaIcon}`}
id={mediaIcon} id={mediaIcon}
@@ -113,7 +112,6 @@ class StatusIcons extends PureComponent {
{settings.get("reply") && status.get("in_reply_to_id", null) !== null ? ( {settings.get("reply") && status.get("in_reply_to_id", null) !== null ? (
<Icon <Icon
className='status__reply-icon' className='status__reply-icon'
fixedWidth
id='arrow-bend-double-up-left' id='arrow-bend-double-up-left'
aria-hidden='true' aria-hidden='true'
title={intl.formatMessage(messages.inReplyTo)} title={intl.formatMessage(messages.inReplyTo)}
@@ -121,7 +119,6 @@ class StatusIcons extends PureComponent {
) : null} ) : null}
{settings.get("local_only") && status.get("local_only") && {settings.get("local_only") && status.get("local_only") &&
<Icon <Icon
fixedWidth
id='house-line' id='house-line'
aria-hidden='true' aria-hidden='true'
title={intl.formatMessage(messages.localOnly)} title={intl.formatMessage(messages.localOnly)}
app/javascript/flavours/glitch/components/status_visibility_icon.jsx
-1
View File
@@ -36,7 +36,6 @@ class VisibilityIcon extends ImmutablePureComponent {
const icon = (<Icon const icon = (<Icon
className='status__visibility-icon' className='status__visibility-icon'
fixedWidth
id={visibilityIcon} id={visibilityIcon}
title={label} title={label}
aria-hidden='true' aria-hidden='true'
app/javascript/flavours/glitch/features/about/index.jsx
+1 -1
View File
@@ -72,7 +72,7 @@ class Section extends PureComponent {
return ( return (
<div className={classNames("about__section", { active: !collapsed })}> <div className={classNames("about__section", { active: !collapsed })}>
<div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}> <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> </div>
{!collapsed && ( {!collapsed && (
app/javascript/flavours/glitch/features/account/components/action_bar.jsx
+2 -2
View File
@@ -28,7 +28,7 @@ class ActionBar extends PureComponent {
return ( return (
<div> <div>
<div className='account__disclaimer'> <div className='account__disclaimer'>
<Icon id='info' fixedWidth /> <Icon id='info' />
<FormattedMessage <FormattedMessage
id='account.suspended_disclaimer_full' id='account.suspended_disclaimer_full'
defaultMessage='This user has been suspended by a moderator.' defaultMessage='This user has been suspended by a moderator.'
@@ -43,7 +43,7 @@ class ActionBar extends PureComponent {
if (account.get("acct") !== account.get("username")) { if (account.get("acct") !== account.get("username")) {
extraInfo = ( extraInfo = (
<div className='account__disclaimer'> <div className='account__disclaimer'>
<Icon id='info' fixedWidth /> <Icon id='info' />
<FormattedMessage <FormattedMessage
id='account.disclaimer_full' id='account.disclaimer_full'
defaultMessage="Information below may reflect the user's profile incompletely." defaultMessage="Information below may reflect the user's profile incompletely."
app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
+2 -2
View File
@@ -22,12 +22,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
<div className='follow-request-banner__action'> <div className='follow-request-banner__action'>
<button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}> <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' /> <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
</button> </button>
<button type='button' className='button button-tertiary button--destructive' onClick={onReject}> <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' /> <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
</button> </button>
</div> </div>
app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
+1 -1
View File
@@ -37,7 +37,7 @@ export default class MovedNote extends ImmutablePureComponent {
return ( return (
<div className='account__moved-note'> <div className='account__moved-note'>
<div className='account__moved-note__message'> <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> }} /> <FormattedMessage id='account.moved_to' defaultMessage='{name} has indicated that their new account is now:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
</div> </div>
app/javascript/flavours/glitch/features/audio/index.jsx
+4 -4
View File
@@ -564,8 +564,8 @@ class Audio extends PureComponent {
<div className='video-player__controls active'> <div className='video-player__controls active'>
<div className='video-player__buttons-bar'> <div className='video-player__buttons-bar'>
<div className='video-player__buttons left'> <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(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"} 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"} /></button>
<div className={classNames("video-player__volume", { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}> <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() }} /> <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>
<div className='video-player__buttons right'> <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> <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> </a>
</div> </div>
</div> </div>
app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
+1 -1
View File
@@ -155,7 +155,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
if (!contents) { if (!contents) {
contents = ( contents = (
<> <>
{icon && <Icon className='icon' fixedWidth id={icon} />} {icon && <Icon className='icon' id={icon} />}
<div className='privacy-dropdown__option__content'> <div className='privacy-dropdown__option__content'>
<strong>{text}</strong> <strong>{text}</strong>
app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.jsx
-1
View File
@@ -393,7 +393,6 @@ class EmojiPickerDropdown extends PureComponent {
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}> <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 ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} onClick={this.onToggle} onKeyDown={this.onToggle}>
{button || <Icon {button || <Icon
fixedWidth
id='smiley' id='smiley'
aria-hidden='true' aria-hidden='true'
className={classNames("emojione", { "pulse-loading": active && loading })} className={classNames("emojione", { "pulse-loading": active && loading })}
app/javascript/flavours/glitch/features/compose/components/header.jsx
+1 -1
View File
@@ -80,7 +80,7 @@ class Header extends ImmutablePureComponent {
title={intl.formatMessage(messages.start)} title={intl.formatMessage(messages.start)}
to='/getting-started' to='/getting-started'
className='drawer__tab' className='drawer__tab'
><Icon id='asterisk' /></Link> ><Icon id='gts-simple' /></Link>
{renderForColumn("HOME", ( {renderForColumn("HOME", (
<Link <Link
aria-label={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}
app/javascript/flavours/glitch/features/compose/components/publisher.jsx
+17 -20
View File
@@ -62,9 +62,10 @@ class Publisher extends ImmutablePureComponent {
} else if (privacy === "private" || privacy === "direct") { } else if (privacy === "private" || privacy === "direct") {
const iconId = privacyIcons[privacy]; const iconId = privacyIcons[privacy];
publishText = ( publishText = (
<span> <>
<Icon id={iconId} /> {intl.formatMessage(messages.publish)} <Icon id={iconId} />
</span> <span>{intl.formatMessage(messages.publish)}</span>
</>
); );
} else { } else {
publishText = privacy !== "unlisted" ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); 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 ( return (
<div className={computedClass}> <div className={computedClass}>
{sideArm && !isEditing && sideArm !== "none" ? ( {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 <Button
className='primary' className='side_arm'
text={publishText}
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
onClick={this.handleSubmit}
disabled={disabled} 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> </div>
); );
} }
app/javascript/flavours/glitch/features/compose/components/search_results.jsx
+4 -4
View File
@@ -43,7 +43,7 @@ class SearchResults extends ImmutablePureComponent {
if (results.get("accounts") && results.get("accounts").size > 0) { if (results.get("accounts") && results.get("accounts").size > 0) {
accounts = ( 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} />)} {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} />} {(results.get("accounts").size > INITIAL_PAGE_LIMIT && results.get("accounts").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreAccounts} />}
</SearchSection> </SearchSection>
@@ -52,7 +52,7 @@ class SearchResults extends ImmutablePureComponent {
if (results.get("hashtags") && results.get("hashtags").size > 0) { if (results.get("hashtags") && results.get("hashtags").size > 0) {
hashtags = ( 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} />)} {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} />} {(results.get("hashtags").size > INITIAL_PAGE_LIMIT && results.get("hashtags").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreHashtags} />}
</SearchSection> </SearchSection>
@@ -61,7 +61,7 @@ class SearchResults extends ImmutablePureComponent {
if (results.get("statuses") && results.get("statuses").size > 0) { if (results.get("statuses") && results.get("statuses").size > 0) {
statuses = ( 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} />)} {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} />} {(results.get("statuses").size > INITIAL_PAGE_LIMIT && results.get("statuses").size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={this.handleLoadMoreStatuses} />}
</SearchSection> </SearchSection>
@@ -71,7 +71,7 @@ class SearchResults extends ImmutablePureComponent {
return ( return (
<div className='drawer--results'> <div className='drawer--results'>
<header className='search-results__header'> <header className='search-results__header'>
<Icon id='magnifying-glass' fixedWidth /> <Icon id='magnifying-glass' />
<FormattedMessage id='explore.search_results' defaultMessage='Search results' /> <FormattedMessage id='explore.search_results' defaultMessage='Search results' />
</header> </header>
app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx
-1
View File
@@ -46,7 +46,6 @@ class TextareaIcons extends ImmutablePureComponent {
title={intl.formatMessage(message)} title={intl.formatMessage(message)}
> >
<Icon <Icon
fixedWidth
id={icon} id={icon}
/> />
</span> </span>
app/javascript/flavours/glitch/features/explore/results.jsx
+3 -3
View File
@@ -165,19 +165,19 @@ class Results extends PureComponent {
filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? ( filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? (
<> <>
{accounts.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} />)} {accounts.take(INITIAL_DISPLAY).map(id => <Account key={id} id={id} />)}
</SearchSection> </SearchSection>
)} )}
{hashtags.size > 0 && ( {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} />)} {hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get("name")} hashtag={hashtag} />)}
</SearchSection> </SearchSection>
)} )}
{statuses.size > 0 && ( {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} />)} {statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
</SearchSection> </SearchSection>
)} )}
app/javascript/flavours/glitch/features/filters/select_filter.jsx
+1 -1
View File
@@ -78,7 +78,7 @@ class SelectFilter extends PureComponent {
renderCreateNew (name) { renderCreateNew (name) {
return ( return (
<div key='add-new-filter' role='button' tabIndex={0} className='language-dropdown__dropdown__results__item' onClick={this.handleNewFilterClick} onKeyDown={this.handleKeyDown}> <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> </div>
); );
} }
app/javascript/flavours/glitch/features/list_adder/components/list.jsx
+1 -1
View File
@@ -55,7 +55,7 @@ class List extends ImmutablePureComponent {
<div className='list'> <div className='list'>
<div className='list__wrapper'> <div className='list__wrapper'>
<div className='list__display-name'> <div className='list__display-name'>
<Icon id='dot' className='column-link__icon' fixedWidth /> <Icon id='dot' className='column-link__icon' />
{list.get("title")} {list.get("title")}
</div> </div>
app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
+1 -1
View File
@@ -45,7 +45,7 @@ export default class LocalSettingsPage extends PureComponent {
active, active,
}, className); }, 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) { if (href) {
return ( return (
app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx
+1 -1
View File
@@ -95,7 +95,7 @@ export default class AdminReport extends ImmutablePureComponent {
<div className={classNames("notification notification-admin-report focusable", { unread })} tabIndex={0}> <div className={classNames("notification notification-admin-report focusable", { unread })} tabIndex={0}>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon id='flag' fixedWidth /> <Icon id='flag' />
</div> </div>
<span title={notification.get("created_at")}> <span title={notification.get("created_at")}>
app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx
+1 -1
View File
@@ -86,7 +86,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
<div className={classNames("notification notification-admin-sign-up focusable", { unread })} tabIndex={0}> <div className={classNames("notification notification-admin-sign-up focusable", { unread })} tabIndex={0}>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon fixedWidth id='user-plus' /> <Icon id='user-plus' />
</div> </div>
<FormattedMessage <FormattedMessage
app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
+6 -6
View File
@@ -66,42 +66,42 @@ class FilterBar extends PureComponent {
onClick={this.onClick("mention")} onClick={this.onClick("mention")}
title={intl.formatMessage(tooltips.mentions)} 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>
<button <button
className={selectedFilter === "favourite" ? "active" : ""} className={selectedFilter === "favourite" ? "active" : ""}
onClick={this.onClick("favourite")} onClick={this.onClick("favourite")}
title={intl.formatMessage(tooltips.favourites)} title={intl.formatMessage(tooltips.favourites)}
> >
<Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} fixedWidth /> <Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} />
</button> </button>
<button <button
className={selectedFilter === "reblog" ? "active" : ""} className={selectedFilter === "reblog" ? "active" : ""}
onClick={this.onClick("reblog")} onClick={this.onClick("reblog")}
title={intl.formatMessage(tooltips.boosts)} 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>
<button <button
className={selectedFilter === "poll" ? "active" : ""} className={selectedFilter === "poll" ? "active" : ""}
onClick={this.onClick("poll")} onClick={this.onClick("poll")}
title={intl.formatMessage(tooltips.polls)} 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>
<button <button
className={selectedFilter === "status" ? "active" : ""} className={selectedFilter === "status" ? "active" : ""}
onClick={this.onClick("status")} onClick={this.onClick("status")}
title={intl.formatMessage(tooltips.statuses)} 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>
<button <button
className={selectedFilter === "follow" ? "active" : ""} className={selectedFilter === "follow" ? "active" : ""}
onClick={this.onClick("follow")} onClick={this.onClick("follow")}
title={intl.formatMessage(tooltips.follows)} 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> </button>
</div> </div>
); );
app/javascript/flavours/glitch/features/notifications/components/follow.jsx
+1 -1
View File
@@ -86,7 +86,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
<div className={classNames("notification notification-follow focusable", { unread })} tabIndex={0}> <div className={classNames("notification notification-follow focusable", { unread })} tabIndex={0}>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon fixedWidth id='user-plus' /> <Icon id='user-plus' />
</div> </div>
<FormattedMessage <FormattedMessage
app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
+1 -1
View File
@@ -103,7 +103,7 @@ class FollowRequest extends ImmutablePureComponent {
<div className={classNames("notification notification-follow-request focusable", { unread })} tabIndex={0}> <div className={classNames("notification notification-follow-request focusable", { unread })} tabIndex={0}>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon id='user' fixedWidth /> <Icon id='user' />
</div> </div>
<FormattedMessage <FormattedMessage
app/javascript/flavours/glitch/features/ui/components/column_header.jsx
+1 -1
View File
@@ -24,7 +24,7 @@ export default class ColumnHeader extends PureComponent {
let iconElement = ""; let iconElement = "";
if (icon) { if (icon) {
iconElement = <Icon id={icon} fixedWidth className='column-header__icon' />; iconElement = <Icon id={icon} className='column-header__icon' />;
} }
return ( return (
app/javascript/flavours/glitch/features/ui/components/column_link.jsx
+1 -1
View File
@@ -8,7 +8,7 @@ import { Icon } from "flavours/glitch/components/icon";
const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => { const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => {
const className = classNames("column-link", { "column-link--transparent": transparent }); const className = classNames("column-link", { "column-link--transparent": transparent });
const badgeElement = typeof badge !== "undefined" ? <span className='column-link__badge'>{badge}</span> : null; 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) { if (href) {
return ( return (
app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
+2 -2
View File
@@ -141,8 +141,8 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex(); 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 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' 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' /></button>;
const content = media.map((image) => { const content = media.map((image) => {
const width = image.getIn(["meta", "original", "width"]) || null; const width = image.getIn(["meta", "original", "width"]) || null;
app/javascript/flavours/glitch/features/video/index.jsx
+6 -6
View File
@@ -640,11 +640,11 @@ class Video extends PureComponent {
<div className='video-player__buttons-bar'> <div className='video-player__buttons-bar'>
<div className='video-player__buttons left'> <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}> <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>
<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}> <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> </button>
<div className={classNames("video-player__volume", { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}> <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>
<div className='video-player__buttons right'> <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>} {(!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' 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' /></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>} {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"} 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"} /></button>
</div> </div>
</div> </div>
</div> </div>
app/javascript/flavours/glitch/styles/_mixins.scss
+3 -3
View File
@@ -43,9 +43,9 @@
@mixin fullwidth-gallery { @mixin fullwidth-gallery {
&.full-width { &.full-width {
margin-left: -10px; margin-left: -15px;
margin-right: -10px; margin-right: -15px;
width: calc(100% + 20px); width: calc(100% + 30px);
max-width: none; max-width: none;
border-radius: 0; border-radius: 0;
} }
app/javascript/flavours/glitch/styles/accessibility.scss
+6 -8
View File
@@ -16,23 +16,21 @@ $emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
} }
.hicolor-privacy-icons { .hicolor-privacy-icons {
.status__visibility-icon.fa-globe, :is(.status__visibility-icon, .privacy-dropdown__option) use[href*="planet"] {
.privacy-dropdown__option .fa-globe {
color: #1976d2; color: #1976d2;
} }
.status__visibility-icon.fa-unlock, :is(.status__visibility-icon, .privacy-dropdown__option)
.privacy-dropdown__option .fa-unlock { use[href*="lock-open-simple"] {
color: #388e3c; color: #388e3c;
} }
.status__visibility-icon.fa-lock, :is(.status__visibility-icon, .privacy-dropdown__option)
.privacy-dropdown__option .fa-lock { use[href*="lock-simple"] {
color: #ffa000; color: #ffa000;
} }
.status__visibility-icon.fa-envelope, :is(.status__visibility-icon, .privacy-dropdown__option) use[href*="#at"] {
.privacy-dropdown__option .fa-envelope {
color: #d32f2f; color: #d32f2f;
} }
} }
app/javascript/flavours/glitch/styles/components/accounts.scss
+7 -12
View File
@@ -157,7 +157,7 @@
} }
.gts-icon { .gts-icon {
--size: 20px; --size-icon: 20px;
display: block; display: block;
} }
@@ -195,7 +195,7 @@
} }
.gts-icon { .gts-icon {
--size: 16px; --size-icon: 16px;
margin-inline-end: 5px; margin-inline-end: 5px;
vertical-align: text-bottom; vertical-align: text-bottom;
@@ -370,7 +370,7 @@
} }
svg.gts-icon { svg.gts-icon {
--size: 20px; --size-icon: 20px;
} }
} }
@@ -472,7 +472,7 @@
} }
svg.gts-icon { svg.gts-icon {
--size: 20px; --size-icon: 20px;
display: block; display: block;
} }
@@ -635,7 +635,7 @@
} }
.gts-icon { .gts-icon {
--size: 24px; --size-icon: 24px;
display: block; display: block;
} }
@@ -867,18 +867,13 @@
} }
.follow-request-banner .button { .follow-request-banner .button {
--size-icon: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
svg.gts-icon {
--size: 20px;
width: var(--size);
height: var(--size);
}
} }
.account-memorial-banner__message { .account-memorial-banner__message {
app/javascript/flavours/glitch/styles/components/columns.scss
+9 -12
View File
@@ -335,6 +335,8 @@ $ui-header-height: 55px;
.column-header__back-button, .column-header__back-button,
.column-header__footer-button, .column-header__footer-button,
.column-header__setting-btn { .column-header__setting-btn {
--size-icon: 24px;
display: flex; display: flex;
border: 0; border: 0;
color: inherit; color: inherit;
@@ -343,8 +345,6 @@ $ui-header-height: 55px;
transition: all 0.3s; transition: all 0.3s;
.gts-icon { .gts-icon {
--size: 24px;
display: block; display: block;
} }
} }
@@ -355,6 +355,7 @@ $ui-header-height: 55px;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
padding: 12px 0 13px 15px; padding: 12px 0 13px 15px;
text-align: start;
} }
.column-header__buttons { .column-header__buttons {
@@ -404,16 +405,14 @@ $ui-header-height: 55px;
.column-header__footer-button, .column-header__footer-button,
.column-header__setting-btn { .column-header__setting-btn {
--size-icon: 20px;
gap: 5px; gap: 5px;
align-items: center; align-items: center;
padding: 6px; padding: 6px;
border-radius: var(--button-border-radius); border-radius: var(--button-border-radius);
color: inherit; color: inherit;
.gts-icon {
--size: 20px;
}
&:focus-visible, &:focus-visible,
&:hover, &:hover,
&.active { &.active {
@@ -735,6 +734,8 @@ $ui-header-height: 55px;
} }
.column-inline-form { .column-inline-form {
--size-icon: 20px;
padding: 7px 15px; padding: 7px 15px;
padding-inline-end: 5px; padding-inline-end: 5px;
display: flex; display: flex;
@@ -760,10 +761,6 @@ $ui-header-height: 55px;
margin: 0 5px; margin: 0 5px;
padding: 6px; padding: 6px;
} }
.gts-icon {
--size: 20px;
}
} }
.column-settings__outer { .column-settings__outer {
@@ -1054,6 +1051,8 @@ $ui-header-height: 55px;
} }
&__action { &__action {
--size-icon: 20px;
float: right; float: right;
.icon-button { .icon-button {
@@ -1066,8 +1065,6 @@ $ui-header-height: 55px;
} }
.gts-icon { .gts-icon {
--size: 20px;
display: block; display: block;
} }
} }
app/javascript/flavours/glitch/styles/components/compose_form.scss
+16 -19
View File
@@ -514,7 +514,7 @@
} }
svg.gts-icon { svg.gts-icon {
--size: 20px; --size-icon: 20px;
scale: 1.2; scale: 1.2;
} }
@@ -565,16 +565,14 @@
} }
.privacy-dropdown__option { .privacy-dropdown__option {
--size-icon: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
color: $inverted-text-color; color: $inverted-text-color;
cursor: pointer; cursor: pointer;
svg.gts-icon {
--size: 24px;
}
.privacy-dropdown__option__content { .privacy-dropdown__option__content {
flex: 1 1 auto; flex: 1 1 auto;
color: $lighter-text-color; color: $lighter-text-color;
@@ -611,23 +609,22 @@
.compose-form__publish { .compose-form__publish {
display: flex; display: flex;
justify-content: flex-end;
min-width: 0;
flex: 0 0 auto;
column-gap: 5px; column-gap: 5px;
flex: 0 0 auto;
justify-content: flex-end;
margin-top: 10px;
min-width: 0;
.compose-form__publish-button-wrapper { button {
overflow: hidden; --size-icon: 18px;
padding-top: 10px;
button { display: flex;
padding: 7px 10px; align-items: center;
text-align: center; flex-shrink: 0;
} gap: 5px;
padding: 8px 12px;
& > .side_arm { line-height: 20px;
width: 36px; text-align: center;
}
} }
} }
app/javascript/flavours/glitch/styles/components/drawer.scss
+4 -6
View File
@@ -73,6 +73,8 @@
} }
.layout-multiple-columns .drawer__tab { .layout-multiple-columns .drawer__tab {
--size-icon: 24px;
display: flex; display: flex;
gap: 5px; gap: 5px;
align-items: center; align-items: center;
@@ -88,8 +90,6 @@
transition: all 0.3s; transition: all 0.3s;
.gts-icon { .gts-icon {
--size: 24px;
display: block; display: block;
} }
@@ -149,12 +149,10 @@
} }
.navigation-bar .compose__action-bar button { .navigation-bar .compose__action-bar button {
--size-icon: 20px;
display: flex; display: flex;
padding: 6px; padding: 6px;
svg.gts-icon {
--size: 20px;
}
} }
.drawer--results { .drawer--results {
app/javascript/flavours/glitch/styles/components/emoji.scss
+2 -2
View File
@@ -77,8 +77,8 @@
color: $inverted-text-color; color: $inverted-text-color;
background: transparent; background: transparent;
svg { svg.gts-icon {
--size: 24px; --size-icon: 24px;
margin: 0; margin: 0;
} }
app/javascript/flavours/glitch/styles/components/media.scss
+5 -7
View File
@@ -189,7 +189,7 @@
color: rgba($white, 0.7); color: rgba($white, 0.7);
.gts-icon { .gts-icon {
--size: 24px; --size-icon: 24px;
display: block; display: block;
} }
@@ -283,11 +283,9 @@
padding: 20px 0; padding: 20px 0;
.icon-button { .icon-button {
color: $white; --size-icon: 24px;
.gts-icon { color: $white;
--size: 24px;
}
&:hover, &:hover,
&:focus, &:focus,
@@ -571,14 +569,14 @@
} }
&__buttons-bar { &__buttons-bar {
--size-icon: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 8px; padding-bottom: 8px;
margin: 0 -5px; margin: 0 -5px;
.gts-icon { .gts-icon {
--size: 20px;
display: block; display: block;
} }
app/javascript/flavours/glitch/styles/components/misc.scss
+2 -2
View File
@@ -1315,6 +1315,8 @@ button.icon-button.active i.fa-retweet {
} }
.spoiler-button { .spoiler-button {
--size-icon: 18px;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
@@ -1323,8 +1325,6 @@ button.icon-button.active i.fa-retweet {
z-index: 100; z-index: 100;
svg.gts-icon { svg.gts-icon {
--size: 18px;
display: block; display: block;
} }
app/javascript/flavours/glitch/styles/components/modal.scss
+2 -4
View File
@@ -1060,15 +1060,13 @@
padding: 15px; padding: 15px;
.report-modal__close { .report-modal__close {
--size-icon: 20px;
position: absolute; position: absolute;
top: 10px; top: 10px;
inset-inline-end: 10px; inset-inline-end: 10px;
display: flex; display: flex;
padding: 6px; padding: 6px;
svg.gts-icon {
--size: 20px;
}
} }
} }
app/javascript/flavours/glitch/styles/components/search.scss
+5 -7
View File
@@ -4,7 +4,7 @@
.search__icon, .search__icon,
.search__icon.gts-icon { .search__icon.gts-icon {
--size: 20px; --size-icon: 20px;
position: absolute; position: absolute;
top: 13px; top: 13px;
@@ -35,6 +35,8 @@
} }
.search__button { .search__button {
--size-icon: 20px;
position: absolute; position: absolute;
top: 7px; top: 7px;
right: 7px; right: 7px;
@@ -48,8 +50,6 @@
transition: all 0.3s; transition: all 0.3s;
.gts-icon { .gts-icon {
--size: 20px;
display: block; display: block;
} }
@@ -154,13 +154,11 @@
.search-results__header, .search-results__header,
.search-results__section__header h3 { .search-results__section__header h3 {
--size-icon: 20px;
display: flex; display: flex;
gap: 5px; gap: 5px;
align-items: center; align-items: center;
.gts-icon {
--size: 20px;
}
} }
.search-results__header { .search-results__header {
app/javascript/flavours/glitch/styles/components/status.scss
+6 -25
View File
@@ -89,16 +89,6 @@
} }
} }
&.mention {
&:hover {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
.fa { .fa {
color: $dark-text-color; color: $dark-text-color;
} }
@@ -409,19 +399,11 @@
} }
.status__action-bar { .status__action-bar {
--size-icon: 20px;
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
svg.gts-icon {
--size: 20px;
}
&.detailed-status__action-bar {
svg.gts-icon {
--size: 24px;
}
}
} }
.status__action-bar-button, .status__action-bar-button,
@@ -446,9 +428,9 @@
} }
.detailed-status { .detailed-status {
background: lighten($ui-base-color, 4%); padding: 15px;
padding: 14px 10px;
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid lighten($ui-base-color, 8%);
background: lighten($ui-base-color, 4%);
&--flex { &--flex {
display: flex; display: flex;
@@ -579,9 +561,8 @@ a.status__display-name,
.status__avatar { .status__avatar {
flex: none; flex: none;
margin-inline-end: 10px; height: var(--size-avatar);
height: 48px; width: var(--size-avatar);
width: 48px;
} }
.muted { .muted {
app/javascript/flavours/glitch/styles/gts.scss
+25 -20
View File
@@ -2,8 +2,8 @@
/* Variables */ /* Variables */
:root { :root {
--drawer-border-radius: 8px; --drawer-border-radius: var(--size-layout-radius);
--button-border-radius: 6px; --button-border-radius: var(--size-ui-radius);
} }
/* Icons debug */ /* Icons debug */
@@ -13,11 +13,10 @@
/* Diff */ /* Diff */
.gts-icon { .gts-icon {
--size: 1em;
display: inline-block; display: inline-block;
width: var(--size); flex-shrink: 0;
height: var(--size); width: var(--size-icon);
height: var(--size-icon);
} }
.gts-icon-with-badge { .gts-icon-with-badge {
@@ -59,7 +58,7 @@
.column-header .gts-icon, .column-header .gts-icon,
.column-link .gts-icon, .column-link .gts-icon,
.local-settings__navigation__item .gts-icon { .local-settings__navigation__item .gts-icon {
--size: 24px; --size-icon: 24px;
} }
.navigation-panel { .navigation-panel {
@@ -94,12 +93,9 @@
} }
} }
.notification__filter-bar svg, .notification__filter-bar svg.gts-icon,
.status__info__icons svg { .status__info__icons svg.gts-icon {
--size: 18px; --size-icon: 18px;
width: var(--size);
height: var(--size);
} }
.detailed-status__meta { .detailed-status__meta {
@@ -121,16 +117,25 @@
} }
.detailed-status__meta svg { .detailed-status__meta svg {
--size: 16px; --size-icon: 16px;
width: var(--size);
height: var(--size);
} }
.notification__favourite-icon-wrapper svg { .notification__favourite-icon-wrapper svg {
--size: 16px; --size-icon: 16px;
width: var(--size);
height: var(--size);
color: $highlight-text-color; color: $highlight-text-color;
} }
.drawer__pager {
flex-grow: unset;
}
.drawer__inner {
position: relative;
top: unset;
}
.drawer__inner__mastodon,
.drawer__inner.darker {
display: none;
}
app/javascript/flavours/glitch/styles/gts/colors.scss
+1
View File
@@ -6,6 +6,7 @@
--color-fg: #fff; --color-fg: #fff;
--color-bg: #191b22; --color-bg: #191b22;
--color-lines: #3d4455; --color-lines: #3d4455;
--color-logo: #c76c33;
/* Accent */ /* Accent */
--color-accent: #8c8dff; --color-accent: #8c8dff;
app/javascript/flavours/glitch/styles/gts/sizes.scss
+10
View File
@@ -1,4 +1,14 @@
/* 📏 Sizes */ /* 📏 Sizes */
:root { :root {
/* Layout: larger elements, mostly containers */
--size-layout-gap: 10px; --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;
} }
app/javascript/flavours/glitch/styles/gts/status.scss
+18
View File
@@ -30,3 +30,21 @@
.status__action-bar :is(a, button) { .status__action-bar :is(a, button) {
color: var(--color-secondary-fg); 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;
}
app/javascript/flavours/glitch/styles/gts/status/status-account.scss
+1 -1
View File
@@ -2,7 +2,7 @@
.status__info__account { .status__info__account {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 10px; gap: var(--size-layout-gap);
overflow: hidden; overflow: hidden;
text-overflow: clip; text-overflow: clip;
} }
app/javascript/flavours/glitch/styles/gts/status/status-display-name.scss
+7 -1
View File
@@ -1,6 +1,6 @@
/* 🚥 Status: Display name */ /* 🚥 Status: Display name */
.status__display-name { .status__display-name {
align-self: start; align-self: center;
justify-self: start; justify-self: start;
color: var(--color-content-fg); color: var(--color-content-fg);
font-size: 15px; font-size: 15px;
@@ -12,6 +12,12 @@
text-overflow: clip; text-overflow: clip;
} }
.display-name__html,
.display-name__account {
display: block;
line-height: max(21px, 1.4em);
}
.display-name__html { .display-name__html {
font-weight: 700; font-weight: 700;
} }
app/javascript/flavours/glitch/styles/gts/status/status-icons.scss
+3 -3
View File
@@ -1,14 +1,14 @@
/* 🚥 Status: Icons */ /* 🚥 Status: Icons */
.status__info__icons { .status__info__icons {
--size-icon: 18px;
position: relative; position: relative;
display: flex; display: flex;
gap: 5px; gap: var(--size-ui-gap);
align-items: start; align-items: start;
color: var(--color-secondary-fg); color: var(--color-secondary-fg);
svg.gts-icon { svg.gts-icon {
--size: 18px;
display: block; display: block;
} }
app/javascript/flavours/glitch/styles/gts/status/status-info.scss
+1 -1
View File
@@ -1,7 +1,7 @@
/* 🚥 Status: Info */ /* 🚥 Status: Info */
.status__info { .status__info {
display: grid; display: grid;
gap: 5px; gap: var(--size-ui-gap);
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
.notification__message { .notification__message {
app/javascript/flavours/glitch/styles/gts/status/status-prepend.scss
+2 -4
View File
@@ -3,7 +3,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
align-self: start; align-self: start;
gap: 5px; gap: var(--size-ui-gap);
padding: 5px 10px; padding: 5px 10px;
border: 1px solid var(--color-accent-lines); border: 1px solid var(--color-accent-lines);
border-radius: 50px; border-radius: 50px;
@@ -19,11 +19,9 @@
} }
.status__prepend-icon { .status__prepend-icon {
--size: 18px; --size-icon: 18px;
display: block; display: block;
width: var(--size);
height: var(--size);
} }
.status__prepend-display-name { .status__prepend-display-name {
app/javascript/flavours/glitch/styles/gts/status/status-spoiler.scss
+9 -5
View File
@@ -1,7 +1,15 @@
/* 🚥 Status: Spoiler link */ /* 🚥 Status: Spoiler link */
.status__content__spoiler,
.status__content__spoiler-link { .status__content__spoiler-link {
margin-block-start: var(--size-ui-gap);
}
.status__content__spoiler-link {
--size-icon: 14px;
display: flex; display: flex;
gap: 5px; gap: var(--size-ui-gap);
padding: 5px 8px; padding: 5px 8px;
border: 1px solid var(--color-accent-lines); border: 1px solid var(--color-accent-lines);
border-radius: 8px; border-radius: 8px;
@@ -11,10 +19,6 @@
background: var(--color-accent-bg); background: var(--color-accent-bg);
transition: all 0.3s; transition: all 0.3s;
.gts-icon {
--size: 14px;
}
&:hover { &:hover {
border-color: var(--color-lines); border-color: var(--color-lines);
color: var(--color-fg); color: var(--color-fg);
app/javascript/flavours/glitch/styles/mastodon-light/colors.scss
+1
View File
@@ -6,6 +6,7 @@
--color-fg: #000; --color-fg: #000;
--color-bg: #eff3f5; --color-bg: #eff3f5;
--color-lines: #c0cdd9; --color-lines: #c0cdd9;
--color-logo: #df8958;
/* Accent */ /* Accent */
--color-accent: #4d4eff; --color-accent: #4d4eff;
app/javascript/flavours/glitch/styles/polls.scss
+5 -4
View File
@@ -189,7 +189,8 @@
&__footer { &__footer {
display: flex; display: flex;
gap: 5px; align-items: center;
gap: min(0.22em, 4px);
padding-top: 6px; padding-top: 6px;
padding-bottom: 5px; padding-bottom: 5px;
color: $dark-text-color; color: $dark-text-color;
@@ -217,8 +218,8 @@
.button { .button {
height: 36px; height: 36px;
margin-inline-end: min(0.22em, 4px);
padding: 0 16px; padding: 0 16px;
margin-inline-end: 10px;
font-size: 14px; font-size: 14px;
} }
} }
@@ -240,10 +241,10 @@
} }
.poll__footer { .poll__footer {
border-top: 1px solid darken($simple-background-color, 8%);
padding: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
border-top: 1px solid darken($simple-background-color, 8%);
padding: 10px;
button, button,
select { select {
public/icons.svg
+14
View File
@@ -14,6 +14,20 @@
<path fill="#333a42" d="M418 531c0 24-23 29-32 8q-8-20-31-19c-12 0-24 11-27 19-6 19-32 16-33-4 0-28 27-55 61-57s62 29 62 53m122 63q3-3 4-8t-2-9l-5-4-7-1q-10-3-21-2l-28 3-5 4q-3 5-2 9 1 5 4 8 5 8 14 9 8 2 17 2 9 1 17-2 9-2 14-9m-3 70q19 3 34-7l6-6q2-3 1-8-1-3-5-5-3-2-8-1l-5 2q-10 4-21 4-12-1-21-7-5-3-9-9l-9 9q-10 6-21 7-11 0-22-4l-5-2q-3-1-7 1t-5 5q-1 5 1 8l6 6q15 10 34 7 16-1 28-10 13 9 28 10m63-133c0 24 23 29 32 8q8-20 31-19c12 0 24 11 26 19 6 20 33 16 33-3 1-29-26-56-60-58s-62 29-62 53"/> <path fill="#333a42" d="M418 531c0 24-23 29-32 8q-8-20-31-19c-12 0-24 11-27 19-6 19-32 16-33-4 0-28 27-55 61-57s62 29 62 53m122 63q3-3 4-8t-2-9l-5-4-7-1q-10-3-21-2l-28 3-5 4q-3 5-2 9 1 5 4 8 5 8 14 9 8 2 17 2 9 1 17-2 9-2 14-9m-3 70q19 3 34-7l6-6q2-3 1-8-1-3-5-5-3-2-8-1l-5 2q-10 4-21 4-12-1-21-7-5-3-9-9l-9 9q-10 6-21 7-11 0-22-4l-5-2q-3-1-7 1t-5 5q-1 5 1 8l6 6q15 10 34 7 16-1 28-10 13 9 28 10m63-133c0 24 23 29 32 8q8-20 31-19c12 0 24 11 26 19 6 20 33 16 33-3 1-29-26-56-60-58s-62 29-62 53"/>
</symbol> </symbol>
<symbol id="gts-simple" viewBox="0 0 65 65">
<path fill="var(--color-logo)" d="M62.2 37.2c3.6 3 3 7.5.8 9.6 1 9.6-5.4 9.2-6.4 5.5-3.1 4.1-5.4 2.6-5.7 2.4a32 32 0 0 1-18 5.3q-10-.2-17.6-5.3c-2.4 1.6-4.9.6-6.3-1.6-5 5.3-7.4-.7-6-4.5-3.6-1.8-3.4-6 1-11.4q-.3-1.6-.3-3.4c0-10 7-21.2 15.7-23.2-5.7-3.7.3-8.2 6.3-3.7 2.1-5 7.3-5 7.4-.7 8 0 12.4 2.9 16.3 5 2.2 1 4.8 2.3 7.9 2.4 3.6.2 5.6 4.1 1.6 7.2 2.3 4 3.3 7.9 3.3 16.4"/>
<path fill="#e8e7e5" d="M22.1 19.6a15 15 0 0 0-5.2 1c-4.3 1.5-6.6 5.2-7.6 9.2a16 16 0 0 1 9.7-3.5c7.6-.4 10.2 5.1 10.2 7.5q0 3.6-2.9 5a21 21 0 0 1-8.1 1.4c-3.2 0-5.2-.6-9-1.4 2 10.6 12 17 24 17 11.8 0 21.8-6.4 24-17-3.9.8-5.9 1.4-9.1 1.4-1.3 0-6-.2-8.1-1.4q-3-1.4-3-5c.1-2.4 2.7-7.9 10.2-7.5 4.7.3 7 1.5 9.8 3.5-1-4-3.3-7.7-7.6-9.2-7.6-2.8-12.6 1.3-16.3 1.4-2.7 0-6.2-2.4-11-2.4m35.4 13.7v1.2zm0 2.1v.2zm0 .6v.1zm-.2 2.2v.2zm-48-8.4"/>
<path fill="#77889b" d="M29.2 33.8c0-2.4-2.6-7.9-10.2-7.5a16 16 0 0 0-9.7 3.5 21 21 0 0 0-.1 9c3.8.8 5.8 1.4 9 1.4a20 20 0 0 0 8.1-1.4q3-1.4 3-5m7.9 0c0-2.4 2.6-7.9 10.1-7.5 4.7.3 7 1.5 9.8 3.5a21 21 0 0 1 .1 9c-3.8.8-5.8 1.4-9 1.4-1.3 0-6-.2-8.1-1.4q-3-1.4-3-5"/>
<path fill="#333a42" d="M26.4 34.4c0 1.8-1.7 2.2-2.4.6q-.6-1.5-2.3-1.4c-1 0-1.8.8-2 1.4a1.2 1.2 0 0 1-2.4-.3c0-2 2-4 4.5-4.2 2.5-.1 4.6 2.2 4.6 4m4.4 4.7-.3-.6q0-.4.2-.7l.4-.2.4-.2h1.6l2.1.2.4.2.2.7-.3.6q-.5.6-1.1.7l-1.3.1-1.2-.1q-.6-.1-1-.7m4.3 5.1q1.5.2 2.5-.6.3 0 .5-.4v-.5q0-.3-.3-.4l-.6-.1-.3.1q-.7.3-1.6.3t-1.6-.5l-.7-.6-.7.6q-.7.5-1.5.5-.7 0-1.6-.3l-.4-.1h-.5l-.4.5.1.5.4.4q1.2.8 2.5.6 1.2 0 2.1-.7 1 .7 2.1.7m4.7-9.9c0 1.8 1.7 2.2 2.3.6q.8-1.5 2.4-1.4c.9 0 1.7.8 2 1.4.4 1.5 2.3 1.2 2.4-.2 0-2.1-2-4.2-4.5-4.3s-4.6 2.1-4.6 4"/>
</symbol>
<symbol id="gts-phosphor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<g fill="currentcolor">
<ellipse cx="16" cy="17" opacity=".2" rx="12" ry="11"/>
<path d="M13.6 5c.5-1 2.4-1.7 2.4 0v1q3.6 0 6.5 1.7 2.5 1 3.4 1 1.7 0 1.6 1.3 0 .7-1 1.6a10 10 0 0 1 1.4 6.8q1 1 1.1 2.2 0 1.3-.7 1.8 0 3-1 3.2-1.2.4-1.6-.9-1 1.3-1.7 1.3-.5 0-.8-.2-3 2.1-7.2 2.2-4.1 0-7.2-2.2-.4.4-1 .3-.5 0-1.3-1-1.1 1.1-2 .8-.8-.6-.5-2.7-.8-.5-1-1.7 0-1.2 1.2-2.8L4 17a11 11 0 0 1 6.8-10c-1.1-.6-1.4-1.7-.4-2q1.6-.6 3 1.4l-.2-.2q0-.5.4-1.2m2.4 6c-2.6 0-5-2.2-6.7-.7Q6 12.8 6 17c0 5 4.5 9 10 9s10-4 10-9q-.1-4.2-3.4-6.8c-1.8-1.4-4 .7-6.6.7m-1.2 7.4-.2-.4v-.5l.3-.3h.3l.9-.1h.9l.3.1.2.3v.9l-.7.6h-1.4q-.5-.1-.6-.6M13 16.5c0 1-1 1.2-1.3.3q-.3-.8-1.3-.7t-1 .7c-.3.8-1.4.7-1.4-.1 0-1.2 1-2.3 2.5-2.3 1.4-.1 2.5 1.1 2.5 2.1m6 0c0 1 1 1.2 1.3.3q.3-.8 1.3-.7t1 .7c.3.8 1.4.7 1.4-.1 0-1.1-1-2.3-2.5-2.3-1.4-.1-2.5 1.1-2.5 2.1m-1.7 5.9q1 0 1.7-.4l.3-.4v-.4l-.2-.2h-.6q-.5.3-1 .2l-1.1-.4q-.3 0-.5-.4l-.5.4-1 .4q-.6 0-1.1-.2h-.6q-.3 0-.3.2v.4l.4.4q.6.4 1.7.4.8 0 1.4-.6z"/>
</g>
</symbol>
<symbol id="arrow-bend-up-left" fill="currentcolor" viewBox="0 0 256 256"> <symbol id="arrow-bend-up-left" fill="currentcolor" viewBox="0 0 256 256">
<path d="M80,56v96L32,104Z" opacity="0.2"></path> <path d="M80,56v96L32,104Z" opacity="0.2"></path>
<path d="M128,96H88V56a8,8,0,0,0-13.66-5.66l-48,48a8,8,0,0,0,0,11.32l48,48A8,8,0,0,0,88,152V112h40a88.1,88.1,0,0,1,88,88,8,8,0,0,0,16,0A104.11,104.11,0,0,0,128,96ZM72,132.69,43.31,104,72,75.31Z"></path> <path d="M128,96H88V56a8,8,0,0,0-13.66-5.66l-48,48a8,8,0,0,0,0,11.32l48,48A8,8,0,0,0,88,152V112h40a88.1,88.1,0,0,1,88,88,8,8,0,0,0,16,0A104.11,104.11,0,0,0,128,96ZM72,132.69,43.31,104,72,75.31Z"></path>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 59 KiB