Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Zoë Bijl
|
42542a1618 | ||
|
Zoë Bijl
|
e6d9057e49 | ||
|
Zoë Bijl
|
e4d1ab0063 | ||
|
Zoë Bijl
|
ff91bfe260 | ||
|
Zoë Bijl
|
db7fd70ae2 | ||
|
Zoë Bijl
|
da628d9417 |
@@ -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' />
|
||||
<Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
|
||||
<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' />
|
||||
<Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
|
||||
<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' />
|
||||
<Icon id='arrow-left' className='column-back-button__icon' fixedWidth />
|
||||
<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} className='column-header__icon' />
|
||||
<Icon id={icon} fixedWidth className='column-header__icon' />
|
||||
{title}
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import PropTypes from "prop-types";
|
||||
import React from "react";
|
||||
|
||||
import classNames from "classnames";
|
||||
|
||||
import ImmutablePropTypes from "react-immutable-proptypes";
|
||||
import { type List } from "immutable";
|
||||
|
||||
import { type List } from "immutable";
|
||||
|
||||
import { type Account } from "flavours/glitch/types/resources";
|
||||
import { type Account } from "flavours/glitch/types/resources";
|
||||
|
||||
import { autoPlayGif } from "../initial_state";
|
||||
|
||||
@@ -18,15 +15,9 @@ interface Props {
|
||||
others?: List<Account>,
|
||||
localDomain?: string,
|
||||
inline?: boolean,
|
||||
nameLayout?: string,
|
||||
}
|
||||
|
||||
export class DisplayName extends React.PureComponent<Props> {
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
nameLayout: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
|
||||
currentTarget,
|
||||
}) => {
|
||||
@@ -64,7 +55,7 @@ export class DisplayName extends React.PureComponent<Props> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { others, localDomain, inline, nameLayout } = this.props;
|
||||
const { others, localDomain, inline } = this.props;
|
||||
|
||||
let displayName: React.ReactNode,
|
||||
suffix: React.ReactNode,
|
||||
@@ -82,7 +73,7 @@ export class DisplayName extends React.PureComponent<Props> {
|
||||
.map((a) => (
|
||||
<bdi key={a.get("id")}>
|
||||
<strong
|
||||
className="display-name__html"
|
||||
className='display-name__html'
|
||||
dangerouslySetInnerHTML={{ __html: a.get("display_name_html") }}
|
||||
/>
|
||||
</bdi>
|
||||
@@ -102,39 +93,39 @@ export class DisplayName extends React.PureComponent<Props> {
|
||||
displayName = (
|
||||
<bdi>
|
||||
<strong
|
||||
className="display-name__html"
|
||||
className='display-name__html'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: account.get("display_name_html"),
|
||||
}}
|
||||
/>
|
||||
</bdi>
|
||||
);
|
||||
suffix = <span className="display-name__account">@{acct}</span>;
|
||||
suffix = <span className='display-name__account'>@{acct}</span>;
|
||||
} else {
|
||||
displayName = (
|
||||
<bdi>
|
||||
<strong className="display-name__html">
|
||||
<Skeleton width="10ch" />
|
||||
<strong className='display-name__html'>
|
||||
<Skeleton width='10ch' />
|
||||
</strong>
|
||||
</bdi>
|
||||
);
|
||||
suffix = (
|
||||
<span className="display-name__account">
|
||||
<Skeleton width="7ch" />
|
||||
<span className='display-name__account'>
|
||||
<Skeleton width='7ch' />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames("display-name", { inline }, nameLayout)}
|
||||
<span
|
||||
className={classNames("display-name", { inline })}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
>
|
||||
{displayName}
|
||||
{inline ? " " : null}
|
||||
{suffix}
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,10 +5,17 @@ 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, title, ...other }) => (
|
||||
export const Icon: React.FC<Props> = ({
|
||||
id,
|
||||
className,
|
||||
fixedWidth,
|
||||
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} className={className} />
|
||||
<div className='gts-icon-with-badge'>
|
||||
<Icon id={id} fixedWidth 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>
|
||||
);
|
||||
|
||||
@@ -826,7 +826,6 @@ class Status extends ImmutablePureComponent {
|
||||
friend={account}
|
||||
collapsed={isCollapsed}
|
||||
parseClick={parseClick}
|
||||
settings={settings}
|
||||
/>
|
||||
) : null}
|
||||
<StatusIcons
|
||||
|
||||
@@ -329,6 +329,7 @@ class StatusContent extends PureComponent {
|
||||
mediaIcons.forEach((mediaIcon, idx) => {
|
||||
toggleText.push(
|
||||
<Icon
|
||||
fixedWidth
|
||||
className='status__content__spoiler-icon'
|
||||
id={mediaIcon}
|
||||
aria-hidden='true'
|
||||
|
||||
@@ -15,7 +15,6 @@ export default class StatusHeader extends PureComponent {
|
||||
status: ImmutablePropTypes.map.isRequired,
|
||||
friend: ImmutablePropTypes.map,
|
||||
parseClick: PropTypes.func.isRequired,
|
||||
settings: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
// Handles clicks on account name/image
|
||||
@@ -34,7 +33,6 @@ export default class StatusHeader extends PureComponent {
|
||||
const {
|
||||
status,
|
||||
friend,
|
||||
settings,
|
||||
} = this.props;
|
||||
|
||||
const account = status.get("account");
|
||||
@@ -64,7 +62,7 @@ export default class StatusHeader extends PureComponent {
|
||||
onClick={this.handleAccountClick}
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
<DisplayName account={account} nameLayout={settings.get("name_layout")} />
|
||||
<DisplayName account={account} />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -86,6 +86,7 @@ class StatusIcons extends PureComponent {
|
||||
renderIcon (mediaIcon) {
|
||||
return (
|
||||
<Icon
|
||||
fixedWidth
|
||||
className='status__media-icon'
|
||||
key={`media-icon--${mediaIcon}`}
|
||||
id={mediaIcon}
|
||||
@@ -112,6 +113,7 @@ 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)}
|
||||
@@ -119,6 +121,7 @@ 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,6 +36,7 @@ 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"} /> {title}
|
||||
<Icon id={collapsed ? "caret-right" : "caret-down"} fixedWidth /> {title}
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
|
||||
@@ -28,7 +28,7 @@ class ActionBar extends PureComponent {
|
||||
return (
|
||||
<div>
|
||||
<div className='account__disclaimer'>
|
||||
<Icon id='info' />
|
||||
<Icon id='info' fixedWidth />
|
||||
<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' />
|
||||
<Icon id='info' fixedWidth />
|
||||
<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' />
|
||||
<Icon id='check' fixedWidth />
|
||||
<FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
|
||||
</button>
|
||||
|
||||
<button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
|
||||
<Icon id='x' />
|
||||
<Icon id='x' fixedWidth />
|
||||
<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' /></div>
|
||||
<div className='account__moved-note__icon-wrapper'><Icon id='signpost' className='account__moved-note__icon' fixedWidth /></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"} /></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>
|
||||
<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>
|
||||
|
||||
<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' /></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' fixedWidth /></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"} />
|
||||
<Icon id={"file-arrow-down"} fixedWidth />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -155,7 +155,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent {
|
||||
if (!contents) {
|
||||
contents = (
|
||||
<>
|
||||
{icon && <Icon className='icon' id={icon} />}
|
||||
{icon && <Icon className='icon' fixedWidth id={icon} />}
|
||||
|
||||
<div className='privacy-dropdown__option__content'>
|
||||
<strong>{text}</strong>
|
||||
|
||||
@@ -393,6 +393,7 @@ 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='gts-simple' /></Link>
|
||||
><Icon id='asterisk' /></Link>
|
||||
{renderForColumn("HOME", (
|
||||
<Link
|
||||
aria-label={intl.formatMessage(messages.home_timeline)}
|
||||
|
||||
@@ -62,10 +62,9 @@ class Publisher extends ImmutablePureComponent {
|
||||
} else if (privacy === "private" || privacy === "direct") {
|
||||
const iconId = privacyIcons[privacy];
|
||||
publishText = (
|
||||
<>
|
||||
<Icon id={iconId} />
|
||||
<span>{intl.formatMessage(messages.publish)}</span>
|
||||
</>
|
||||
<span>
|
||||
<Icon id={iconId} /> {intl.formatMessage(messages.publish)}
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
publishText = privacy !== "unlisted" ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
|
||||
@@ -81,22 +80,26 @@ class Publisher extends ImmutablePureComponent {
|
||||
return (
|
||||
<div className={computedClass}>
|
||||
{sideArm && !isEditing && sideArm !== "none" ? (
|
||||
<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 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}
|
||||
<Button
|
||||
className='primary'
|
||||
text={publishText}
|
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
|
||||
onClick={this.handleSubmit}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className='compose-form__publish-button-wrapper'>
|
||||
<Button
|
||||
className='primary'
|
||||
text={publishText}
|
||||
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
|
||||
onClick={this.handleSubmit}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@ class SearchResults extends ImmutablePureComponent {
|
||||
|
||||
if (results.get("accounts") && results.get("accounts").size > 0) {
|
||||
accounts = (
|
||||
<SearchSection title={<><Icon id='users' /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
|
||||
<SearchSection title={<><Icon id='users' fixedWidth /><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' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
|
||||
<SearchSection title={<><Icon id='tag' fixedWidth /><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' /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
|
||||
<SearchSection title={<><Icon id='chat-circle-dots' fixedWidth /><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' />
|
||||
<Icon id='magnifying-glass' fixedWidth />
|
||||
<FormattedMessage id='explore.search_results' defaultMessage='Search results' />
|
||||
</header>
|
||||
|
||||
|
||||
@@ -46,6 +46,7 @@ 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' /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
|
||||
<SearchSection key='accounts' title={<><Icon id='users' fixedWidth /><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' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
|
||||
<SearchSection key='hashtags' title={<><Icon id='tag' fixedWidth /><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' /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
|
||||
<SearchSection key='statuses' title={<><Icon id='chat-circle-dots' fixedWidth /><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' /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
|
||||
<Icon id='plus' fixedWidth /> <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' />
|
||||
<Icon id='dot' className='column-link__icon' fixedWidth />
|
||||
{list.get("title")}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@ export default class LocalSettingsPage extends PureComponent {
|
||||
active,
|
||||
}, className);
|
||||
|
||||
const iconElem = icon ? <Icon id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
|
||||
const iconElem = icon ? <Icon fixedWidth id={icon} /> : (textIcon ? <span className='text-icon-button'>{textIcon}</span> : null);
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
|
||||
@@ -33,10 +33,6 @@ const messages = defineMessages({
|
||||
unlisted: { id: "privacy.unlisted.short", defaultMessage: "Unlisted" },
|
||||
private: { id: "privacy.private.short", defaultMessage: "Followers only" },
|
||||
direct: { id: "privacy.direct.short", defaultMessage: "Mentioned people only" },
|
||||
namelayout_display: { id: "namelayout.display", defaultMessage: "Display name" },
|
||||
namelayout_handle: { id: "namelayout.handle", defaultMessage: "Handle" },
|
||||
namelayout_both_y: { id: "namelayout.both.vertical", defaultMessage: "Both (Vertical)" },
|
||||
namelayout_both_x: { id: "namelayout.both.horizontal", defaultMessage: "Both (Horizontal)" },
|
||||
});
|
||||
|
||||
class LocalSettingsPage extends PureComponent {
|
||||
@@ -202,22 +198,6 @@ class LocalSettingsPage extends PureComponent {
|
||||
<span className='hint'><FormattedMessage id='settings.wide_view_hint' defaultMessage='Stretches columns to better fill the available space.' /></span>
|
||||
</LocalSettingsPageItem>
|
||||
</section>
|
||||
<section>
|
||||
<h2><FormattedMessage id='settings.name_layout' defaultMessage='Name layout' /></h2>
|
||||
<LocalSettingsPageItem
|
||||
settings={settings}
|
||||
item={["name_layout"]}
|
||||
id='mastodon-settings--status-username-inline'
|
||||
onChange={onChange}
|
||||
options={[
|
||||
{ value: "display", message: intl.formatMessage(messages.namelayout_display) },
|
||||
{ value: "handle", message: intl.formatMessage(messages.namelayout_handle) },
|
||||
{ value: "both_y", message: intl.formatMessage(messages.namelayout_both_y) },
|
||||
{ value: "both_x", message: intl.formatMessage(messages.namelayout_both_x) },
|
||||
]}
|
||||
>
|
||||
</LocalSettingsPageItem>
|
||||
</section>
|
||||
</div>
|
||||
),
|
||||
({ intl, onChange, settings }) => (
|
||||
|
||||
@@ -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' />
|
||||
<Icon id='flag' fixedWidth />
|
||||
</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 id='user-plus' />
|
||||
<Icon fixedWidth 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"} />
|
||||
<Icon id={selectedFilter === "mention" ? "arrow-bend-double-up-left-filled" : "arrow-bend-double-up-left"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "favourite" ? "active" : ""}
|
||||
onClick={this.onClick("favourite")}
|
||||
title={intl.formatMessage(tooltips.favourites)}
|
||||
>
|
||||
<Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} />
|
||||
<Icon id={selectedFilter === "favourite" ? "star-filled" : "star"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "reblog" ? "active" : ""}
|
||||
onClick={this.onClick("reblog")}
|
||||
title={intl.formatMessage(tooltips.boosts)}
|
||||
>
|
||||
<Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} />
|
||||
<Icon id={selectedFilter === "reblog" ? "rocket-launch-filled" : "rocket-launch"} fixedWidth />
|
||||
</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"} />
|
||||
<Icon id={selectedFilter === "poll" ? "chart-bar-horizontal-filled" : "chart-bar-horizontal"} fixedWidth />
|
||||
</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"} />
|
||||
<Icon id={selectedFilter === "status" ? "chat-circle-dots-filled" : "chat-circle-dots"} fixedWidth />
|
||||
</button>
|
||||
<button
|
||||
className={selectedFilter === "follow" ? "active" : ""}
|
||||
onClick={this.onClick("follow")}
|
||||
title={intl.formatMessage(tooltips.follows)}
|
||||
>
|
||||
<Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} />
|
||||
<Icon id={selectedFilter === "follow" ? "user-plus-filled" : "user-plus"} fixedWidth />
|
||||
</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 id='user-plus' />
|
||||
<Icon fixedWidth 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' />
|
||||
<Icon id='user' fixedWidth />
|
||||
</div>
|
||||
|
||||
<FormattedMessage
|
||||
|
||||
@@ -24,7 +24,7 @@ export default class ColumnHeader extends PureComponent {
|
||||
let iconElement = "";
|
||||
|
||||
if (icon) {
|
||||
iconElement = <Icon id={icon} className='column-header__icon' />;
|
||||
iconElement = <Icon id={icon} fixedWidth 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} className='column-link__icon' /> : icon;
|
||||
const iconElement = typeof icon === "string" ? <Icon id={icon} fixedWidth className='column-link__icon' /> : icon;
|
||||
|
||||
if (href) {
|
||||
return (
|
||||
|
||||
@@ -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' /></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 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 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"} />
|
||||
<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"} />
|
||||
<Icon id={muted ? "speaker-slash" : "speaker-high"} fixedWidth />
|
||||
</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' /></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>
|
||||
{(!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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ const initialState = ImmutableMap({
|
||||
shared_state : true,
|
||||
}),
|
||||
collapsed : ImmutableMap({
|
||||
enabled : false,
|
||||
enabled : true,
|
||||
auto : ImmutableMap({
|
||||
all : false,
|
||||
notifications : false,
|
||||
@@ -53,7 +53,6 @@ const initialState = ImmutableMap({
|
||||
pop_in_player : true,
|
||||
pop_in_position : "right",
|
||||
}),
|
||||
name_layout : "both_y",
|
||||
notifications : ImmutableMap({
|
||||
favicon_badge : false,
|
||||
tab_badge : true,
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "variables" as *;
|
||||
|
||||
@mixin avatar-radius() {
|
||||
border-radius: $ui-avatar-border-size;
|
||||
background-position: 50%;
|
||||
@@ -43,9 +45,9 @@
|
||||
|
||||
@mixin fullwidth-gallery {
|
||||
&.full-width {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
width: calc(100% + 30px);
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
width: calc(100% + 20px);
|
||||
max-width: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
$maximum-width: 1235px;
|
||||
$fluid-breakpoint: $maximum-width + 20px;
|
||||
|
||||
@@ -26,7 +30,7 @@ $fluid-breakpoint: $maximum-width + 20px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 1em 1.75em;
|
||||
padding-inline-start: 3em;
|
||||
font-weight: 500;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
$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"
|
||||
@@ -16,21 +19,23 @@ $emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
|
||||
}
|
||||
|
||||
.hicolor-privacy-icons {
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option) use[href*="planet"] {
|
||||
.status__visibility-icon.fa-globe,
|
||||
.privacy-dropdown__option .fa-globe {
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option)
|
||||
use[href*="lock-open-simple"] {
|
||||
.status__visibility-icon.fa-unlock,
|
||||
.privacy-dropdown__option .fa-unlock {
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option)
|
||||
use[href*="lock-simple"] {
|
||||
.status__visibility-icon.fa-lock,
|
||||
.privacy-dropdown__option .fa-lock {
|
||||
color: #ffa000;
|
||||
}
|
||||
|
||||
:is(.status__visibility-icon, .privacy-dropdown__option) use[href*="#at"] {
|
||||
.status__visibility-icon.fa-envelope,
|
||||
.privacy-dropdown__option .fa-envelope {
|
||||
color: #d32f2f;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.card {
|
||||
& > a {
|
||||
display: block;
|
||||
@@ -10,7 +14,7 @@
|
||||
&:active,
|
||||
&:focus {
|
||||
.card__bar {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,7 +22,7 @@
|
||||
&__img {
|
||||
height: 130px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 12%);
|
||||
background: color.adjust($ui-base-color, $lightness: -12%);
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@@ -39,7 +43,7 @@
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
|
||||
.avatar {
|
||||
flex: 0 0 auto;
|
||||
@@ -57,7 +61,7 @@
|
||||
border-radius: 4px;
|
||||
@include avatar-radius;
|
||||
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
@@ -149,7 +153,7 @@
|
||||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: lighten($inverted-text-color, 10%);
|
||||
color: color.adjust($inverted-text-color, $lightness: 10%);
|
||||
}
|
||||
|
||||
@media screen and (width <= 700px) {
|
||||
@@ -215,22 +219,22 @@
|
||||
}
|
||||
|
||||
&.admin {
|
||||
color: lighten($error-red, 12%);
|
||||
background-color: rgba(lighten($error-red, 12%), 0.1);
|
||||
border-color: rgba(lighten($error-red, 12%), 0.5);
|
||||
color: color.adjust($error-red, $lightness: 12%);
|
||||
background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
|
||||
border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form .not_recommended {
|
||||
color: lighten($error-red, 12%);
|
||||
background-color: rgba(lighten($error-red, 12%), 0.1);
|
||||
border-color: rgba(lighten($error-red, 12%), 0.5);
|
||||
color: color.adjust($error-red, $lightness: 12%);
|
||||
background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
|
||||
border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
|
||||
}
|
||||
|
||||
.simple_form .glitch_only {
|
||||
color: lighten($warning-red, 12%);
|
||||
background-color: rgba(lighten($warning-red, 12%), 0.1);
|
||||
border-color: rgba(lighten($warning-red, 12%), 0.5);
|
||||
color: color.adjust($warning-red, $lightness: 12%);
|
||||
background-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.1);
|
||||
border-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.5);
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
@@ -238,14 +242,14 @@
|
||||
padding: 0;
|
||||
margin: 15px -15px -15px;
|
||||
border: 0 none;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
}
|
||||
|
||||
dt,
|
||||
@@ -264,7 +268,7 @@
|
||||
width: 120px;
|
||||
flex: 0 0 auto;
|
||||
color: $secondary-text-color;
|
||||
background: rgba(darken($ui-base-color, 8%), 0.5);
|
||||
background: rgba(color.adjust($ui-base-color, $lightness: -8%), 0.5);
|
||||
}
|
||||
|
||||
dd {
|
||||
@@ -333,7 +337,7 @@
|
||||
}
|
||||
|
||||
.batch-table__row--muted {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
color: color.adjust($ui-base-color, $lightness: 26%);
|
||||
}
|
||||
|
||||
.batch-table__row--muted .pending-account__header,
|
||||
@@ -342,7 +346,7 @@
|
||||
&,
|
||||
a,
|
||||
strong {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
color: color.adjust($ui-base-color, $lightness: 26%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -354,7 +358,7 @@
|
||||
tbody td.accounts-table__extra,
|
||||
&__count,
|
||||
&__count small {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
color: color.adjust($ui-base-color, $lightness: 26%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
$no-columns-breakpoint: 600px;
|
||||
$sidebar-width: 240px;
|
||||
@@ -31,8 +34,8 @@ $content-width: 840px;
|
||||
|
||||
&__toggle {
|
||||
display: none;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
align-items: center;
|
||||
|
||||
&__logo {
|
||||
@@ -122,7 +125,7 @@ $content-width: 840px;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: -5%);
|
||||
transition: all 100ms linear;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
@@ -133,7 +136,7 @@ $content-width: 840px;
|
||||
}
|
||||
|
||||
ul {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
border-radius: 0 0 0 4px;
|
||||
margin: 0;
|
||||
|
||||
@@ -239,7 +242,7 @@ $content-width: 840px;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
@@ -292,7 +295,7 @@ $content-width: 840px;
|
||||
color: $darker-text-color;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@@ -393,7 +396,7 @@ $content-width: 840px;
|
||||
ul a,
|
||||
ul ul a {
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
@@ -521,7 +524,7 @@ body,
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
border-bottom: 2px solid lighten($ui-base-color, 5%);
|
||||
border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 5%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
@@ -692,7 +695,7 @@ body,
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: $darker-text-color;
|
||||
@@ -712,7 +715,7 @@ body,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@@ -766,7 +769,7 @@ a.inline-name-tag,
|
||||
&.suspended {
|
||||
.username {
|
||||
text-decoration: line-through;
|
||||
color: lighten($error-red, 12%);
|
||||
color: color.adjust($error-red, $lightness: 12%);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -806,7 +809,7 @@ a.name-tag,
|
||||
}
|
||||
|
||||
&.negative {
|
||||
border-left-color: lighten($error-red, 12%);
|
||||
border-left-color: color.adjust($error-red, $lightness: 12%);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@@ -871,7 +874,7 @@ a.name-tag,
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($darker-text-color, 8%);
|
||||
color: color.adjust($darker-text-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -885,10 +888,10 @@ a.name-tag,
|
||||
&__item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
border-top: 1px solid darken($ui-base-color, 4%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: -4%);
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
}
|
||||
|
||||
&__reported-by,
|
||||
@@ -960,7 +963,7 @@ a.name-tag,
|
||||
|
||||
.account__header__fields,
|
||||
.account__header__content {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -997,7 +1000,7 @@ a.name-tag,
|
||||
.filters-list__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@@ -1008,13 +1011,13 @@ a.name-tag,
|
||||
|
||||
.announcements-list,
|
||||
.filters-list {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 4px;
|
||||
|
||||
&__item {
|
||||
padding: 15px 0;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
|
||||
&__title {
|
||||
padding: 0 15px;
|
||||
@@ -1089,7 +1092,7 @@ a.name-tag,
|
||||
|
||||
&.expired {
|
||||
.expiration {
|
||||
color: lighten($error-red, 12%);
|
||||
color: color.adjust($error-red, $lightness: 12%);
|
||||
}
|
||||
|
||||
.permissions-list__item__icon {
|
||||
@@ -1165,7 +1168,7 @@ a.name-tag,
|
||||
.sparkline {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
@@ -1228,7 +1231,7 @@ a.name-tag,
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
stroke: lighten($highlight-text-color, 6%) !important;
|
||||
stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
|
||||
fill: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1238,17 +1241,17 @@ a.sparkline {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 6%);
|
||||
background: color.adjust($ui-base-color, $lightness: 6%);
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
background-color: lighten($ui-base-color, 8%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
lighten($ui-base-color, 8%),
|
||||
lighten($ui-base-color, 12%),
|
||||
lighten($ui-base-color, 8%)
|
||||
color.adjust($ui-base-color, $lightness: 8%),
|
||||
color.adjust($ui-base-color, $lightness: 12%),
|
||||
color.adjust($ui-base-color, $lightness: 8%)
|
||||
);
|
||||
background-size: 200px 100%;
|
||||
background-repeat: no-repeat;
|
||||
@@ -1275,7 +1278,7 @@ a.sparkline {
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
|
||||
&__key {
|
||||
font-weight: 500;
|
||||
@@ -1328,7 +1331,7 @@ a.sparkline {
|
||||
|
||||
&__category {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@@ -1356,7 +1359,7 @@ a.sparkline {
|
||||
|
||||
&__details {
|
||||
&__item {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 15px 0;
|
||||
|
||||
&:last-child {
|
||||
@@ -1405,7 +1408,7 @@ a.sparkline {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1423,7 +1426,7 @@ a.sparkline {
|
||||
margin: 0;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-color: darken($ui-base-color, 8%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-radius: 8px;
|
||||
border: 1px solid $ui-base-color;
|
||||
}
|
||||
@@ -1542,7 +1545,7 @@ a.sparkline {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
padding-inline-start: 15px * 2 + 40px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
@@ -1556,7 +1559,7 @@ a.sparkline {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
@@ -1634,13 +1637,13 @@ a.sparkline {
|
||||
}
|
||||
|
||||
.report-actions {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 18px;
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@@ -1752,15 +1755,15 @@ a.sparkline {
|
||||
|
||||
&__statuses-list {
|
||||
border-radius: 4px;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
|
||||
&__item {
|
||||
padding: 16px;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
@@ -1804,7 +1807,7 @@ a.sparkline {
|
||||
flex: 0 0 auto;
|
||||
width: 4px;
|
||||
height: 21px;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
margin: 0 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
@@ -1876,7 +1879,7 @@ a.sparkline {
|
||||
}
|
||||
|
||||
.status {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
background: $ui-base-color;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
@function hex-color($color) {
|
||||
@if type-of($color) == "color" {
|
||||
$color: str-slice(ie-hex-str($color), 4);
|
||||
@if meta.type-of($color) == "color" {
|
||||
$color: string.slice(color.ie-hex-str($color), 4);
|
||||
}
|
||||
|
||||
@return "%23" + unquote($color);
|
||||
@return "%23" + string.unquote($color);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -109,7 +115,7 @@ body {
|
||||
}
|
||||
|
||||
&.embed {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.scale($ui-base-color, $lightness: 4%);
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
@@ -122,7 +128,7 @@ body {
|
||||
}
|
||||
|
||||
&.admin {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -206,7 +212,7 @@ button {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.7;
|
||||
color: lighten($error-red, 4%);
|
||||
color: color.adjust($error-red, $lightness: 4%);
|
||||
text-align: center;
|
||||
|
||||
& > div {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "variables" as *;
|
||||
|
||||
.logo {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -84,7 +88,7 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1.9;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -110,7 +114,7 @@
|
||||
}
|
||||
|
||||
&__meta {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
@@ -126,7 +130,7 @@
|
||||
width: 0;
|
||||
border: 0;
|
||||
border-style: solid;
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-left-width: 1px;
|
||||
min-height: calc(100% - 60px);
|
||||
flex: 0 0 auto;
|
||||
@@ -231,7 +235,7 @@
|
||||
line-height: 22px;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
color: $highlight-text-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -241,7 +245,7 @@
|
||||
}
|
||||
|
||||
&__body {
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-top: 0;
|
||||
padding: 20px;
|
||||
font-size: 15px;
|
||||
@@ -251,18 +255,18 @@
|
||||
|
||||
&__domain-blocks {
|
||||
margin-top: 30px;
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 4px;
|
||||
|
||||
&__domain {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
color: $darker-text-color;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: darken($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: -2%);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.account {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@@ -157,7 +161,7 @@
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size-icon: 20px;
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -165,7 +169,7 @@
|
||||
|
||||
.account__header__wrapper {
|
||||
flex: 0 0 auto;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
.account__disclaimer {
|
||||
@@ -195,7 +199,7 @@
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size-icon: 16px;
|
||||
--size: 16px;
|
||||
|
||||
margin-inline-end: 5px;
|
||||
vertical-align: text-bottom;
|
||||
@@ -203,8 +207,8 @@
|
||||
}
|
||||
|
||||
.account__action-bar {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
@@ -222,7 +226,7 @@
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
flex: 0 1 100%;
|
||||
border-inline-start: 1px solid lighten($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 10px 0;
|
||||
border-bottom: 4px solid transparent;
|
||||
|
||||
@@ -278,7 +282,7 @@
|
||||
padding: 8px 10px;
|
||||
padding-inline-start: 68px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
min-height: 54px;
|
||||
|
||||
&__details {
|
||||
@@ -324,9 +328,9 @@
|
||||
.account--panel {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
flex-direction: row;
|
||||
padding: 5px;
|
||||
}
|
||||
@@ -370,7 +374,7 @@
|
||||
}
|
||||
|
||||
svg.gts-icon {
|
||||
--size-icon: 20px;
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -472,7 +476,7 @@
|
||||
}
|
||||
|
||||
svg.gts-icon {
|
||||
--size-icon: 20px;
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -481,9 +485,9 @@
|
||||
.account__moved-note {
|
||||
padding: 14px 10px;
|
||||
padding-bottom: 16px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
&__message {
|
||||
position: relative;
|
||||
@@ -563,7 +567,7 @@
|
||||
overflow: hidden;
|
||||
height: 145px;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
@@ -576,9 +580,9 @@
|
||||
|
||||
&__bar {
|
||||
position: relative;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
|
||||
.avatar {
|
||||
display: block;
|
||||
@@ -586,8 +590,8 @@
|
||||
width: 94px;
|
||||
|
||||
.account__avatar {
|
||||
background: darken($ui-base-color, 8%);
|
||||
border: 2px solid lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
border: 2px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -635,7 +639,7 @@
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size-icon: 24px;
|
||||
--size: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -707,10 +711,10 @@
|
||||
|
||||
.account__header__fields {
|
||||
margin: 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
|
||||
a {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: color.adjust($ui-highlight-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
dl:first-child .verified {
|
||||
@@ -753,8 +757,8 @@
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
@@ -783,7 +787,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($darker-text-color, 7%);
|
||||
color: color.adjust($darker-text-color, $lightness: 7%);
|
||||
background-color: rgba($darker-text-color, 0.15);
|
||||
}
|
||||
|
||||
@@ -792,7 +796,7 @@
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: darken($darker-text-color, 13%);
|
||||
color: color.adjust($darker-text-color, $lightness: -13%);
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -837,7 +841,7 @@
|
||||
.follow-request-banner,
|
||||
.account-memorial-banner {
|
||||
padding: 20px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
@@ -867,13 +871,18 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.announcements__item__content {
|
||||
word-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
@@ -42,7 +46,7 @@
|
||||
}
|
||||
|
||||
.announcements {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@@ -126,7 +130,7 @@
|
||||
|
||||
&__item {
|
||||
flex-shrink: 0;
|
||||
background: lighten($ui-base-color, 12%);
|
||||
background: color.adjust($ui-base-color, $lightness: 12%);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
margin: 2px;
|
||||
@@ -169,26 +173,26 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 16%);
|
||||
background: color.adjust($ui-base-color, $lightness: 16%);
|
||||
transition: all 200ms ease-out;
|
||||
transition-property: background-color, color;
|
||||
|
||||
&__count {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
color: color.adjust($darker-text-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
transition: all 100ms ease-in;
|
||||
transition-property: background-color, color;
|
||||
background-color: mix(
|
||||
lighten($ui-base-color, 12%),
|
||||
background-color: color.mix(
|
||||
color.adjust($ui-base-color, $lightness: 12%),
|
||||
$ui-highlight-color,
|
||||
80%
|
||||
);
|
||||
|
||||
.reactions-bar__item__count {
|
||||
color: lighten($highlight-text-color, 8%);
|
||||
color: color.adjust($highlight-text-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -219,7 +223,7 @@
|
||||
&:active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
color: lighten($darker-text-color, 4%);
|
||||
color: color.adjust($darker-text-color, $lightness: 4%);
|
||||
transition: all 200ms ease-out;
|
||||
transition-property: background-color, color;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.column__wrapper {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
@@ -108,7 +112,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.tabs-bar__wrapper {
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
position: sticky;
|
||||
top: $ui-header-height;
|
||||
z-index: 2;
|
||||
@@ -170,7 +174,7 @@ $ui-header-height: 55px;
|
||||
.column-back-button {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: $highlight-text-color;
|
||||
cursor: pointer;
|
||||
@@ -223,7 +227,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
@@ -235,7 +239,7 @@ $ui-header-height: 55px;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 11%);
|
||||
background: color.adjust($ui-base-color, $lightness: 11%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -327,7 +331,7 @@ $ui-header-height: 55px;
|
||||
color: $darker-text-color;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
.column-header > button,
|
||||
@@ -335,8 +339,6 @@ $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;
|
||||
@@ -345,6 +347,8 @@ $ui-header-height: 55px;
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -355,7 +359,6 @@ $ui-header-height: 55px;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 12px 0 13px 15px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.column-header__buttons {
|
||||
@@ -375,7 +378,7 @@ $ui-header-height: 55px;
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&.active {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -405,19 +408,21 @@ $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 {
|
||||
color: inherit;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@@ -515,7 +520,7 @@ $ui-header-height: 55px;
|
||||
height: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
@@ -531,7 +536,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.column-header__collapsible-inner {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@@ -627,11 +632,11 @@ $ui-header-height: 55px;
|
||||
&:not([disabled]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($ui-base-color, 10%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: darken($ui-highlight-color, 2%);
|
||||
background-color: color.adjust($ui-highlight-color, $lightness: -2%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -683,7 +688,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.follow_requests-unlocked_explanation {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
contain: initial;
|
||||
flex-grow: 0;
|
||||
}
|
||||
@@ -734,14 +739,12 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.column-inline-form {
|
||||
--size-icon: 20px;
|
||||
|
||||
padding: 7px 15px;
|
||||
padding-inline-end: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
|
||||
label {
|
||||
flex: 1 1 auto;
|
||||
@@ -761,10 +764,14 @@ $ui-header-height: 55px;
|
||||
margin: 0 5px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.column-settings__outer {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@@ -790,7 +797,7 @@ $ui-header-height: 55px;
|
||||
@include search-input;
|
||||
|
||||
&::placeholder {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
color: color.adjust($darker-text-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
@@ -804,7 +811,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@@ -823,7 +830,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
&__multi-value {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
&__remove {
|
||||
cursor: pointer;
|
||||
@@ -831,8 +838,8 @@ $ui-header-height: 55px;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 12%);
|
||||
color: lighten($darker-text-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 12%);
|
||||
color: color.adjust($darker-text-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -852,12 +859,12 @@ $ui-header-height: 55px;
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($dark-text-color, 4%);
|
||||
color: color.adjust($dark-text-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
|
||||
&__indicator-separator {
|
||||
background-color: lighten($ui-base-color, 8%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
&__menu {
|
||||
@@ -878,7 +885,7 @@ $ui-header-height: 55px;
|
||||
|
||||
&--is-focused,
|
||||
&--is-selected {
|
||||
background: darken($ui-secondary-color, 10%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -892,7 +899,7 @@ $ui-header-height: 55px;
|
||||
|
||||
.notifications-permission-banner {
|
||||
padding: 30px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -970,8 +977,8 @@ $ui-header-height: 55px;
|
||||
|
||||
.column-list {
|
||||
margin: 0 20px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
background: darken($ui-base-color, 2%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -2%);
|
||||
border-radius: 4px;
|
||||
|
||||
&__empty-message {
|
||||
@@ -1051,8 +1058,6 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
--size-icon: 20px;
|
||||
|
||||
float: right;
|
||||
|
||||
.icon-button {
|
||||
@@ -1065,6 +1070,8 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -1086,7 +1093,7 @@ $ui-header-height: 55px;
|
||||
}
|
||||
|
||||
.hashtag-header {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 15px;
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.compose-form {
|
||||
padding: 10px;
|
||||
|
||||
@@ -307,7 +311,7 @@
|
||||
&:focus,
|
||||
&:active,
|
||||
&.selected {
|
||||
background: darken($ui-secondary-color, 10%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -10%);
|
||||
}
|
||||
|
||||
> .account,
|
||||
@@ -398,7 +402,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($secondary-text-color, 7%);
|
||||
color: color.adjust($secondary-text-color, $lightness: 7%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -469,7 +473,7 @@
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: darken($simple-background-color, 8%);
|
||||
background: color.adjust($simple-background-color, $lightness: -8%);
|
||||
}
|
||||
|
||||
.upload-progress__tracker {
|
||||
@@ -495,7 +499,7 @@
|
||||
padding: 10px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
color: $action-button-color;
|
||||
background: darken($simple-background-color, 8%);
|
||||
background: color.adjust($simple-background-color, $lightness: -8%);
|
||||
}
|
||||
|
||||
.compose-form__buttons {
|
||||
@@ -514,7 +518,7 @@
|
||||
}
|
||||
|
||||
svg.gts-icon {
|
||||
--size-icon: 20px;
|
||||
--size: 20px;
|
||||
|
||||
scale: 1.2;
|
||||
}
|
||||
@@ -565,14 +569,16 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -603,28 +609,29 @@
|
||||
}
|
||||
|
||||
&.active:hover {
|
||||
background: lighten($ui-highlight-color, 4%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__publish {
|
||||
display: flex;
|
||||
column-gap: 5px;
|
||||
flex: 0 0 auto;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
column-gap: 5px;
|
||||
|
||||
button {
|
||||
--size-icon: 18px;
|
||||
.compose-form__publish-button-wrapper {
|
||||
overflow: hidden;
|
||||
padding-top: 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
gap: 5px;
|
||||
padding: 8px 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
button {
|
||||
padding: 7px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& > .side_arm {
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -684,7 +691,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-highlight-color, 4%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.scrollable .account-card {
|
||||
margin: 10px;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.scrollable .account-card__title__avatar {
|
||||
img,
|
||||
.account__avatar {
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable .account-card__bio::after {
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
lighten($ui-base-color, 8%),
|
||||
color.adjust($ui-base-color, $lightness: 8%),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
@@ -61,8 +65,8 @@
|
||||
vertical-align: middle;
|
||||
|
||||
&.checked {
|
||||
border-color: lighten($ui-highlight-color, 4%);
|
||||
background: lighten($ui-highlight-color, 4%);
|
||||
border-color: color.adjust($ui-highlight-color, $lightness: 4%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
@use "sass:color";
|
||||
@use "../variables" as *;
|
||||
|
||||
.domain {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
.domain__domain-name {
|
||||
flex: 1 1 auto;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
$doodle-background: #d9e1e8;
|
||||
|
||||
.doodle-modal {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.drawer {
|
||||
display: flex;
|
||||
gap: var(--size-layout-gap);
|
||||
@@ -73,8 +77,6 @@
|
||||
}
|
||||
|
||||
.layout-multiple-columns .drawer__tab {
|
||||
--size-icon: 24px;
|
||||
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
@@ -90,13 +92,15 @@
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&.active {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -149,10 +153,12 @@
|
||||
}
|
||||
|
||||
.navigation-bar .compose__action-bar button {
|
||||
--size-icon: 20px;
|
||||
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer--results {
|
||||
@@ -161,15 +167,15 @@
|
||||
}
|
||||
|
||||
.search-results__section {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__header {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 15px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
@@ -210,7 +216,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($secondary-text-color, 4%);
|
||||
color: color.adjust($secondary-text-color, $lightness: 4%);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@@ -247,7 +253,7 @@
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: lighten($ui-base-color, 4%)
|
||||
background: color.adjust($ui-base-color, $lightness: 4%)
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z"/></svg>')
|
||||
no-repeat bottom / 100% auto;
|
||||
flex: 1;
|
||||
@@ -278,7 +284,7 @@
|
||||
}
|
||||
|
||||
.pseudo-drawer {
|
||||
background: lighten($ui-base-color, 13%);
|
||||
background: color.adjust($ui-base-color, $lightness: 13%);
|
||||
font-size: 13px;
|
||||
text-align: start;
|
||||
}
|
||||
@@ -302,7 +308,7 @@
|
||||
bottom /
|
||||
100%
|
||||
auto,
|
||||
lighten($ui-base-color, 4%);
|
||||
color.adjust($ui-base-color, $lightness: 4%);
|
||||
} @else {
|
||||
background:
|
||||
url("~flavours/glitch/images/wave-drawer-glitched.png")
|
||||
@@ -310,7 +316,7 @@
|
||||
bottom /
|
||||
100%
|
||||
auto,
|
||||
lighten($ui-base-color, 4%);
|
||||
color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
& > .mastodon {
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.emojione {
|
||||
font-size: inherit;
|
||||
vertical-align: middle;
|
||||
@@ -77,8 +80,8 @@
|
||||
color: $inverted-text-color;
|
||||
background: transparent;
|
||||
|
||||
svg.gts-icon {
|
||||
--size-icon: 24px;
|
||||
svg {
|
||||
--size: 24px;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.emoji-mart {
|
||||
&,
|
||||
* {
|
||||
@@ -15,7 +19,7 @@
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
border: 0 solid darken($ui-secondary-color, 8%);
|
||||
border: 0 solid color.adjust($ui-secondary-color, $lightness: -8%);
|
||||
|
||||
&:first-child {
|
||||
border-bottom-width: 1px;
|
||||
@@ -52,7 +56,7 @@
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
color: darken($lighter-text-color, 4%);
|
||||
color: color.adjust($lighter-text-color, $lightness: -4%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,7 +64,7 @@
|
||||
color: $highlight-text-color;
|
||||
|
||||
&:hover {
|
||||
color: darken($highlight-text-color, 4%);
|
||||
color: color.adjust($highlight-text-color, $lightness: -4%);
|
||||
}
|
||||
|
||||
.emoji-mart-anchor-bar {
|
||||
@@ -74,7 +78,7 @@
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: darken($ui-highlight-color, 3%);
|
||||
background-color: color.adjust($ui-highlight-color, $lightness: -3%);
|
||||
}
|
||||
|
||||
.emoji-mart-anchors {
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.account-card__header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.explore__search-header {
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
@@ -14,12 +18,12 @@
|
||||
}
|
||||
|
||||
.search__input {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.search__popout {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.search .fa {
|
||||
@@ -45,7 +49,7 @@
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
gap: 15px;
|
||||
|
||||
&:last-child {
|
||||
|
||||
@@ -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";
|
||||
@use "misc";
|
||||
@use "boost";
|
||||
@use "accounts";
|
||||
@use "domains";
|
||||
@use "status";
|
||||
@use "modal";
|
||||
@use "compose_form";
|
||||
@use "columns";
|
||||
@use "regeneration_indicator";
|
||||
@use "directory";
|
||||
@use "search";
|
||||
@use "emoji";
|
||||
@use "doodle";
|
||||
@use "drawer";
|
||||
@use "media";
|
||||
@use "sensitive";
|
||||
@use "lists";
|
||||
@use "emoji_picker";
|
||||
@use "local_settings";
|
||||
@use "single_column";
|
||||
@use "announcements";
|
||||
@use "explore";
|
||||
@use "scrollbars";
|
||||
@use "signed_out";
|
||||
@use "privacy_policy";
|
||||
@use "about";
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.list-editor {
|
||||
background: $ui-base-color;
|
||||
flex-direction: column;
|
||||
@@ -12,7 +16,7 @@
|
||||
|
||||
h4 {
|
||||
padding: 15px 0;
|
||||
background: lighten($ui-base-color, 13%);
|
||||
background: color.adjust($ui-base-color, $lightness: 13%);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
@@ -65,11 +69,11 @@
|
||||
}
|
||||
|
||||
&__account {
|
||||
background: lighten($ui-base-color, 13%);
|
||||
background: color.adjust($ui-base-color, $lightness: 13%);
|
||||
}
|
||||
|
||||
&__lists {
|
||||
background: lighten($ui-base-color, 13%);
|
||||
background: color.adjust($ui-base-color, $lightness: 13%);
|
||||
height: 50vh;
|
||||
border-radius: 0 0 8px 8px;
|
||||
overflow-y: auto;
|
||||
@@ -77,7 +81,7 @@
|
||||
|
||||
.list {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.list__wrapper {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.glitch.local-settings {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -64,7 +68,7 @@
|
||||
font-size: inherit;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
background: lighten($ui-secondary-color, 8%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: 8%);
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
|
||||
@@ -91,7 +95,7 @@
|
||||
}
|
||||
|
||||
.glitch.local-settings__navigation {
|
||||
background: lighten($ui-secondary-color, 8%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: 8%);
|
||||
width: 212px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.video-error-cover {
|
||||
align-items: center;
|
||||
background: $base-overlay-background;
|
||||
@@ -23,7 +27,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($darker-text-color, 8%);
|
||||
color: color.adjust($darker-text-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.status__content > & {
|
||||
@@ -189,7 +193,7 @@
|
||||
color: rgba($white, 0.7);
|
||||
|
||||
.gts-icon {
|
||||
--size-icon: 24px;
|
||||
--size: 24px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
@@ -283,10 +287,12 @@
|
||||
padding: 20px 0;
|
||||
|
||||
.icon-button {
|
||||
--size-icon: 24px;
|
||||
|
||||
color: $white;
|
||||
|
||||
.gts-icon {
|
||||
--size: 24px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@@ -383,7 +389,7 @@
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-radius: 4px;
|
||||
padding-bottom: 44px;
|
||||
width: 100%;
|
||||
@@ -552,7 +558,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($darker-text-color, 7%);
|
||||
color: color.adjust($darker-text-color, $lightness: 7%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -569,14 +575,14 @@
|
||||
}
|
||||
|
||||
&__buttons-bar {
|
||||
--size-icon: 20px;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
margin: 0 -5px;
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -688,7 +694,7 @@
|
||||
inset-inline-start: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
&__handle {
|
||||
@@ -701,7 +707,7 @@
|
||||
inset-inline-start: 0;
|
||||
margin-inline-start: -6px;
|
||||
transform: translate(0, -50%);
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 8%);
|
||||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
|
||||
opacity: 0;
|
||||
|
||||
@@ -755,7 +761,7 @@
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
top: 14px;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
&__buffer {
|
||||
@@ -771,7 +777,7 @@
|
||||
height: 12px;
|
||||
top: 10px;
|
||||
margin-inline-start: -6px;
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 8%);
|
||||
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
|
||||
|
||||
.no-reduce-motion & {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.app-body {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@@ -169,7 +173,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
color: lighten($action-button-color, 7%);
|
||||
color: color.adjust($action-button-color, $lightness: 7%);
|
||||
background-color: rgba($action-button-color, 0.15);
|
||||
transition: all 200ms ease-out;
|
||||
transition-property: background-color, color;
|
||||
@@ -214,7 +218,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
color: darken($lighter-text-color, 7%);
|
||||
color: color.adjust($lighter-text-color, $lightness: -7%);
|
||||
background-color: rgba($lighter-text-color, 0.15);
|
||||
}
|
||||
|
||||
@@ -230,7 +234,7 @@
|
||||
color: $highlight-text-color;
|
||||
|
||||
&.disabled {
|
||||
color: lighten($highlight-text-color, 13%);
|
||||
color: color.adjust($highlight-text-color, $lightness: 13%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -288,7 +292,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus-visible {
|
||||
color: darken($lighter-text-color, 7%);
|
||||
color: color.adjust($lighter-text-color, $lightness: -7%);
|
||||
background-color: rgba($lighter-text-color, 0.15);
|
||||
transition: all 200ms ease-out;
|
||||
transition-property: background-color, color;
|
||||
@@ -299,7 +303,7 @@
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($lighter-text-color, 20%);
|
||||
color: color.adjust($lighter-text-color, $lightness: 20%);
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -701,7 +705,7 @@ body > [data-popper-placement] {
|
||||
.tabs-bar {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
flex: 0 0 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -716,7 +720,7 @@ body > [data-popper-placement] {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
transition: all 50ms linear;
|
||||
transition-property: border-bottom, background, color;
|
||||
|
||||
@@ -729,8 +733,8 @@ body > [data-popper-placement] {
|
||||
&:focus,
|
||||
&:active {
|
||||
@include multi-columns("screen and (min-width: 631px)") {
|
||||
background: lighten($ui-base-color, 14%);
|
||||
border-bottom-color: lighten($ui-base-color, 14%);
|
||||
background: color.adjust($ui-base-color, $lightness: 14%);
|
||||
border-bottom-color: color.adjust($ui-base-color, $lightness: 14%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -758,7 +762,7 @@ body > [data-popper-placement] {
|
||||
inset-inline-start: 9px;
|
||||
top: -13px;
|
||||
background: $ui-highlight-color;
|
||||
border: 2px solid lighten($ui-base-color, 8%);
|
||||
border: 2px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
@@ -780,7 +784,7 @@ body > [data-popper-placement] {
|
||||
}
|
||||
|
||||
.column-link--transparent .icon-with-badge__badge {
|
||||
border-color: darken($ui-base-color, 8%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
@@ -861,11 +865,11 @@ body > [data-popper-placement] {
|
||||
|
||||
.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
|
||||
.react-toggle-track {
|
||||
background-color: darken($ui-base-color, 10%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: -10%);
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: darken($ui-highlight-color, 2%);
|
||||
background-color: color.adjust($ui-highlight-color, $lightness: -2%);
|
||||
}
|
||||
|
||||
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled)
|
||||
@@ -918,7 +922,7 @@ body > [data-popper-placement] {
|
||||
height: 22px;
|
||||
border: 1px solid $ui-base-color;
|
||||
border-radius: 50%;
|
||||
background-color: darken($simple-background-color, 2%);
|
||||
background-color: color.adjust($simple-background-color, $lightness: -2%);
|
||||
box-sizing: border-box;
|
||||
transition: all 0.25s ease;
|
||||
transition-property: border-color, left;
|
||||
@@ -963,7 +967,7 @@ body > [data-popper-placement] {
|
||||
margin-top: 10px;
|
||||
|
||||
h4 {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
@@ -1029,8 +1033,8 @@ body > [data-popper-placement] {
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
background-color: lighten($ui-base-color, 8%);
|
||||
border: 1px solid darken($ui-base-color, 4%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -4%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1059,7 +1063,7 @@ body > [data-popper-placement] {
|
||||
|
||||
&.light {
|
||||
color: $inverted-text-color;
|
||||
border-bottom: 2px solid lighten($ui-base-color, 27%);
|
||||
border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 27%);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
@@ -1093,7 +1097,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.reduce-motion button.icon-button.disabled i.fa-retweet {
|
||||
color: darken($action-button-color, 13%);
|
||||
color: color.adjust($action-button-color, $lightness: -13%);
|
||||
}
|
||||
|
||||
.load-more {
|
||||
@@ -1112,12 +1116,12 @@ button.icon-button.active i.fa-retweet {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.load-gap {
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.timeline-hint {
|
||||
@@ -1140,7 +1144,7 @@ button.icon-button.active i.fa-retweet {
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
color: lighten($highlight-text-color, 4%);
|
||||
color: color.adjust($highlight-text-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1177,8 +1181,8 @@ button.icon-button.active i.fa-retweet {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid lighten($ui-base-color, 20%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 20%);
|
||||
box-shadow: 0 0 5px black;
|
||||
border-bottom: 1px solid $ui-base-color;
|
||||
}
|
||||
@@ -1232,7 +1236,7 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.circular-progress {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
color: color.adjust($ui-base-color, $lightness: 26%);
|
||||
animation: 1.4s linear 0s infinite normal none running simple-rotate;
|
||||
|
||||
circle {
|
||||
@@ -1315,8 +1319,6 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
.spoiler-button {
|
||||
--size-icon: 18px;
|
||||
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
@@ -1325,6 +1327,8 @@ button.icon-button.active i.fa-retweet {
|
||||
z-index: 100;
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 18px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1524,12 +1528,12 @@ button.icon-button.active i.fa-retweet {
|
||||
|
||||
.conversation {
|
||||
display: flex;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 5px;
|
||||
padding-bottom: 0;
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@@ -1597,10 +1601,10 @@ button.icon-button.active i.fa-retweet {
|
||||
}
|
||||
|
||||
&--unread {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
.conversation__content__info {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.modal-container--preloader {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
@@ -134,7 +138,7 @@
|
||||
.onboarding-modal__paginator,
|
||||
.error-modal__footer {
|
||||
flex: 0 0 auto;
|
||||
background: darken($ui-secondary-color, 8%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -8%);
|
||||
display: flex;
|
||||
padding: 25px;
|
||||
|
||||
@@ -158,8 +162,8 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken($lighter-text-color, 4%);
|
||||
background-color: darken($ui-secondary-color, 16%);
|
||||
color: color.adjust($lighter-text-color, $lightness: -4%);
|
||||
background-color: color.adjust($ui-secondary-color, $lightness: -16%);
|
||||
}
|
||||
|
||||
&.onboarding-modal__done,
|
||||
@@ -169,7 +173,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($inverted-text-color, 4%);
|
||||
color: color.adjust($inverted-text-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -190,17 +194,17 @@
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 14px;
|
||||
background: darken($ui-secondary-color, 16%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -16%);
|
||||
margin: 0 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: darken($ui-secondary-color, 18%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -18%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
background: darken($ui-secondary-color, 24%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -24%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -231,7 +235,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($highlight-text-color, 4%);
|
||||
color: color.adjust($highlight-text-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -329,7 +333,7 @@
|
||||
}
|
||||
|
||||
.figure {
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
color: $secondary-text-color;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
@@ -421,7 +425,7 @@
|
||||
.mute-modal,
|
||||
.block-modal,
|
||||
.compare-history-modal {
|
||||
background: lighten($ui-secondary-color, 8%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: 8%);
|
||||
color: $inverted-text-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
@@ -455,7 +459,7 @@
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
color: color.adjust($secondary-text-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -537,7 +541,7 @@
|
||||
max-width: 90vw;
|
||||
width: 480px;
|
||||
height: 80vh;
|
||||
background: lighten($ui-secondary-color, 8%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: 8%);
|
||||
color: $inverted-text-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
@@ -577,7 +581,7 @@
|
||||
&__lead {
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
color: lighten($inverted-text-color, 16%);
|
||||
color: color.adjust($inverted-text-color, $lightness: 16%);
|
||||
margin-bottom: 30px;
|
||||
|
||||
a {
|
||||
@@ -620,7 +624,7 @@
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
background: color.adjust($ui-primary-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -639,7 +643,7 @@
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($inverted-text-color, 15%);
|
||||
border-color: color.adjust($inverted-text-color, $lightness: 15%);
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
@@ -660,7 +664,7 @@
|
||||
|
||||
& > .poll__option__text {
|
||||
font-size: 13px;
|
||||
color: lighten($inverted-text-color, 16%);
|
||||
color: color.adjust($inverted-text-color, $lightness: 16%);
|
||||
|
||||
strong {
|
||||
font-size: 17px;
|
||||
@@ -829,7 +833,7 @@
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid darken($ui-secondary-color, 8%);
|
||||
border: 1px solid color.adjust($ui-secondary-color, $lightness: -8%);
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@@ -978,7 +982,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: darken($lighter-text-color, 4%);
|
||||
color: color.adjust($lighter-text-color, $lightness: -4%);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -1022,9 +1026,9 @@
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
background: $simple-background-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
border: 1px solid darken($simple-background-color, 14%);
|
||||
border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
padding-inline-end: 30px;
|
||||
@@ -1060,13 +1064,15 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1157,7 +1163,7 @@
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@@ -1362,7 +1368,7 @@ img.modal-warning {
|
||||
&__input {
|
||||
@include search-input;
|
||||
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
padding: 4px 6px;
|
||||
color: $primary-text-color;
|
||||
font-size: 16px;
|
||||
@@ -1379,7 +1385,7 @@ img.modal-warning {
|
||||
flex: 1 1 auto;
|
||||
|
||||
&::placeholder {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
color: color.adjust($darker-text-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@@ -1396,12 +1402,12 @@ img.modal-warning {
|
||||
margin-top: -1px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
&.focused &__input {
|
||||
border-color: $highlight-text-color;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
&.invalid &__input {
|
||||
@@ -1469,7 +1475,7 @@ img.modal-warning {
|
||||
input {
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
border: 1px solid $highlight-text-color;
|
||||
color: $darker-text-color;
|
||||
border-radius: 4px;
|
||||
@@ -1482,7 +1488,7 @@ img.modal-warning {
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.privacy-policy {
|
||||
background: $ui-base-color;
|
||||
padding: 20px;
|
||||
@@ -169,14 +173,14 @@
|
||||
|
||||
code {
|
||||
font-size: 0.875em;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.3em;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.regeneration-indicator {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
/* Scrollbars */
|
||||
html {
|
||||
scrollbar-color: lighten($ui-base-color, 4%)
|
||||
scrollbar-color: color.adjust($ui-base-color, $lightness: 4%)
|
||||
rgba($base-overlay-background, 0.1);
|
||||
}
|
||||
|
||||
@@ -10,17 +14,17 @@ html {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border: 0 none $base-border-color;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: lighten($ui-base-color, 6%);
|
||||
background: color.adjust($ui-base-color, $lightness: 6%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.search {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search__icon,
|
||||
.search__icon.gts-icon {
|
||||
--size-icon: 20px;
|
||||
--size: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
@@ -35,8 +39,6 @@
|
||||
}
|
||||
|
||||
.search__button {
|
||||
--size-icon: 20px;
|
||||
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
@@ -50,12 +52,14 @@
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 20px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&:hover {
|
||||
background: darken($ui-base-color, 10%);
|
||||
background: color.adjust($ui-base-color, $lightness: -10%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,11 +158,13 @@
|
||||
|
||||
.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 {
|
||||
@@ -166,7 +172,7 @@
|
||||
color: $dark-text-color;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@@ -179,8 +185,8 @@
|
||||
.trends {
|
||||
&__header {
|
||||
color: $dark-text-color;
|
||||
background: lighten($ui-base-color, 2%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -4%);
|
||||
font-weight: 500;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
@@ -196,7 +202,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
gap: 15px;
|
||||
|
||||
&:last-child {
|
||||
@@ -253,7 +259,7 @@
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
stroke: lighten($highlight-text-color, 6%) !important;
|
||||
stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
|
||||
fill: none !important;
|
||||
}
|
||||
}
|
||||
@@ -277,31 +283,37 @@
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
stroke: lighten($gold-star, 6%) !important;
|
||||
stroke: color.adjust($gold-star, $lightness: 6%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.trends__item__name {
|
||||
color: lighten($ui-base-color, 12%);
|
||||
color: color.adjust($ui-base-color, $lightness: 12%);
|
||||
|
||||
a {
|
||||
color: lighten($ui-base-color, 12%);
|
||||
color: color.adjust($ui-base-color, $lightness: 12%);
|
||||
}
|
||||
}
|
||||
|
||||
.trends__item__current {
|
||||
color: lighten($ui-base-color, 12%);
|
||||
color: color.adjust($ui-base-color, $lightness: 12%);
|
||||
}
|
||||
|
||||
.trends__item__sparkline {
|
||||
path:first-child {
|
||||
fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
|
||||
fill: rgba(
|
||||
color.adjust($ui-base-color, $lightness: 12%),
|
||||
0.25
|
||||
) !important;
|
||||
}
|
||||
|
||||
path:last-child {
|
||||
stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
|
||||
stroke: color.adjust(
|
||||
color.adjust($ui-base-color, $lightness: 12%),
|
||||
$lightness: 6%
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../variables" as *;
|
||||
|
||||
.sensitive-info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.sign-in-banner {
|
||||
padding: 10px;
|
||||
|
||||
@@ -14,7 +18,7 @@
|
||||
text-decoration: underline;
|
||||
|
||||
.fa {
|
||||
color: lighten($dark-text-color, 7%);
|
||||
color: color.adjust($dark-text-color, $lightness: 7%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use "sass:color";
|
||||
@use "columns" as *;
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
.compose-panel {
|
||||
width: 285px;
|
||||
margin-top: 10px;
|
||||
@@ -78,7 +83,7 @@
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-top: 1px solid lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
@@ -260,7 +265,8 @@
|
||||
.navigation-panel {
|
||||
margin: 0;
|
||||
background: $ui-base-color;
|
||||
border-inline-start: 1px solid lighten($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid
|
||||
color.adjust($ui-base-color, $lightness: 8%);
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@@ -278,7 +284,7 @@
|
||||
.layout-single-column .ui__header {
|
||||
display: flex;
|
||||
background: $ui-base-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.layout-single-column {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "../mixins" as *;
|
||||
@use "../variables" as *;
|
||||
|
||||
@keyframes spring-flip-in {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
@@ -85,7 +89,17 @@
|
||||
text-decoration: underline;
|
||||
|
||||
.fa {
|
||||
color: lighten($dark-text-color, 7%);
|
||||
color: color.adjust($dark-text-color, $lightness: 7%);
|
||||
}
|
||||
}
|
||||
|
||||
&.mention {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,7 +153,7 @@
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.notification-follow,
|
||||
@@ -147,7 +161,7 @@
|
||||
position: relative;
|
||||
|
||||
// same like Status
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
.account {
|
||||
border-bottom: 0 none;
|
||||
@@ -157,7 +171,7 @@
|
||||
.focusable {
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
|
||||
&.status.status-direct.muted {
|
||||
background: transparent;
|
||||
@@ -165,7 +179,7 @@
|
||||
|
||||
.detailed-status,
|
||||
.detailed-status__action-bar {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -177,7 +191,7 @@
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
height: auto;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
cursor: auto;
|
||||
|
||||
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
|
||||
@@ -205,9 +219,9 @@
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
--color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)};
|
||||
--color-status-bg: #{color.mix($ui-base-color, $ui-highlight-color, 95%)};
|
||||
|
||||
border-bottom-color: lighten($ui-base-color, 12%);
|
||||
border-bottom-color: color.adjust($ui-base-color, $lightness: 12%);
|
||||
}
|
||||
|
||||
&.light {
|
||||
@@ -239,7 +253,7 @@
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
background: color.adjust($ui-primary-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -298,15 +312,15 @@
|
||||
|
||||
&:focus > .status__content::after {
|
||||
background: linear-gradient(
|
||||
rgba(lighten($ui-base-color, 4%), 0),
|
||||
rgba(lighten($ui-base-color, 4%), 1)
|
||||
rgba(color.adjust($ui-base-color, $lightness: 4%), 0),
|
||||
rgba(color.adjust($ui-base-color, $lightness: 4%), 1)
|
||||
);
|
||||
}
|
||||
|
||||
&.status-direct > .status__content::after {
|
||||
background: linear-gradient(
|
||||
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
|
||||
rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
|
||||
rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0),
|
||||
rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 1)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -329,7 +343,7 @@
|
||||
background: transparent;
|
||||
|
||||
.icon-button.disabled {
|
||||
color: lighten($action-button-color, 13%);
|
||||
color: color.adjust($action-button-color, $lightness: 13%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -370,7 +384,7 @@
|
||||
padding: 0 10px;
|
||||
|
||||
.detailed-status__display-name {
|
||||
color: lighten($inverted-text-color, 16%);
|
||||
color: color.adjust($inverted-text-color, $lightness: 16%);
|
||||
|
||||
span {
|
||||
display: inline;
|
||||
@@ -399,11 +413,19 @@
|
||||
}
|
||||
|
||||
.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,
|
||||
@@ -428,9 +450,9 @@
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
padding: 15px;
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
padding: 14px 10px;
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
&--flex {
|
||||
display: flex;
|
||||
@@ -469,9 +491,9 @@
|
||||
}
|
||||
|
||||
.detailed-status__action-bar {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px 0;
|
||||
@@ -561,8 +583,9 @@ a.status__display-name,
|
||||
|
||||
.status__avatar {
|
||||
flex: none;
|
||||
height: var(--size-avatar);
|
||||
width: var(--size-avatar);
|
||||
margin-inline-end: 10px;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
@@ -587,7 +610,7 @@ a.status__display-name,
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 29%);
|
||||
background: color.adjust($ui-base-color, $lightness: 29%);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -604,7 +627,7 @@ a.status__display-name,
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-radius: 4px;
|
||||
color: $dark-text-color;
|
||||
margin-top: 14px;
|
||||
@@ -666,7 +689,7 @@ a.status-card {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -727,7 +750,7 @@ a.status-card {
|
||||
|
||||
.status-card__image {
|
||||
flex: 0 0 100px;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
position: relative;
|
||||
|
||||
& > .fa {
|
||||
@@ -758,7 +781,7 @@ a.status-card {
|
||||
}
|
||||
|
||||
.status-card.compact {
|
||||
border-color: lighten($ui-base-color, 4%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 4%);
|
||||
|
||||
&.interactive {
|
||||
border: 0;
|
||||
@@ -779,7 +802,7 @@ a.status-card {
|
||||
}
|
||||
|
||||
a.status-card.compact:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
.status-card__image-image {
|
||||
@@ -814,7 +837,7 @@ a.status-card.compact:hover {
|
||||
.attachment-list {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-radius: 4px;
|
||||
margin-top: 14px;
|
||||
overflow: hidden;
|
||||
@@ -824,7 +847,7 @@ a.status-card.compact:hover {
|
||||
color: $dark-text-color;
|
||||
padding: 8px 18px;
|
||||
cursor: default;
|
||||
border-inline-end: 1px solid lighten($ui-base-color, 8%);
|
||||
border-inline-end: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -877,7 +900,7 @@ a.status-card.compact:hover {
|
||||
|
||||
.status__wrapper--filtered__button {
|
||||
display: inline;
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: color.adjust($ui-highlight-color, $lightness: 8%);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
@@ -918,12 +941,12 @@ a.status-card.compact:hover {
|
||||
}
|
||||
|
||||
&--first-in-thread {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
&__line {
|
||||
height: 10px - 4px;
|
||||
border-inline-start: 2px solid lighten($ui-base-color, 8%);
|
||||
border-inline-start: 2px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -969,7 +992,7 @@ a.status-card.compact:hover {
|
||||
|
||||
&__footer {
|
||||
border-radius: 0 0 4px 4px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
padding: 10px;
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
@@ -978,7 +1001,7 @@ a.status-card.compact:hover {
|
||||
|
||||
&__header {
|
||||
border-radius: 4px 4px 0 0;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1018,7 +1041,7 @@ a.status-card.compact:hover {
|
||||
|
||||
.picture-in-picture-placeholder {
|
||||
box-sizing: border-box;
|
||||
border: 2px dashed lighten($ui-base-color, 8%);
|
||||
border: 2px dashed color.adjust($ui-base-color, $lightness: 8%);
|
||||
background: $base-shadow-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1041,6 +1064,6 @@ a.status-card.compact:hover {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 12%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.container-alt {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@import "contrast/variables";
|
||||
@import "index";
|
||||
@import "contrast/diff";
|
||||
@use "contrast/variables";
|
||||
@use "index";
|
||||
@use "contrast/diff";
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "sass:color";
|
||||
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
|
||||
@@ -11,12 +13,18 @@ $ui-primary-color: $classic-primary-color !default;
|
||||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
|
||||
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
||||
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
||||
$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
|
||||
$action-button-color: lighten($ui-base-color, 50%);
|
||||
$darker-text-color: color.adjust($ui-primary-color, $lightness: 20%) !default;
|
||||
$dark-text-color: color.adjust($ui-primary-color, $lightness: 12%) !default;
|
||||
$secondary-text-color: color.adjust(
|
||||
$ui-secondary-color,
|
||||
$lightness: 6%
|
||||
) !default;
|
||||
$highlight-text-color: color.adjust(
|
||||
$ui-highlight-color,
|
||||
$lightness: 10%
|
||||
) !default;
|
||||
$action-button-color: color.adjust($ui-base-color, $lightness: 50%);
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: darken($ui-base-color, 6%) !default;
|
||||
$light-text-color: darken($ui-primary-color, 40%) !default;
|
||||
$lighter-text-color: color.adjust($ui-base-color, $lightness: -6%) !default;
|
||||
$light-text-color: color.adjust($ui-primary-color, $lightness: -40%) !default;
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.dashboard__counters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -13,7 +17,7 @@
|
||||
& > div,
|
||||
& > a {
|
||||
padding: 20px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
@@ -27,7 +31,7 @@
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -99,12 +103,12 @@
|
||||
}
|
||||
|
||||
&.positive {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
color: $valid-value-color;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
color: $error-value-color;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
$no-columns-breakpoint: 600px;
|
||||
|
||||
code {
|
||||
@@ -164,7 +168,7 @@ code {
|
||||
code {
|
||||
border-radius: 3px;
|
||||
padding: 0.2em 0.4em;
|
||||
background: darken($ui-base-color, 12%);
|
||||
background: color.adjust($ui-base-color, $lightness: -12%);
|
||||
}
|
||||
|
||||
li {
|
||||
@@ -292,7 +296,7 @@ code {
|
||||
|
||||
.required abbr {
|
||||
text-decoration: none;
|
||||
color: lighten($error-value-color, 12%);
|
||||
color: color.adjust($error-value-color, $lightness: 12%);
|
||||
}
|
||||
|
||||
.fields-group {
|
||||
@@ -435,13 +439,13 @@ code {
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: darken($ui-base-color, 10%);
|
||||
border: 1px solid darken($ui-base-color, 14%);
|
||||
background: color.adjust($ui-base-color, $lightness: -10%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
|
||||
&::placeholder {
|
||||
color: lighten($darker-text-color, 4%);
|
||||
color: color.adjust($darker-text-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
@@ -453,13 +457,13 @@ code {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: darken($ui-base-color, 20%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: -20%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: $highlight-text-color;
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -470,13 +474,13 @@ code {
|
||||
input[type="datetime-local"] {
|
||||
&:focus:invalid:not(:placeholder-shown),
|
||||
&:required:invalid:not(:placeholder-shown) {
|
||||
border-color: lighten($error-red, 12%);
|
||||
border-color: color.adjust($error-red, $lightness: 12%);
|
||||
}
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label {
|
||||
color: lighten($error-red, 12%);
|
||||
color: color.adjust($error-red, $lightness: 12%);
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
@@ -486,13 +490,13 @@ code {
|
||||
input[type="datetime-local"],
|
||||
textarea,
|
||||
select {
|
||||
border-color: lighten($error-red, 12%);
|
||||
border-color: color.adjust($error-red, $lightness: 12%);
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: lighten($error-red, 12%);
|
||||
color: color.adjust($error-red, $lightness: 12%);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
@@ -584,10 +588,10 @@ code {
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
background: darken($ui-base-color, 10%)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
background: color.adjust($ui-base-color, $lightness: -10%)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
border: 1px solid darken($ui-base-color, 14%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-end: 30px;
|
||||
@@ -628,8 +632,8 @@ code {
|
||||
width: 5px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
rgba(darken($ui-base-color, 10%), 0),
|
||||
darken($ui-base-color, 10%)
|
||||
rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
|
||||
color.adjust($ui-base-color, $lightness: -10%)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -644,7 +648,7 @@ code {
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
color: $darker-text-color;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
@@ -725,7 +729,7 @@ code {
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -809,7 +813,7 @@ code {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($highlight-text-color, 8%);
|
||||
color: color.adjust($highlight-text-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -855,7 +859,7 @@ code {
|
||||
.permissions-list {
|
||||
border: 1px solid $ui-base-color;
|
||||
border-radius: 4px;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@@ -1005,8 +1009,8 @@ code {
|
||||
}
|
||||
|
||||
.input-copy {
|
||||
background: darken($ui-base-color, 10%);
|
||||
border: 1px solid darken($ui-base-color, 14%);
|
||||
background: color.adjust($ui-base-color, $lightness: -10%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1067,7 +1071,7 @@ code {
|
||||
&__item {
|
||||
padding: 15px;
|
||||
color: $ui-secondary-color;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
@use "variables" as *;
|
||||
|
||||
/* 🦥 GoToSocial */
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--drawer-border-radius: var(--size-layout-radius);
|
||||
--button-border-radius: var(--size-ui-radius);
|
||||
--drawer-border-radius: 8px;
|
||||
--button-border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Icons debug */
|
||||
@@ -13,10 +15,11 @@
|
||||
|
||||
/* Diff */
|
||||
.gts-icon {
|
||||
--size: 1em;
|
||||
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: var(--size-icon);
|
||||
height: var(--size-icon);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.gts-icon-with-badge {
|
||||
@@ -58,7 +61,7 @@
|
||||
.column-header .gts-icon,
|
||||
.column-link .gts-icon,
|
||||
.local-settings__navigation__item .gts-icon {
|
||||
--size-icon: 24px;
|
||||
--size: 24px;
|
||||
}
|
||||
|
||||
.navigation-panel {
|
||||
@@ -93,9 +96,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.notification__filter-bar svg.gts-icon,
|
||||
.status__info__icons svg.gts-icon {
|
||||
--size-icon: 18px;
|
||||
.notification__filter-bar svg,
|
||||
.status__info__icons svg {
|
||||
--size: 18px;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
@@ -117,25 +123,16 @@
|
||||
}
|
||||
|
||||
.detailed-status__meta svg {
|
||||
--size-icon: 16px;
|
||||
--size: 16px;
|
||||
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper svg {
|
||||
--size-icon: 16px;
|
||||
--size: 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,8 @@
|
||||
*/
|
||||
|
||||
/* 🛠️ Config */
|
||||
@import "colors";
|
||||
@import "sizes";
|
||||
@use "colors";
|
||||
@use "sizes";
|
||||
|
||||
/* 🧩 Components */
|
||||
@import "status";
|
||||
@use "status";
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
--color-fg: #fff;
|
||||
--color-bg: #191b22;
|
||||
--color-lines: #3d4455;
|
||||
--color-logo: #c76c33;
|
||||
|
||||
/* Accent */
|
||||
--color-accent: #8c8dff;
|
||||
|
||||
@@ -1,14 +1,4 @@
|
||||
/* 📏 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;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
/* 🚥 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";
|
||||
@use "status/status-account";
|
||||
@use "status/status-display-name";
|
||||
@use "status/status-icons";
|
||||
@use "status/status-info";
|
||||
@use "status/status-prepend";
|
||||
@use "status/status-spoiler";
|
||||
|
||||
.status {
|
||||
background-color: var(--color-status-bg);
|
||||
@@ -30,19 +30,3 @@
|
||||
.status__action-bar :is(a, button) {
|
||||
color: var(--color-secondary-fg);
|
||||
}
|
||||
|
||||
.status .mention,
|
||||
.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: var(--size-layout-gap);
|
||||
gap: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* 🚥 Status: Display name */
|
||||
.status__display-name {
|
||||
align-self: center;
|
||||
align-self: start;
|
||||
justify-self: start;
|
||||
color: var(--color-content-fg);
|
||||
font-size: 15px;
|
||||
@@ -12,22 +12,6 @@
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
.display-name__html,
|
||||
.display-name__account {
|
||||
display: block;
|
||||
line-height: max(21px, 1.4em);
|
||||
}
|
||||
|
||||
.display-name.both_x {
|
||||
display: flex;
|
||||
gap: var(--size-ui-gap);
|
||||
}
|
||||
|
||||
.display-name.handle bdi,
|
||||
.display-name.display .display-name__account {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.display-name__html {
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -37,14 +21,7 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.display-name.handle .display-name__account {
|
||||
color: currentcolor;
|
||||
font-size: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&:hover .display-name__html,
|
||||
&:hover .display-name.handle .display-name__account {
|
||||
&:hover .display-name__html {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-color: currentColor;
|
||||
text-decoration-thickness: 2px;
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
/* 🚥 Status: Icons */
|
||||
.status__info__icons {
|
||||
--size-icon: 18px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: var(--size-ui-gap);
|
||||
gap: 5px;
|
||||
align-items: start;
|
||||
color: var(--color-secondary-fg);
|
||||
|
||||
svg.gts-icon {
|
||||
--size: 18px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* 🚥 Status: Info */
|
||||
.status__info {
|
||||
display: grid;
|
||||
gap: var(--size-ui-gap);
|
||||
gap: 5px;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
.notification__message {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: start;
|
||||
gap: var(--size-ui-gap);
|
||||
gap: 5px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid var(--color-accent-lines);
|
||||
border-radius: 50px;
|
||||
@@ -19,9 +19,11 @@
|
||||
}
|
||||
|
||||
.status__prepend-icon {
|
||||
--size-icon: 18px;
|
||||
--size: 18px;
|
||||
|
||||
display: block;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
}
|
||||
|
||||
.status__prepend-display-name {
|
||||
|
||||
@@ -1,15 +1,7 @@
|
||||
/* 🚥 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: var(--size-ui-gap);
|
||||
gap: 5px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid var(--color-accent-lines);
|
||||
border-radius: 8px;
|
||||
@@ -19,6 +11,10 @@
|
||||
background: var(--color-accent-bg);
|
||||
transition: all 0.3s;
|
||||
|
||||
.gts-icon {
|
||||
--size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-lines);
|
||||
color: var(--color-fg);
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
@import "mixins";
|
||||
@import "variables";
|
||||
@import "styles/fonts/roboto";
|
||||
@import "styles/fonts/roboto-mono";
|
||||
@use "mixins";
|
||||
@use "variables";
|
||||
@use "styles/fonts/roboto";
|
||||
@use "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";
|
||||
@use "reset";
|
||||
@use "basics";
|
||||
@use "branding";
|
||||
@use "containers";
|
||||
@use "lists";
|
||||
@use "modal";
|
||||
@use "widgets";
|
||||
@use "forms";
|
||||
@use "accounts";
|
||||
@use "statuses";
|
||||
@use "components/index";
|
||||
@use "polls";
|
||||
@use "about";
|
||||
@use "tables";
|
||||
@use "admin";
|
||||
@use "accessibility";
|
||||
@use "rtl";
|
||||
@use "dashboard";
|
||||
@use "rich_text";
|
||||
|
||||
@import "gts";
|
||||
@import "gts/config";
|
||||
@import "tangerine/config";
|
||||
@use "gts";
|
||||
@use "gts/config";
|
||||
@use "tangerine/config" as tangerine;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
@import "styles/fonts/roboto";
|
||||
@import "reset";
|
||||
@use "sass:color";
|
||||
@use "styles/fonts/roboto";
|
||||
@use "reset";
|
||||
|
||||
:root {
|
||||
--color-bg: #191b22;
|
||||
@@ -70,7 +71,7 @@ button:focus-visible {
|
||||
|
||||
button {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid lighten(#66befe, 7%);
|
||||
border: 1px solid color.scale(#66befe, $lightness: 7%);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: #2a2b2f;
|
||||
@@ -95,7 +96,7 @@ input[type="text"] {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
border: 1px solid lighten(#282c37, 7%);
|
||||
border: 1px solid color.scale(#282c37, $lightness: 7%);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
@@ -109,7 +110,7 @@ input[type="text"] {
|
||||
.content {
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid lighten(#39404f, 7%);
|
||||
border: 1px solid color.scale(#39404f, $lightness: 7%);
|
||||
color: #fff;
|
||||
background-color: #39404f;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "mastodon-light/variables";
|
||||
@import "index";
|
||||
@import "mastodon-light/diff";
|
||||
@import "mastodon-light/colors";
|
||||
@use "mastodon-light/variables";
|
||||
@use "index";
|
||||
@use "mastodon-light/diff";
|
||||
@use "mastodon-light/colors";
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
--color-fg: #000;
|
||||
--color-bg: #eff3f5;
|
||||
--color-lines: #c0cdd9;
|
||||
--color-logo: #df8958;
|
||||
|
||||
/* Accent */
|
||||
--color-accent: #4d4eff;
|
||||
@@ -17,6 +16,9 @@
|
||||
/* Secondary */
|
||||
--color-secondary-fg: #606984;
|
||||
|
||||
/* Account */
|
||||
--color-account-bg: #fff;
|
||||
|
||||
/* Drawer */
|
||||
--color-drawer-bg: #fff;
|
||||
--color-drawer-bg--hover: #ccd7e0;
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "sass:color";
|
||||
@use "../variables" as *;
|
||||
|
||||
// Notes!
|
||||
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
||||
|
||||
@@ -26,23 +29,23 @@ html {
|
||||
.column-inline-form,
|
||||
.regeneration-indicator {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.error-column {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.column > .scrollable.about {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.about__meta,
|
||||
.about__section__title,
|
||||
.interaction-modal {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.rules-list li::before {
|
||||
@@ -50,12 +53,12 @@ html {
|
||||
}
|
||||
|
||||
.directory__card__img {
|
||||
background: lighten($ui-base-color, 12%);
|
||||
background: color.adjust($ui-base-color, $lightness: 12%);
|
||||
}
|
||||
|
||||
.filter-form {
|
||||
background: $white;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.column-back-button,
|
||||
@@ -103,7 +106,7 @@ html {
|
||||
.confirmation-modal__cancel-button,
|
||||
.mute-modal__cancel-button,
|
||||
.block-modal__cancel-button {
|
||||
color: lighten($ui-base-color, 26%);
|
||||
color: color.adjust($ui-base-color, $lightness: 26%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
@@ -113,15 +116,15 @@ html {
|
||||
}
|
||||
|
||||
.column-subheading {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.getting-started,
|
||||
.scrollable {
|
||||
.column-link {
|
||||
background: $white;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
@@ -132,8 +135,8 @@ html {
|
||||
}
|
||||
|
||||
.getting-started .navigation-bar {
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 0;
|
||||
@@ -148,7 +151,7 @@ html {
|
||||
.setting-text,
|
||||
.report-dialog-modal__textarea,
|
||||
.audio-player {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.report-dialog-modal .dialog-option .poll__input {
|
||||
@@ -169,18 +172,18 @@ html {
|
||||
|
||||
.compose-form__poll-wrapper select {
|
||||
background: $simple-background-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 8%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
}
|
||||
|
||||
.compose-form__poll-wrapper,
|
||||
.compose-form__poll-wrapper .poll__footer {
|
||||
border-top-color: lighten($ui-base-color, 8%);
|
||||
border-top-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.compose-form .compose-form__buttons-wrapper {
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@@ -195,7 +198,7 @@ html {
|
||||
.compose-form__modifiers {
|
||||
.compose-form__upload__actions .icon-button,
|
||||
.compose-form__upload__warning .icon-button {
|
||||
color: lighten($white, 7%);
|
||||
color: color.adjust($white, $lightness: 7%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
@@ -206,11 +209,11 @@ html {
|
||||
}
|
||||
|
||||
.compose-form__buttons-wrapper {
|
||||
background: darken($ui-base-color, 6%);
|
||||
background: color.adjust($ui-base-color, $lightness: -6%);
|
||||
}
|
||||
|
||||
.autosuggest-textarea__suggestions {
|
||||
background: darken($ui-base-color, 6%);
|
||||
background: color.adjust($ui-base-color, $lightness: -6%);
|
||||
}
|
||||
|
||||
.autosuggest-textarea__suggestions__item {
|
||||
@@ -218,16 +221,16 @@ html {
|
||||
&:focus,
|
||||
&:active,
|
||||
&.selected {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-bar {
|
||||
border-color: lighten($ui-base-color, 4%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 4%);
|
||||
|
||||
&:first-child {
|
||||
background: darken($ui-base-color, 6%);
|
||||
background: color.adjust($ui-base-color, $lightness: -6%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -242,7 +245,7 @@ html {
|
||||
|
||||
// Change the background colors of statuses
|
||||
.focusable:focus {
|
||||
background: lighten($white, 4%);
|
||||
background: color.adjust($white, $lightness: 4%);
|
||||
}
|
||||
|
||||
.detailed-status,
|
||||
@@ -257,7 +260,7 @@ html {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -320,12 +323,12 @@ html {
|
||||
|
||||
.language-dropdown__dropdown__results__item
|
||||
.language-dropdown__dropdown__results__item__common-name {
|
||||
color: lighten($ui-base-color, 8%);
|
||||
color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.language-dropdown__dropdown__results__item.active
|
||||
.language-dropdown__dropdown__results__item__common-name {
|
||||
color: darken($ui-base-color, 12%);
|
||||
color: color.adjust($ui-base-color, $lightness: -12%);
|
||||
}
|
||||
|
||||
.dropdown-menu__separator,
|
||||
@@ -333,11 +336,11 @@ html {
|
||||
.dropdown-menu__container__header,
|
||||
.compare-history-modal .report-modal__target,
|
||||
.report-dialog-modal .poll__option.dialog-option {
|
||||
border-bottom-color: lighten($ui-base-color, 4%);
|
||||
border-bottom-color: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
.report-dialog-modal__container {
|
||||
border-top-color: lighten($ui-base-color, 4%);
|
||||
border-top-color: color.adjust($ui-base-color, $lightness: 4%);
|
||||
}
|
||||
|
||||
// Change the background colors of modals
|
||||
@@ -359,7 +362,7 @@ html {
|
||||
.picture-in-picture__footer,
|
||||
.reactions-bar__item {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.reactions-bar__item:hover,
|
||||
@@ -372,8 +375,12 @@ html {
|
||||
}
|
||||
|
||||
.reactions-bar__item.active {
|
||||
background-color: mix($white, $ui-highlight-color, 80%);
|
||||
border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
|
||||
background-color: color.mix($white, $ui-highlight-color, 80%);
|
||||
border-color: color.mix(
|
||||
color.adjust($ui-base-color, $lightness: 8%),
|
||||
$ui-highlight-color,
|
||||
80%
|
||||
);
|
||||
}
|
||||
|
||||
.media-modal__overlay .picture-in-picture__footer {
|
||||
@@ -395,16 +402,16 @@ html {
|
||||
}
|
||||
|
||||
.report-modal__comment {
|
||||
border-right-color: lighten($ui-base-color, 8%);
|
||||
border-right-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.report-modal__container {
|
||||
border-top-color: lighten($ui-base-color, 8%);
|
||||
border-top-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.column-header__collapsible-inner {
|
||||
background: darken($ui-base-color, 4%);
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@@ -419,7 +426,7 @@ html {
|
||||
}
|
||||
|
||||
.flash-message.warning {
|
||||
color: lighten($gold-star, 16%);
|
||||
color: color.adjust($gold-star, $lightness: 16%);
|
||||
}
|
||||
|
||||
.boost-modal__action-bar,
|
||||
@@ -428,14 +435,14 @@ html {
|
||||
.block-modal__action-bar,
|
||||
.onboarding-modal__paginator,
|
||||
.error-modal__footer {
|
||||
background: darken($ui-base-color, 6%);
|
||||
background: color.adjust($ui-base-color, $lightness: -6%);
|
||||
|
||||
.onboarding-modal__nav,
|
||||
.error-modal__nav {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: darken($ui-base-color, 12%);
|
||||
background-color: color.adjust($ui-base-color, $lightness: -12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -446,10 +453,10 @@ html {
|
||||
|
||||
.embed-modal .embed-modal__container .embed-modal__html {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
&:focus {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 12%);
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
@@ -459,12 +466,12 @@ html {
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background: darken($ui-secondary-color, 10%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -10%);
|
||||
}
|
||||
|
||||
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
|
||||
.react-toggle-track {
|
||||
background: lighten($ui-highlight-color, 10%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 10%);
|
||||
}
|
||||
|
||||
// Change the default color used for the text in an empty column or on the error column
|
||||
@@ -476,8 +483,8 @@ html {
|
||||
|
||||
// Change the default colors used on some parts of the profile pages
|
||||
.activity-stream-tabs {
|
||||
background: $account-background-color;
|
||||
border-bottom-color: lighten($ui-base-color, 8%);
|
||||
background: var(--color-account-bg);
|
||||
border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.nothing-here,
|
||||
@@ -485,7 +492,7 @@ html {
|
||||
.directory__tag > a,
|
||||
.directory__tag > div {
|
||||
background: $white;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-left: 0;
|
||||
@@ -501,15 +508,15 @@ html {
|
||||
input[type="password"],
|
||||
textarea {
|
||||
&:hover {
|
||||
border-color: lighten($ui-base-color, 12%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picture-in-picture-placeholder {
|
||||
background: $white;
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
color: lighten($ui-base-color, 8%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.directory__tag > a {
|
||||
@@ -528,24 +535,24 @@ html {
|
||||
&__toolbar,
|
||||
&__row,
|
||||
.nothing-here {
|
||||
border-color: lighten($ui-base-color, 8%);
|
||||
border-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
|
||||
&--under-tabs {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.entry {
|
||||
background: $account-background-color;
|
||||
background: var(--color-account-bg);
|
||||
|
||||
.detailed-status.light,
|
||||
.more.light,
|
||||
.status.light {
|
||||
border-bottom-color: lighten($ui-base-color, 8%);
|
||||
border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -612,7 +619,7 @@ html {
|
||||
|
||||
.reply-indicator {
|
||||
background: transparent;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.status__content,
|
||||
@@ -636,9 +643,9 @@ html {
|
||||
}
|
||||
|
||||
.mute-modal select {
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
background: $simple-background-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 8%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
}
|
||||
|
||||
@@ -650,15 +657,15 @@ html {
|
||||
&:not([disabled]) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: darken($ui-secondary-color, 10%);
|
||||
background: color.adjust($ui-secondary-color, $lightness: -10%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: darken($ui-highlight-color, 2%);
|
||||
background-color: color.adjust($ui-highlight-color, $lightness: -2%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: lighten($ui-highlight-color, 10%);
|
||||
background: color.adjust($ui-highlight-color, $lightness: 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -666,16 +673,16 @@ html {
|
||||
|
||||
.glitch.local-settings {
|
||||
background: $ui-base-color;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
|
||||
.glitch.local-settings__navigation {
|
||||
background: darken($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
|
||||
.glitch.local-settings__navigation__item {
|
||||
background: darken($ui-base-color, 8%);
|
||||
border-bottom: 1px lighten($ui-base-color, 8%) solid;
|
||||
background: color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-bottom: 1px color.adjust($ui-base-color, $lightness: 8%) solid;
|
||||
|
||||
&:hover {
|
||||
background: $ui-base-color;
|
||||
@@ -705,8 +712,8 @@ html {
|
||||
|
||||
.status.collapsed .status__content::after {
|
||||
background: linear-gradient(
|
||||
rgba(darken($ui-base-color, 13%), 0),
|
||||
rgba(darken($ui-base-color, 13%), 1)
|
||||
rgba(color.adjust($ui-base-color, $lightness: -13%), 0),
|
||||
rgba(color.adjust($ui-base-color, $lightness: -13%), 1)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "sass:color";
|
||||
|
||||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
@@ -14,7 +16,7 @@ $grey-600: #4e4c5a; // Trout
|
||||
$grey-100: #dadaf3; // Topaz
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(#3c754d, 8%);
|
||||
$success-green: color.adjust(#3c754d, $lightness: 8%);
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
@@ -34,7 +36,10 @@ $ui-button-tertiary-border-color: $blurple-500 !default;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$highlight-text-color: darken($ui-highlight-color, 8%) !default;
|
||||
$highlight-text-color: color.adjust(
|
||||
$ui-highlight-color,
|
||||
$lightness: -8%
|
||||
) !default;
|
||||
$dark-text-color: #444b5d;
|
||||
$action-button-color: #606984;
|
||||
|
||||
@@ -47,11 +52,19 @@ $account-background-color: $white !default;
|
||||
|
||||
// Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||
@return hsl(
|
||||
color.hue($color),
|
||||
color.saturation($color),
|
||||
color.lightness($color) + $amount
|
||||
);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
@return hsl(
|
||||
color.hue($color),
|
||||
color.saturation($color),
|
||||
color.lightness($color) - $amount
|
||||
);
|
||||
}
|
||||
|
||||
$emojis-requiring-inversion: "chains";
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.modal-layout {
|
||||
background: $ui-base-color
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.poll {
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
@@ -16,7 +20,7 @@
|
||||
&__chart {
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
background: darken($ui-primary-color, 5%);
|
||||
background: color.adjust($ui-primary-color, $lightness: -5%);
|
||||
height: 5px;
|
||||
min-width: 1%;
|
||||
|
||||
@@ -47,17 +51,17 @@
|
||||
// duplication
|
||||
&::-moz-progress-bar {
|
||||
border-radius: 4px;
|
||||
background: darken($ui-primary-color, 5%);
|
||||
background: color.adjust($ui-primary-color, $lightness: -5%);
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
border-radius: 4px;
|
||||
background: darken($ui-primary-color, 5%);
|
||||
background: color.adjust($ui-primary-color, $lightness: -5%);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border-radius: 4px;
|
||||
background: darken($ui-primary-color, 5%);
|
||||
background: color.adjust($ui-primary-color, $lightness: -5%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,7 +98,7 @@
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
background: $simple-background-color;
|
||||
border: 1px solid darken($simple-background-color, 14%);
|
||||
border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
|
||||
@@ -136,7 +140,7 @@
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($valid-value-color, 15%);
|
||||
border-color: color.adjust($valid-value-color, $lightness: 15%);
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
@@ -189,8 +193,7 @@
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: min(0.22em, 4px);
|
||||
gap: 5px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
color: $dark-text-color;
|
||||
@@ -218,14 +221,14 @@
|
||||
|
||||
.button {
|
||||
height: 36px;
|
||||
margin-inline-end: min(0.22em, 4px);
|
||||
padding: 0 16px;
|
||||
margin-inline-end: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__poll-wrapper {
|
||||
border-top: 1px solid darken($simple-background-color, 8%);
|
||||
border-top: 1px solid color.adjust($simple-background-color, $lightness: -8%);
|
||||
overflow-x: hidden;
|
||||
|
||||
ul {
|
||||
@@ -241,10 +244,11 @@
|
||||
}
|
||||
|
||||
.poll__footer {
|
||||
border-top: 1px solid
|
||||
color.adjust($simple-background-color, $lightness: -8%);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid darken($simple-background-color, 8%);
|
||||
padding: 10px;
|
||||
|
||||
button,
|
||||
select {
|
||||
@@ -297,9 +301,9 @@
|
||||
outline: 0;
|
||||
font-family: inherit;
|
||||
background: $simple-background-color
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
|
||||
no-repeat right 8px center / auto 16px;
|
||||
border: 1px solid darken($simple-background-color, 14%);
|
||||
border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
padding-inline-end: 30px;
|
||||
@@ -310,7 +314,7 @@
|
||||
color: $dark-text-color;
|
||||
|
||||
&__chart {
|
||||
background: rgba(darken($ui-primary-color, 14%), 0.7);
|
||||
background: rgba(color.adjust($ui-primary-color, $lightness: -14%), 0.7);
|
||||
|
||||
&.leading {
|
||||
background: rgba($ui-highlight-color, 0.5);
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.status__content__text,
|
||||
.e-content,
|
||||
.reply-indicator__content {
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
body.rtl {
|
||||
direction: rtl;
|
||||
|
||||
@@ -94,15 +98,15 @@ body.rtl {
|
||||
&::after {
|
||||
background-image: linear-gradient(
|
||||
to left,
|
||||
rgba(darken($ui-base-color, 10%), 0),
|
||||
darken($ui-base-color, 10%)
|
||||
rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
|
||||
color.adjust($ui-base-color, $lightness: -10%)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form select {
|
||||
background: darken($ui-base-color, 10%)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
|
||||
background: color.adjust($ui-base-color, $lightness: -10%)
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
|
||||
no-repeat left 8px center / auto 16px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.activity-stream {
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
border-radius: 4px;
|
||||
@@ -69,7 +73,7 @@
|
||||
}
|
||||
|
||||
&--highlighted .entry {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
@use "sass:color";
|
||||
@use "mixins" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -11,7 +15,7 @@
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
text-align: start;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
|
||||
&.critical {
|
||||
font-weight: 700;
|
||||
@@ -78,7 +82,7 @@
|
||||
& > tbody > tr > td {
|
||||
padding: 11px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid lighten($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
@@ -91,17 +95,19 @@
|
||||
&.batch-table {
|
||||
& > thead > tr > th {
|
||||
background: $ui-base-color;
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-bottom: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
|
||||
&:first-child {
|
||||
border-radius: 4px 0 0;
|
||||
border-inline-start: 1px solid darken($ui-base-color, 8%);
|
||||
border-inline-start: 1px solid
|
||||
color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 4px 0 0;
|
||||
border-inline-end: 1px solid darken($ui-base-color, 8%);
|
||||
border-inline-end: 1px solid
|
||||
color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -186,7 +192,7 @@ a.table-action-link {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
background: $ui-base-color;
|
||||
border-radius: 4px 0 0;
|
||||
height: 47px;
|
||||
@@ -203,7 +209,7 @@ a.table-action-link {
|
||||
height: 47px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-top: 0;
|
||||
color: $secondary-text-color;
|
||||
display: none;
|
||||
@@ -242,14 +248,14 @@ a.table-action-link {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
background: color.adjust($ui-base-color, $lightness: 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
padding: 16px;
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-top: 0;
|
||||
background: $ui-base-color;
|
||||
|
||||
@@ -260,25 +266,25 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
&__row {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-top: 0;
|
||||
background: darken($ui-base-color, 4%);
|
||||
background: color.adjust($ui-base-color, $lightness: -4%);
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
.optional &:first-child {
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: -2%);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background: $ui-base-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 2%);
|
||||
background: color.adjust($ui-base-color, $lightness: 2%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -353,12 +359,12 @@ a.table-action-link {
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
border: 1px solid darken($ui-base-color, 8%);
|
||||
border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
|
||||
@media screen and (max-width: $no-gap-breakpoint) {
|
||||
border-top: 1px solid darken($ui-base-color, 8%);
|
||||
border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
|
||||
/* 🛠️ Config */
|
||||
@import "keyframes";
|
||||
@use "keyframes";
|
||||
|
||||
/* 🧩 Components */
|
||||
@import "status-bar";
|
||||
@use "status-bar";
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user