mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'features/mild-master' into master3.2

Browse Source
This commit is contained in:
YorimiMochida 2020-08-04 21:54:17 +09:00 committed by GitHub
commit bc92780bdd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
255 changed files with 22725 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile
View File

@ -105,6 +105,8 @@ gem 'json-ld'
gem 'json-ld-preloaded', '~> 3.1'
gem 'rdf-normalize', '~> 0.4'
gem 'redcarpet', "~> 3.4.0"
group :development, :test do
gem 'fabrication', '~> 2.21'
gem 'fuubar', '~> 2.5'

2
Gemfile.lock
View File

@ -480,6 +480,7 @@ GEM
link_header (~> 0.0, >= 0.0.8)
rdf-normalize (0.4.0)
rdf (~> 3.1)
redcarpet (3.4.0)
redis (4.2.1)
redis-actionpack (5.2.0)
actionpack (>= 5, < 7)
@ -755,6 +756,7 @@ DEPENDENCIES
rails-i18n (~> 5.1)
rails-settings-cached (~> 0.6)
rdf-normalize (~> 0.4)
redcarpet (~> 3.4.0)
redis (~> 4.2)
redis-namespace (~> 1.7)
redis-rails (~> 5.0)

3
app/controllers/api/v2/media_controller.rb
View File

@ -1,5 +1,8 @@
# frozen_string_literal: true
class Api::V2::MediaController < Api::V1::MediaController
end
__END__
class Api::V2::MediaController < Api::V1::MediaController
def create
@media_attachment = current_account.media_attachments.create!({ delay_processing: true }.merge(media_attachment_params))

BIN
app/javascript/fonts/MaterialIcons-Regular.woff2 Normal file
View File

Binary file not shown.

71
app/javascript/mastodon/actions/UtilBtns.js Normal file
View File

@ -0,0 +1,71 @@
import { changeCompose } from '../actions/compose';
export const UTILBTNS_GOJI = 'UTILBTNS_GOJI';
export const UTILBTNS_HARUKIN = 'UTILBTNS_HARUKIN';
export function submitGoji (textarea) {
return function (dispatch, getState) {
if (!textarea.value) {
let text = [
"#ゴジモリｨｨィィイイ",
":goji:"
].join("\r\n");
dispatch(submitGojiRequest());
dispatch(changeCompose(text));
textarea.focus();
}
}
}
export function submitGojiRequest () {
return {
type: UTILBTNS_GOJI
}
}
export function submitHarukin (textarea) {
return function (dispatch, getState) {
const HARUKINS = [":harukin: ", ":harukin_old: ", ":harukin_ika: ", ":harukin_tako: "];
const MAX = 6;
if (!textarea.value) {
let text = "";
let quantity = Math.round(Math.random() * MAX + 1);
let type = Math.round(Math.random() * (HARUKINS.length - 1));
let harukin = HARUKINS[type];
switch (quantity) {
default:
text = [
harukin.repeat(quantity),
"🔥 ".repeat(quantity)
].join("\r\n");
break;
case MAX + 1:
text = `${harukin}💕\r\n`.repeat(6);
break;
}
dispatch(submitHarukinRequest());
dispatch(changeCompose(text));
textarea.focus();
}
}
}
export function submitHarukinRequest () {
return {
type: UTILBTNS_HARUKIN
}
}

90
app/javascript/mastodon/components/announcement_icon_button.js Normal file
View File

@ -0,0 +1,90 @@
import React from 'react';
import Motion from 'react-motion/lib/Motion';
import spring from 'react-motion/lib/spring';
import PropTypes from 'prop-types';
class IconButton extends React.PureComponent {
static propTypes = {
className: PropTypes.string,
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func,
size: PropTypes.number,
active: PropTypes.bool,
style: PropTypes.object,
activeStyle: PropTypes.object,
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
overlay: PropTypes.bool,
};
static defaultProps = {
size: 18,
active: false,
disabled: false,
animate: false,
overlay: false,
};
handleClick = (e) => {
e.preventDefault();
if (!this.props.disabled) {
this.props.onClick(e);
}
}
render () {
const style = {
fontSize: `${this.props.size}px`,
width: `${this.props.size * 1.28571429}px`,
height: `${this.props.size * 1.28571429}px`,
lineHeight: `${this.props.size}px`,
...this.props.style,
...(this.props.active ? this.props.activeStyle : {}),
};
const classes = ['icon-button'];
if (this.props.active) {
classes.push('active');
}
if (this.props.disabled) {
classes.push('disabled');
}
if (this.props.inverted) {
classes.push('inverted');
}
if (this.props.overlay) {
classes.push('overlayed');
}
if (this.props.className) {
classes.push(this.props.className);
}
return (
<Motion defaultStyle={{ rotate: this.props.active ? 180 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? 0 : 180) : 0 }}>
{({ rotate }) =>
<button
aria-label={this.props.title}
title={this.props.title}
className={classes.join(' ')}
onClick={this.handleClick}
style={style}
>
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' />
</button>
}
</Motion>
);
}
}
export default IconButton;

9
app/javascript/mastodon/components/status_action_bar.js
View File

@ -130,6 +130,14 @@ class StatusActionBar extends ImmutablePureComponent {
}
}
handleBookmarkClick = () => {
this.props.onBookmark(this.props.status);
}
handleReblogClick = (e) => {
this.props.onReblog(this.props.status, e);
}
_openInteractionDialog = type => {
window.open(`/interact/${this.props.status.get('id')}?type=${type}`, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
}
@ -332,6 +340,7 @@ class StatusActionBar extends ImmutablePureComponent {
<IconButton className='status__action-bar-button' disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} />
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
{shareButton}
<IconButton className='status__action-bar-button' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
<div className='status__action-bar-dropdown'>
<DropdownMenuContainer

127
app/javascript/mastodon/features/compose/components/announcements.js Normal file
View File

@ -0,0 +1,127 @@
import React from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import Link from 'react-router-dom/Link';
import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/announcement_icon_button';
import Motion from 'react-motion/lib/Motion';
import spring from 'react-motion/lib/spring';
const Collapsable = ({ fullHeight, minHeight, isVisible, children }) => (
<Motion defaultStyle={{ height: isVisible ? fullHeight : minHeight }} style={{ height: spring(!isVisible ? minHeight : fullHeight) }}>
{({ height }) =>
<div style={{ height: `${height}px`, overflow: 'hidden' }}>
{children}
</div>
}
</Motion>
);
Collapsable.propTypes = {
fullHeight: PropTypes.number.isRequired,
minHeight: PropTypes.number.isRequired,
isVisible: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
};
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
welcome: { id: 'welcome.message', defaultMessage: '{domain}へようこそ!' },
markdown: { id: 'markdown.list', defaultMessage: 'markdown一覧' },
});
const hashtags = Immutable.fromJS([
'神崎ドン自己紹介',
]);
class Announcements extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
homeSize: PropTypes.number,
isLoading: PropTypes.bool,
};
state = {
showId: null,
isLoaded: false,
};
onClick = (announcementId, currentState) => {
this.setState({ showId: currentState.showId === announcementId ? null : announcementId });
}
nl2br (text) {
return text.split(/(\n)/g).map((line, i) => {
if (line.match(/(\n)/g)) {
return React.createElement('br', { key: i });
}
return line;
});
}
render () {
const { intl } = this.props;
return (
<ul className='announcements'>
<li>
<Collapsable isVisible={this.state.showId === 'markdown'} fullHeight={1240} minHeight={20} >
<div className='announcements__body'>
<p>{ this.nl2br(intl.formatMessage(messages.markdown, { domain: document.title }))}<br />
<br />
(半角)は半角スペースを入力する必要がある場所です。(半角)だけの列は半角スペースのみが入力された列が必要であるを指します。<br /><br />
〜〜〜〜〜〜見出し〜〜〜〜〜〜<br /><br />
#(半角)見出しテキスト<br /><br />
#は1〜6個重ねることができます。<br /><br />
〜〜〜〜コードブロック〜〜〜〜<br /><br />
`コード`<br /><br />
〜〜〜〜〜〜引用〜〜〜〜〜〜<br /><br />
>引用文<br />
(半角)<br />
ここから先は引用が切れます<br />
引用は複数回重ねることが可能です。<br /><br />
〜〜〜〜〜〜リスト〜〜〜〜〜〜<br /><br />
(半角)<br />
+(半角)内容1<br />
+(半角)内容2<br />
(半角)<br /><br />
内容の数に制限はありません。<br />
投稿トップにリストを持ってくる場合に限り1行目の(半角)は必要ありません。<br />
+(半角)を1.(半角)に置き換えることで数字付きリストになります。<br /><br />
〜〜〜〜〜上付き文字〜〜〜〜〜<br /><br />
_上付き文字_<br /><br />
〜〜〜〜〜下付き文字〜〜〜〜〜<br /><br />
__下付き文字__<br /><br />
〜〜〜〜〜小さい文字〜〜〜〜〜<br /><br />
___小さい文字___<br /><br />
〜〜〜〜〜取り消し線〜〜〜〜〜<br /><br />
~~取り消したい文字列~~<br /><br />
〜〜〜〜〜〜横罫線〜〜〜〜〜〜<br /><br />
___<br /><br />
〜〜〜〜〜〜リンク〜〜〜〜〜〜<br /><br />
[リンク文章](https://・・・)<br /><br />
〜〜〜〜〜〜画像〜〜〜〜〜〜<br /><br />
![画像説明](https://・・・)<br /><br />
リンク、画像ともにURLにはhttps://から始まる物のみご利用可能です。
</p>
</div>
</Collapsable>
<div className='announcements__icon'>
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon='caret-up' onClick={() => this.onClick('markdown', this.state)} size={20} animate active={this.state.showId === 'markdown'} />
</div>
</li>
</ul>
);
}
componentWillReceiveProps (nextProps) {
if (!this.state.isLoaded) {
if (!nextProps.isLoading && (nextProps.homeSize === 0 || this.props.homeSize !== nextProps.homeSize)) {
this.setState({ isLoaded: true });
}
}
}
}
export default injectIntl(Announcements);

32
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -20,6 +20,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import { countableText } from '../util/counter';
import Icon from 'mastodon/components/icon';
import { UserCounter } from './user_counter';
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
@ -28,6 +29,10 @@ const messages = defineMessages({
spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here' },
publish: { id: 'compose_form.publish', defaultMessage: 'Toot' },
publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
utilBtns_goji: { id: 'compose_form.utilBtns_goji', defaultMessage: 'Typo!!!' },
utilBtns_harukin: { id: 'compose_form.utilBtns_harukin', defaultMessage: 'Burn Harukin' }
});
export default @injectIntl
@ -60,7 +65,9 @@ class ComposeForm extends ImmutablePureComponent {
onPickEmoji: PropTypes.func.isRequired,
showSearch: PropTypes.bool,
anyMedia: PropTypes.bool,
singleColumn: PropTypes.bool,
singleColumn: PropTypes.bool,
onGojiSubmit: PropTypes.func.isRequired,
onHarukinSubmit: PropTypes.func.isRequired
};
static defaultProps = {
@ -88,7 +95,7 @@ class ComposeForm extends ImmutablePureComponent {
const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('');
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 2048 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
return;
}
@ -177,11 +184,15 @@ class ComposeForm extends ImmutablePureComponent {
this.props.onPickEmoji(position, data, needsSpace);
}
handleOnGojiSubmit = () => this.props.onGojiSubmit(this.autosuggestTextarea.textarea);
handleOnHarukinSubmit = () => this.props.onHarukinSubmit(this.autosuggestTextarea.textarea);
render () {
const { intl, onPaste, showSearch, anyMedia } = this.props;
const disabled = this.props.isSubmitting;
const text = [this.props.spoilerText, countableText(this.props.text)].join('');
const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 500 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 2048 || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
let publishText = '';
if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
@ -243,11 +254,22 @@ class ComposeForm extends ImmutablePureComponent {
<PrivacyDropdownContainer />
<SpoilerButtonContainer />
</div>
<div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
<div className='character-counter__wrapper'><CharacterCounter max={2048} text={text} /></div>
</div>
<div className='compose-form__publish'>
<div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
<div className='compose-form__publish-button-wrapper'>
<Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block>
<span className="fa fa-send">{publishText}</span>
</Button>
</div>
</div>
<div className="compose-form__utilBtns">
<Button className="compose-form__utilBtns-goji" text={intl.formatMessage(messages.utilBtns_goji)} onClick={this.handleOnGojiSubmit} block />
<Button className="compose-form__utilBtns-harukin" text={intl.formatMessage(messages.utilBtns_harukin)} onClick={this.handleOnHarukinSubmit} block />
</div>
</div>
);

10
app/javascript/mastodon/features/compose/components/user_counter.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
export default class UserCounter extends React.PureComponent {
render () {
return (
<span>10人</span>
);
}
}

11
app/javascript/mastodon/features/compose/containers/announcements_container.js Normal file
View File

@ -0,0 +1,11 @@
import { connect } from 'react-redux';
import Announcements from '../components/announcements';
const mapStateToProps = state => {
return {
homeSize: state.getIn(['timelines', 'home', 'items']).size,
isLoading: state.getIn(['timelines', 'home', 'isLoading']),
};
};
export default connect(mapStateToProps)(Announcements);

17
app/javascript/mastodon/features/compose/containers/compose_form_container.js
View File

@ -11,6 +11,11 @@ import {
uploadCompose,
} from '../../../actions/compose';
import {
submitGoji,
submitHarukin
} from '../../../actions/UtilBtns';
const mapStateToProps = state => ({
text: state.getIn(['compose', 'text']),
suggestions: state.getIn(['compose', 'suggestions']),
@ -60,6 +65,18 @@ const mapDispatchToProps = (dispatch) => ({
onPickEmoji (position, data, needsSpace) {
dispatch(insertEmojiCompose(position, data, needsSpace));
},
onRisaSubmit (textarea) {
dispatch(submitRisa(textarea));
},
onGojiSubmit (textarea) {
dispatch(submitGoji(textarea));
},
onHarukinSubmit (textarea) {
dispatch(submitHarukin(textarea));
},
});

2
app/javascript/mastodon/features/compose/index.js
View File

@ -17,6 +17,7 @@ import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
import { mascot } from '../../initial_state';
import Icon from 'mastodon/components/icon';
import { logOut } from 'mastodon/utils/log_out';
import AnnouncementsContainer from './containers/announcements_container';
const messages = defineMessages({
start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@ -127,6 +128,7 @@ class Compose extends React.PureComponent {
<NavigationContainer onClose={this.onBlur} />
<ComposeFormContainer />
<AnnouncementsContainer />
<div className='drawer__inner__mastodon'>
<img alt='' draggable='false' src={mascot || elephantUIPlane} />

11
app/javascript/mastodon/features/getting_started/index.js
View File

@ -18,6 +18,7 @@ import TrendsContainer from './containers/trends_container';
const messages = defineMessages({
home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
admin_notifications: { id: 'tabs_bar.admin_notifications', defaultMessage: 'Admin Notifications' },
public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
@ -98,7 +99,7 @@ class GettingStarted extends ImmutablePureComponent {
if (multiColumn) {
navItems.push(
<ColumnSubheading key={i++} text={intl.formatMessage(messages.discover)} />,
<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />,
<ColumnLink key={i++} icon='users' text={intl.formatMessage(messages.community_timeline)} to='/timelines/public/local' />,
<ColumnLink key={i++} icon='globe' text={intl.formatMessage(messages.public_timeline)} to='/timelines/public' />,
);
@ -107,9 +108,10 @@ class GettingStarted extends ImmutablePureComponent {
if (profile_directory) {
navItems.push(
<ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
);
<ColumnLink key={i++} icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
);
height += 48;
height += 48*2;
}
navItems.push(
@ -120,9 +122,10 @@ class GettingStarted extends ImmutablePureComponent {
} else if (profile_directory) {
navItems.push(
<ColumnLink key={i++} icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
<ColumnLink key={i++} icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
);
height += 48;
height += 48*2;
}
navItems.push(

22
app/javascript/mastodon/locales/ja.json
View File

@ -69,7 +69,7 @@
"column.lists": "リスト",
"column.mutes": "ミュートしたユーザー",
"column.notifications": "通知",
"column.pins": "固定されたトゥート",
"column.pins": "固定された投稿",
"column.public": "連合タイムライン",
"column_back_button.label": "戻る",
"column_header.hide_settings": "設定を隠す",
@ -87,7 +87,7 @@
"compose_form.hashtag_warning": "このトゥートは公開設定ではないのでハッシュタグの一覧に表示されません。公開トゥートだけがハッシュタグで検索できます。",
"compose_form.lock_disclaimer": "あなたのアカウントは{locked}になっていません。誰でもあなたをフォローすることができ、フォロワー限定の投稿を見ることができます。",
"compose_form.lock_disclaimer.lock": "承認制",
"compose_form.placeholder": "今なにしてる？",
"compose_form.placeholder": "ちょうどL.A.に到着しました。",
"compose_form.poll.add_option": "追加",
"compose_form.poll.duration": "アンケート期間",
"compose_form.poll.option_placeholder": "項目 {number}",
@ -102,6 +102,8 @@
"compose_form.spoiler.marked": "閲覧注意が設定されています",
"compose_form.spoiler.unmarked": "閲覧注意が設定されていません",
"compose_form.spoiler_placeholder": "ここに警告を書いてください",
"compose_form.utilBtns_goji": "誤字盛！",
"compose_form.utilBtns_harukin": "はるきん焼却",
"confirmation_modal.cancel": "キャンセル",
"confirmations.block.block_and_report": "ブロックし通報",
"confirmations.block.confirm": "ブロック",
@ -180,7 +182,8 @@
"getting_started.invite": "招待",
"getting_started.open_source_notice": "Mastodonはオープンソースソフトウェアです。誰でもGitHub ( {github} ) から開発に参加したり、問題を報告したりできます。",
"getting_started.security": "アカウント設定",
"getting_started.terms": "プライバシーポリシー",
"getting_started.security": "セキュリティ",
"getting_started.terms": "利用規約とプライバシーポリシー",
"hashtag.column_header.tag_mode.all": "と {additional}",
"hashtag.column_header.tag_mode.any": "か {additional}",
"hashtag.column_header.tag_mode.none": "({additional} を除く)",
@ -190,6 +193,7 @@
"hashtag.column_settings.tag_mode.any": "いずれかを含む",
"hashtag.column_settings.tag_mode.none": "これらを除く",
"hashtag.column_settings.tag_toggle": "このカラムに追加のタグを含める",
"home.column_settings.advanced": "高度な設定",
"home.column_settings.basic": "基本設定",
"home.column_settings.show_reblogs": "ブースト表示",
"home.column_settings.show_replies": "返信表示",
@ -281,7 +285,8 @@
"navigation_bar.filters": "フィルター設定",
"navigation_bar.follow_requests": "フォローリクエスト",
"navigation_bar.follows_and_followers": "フォロー・フォロワー",
"navigation_bar.info": "このサーバーについて",
"navigation_bar.generate_qrcode": "プロフィールのQRコードを生成",
"navigation_bar.info": "Yづドンについて",
"navigation_bar.keyboard_shortcuts": "ホットキー",
"navigation_bar.lists": "リスト",
"navigation_bar.logout": "ログアウト",
@ -291,7 +296,12 @@
"navigation_bar.preferences": "ユーザー設定",
"navigation_bar.public_timeline": "連合タイムライン",
"navigation_bar.security": "セキュリティ",
"notification.favourite": "{name}さんがあなたのトゥートをお気に入りに登録しました",
"notification.and_n_others": "and {count, plural, one {# other} other {# others}}",
"notification.and_n_others": "と、他 {count} 件",
"navigation_bar.announcements": "運営からのお知らせ",
"navigation_bar.trends": "トレンド",
"navigation_bar.bookmarks": "ブックマーク",
"notification.favourite": "{name}さんがあなたのトゥートに╰( ^o^)╮-=ﾆ=一＝三★しました",
"notification.follow": "{name}さんにフォローされました",
"notification.follow_request": "{name} さんがあなたにフォローリクエストしました",
"notification.mention": "{name}さんがあなたに返信しました",
@ -338,6 +348,7 @@
"privacy.unlisted.long": "誰でも閲覧可、公開TLに非表示",
"privacy.unlisted.short": "未収載",
"refresh": "更新",
"qr_modal.description": "QRコードを読み取って簡単にプロフィールにアクセスしましょう。",
"regeneration_indicator.label": "読み込み中…",
"regeneration_indicator.sublabel": "ホームタイムラインは準備中です！",
"relative_time.days": "{number}日前",
@ -409,6 +420,7 @@
"status.unpin": "プロフィールへの固定を解除",
"suggestions.dismiss": "隠す",
"suggestions.header": "興味あるかもしれません…",
"tabs_bar.admin_notifications": "Adminからのお知らせ",
"tabs_bar.federated_timeline": "連合",
"tabs_bar.home": "ホーム",
"tabs_bar.local_timeline": "ローカル",

3
app/javascript/styles/application.scss
View File

@ -26,3 +26,6 @@
@import 'mastodon/dashboard';
@import 'mastodon/rtl';
@import 'mastodon/accessibility';
@import 'markdown';
@import 'astarte';

59
app/javascript/styles/astarte.scss Normal file
View File

@ -0,0 +1,59 @@
.announcements {
padding: 0 10px;
li {
display: flex;
padding: 10px;
color: #282c37;
background: darken($white, 10%);
border-radius: 4px;
& + li {
margin-top: 10px;
}
}
}
.announcements__admin {
width: 100%;
position: relative;
p {
padding: 0 5px;
font-size: 14px;
}
}
.announcements__icon {
display: inline-block;
position: absolute;
margin: -5px 5px;
right: 10px;
}
.announcements__body {
width: 100%;
position: relative;
p {
padding: 0 5px;
font-size: 14px;
}
a {
display: inline-block;
float: right;
clear: both;
color: #282c37;
background: darken($white, 5%);
text-decoration: none;
padding: 1px 10px 0;
border: solid 1px #282c37;
font-size: 10px;
font-weight: 600;
border-radius: 4px;
margin-top: 5px;
}
}

2
app/javascript/styles/contrast.scss
View File

@ -1,3 +1,5 @@
@import 'contrast/variables';
@import 'application';
@import 'contrast/diff';
@import 'markdown';

266
app/javascript/styles/markdown.scss Normal file
View File

@ -0,0 +1,266 @@
.status__content {
font-family: inherit;
h1{
color: #ec840d;
font-weight: bold;
font-size: 1.6em;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #dbebf8;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;
text-align: center;
border-bottom: solid 3px #ff0000;
}
h2{
color: #ec840d;
font-weight: bold;
font-size: 1.5em;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #dbebf8;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;
text-align: center;
border-bottom: solid 3px #fffb00;
}
h3{
color: #ec840d;
font-weight: bold;
font-size: 1.4em;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #dbebf8;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;
text-align: center;
border-bottom: solid 3px #2bff00;
}
h4{
color: #ec840d;
font-weight: bold;
font-size: 1.3em;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #dbebf8;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;
text-align: center;
border-bottom: solid 3px #00ffea;
}
h5{
color: #ec840d;
font-weight: bold;
font-size: 1.2em;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #dbebf8;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;
text-align: center;
border-bottom: solid 3px #0004ff;
}
h6{
color: #ec840d;
font-weight: bold;
font-size: 1.1em;
padding: 0.5em;
display: inline-block;
line-height: 1.3;
background: #dbebf8;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;
text-align: center;
border-bottom: solid 3px #7700ff;
}
em{
font-style: italic;
}
strong{
font-weight: bold;
}
code{
display: block;
border-left: 2px solid;
border-color: #079903;
color: $white;
padding-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
background-color: #000000;
.positive{
color: #5bda57;
}
.negative{
color: #ff4949;
}
.rust-fanc{
color: #ba7eff;
}
.ruby-func{
color: #24a8e6;
}
.rust-macro{
color: #d2ff6a;
}
.contents{
color: #ff9925;
}
}
pre{
display: inline-block;
font-family: 'Noto Sans Japanese', sans-serif;
font-weight: 400;
}
p ~ blockquote {
margin-top: -8px;
}
blockquote{
padding-left: 8px;
margin-top: 0.5em;
margin-bottom: 0.5em;
color: $primary-text-color;
background-color: $ui-base-color;
display: block;
border-left: 4px solid $classic-highlight-color;
}
ul.md-contents {
border: double 4px #21b384;
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
ul li.md-contents {
line-height: 1.5;
padding: 0.2em 0;
list-style-type: none!important;
}
ul li.md-contents:before {
font-family: FontAwesome;
content: "\f0a4";
position: absolute;
left : 1em;
color: #21b384;
}
ol.md-contents {
border: double 4px #ff954f;
padding: 0.5em 1em 0.5em 1em;
position: relative;
list-style: inside decimal;
}
ol li.md-contents {
line-height: 1.5;
padding: 0.2em 0;
}
hr {
border-width: 2px 0px 0px 0px;
border-style: dashed;
border-color: #ff7676;
height: 1px;
}
p>a>img{
width: 100%;
height: 100%;
object-fit: contain;
}
a>img{
width: 100%;
height: 100%;
object-fit: contain;
}
p>a{
color: #1FBFF9;
}
a{
color: #1FBFF9;
}
sup{
font-size: 75.5%;
vertical-align: top;
position: relative;
top: -0.5em;
}
sub{
font-size: 75.5%;
vertical-align: bottom;
position: relative;
top: 0.5em;
}
small{
font-size: 50.0%;
vertical-align: bottom;
position: relative;
}
table {
margin-top: 0.5em;
margin-bottom: 0.5em;
color: $classic-highlight-color;
display: block;
width: 100%;
overflow: auto;
border-spacing: 0;
border-collapse: collapse;
}
table tr{
background-color: #000000;
}
table th, table td{
padding: 6px 13px;
border: 1px solid $classic-highlight-color;
}
table th{
font-weight: 600;
}
table thead tr{
background-color: $black;
}
td, th{
padding: 0;
}
span.img_FTL {
display: none;
}
}

2
app/javascript/styles/mastodon-auto.scss Normal file
View File

@ -0,0 +1,2 @@
@use 'application';
@media (prefers-color-scheme: light) { @import 'mastodon-light'; }

2
app/javascript/styles/mastodon-light.scss
View File

@ -1,3 +1,5 @@
@import 'mastodon-light/variables';
@import 'application';
@import 'mastodon-light/diff';
@import 'markdown';

2
app/javascript/styles/mastodon-material-auto.scss Normal file
View File

@ -0,0 +1,2 @@
@use 'mastodon-material-dark';
@media (prefers-color-scheme: light) { @import 'mastodon-material-light'; }

2
app/javascript/styles/mastodon-material-dark.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'application';
@import 'mastodon-material-dark/loader';

135
app/javascript/styles/mastodon-material-dark/color/black.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #000000;
$menu-background-color: #121212;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #121212;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #000000;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #121212;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9baec8;
$ui-text-color: #fff;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #606984;
$tips-text-color: #6d7889;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4ea2df;
$menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #191b22;
$menu-background-color: #d9e1e8;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #313543;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #282c37;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: lighten($background-color, 14%);
$icon-background-active-color: lighten($background-color, 18%);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #fff;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 16%);
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
// App bar color
$top-bar-color: #313543;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: #1f232b;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $tab-indicator-color;
$text-tab-indicator-active-color: $tab-indicator-active-color;
$text-tab-background-color: $tab-background-color;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

134
app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss Normal file
View File

@ -0,0 +1,134 @@
@charset "UTF-8";
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #217aba;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #eff3f5;
$menu-background-color: $background-color;
$menu-background-hover-color: darken($background-color, 6%);
$menu-background-active-color: darken($background-color, 10%);
$menu-background-active-hover-color: darken($background-color, 16%);
$card-background-color: #ffffff;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: darken($background-color, 4%);
$icon-background-active-color: darken($background-color, 8%);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: $primary-color;
$toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: #e6ebf0;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $tab-indicator-color;
$text-tab-indicator-active-color: $tab-indicator-active-color;
$text-tab-background-color: $tab-background-color;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

134
app/javascript/styles/mastodon-material-dark/color/plus-classic.scss Normal file
View File

@ -0,0 +1,134 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #fafafa;
$menu-background-color: #ffffff;
$menu-background-hover-color: darken($menu-background-color, 6%);
$menu-background-active-color: darken($menu-background-color, 10%);
$menu-background-active-hover-color: darken($menu-background-color, 16%);
$card-background-color: #ffffff;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: transparentize(#000000, 0.9);
$icon-background-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: darken($background-color, 20%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #db4437;
$search-bar-color: darken($background-color, 6%);
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-background-color: #ffffff;
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

134
app/javascript/styles/mastodon-material-dark/color/v1-dark.scss Normal file
View File

@ -0,0 +1,134 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #303030;
$menu-background-color: #424242;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #424242;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
// App bar color
$top-bar-color: #1565C0;
$search-bar-color: lighten($background-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-background-color: #424242;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-dark/color/v1-light.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #fafafa;
$menu-background-color: #ffffff;
$menu-background-hover-color: darken($menu-background-color, 6%);
$menu-background-active-color: darken($menu-background-color, 10%);
$menu-background-active-hover-color: darken($menu-background-color, 16%);
$card-background-color: #ffffff;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: transparentize(#000000, 0.9);
$icon-background-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: darken($background-color, 20%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #2196f3;
$search-bar-color: darken($background-color, 6%);
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-background-color: #ffffff;
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-dark/color/v2-dark.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #121212;
$menu-background-color: #1e1e1e;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #1e1e1e;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #1e1e1e;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #272727;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #1e1e1e;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-dark/color/v2-light.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #ffffff;
$menu-background-color: $background-color;
$menu-background-hover-color: darken($menu-background-color, 6%);
$menu-background-active-color: darken($menu-background-color, 10%);
$menu-background-active-hover-color: darken($menu-background-color, 16%);
$card-background-color: $background-color;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: $background-color;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: transparentize(#000000, 0.9);
$icon-background-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: #ffffff;
$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
$floating-action-button-active-color: darken($floating-action-button-color, 10%);
$floating-action-button-icon-color: $primary-color;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: darken($background-color, 20%);
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
$scroll-bar-thumb-active-color: darken($background-color, 38%);
// App bar color
$top-bar-color: $background-color;
$search-bar-color: darken($background-color, 6%);
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #ffffff;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

4
app/javascript/styles/mastodon-material-dark/custom_color.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

5
app/javascript/styles/mastodon-material-dark/custom_config.scss Normal file
View File

@ -0,0 +1,5 @@
@charset "UTF-8";
// Add your settings below
@import 'color/mastodon-dark';

4
app/javascript/styles/mastodon-material-dark/custom_layout.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

26
app/javascript/styles/mastodon-material-dark/icon_config.scss Normal file
View File

@ -0,0 +1,26 @@
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1
// Reply icon settings
$reply-icon: "reply";
//$reply-icon: "comment"; // blooming
// Material Design Icon settings
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
@font-face {
font-family: "Material Icons";
src:
local("Material Icons"),
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
}

45
app/javascript/styles/mastodon-material-dark/layout/material-v1.scss Normal file
View File

@ -0,0 +1,45 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 2px;
// Search bar radius
$search-bar-radius: 2px;
// Bar radius settings
$bar-radius: 0;
// Button radius settings
$button-radius: 2px;
// Card radius settings
$card-radius: 2px;
// Dialog radius settings
$dialog-radius: 2px;
// Menu radius settings
$menu-radius: 2px;
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
// Button shadow
// If you want to use material v2 styled non-shadow button, please comment out this section.
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

60
app/javascript/styles/mastodon-material-dark/layout/material-v2.scss Normal file
View File

@ -0,0 +1,60 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
// Search bar radius
$search-bar-radius: 8px;
// Bar radius settings
$bar-radius: 0;
//$bar-radius: 8px;
// Button radius settings
$button-radius: 8px;
// Card radius settings
$card-radius: 8px;
// Dialog radius settings
$dialog-radius: 8px;
// Menu radius settings
$menu-radius: 8px;
// Navigation drawer item settings
$nav-drawer-item-radius: 8px; // corner rounded
//$nav-drawer-item-radius: 32px; // full rounded
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 8px // Material v2 square
// Chip settings
// If you want to use contained-chip, please comment out below.
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
&:hover { background: $outlined-chip-hover-color !important }
}
// Button shadow
// If you want to use material v2 styled non-shadow button, please comment out this section.
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

7
app/javascript/styles/mastodon-material-dark/loader.scss Normal file
View File

@ -0,0 +1,7 @@
@import 'theme/theme';
@import 'theme/material-icons';
// Plugins
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

38
app/javascript/styles/mastodon-material-dark/plugins/cards.scss Normal file
View File

@ -0,0 +1,38 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
> .scrollable { background: $background-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
background: $card-background-color;
&__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
.status__wrapper.status__wrapper,
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
.notification__filter-bar {
@include non-overflow-shadow-4dp;
}

65
app/javascript/styles/mastodon-material-dark/plugins/dense.scss Normal file
View File

@ -0,0 +1,65 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.drawer {
&__tab { margin: 8px auto 8px }
}
.column { margin: 10px 5px }
.column-header {
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
}
.column-subheading { padding: 8px 16px }
.column-link { padding: 12px 16px }
.notification__filter-bar button { padding: 12px 0 }
.getting-started__footer {
padding: 12px 16px;
p { margin-bottom: 12px }
}
.compose-form {
.compose-form__publish { padding-top: 8px }
}
.status {
padding: 8px 8px 8px 66px;
&__expand { width: 66px }
&__info { padding-right: 0 }
&__avatar {
left: 8px;
top: 10px;
}
&__content { padding-top: 2px }
}
.detailed-status {
padding: 14px;
&__meta { margin-top: 14px }
&__action-bar { padding: 10px 0 }
}
.reply-indicator { padding: 8px }
.button.button--block { margin: 6px 0 }

33
app/javascript/styles/mastodon-material-dark/plugins/plus.scss Normal file
View File

@ -0,0 +1,33 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
height: 28px !important;
.fa { vertical-align: bottom }
}
// favorite icon
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
.star-icon {
border-radius: 50%;
width: 28px;
height: 28px;
vertical-align: baseline;
font-size: 18px;
&.fa-fw::before { vertical-align: middle }
}
}

8
app/javascript/styles/mastodon-material-dark/theme/_functions.scss Normal file
View File

@ -0,0 +1,8 @@
@charset "UTF-8";
@use "sass:string";
// convert hex color code to svg styled ascii color code
@function svg-color ($color) {
@return '%23' + string.slice(inspect($color), 2, 7);
}

25
app/javascript/styles/mastodon-material-dark/theme/_mixins.scss Normal file
View File

@ -0,0 +1,25 @@
@charset "UTF-8";
$shadow-color-1: rgba(0,0,0,.2);
$shadow-color-2: rgba(0,0,0,.14);
$shadow-color-3: rgba(0,0,0,.12);
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}

153
app/javascript/styles/mastodon-material-dark/theme/account.scss Normal file
View File

@ -0,0 +1,153 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
border-bottom: 1px solid $border-color;
.account__display-name { color: $primary-text-color }
.account__display-name strong { color: $secondary-text-color }
&__avatar {
border-radius: $avater-radius;
width: 40px;
height: 40px;
&-overlay {
&-base {
border-radius: 50%;
width: 44px;
height: 44px;
background-size: 44px;
}
&-overlay { border-radius: $avater-radius }
}
}
&__header {
&__bar {
background: $card-background-color;
padding: 8px;
border-bottom: 1px solid $border-color;
.avatar .account__avatar { border: none }
}
&__tabs {
padding: 8px;
&__name {
padding: 8px;
h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
&__buttons {
.icon-button {
border: none;
border-radius: 50%;
padding: 0;
}
}
}
&__extra {
margin-top: 0;
&__links {
color: $secondary-text-color;
padding: 10px 0;
a {
color: $secondary-text-color;
padding: 4px 12px;
strong { color: $ui-text-color }
}
}
}
&__bio {
margin: 0;
.account__header {
&__content {
color: $primary-text-color;
padding: 8px;
}
&__fields {
border: 1px solid $border-color;
border-radius: 4px;
.verified {
border: none;
background: $verified-background-color;
a,
&__mark { color: $primary-text-color }
}
dl {
border-bottom: 1px solid $border-color;
&:first-child .verified { border-radius: 0 }
&:last-child { border-bottom: 0 }
}
dt {
color: $primary-text-color;
background: $list-background-inactive-color;
}
dd { color: $primary-text-color }
}
}
}
&__content { color: $secondary-text-color }
}
&__section-headline {
background: $text-tab-background-color;
border-bottom: 1px solid $border-color;
a {
padding: 16px 0;
color: $text-tab-indicator-color;
&.active {
color: $text-tab-indicator-active-color;
border-bottom: 4px solid $text-tab-indicator-active-color;
&::before,
&:after { border: none }
&:focus { background: $text-tab-indicator-background-focus-color }
}
&:hover { background: $text-tab-indicator-background-hover-color }
}
}
}
.account-role {
padding: 4px 8px;
border-radius: 17px;
color: $ui-text-color;
background-color: $contained-chip-color;
}
.accounts-table__count {
color: $ui-text-color;
small { color: $secondary-text-color }
}

34
app/javascript/styles/mastodon-material-dark/theme/base_config.scss Normal file
View File

@ -0,0 +1,34 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// Color scheme
@import '../color/v1-light';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'color/v2-light';
// Layout profile
@import '../layout/material-v1';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'layout/material-v2';
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Status font size in timeline
$status-font-size: 15px; // mastodon default
//$status-font-size: 16px; // compatible with material design
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
//$name-font-size: 16px; // compatible with material design

26
app/javascript/styles/mastodon-material-dark/theme/basics.scss Normal file
View File

@ -0,0 +1,26 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
body { background: $background-color }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
background: $scroll-bar-thumb-color;
&:hover { background: $scroll-bar-thumb-hover-color }
&:active { background: $scroll-bar-thumb-active-color }
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
background: transparent !important;
}
// Firefox scroll bar
html {
scrollbar-color: $scroll-bar-thumb-color transparent;
}

97
app/javascript/styles/mastodon-material-dark/theme/button.scss Normal file
View File

@ -0,0 +1,97 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {
color: $icon-button-color;
border-radius: 50%;
&.active {
color: $icon-button-active-color;
&:hover { color: $icon-button-active-hover-color }
}
&.disabled { color: $disabled-icon-color }
&.inverted {
color: $icon-button-color;
&:hover {
color: $icon-button-hover-color;
background-color: $icon-background-hover-color;
}
}
&.overlayed {
border-radius: 50%;
background: $media-icon-background-color;
color: $media-icon-color;
&:hover {
background: $media-icon-background-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
background-color: $icon-background-hover-color;
}
&:active,
&:focus { background-color: transparent }
}
.text-icon-button {
color: $icon-button-color;
border-radius: 50%;
font-size: 12px;
&:hover {
background-color: $icon-background-hover-color;
color: $icon-button-hover-color;
}
}
.button,
.button:active,
.button:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
.button.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover { background: $contained-button-hover-color }
.button--destructive:hover { background: $contained-button-hover-color }
}
.button.button--block { margin: 8px 0 }
.button.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
.spoiler-button__overlay__label {
background: $media-icon-background-color;
border-radius: $button-radius;
color: $media-icon-color;
}

474
app/javascript/styles/mastodon-material-dark/theme/columns.scss Normal file
View File

@ -0,0 +1,474 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@include shadow-1dp;
padding: 0;
margin: 10px 8px;
border-radius: $card-radius;
&>.scrollable { background: $list-background-color }
&:last-child { box-shadow: none }
}
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
> button {
padding: 16px 0 16px 16px;
color: $top-bar-text-color;
}
&>.column-header__back-button { color: $top-bar-icon-color }
&.active {
.column-header__icon {
color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
&__icon {
margin-right: 16px;
color: $top-bar-icon-color;
font-size: 20px;
}
&__buttons { height: 56px }
&__button {
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px 12px;
border-radius: 50%;
&.active {
color: $top-bar-icon-active-color;
background: $icon-background-active-color;
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-background-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-background-hover-color;
}
}
&__setting-btn {
color: $icon-button-color;
padding: 8px 0;
&:hover {
color: $icon-button-hover-color;
text-decoration: none;
}
.fa { font-size: 20px }
span { vertical-align: middle }
}
&__setting-arrows {
font-size: 16px;
border-bottom: 8px;
.column-header__setting-btn {
padding: 8px;
border-radius: 50%;
&:last-child { padding-right: 8px }
}
}
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
.announcements { border-top: 1px solid $border-color }
&.active {
@include shadow-4dp;
&::before { background: transparent }
}
}
&__collapsible {
color: $ui-text-color;
background: $card-background-color;
border-top: 1px solid $border-color;
&-inner {
background: $card-background-color;
padding: 16px;
}
&.collapsed { border-top: none }
}
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 8px;
margin: auto 0;
border-radius: 50%;
span { display: none }
}
}
.column-subheading {
color: $section-text-color;
background: $background-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
background: $background-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
&:hover { background: $list-background-hover-color }
&:active,
&:focus { background: $list-background-active-color }
&__icon {
margin-right: 32px;
font-size: 20px;
}
&--transparent {
&.active {
color: $ui-text-color;
background: $menu-background-active-color;
&:hover { background: $menu-background-active-hover-color }
.fa { color: $icon-color }
}
&:hover {
color: $ui-text-color;
.fa { color: $icon-color }
}
}
.fa { color: $icon-color }
}
.column-settings {
&__section {
color: $section-text-color;
margin-bottom: 0;
margin-top: 8px;
}
&__row .text-btn { margin-bottom: 0 }
}
.column-back-button {
@include shadow-4dp;
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 16px;
span { visibility: hidden } // hide "back" string
}
.column-inline-form {
padding: 16px 0 16px 16px;
background: $card-background-color;
.icon-button { margin: 0 16px }
}
.setting-text {
color: $primary-text-color;
background: $text-field-background-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
}
.empty-column-indicator {
color: $secondary-text-color;
background: $card-background-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
background: $list-background-inactive-color;
&--unread {
background: $list-background-color;
.conversation__content__relative-time { color: $info-text-color }
}
&__unread { background: $primary-color }
&__avatar { padding: 0 16px 0 0 }
&__content {
padding: 0;
&__relative-time {
font-size: 14px;
color: $info-text-color;
}
&__names,
&__names a {
color: $primary-text-color;
font-size: 16px;
}
}
}
// read status in notification column
.muted {
.status {
&__content {
color: $read-primary-text-color;
p { color: $read-primary-text-color }
a { color: $read-secondary-text-color }
}
&__display-name strong { color: $read-primary-text-color }
}
.poll {
color: $read-primary-text-color;
&__chart {
background: $read-poll-bar-color;
&.leading { background: $read-poll-bar-leading-color }
}
&__footer,
&__link { color: $read-ui-text-color }
}
}
.load-gap { border-bottom: 1px solid $border-color }
.load-more {
color: $icon-color;
padding: 16px;
&:hover { background: $menu-background-hover-color }
}
.getting-started {
background: $background-color;
color: $ui-text-color;
&__wrapper {
background: $background-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
&__footer {
padding: 16px;
p {
color: $secondary-text-color;
font-size: 12px;
margin-bottom: 16px;
}
a { color: $ui-text-color }
p a { color: $link-text-color }
}
&__trends {
background: $background-color;
margin-bottom: 0;
h4 {
color: $section-text-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
border-bottom: none;
}
}
}
.trends {
&__header {
color: $section-text-color;
background: transparent;
border-bottom: 1px solid $border-color;
padding: 16px;
.fa { margin-right: 8px }
}
&__item {
padding: 16px;
border-bottom: none;
&__name {
color: $secondary-text-color;
font-size: 12px;
a { color: $primary-text-color }
}
&__current {
padding-right: 16px;
margin-left: 4px;
color: $secondary-text-color;
}
&__sparkline path {
stroke: $primary-color;
fill: $primary-color;
fill-opacity: 0.5;
}
}
}
.setting-toggle {
&__label {
color: $ui-text-color;
margin: 8px 8px 8px 14px;
}
}
.announcements {
background: $card-background-color;
padding: 0;
&__container { color: $primary-text-color }
&__item {
padding: 16px;
font-size: 16px;
&__unread { background: $badge-color }
}
&__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
}
}
}
.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
.reactions-bar {
.emoji-button {
color: $icon-button-color;
font-size: 20px;
&:hover { color: $icon-button-hover-color }
&:active { color: $icon-button-active-color }
}
&__item {
background: $contained-chip-color;
border-radius: 17px;
margin: 2px 4px;
&.active {
background-color: $contained-chip-selected-color;
.reactions-bar__item__count { color: $ui-text-color }
}
&__emoji {
width: 24px;
height: 24px;
margin: 4px 0 4px 2px;
}
&__count {
font-size: 16px;
margin: 0 8px;
color: $secondary-text-color;
}
&:hover { background: $contained-chip-hover-color }
}
}
.notification {
&__filter-bar {
background: $tab-background-color;
border-bottom: 1px solid $border-color;
z-index: 1;
button {
background: $tab-background-color;
color: $tab-indicator-color;
font-size: 16px;
span { font-size: 14px }
&.active {
color: $tab-indicator-active-color;
border-bottom: 4px solid $tab-indicator-active-color;
&::before,
&:after { border: none }
&:focus { background: $tab-indicator-background-focus-color }
}
&:hover { background: $tab-indicator-background-hover-color }
}
}
&__message {
color: $secondary-text-color;
margin: 0 16px 0 70px;
font-size: 16px;
}
&__display-name:hover { color: inherit }
}
.notification-favourite .status.status-direct {
.icon-button.disabled { color: $disabled-icon-color }
}
.relationship-tag {
color: $ui-text-color;
background-color: $relationship-tag-color;
font-size: 12px;
border-radius: 17px;
padding: 4px 8px;
opacity: 1;
}
.attachment-list__list a { color: $secondary-text-color }

534
app/javascript/styles/mastodon-material-dark/theme/components.scss Normal file
View File

@ -0,0 +1,534 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.drawer {
&__header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
a { transition: none }
a:hover {
background: $icon-background-hover-color;
border-radius: 50%;
}
}
&__tab {
color: $top-bar-icon-color;
font-size: 20px;
margin: 10px auto 10px;
padding: 8px;
flex: none;
height: 20px;
width: 20px;
border-bottom: none;
text-align: justify;
&:hover { color: $top-bar-icon-hover-color }
}
&__pager {
@include shadow-1dp;
border-radius: $card-radius;
}
&__inner {
background: $card-background-color;
&.darker {
background: $card-background-color;
position: inherit;
}
&__mastodon { background: $card-background-color }
}
}
.search {
&__input {
background: $search-bar-color;
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
color: $search-bar-text-color;
}
&::placeholder { color: $tips-text-color }
}
&__icon {
.fa {
color: $icon-color;
font-size: 20px;
top: 12px;
right: unset;
left: 12px;
height: 6px;
transition: none;
&.active { opacity: 1 }
&-search {
transform: none;
opacity: 1;
}
&-times-circle.active {
right: 16px;
left: unset;
transform: none;
}
}
}
}
.search-popout {
@include shadow-2dp;
background: $search-bar-focus-color;
border-radius: 0px $bar-radius;
border-top: 1px solid $border-color;
margin-top: 0;
color: $tips-text-color;
h4 {
color: $secondary-text-color;
}
em {
color: $search-bar-text-color;
}
}
.search-results {
&__header {
color: $secondary-text-color;
background-color: $card-background-color;
padding: 16px;
.fa { margin-right: 8px }
}
&__section {
h5 {
background: $card-background-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
.fa { margin-right: 8px }
}
}
}
.navigation-bar {
color: $secondary-text-color;
padding: 14px;
strong {
color: $ui-text-color;
}
}
.navigation-panel hr {
border-top: 1px solid $border-color;
margin: 8px 0;
}
.dropdown-menu {
@include shadow-8dp;
background: $menu-background-color;
padding: 8px 0;
border-radius: $menu-radius;
&__arrow { visibility: hidden }
&__item a {
font-size: 14px;
padding: 8px 16px;
background: $menu-background-color;
color: $menu-text-color;
&:hover, &:active {
background: $menu-background-hover-color;
color: $menu-text-color;
}
}
&__separator {
margin: 8px 0;
border-bottom: 1px solid $border-color;
}
}
.compose-form {
.autosuggest-textarea {
&__textarea {
background: $text-field-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&::placeholder { color: $tips-text-color }
}
&__suggestions {
@include shadow-1dp;
background: $menu-background-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
padding: 8px 0;
&__item {
padding: 8px;
border-radius: 0;
&:hover { background: $menu-background-hover-color }
&.selected,
&:focus,
&:active { background: $menu-background-active-color }
}
}
}
.spoiler-input__input {
color: $ui-text-color;
background: $card-background-color;
&::placeholder { color: $tips-text-color }
}
.compose-form {
&__warning {
@include shadow-1dp;
color: $secondary-text-color;
background: $card-background-color;
padding: 16px;
a { color: $link-text-color }
}
&__modifiers {
background: $card-background-color;
color: $tips-text-color;
}
&__buttons-wrapper {
background: $card-background-color;
color: $tips-text-color;
}
&__poll-wrapper {
border-top: 1px solid $border-color;
ul { padding: 16px 12px 16px 0 }
select {
color: $ui-text-color;
background-color: $background-color;
border: 0;
&:focus { border-color: $border-active-color }
}
.button.button-secondary {
box-shadow: none;
color: $outlined-button-color;
border-color: $outlined-button-color;
&:hover { background-color: $outlined-button-hover-color }
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
}
}
&__utilBtns { padding-top: 0 }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
.no-reduce-motion .spoiler-input {
transition-duration: .2s, .2s;
}
.poll {
&__input {
border: 2px solid $control-border-color;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin: 8px;
&.checkbox { border-radius: 2px }
&:focus,
&:hover { border: 2px solid $control-border-color }
}
&__text input[type=text] {
color: $ui-text-color;
background: $text-field-background-color;
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
}
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-background-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
&__chart {
border-radius: 0;
background: $poll-bar-color;
&.leading { background: $poll-bar-leading-color }
}
&__footer {
padding-top: 8px;
padding-bottom: 0;
color: $ui-text-color;
}
&__link { color: $ui-text-color }
}
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
background: $icon-background-hover-color;
border-radius: 50%;
box-shadow: none;
.icon-button { color: $icon-button-active-color }
}
&__dropdown {
@include shadow-8dp;
background: $menu-background-color;
border-radius: $dialog-radius;
}
&__option {
color: $icon-color;
padding: 8px 16px;
&__icon {
font-size: 20px;
margin-right: 12px;
}
&__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&.active {
background: $menu-background-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&:hover {
background: $menu-background-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
&:hover {
background: $menu-background-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
}
.character-counter {
color: $secondary-text-color;
}
.reply-indicator {
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
background: $card-background-color;
padding: 16px;
&__header { margin-bottom: 4px }
&__display {
&-name {
color: $primary-text-color;
padding-right: 24px;
}
&-avatar { margin-right: 8px }
}
&__content { color: $primary-text-color }
}
.attachment-list {
&__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color }
}
.block-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.load-more {
color: $ui-text-color;
&:hover { background: transparent }
}
.autosuggest-hashtag {
&__name { color: $menu-text-color }
}
.filter-form {
background: $background-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
}
.directory {
&__card {
@include shadow-1dp;
margin: 8px 4px;
border-radius: $card-radius;
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
background: $card-background-color;
padding: 8px 16px;
.display-name {
margin-left: 16px;
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-background-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
}
.accounts-table__count { padding: 16px 0 }
}
}
}
.mute-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
.setting-toggle {
margin-top: 16px;
margin-bottom: 16px;
&__label {
color: $ui-text-color;
margin: 0 0 0 12px;
}
}
}

71
app/javascript/styles/mastodon-material-dark/theme/control.scss Normal file
View File

@ -0,0 +1,71 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.react-toggle {
width: 36px;
height: 16px;
border-radius: 15px;
&-track {
background-color: $toggle-track-color;
margin: 4px;
width: 36px;
height: 16px;
&-check { visibility: hidden }
&-x { visibility: hidden }
}
&-thumb {
@include shadow-1dp;
width: 20px;
height: 20px;
border: 0;
background-color: $toggle-thumb-color;
}
&--checked {
.react-toggle{
&-track { background-color: $toggle-track-active-color }
&-thumb {
background-color: $toggle-thumb-active-color;
left: 22px;
}
}
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
}
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
}
.radio-button {
padding: 8px 0;
&__input {
border: 2px solid $border-color;
&.checked {
border-color: $icon-button-active-color;
background: $icon-button-active-color;
padding: 3px;
background-clip: content-box;
}
}
}
.compose-form__sensitive-button .checkbox {
border: 2px solid $border-color;
border-radius: 2px;
&.active {
border-color: $primary-color;
background: $primary-color;
}
}

92
app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss Normal file
View File

@ -0,0 +1,92 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
background: $menu-background-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
background: $menu-background-color;
border-radius: $menu-radius;
button {
padding: 8px;
}
}
}
.emoji-mart {
width: 388px !important;
font-size: 14px;
color: $menu-text-color;
&-bar {
border: 0 solid $border-color;
&:first-child {
background: $menu-background-color;
}
}
&-anchors {
color: $icon-button-color;
padding: 0;
}
&-anchor {
padding: 10px 4px;
&-selected {
color: $icon-button-active-color;
}
&-bar {
background-color: $tab-indicator-active-color;
}
&:hover {
color: $icon-button-hover-color;
}
}
&-search {
background: $menu-background-color;
input {
outline: none;
padding: 8px;
background: $search-bar-color;
color: $ui-text-color;
border: 0;
border-radius: $search-bar-radius;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
}
}
}
&-scroll {
padding: 0 8px 8px;
background: $menu-background-color;
}
&-category-label span {
padding: 4px 6px;
background: $menu-background-color;
}
&-emoji:hover::before {
background-color: $icon-background-hover-color;
}
&-no-results { color: $secondary-text-color }
}

44
app/javascript/styles/mastodon-material-dark/theme/icons.scss Normal file
View File

@ -0,0 +1,44 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.fa.fa-users.column-link,
.fa.fa-globe.column-link,
.fa.fa-address-book.column-link,
.fa.fa-bullhorn.column-link,
.fa.fa-envelope.column-link,
.fa.fa-bookmark.column-link,
.fa.fa-star.column-link,
.fa.fa-list-ul.column-link {
&__icon.fa-fw { color: $icon-color }
}
.fa { vertical-align: sub } // adjust material icon font baseline to other font
.fa.fa-times,
.fa.fa-eraser,
.fa.fa-plus { vertical-align: middle } // adjustment exception
.fa.fa-check { vertical-align: initial }
.fa.fa-lock { text-transform: none }
.fa-fw { width: 16px }
// icon in tab settings
.fa.fa-chevron-left.column-back-button__icon.fa-fw,
.text-btn.column-header__setting-btn .fa.fa-eraser {
font-size: 20px;
margin-right: 16px;
}
.icon-with-badge__badge {
background: $badge-color;
border: none;
padding: 2px 6px;
border-radius: 12px;
}

159
app/javascript/styles/mastodon-material-dark/theme/material-icons.scss Normal file
View File

@ -0,0 +1,159 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config', '../icon_config';
@import '../custom_color', '../custom_layout';
@import 'functions';
.fa {
&.fa-bars,
&.fa-navicon,
&.fa-reorder,
&.fa-globe,
&.fa-cog,
&.fa-cogs,
&.fa-gears,
&.fa-sign-out,
&.fa-search,
&.fa-times,
&.fa-times-circle,
&.fa-close,
&.fa-remove,
&.fa-chevron-down,
&.fa-ellipsis-v,
&.fa-paperclip,
&.fa-tasks,
&.fa-plus,
&.fa-unlock,
&.fa-lock,
&.fa-envelope,
&.fa-home,
&.fa-bullhorn,
&.fa-sliders,
&.fa-chevron-left,
&.fa-chevron-right,
&.fa-reply,
&.fa-reply-all,
&.fa-share-alt,
&.fa-star,
&.fa-bookmark,
&.fa-ellipsis-h,
&.fa-bell,
&.fa-eraser,
&.fa-users,
&.fa-file-text,
&.fa-user-plus,
&.fa-address-book,
&.fa-address-book-o,
&.fa-list,
&.fa-list-ul,
&.fa-eye,
&.fa-eye-slash,
&.fa-pencil,
&.fa-trash,
&.fa-play,
&.fa-external-link,
&.fa-retweet,
&.fa-link,
&.fa-pause,
&.fa-volume-up,
&.fa-volume-off,
&.fa-expand,
&.fa-download,
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
&.fa-check,
&.fa-quote-right {
font-family: "Material Icons";
}
}
.fa {
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
&.fa-globe::before { content: "public" }
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
&.fa-sign-out::before { content: "exit_to_app" }
&.fa-search::before { content: "search" }
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
&.fa-paperclip::before { content: "attach_file" }
&.fa-tasks::before { content: "poll" }
&.fa-plus::before { content: "add" }
&.fa-unlock::before { content: "lock_open" }
&.fa-lock::before { content: "lock" }
&.fa-envelope::before { content: "mail" }
&.fa-home::before { content: "home" }
&.fa-bullhorn::before { content: "announcement" }
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
&.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
&.fa-bookmark::before { content: "bookmark" }
&.fa-ellipsis-h::before { content: "more_horiz" }
&.fa-bell::before { content: "notifications" }
&.fa-eraser::before { content: "clear_all" }
&.fa-users::before { content: "people" }
&.fa-file-text::before { content: "web" }
&.fa-user-plus::before { content: "person_add" }
&.fa-address-book::before { content: "explore" }
&.fa-address-book-o::before { content: "explore" }
&.fa-list::before { content: "list" }
&.fa-list-ul::before { content: "list" }
&.fa-eye::before { content: "visibility" }
&.fa-eye-slash::before { content : "visibility_off" }
&.fa-pencil::before { content: "create" }
&.fa-trash::before { content: "delete" }
&.fa-play::before { content: "play_arrow" }
&.fa-external-link::before { content: "open_in_new" }
&.fa-retweet::before { content: "repeat" }
&.fa-link::before { content: "link" }
&.fa-pause::before { content: "pause" }
&.fa-volume-up::before { content: "volume_up" }
&.fa-volume-off::before { content: "volume_off" }
&.fa-expand::before { content: "web_asset" }
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
&.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
.status__action-bar-button.icon-button,
.bookmark-icon.icon-button {
.fa.fa-bookmark::before { content: "bookmark_border" }
&.active .fa.fa-bookmark::before { content: "bookmark" }
}
// favorite icon
.status__action-bar-button.star-icon.icon-button,
.star-icon.icon-button {
.fa.fa-star::before { content: $favorite-icon-border }
&.active,
&.active.activate {
.fa.fa-star::before { content: $favorite-icon }
}
}
// favorite icon color
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
// dropdown icon
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}

105
app/javascript/styles/mastodon-material-dark/theme/media.scss Normal file
View File

@ -0,0 +1,105 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.media-gallery {
border-radius: 0;
&__item { border-radius: 0 }
}
.media-modal__close {
align-content: center;
&.icon-button {
background: transparent;
color: $media-icon-color;
text-align: center !important;
font-size: 24px !important;
width: 48px !important;
height: 48px !important;
border: 12px;
&:hover {
background: $media-icon-background-hover-color;
color: $media-icon-hover-color;
}
.fa-fw { width: 24px }
}
}
.media-modal {
&__nav {
background: $media-icon-background-color;
color: $media-icon-color;
height: 48px;
width: 48px;
margin: auto 16px;
padding: 8px;
border-radius: 50%;
.fa { width: 32px }
}
&__button {
background-color: $media-page-indicator-color;
&--active { background-color: $media-page-indicator-active-color }
}
}
.video-player {
&__controls {
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
padding: 0 12px;
}
&__seek {
&::before {
background: rgba(255,255,255,.2);
border-radius: 0;
}
&__buffer {
background: rgba(255,255,255,.4);
border-radius: 0;
}
&__progress {
background: $primary-color;
border-radius: 0;
}
&__handle {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
background-color: $primary-color;
box-shadow: none;
}
}
&__volume {
&::before {
background: rgba(255,255,255,.4);
border-radius: 0;
}
&__current {
background: $primary-color;
border-radius: 0;
}
&__handle {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
background-color: $primary-color;
box-shadow: none;
}
}
&__time-current { margin-left: 68px }
&__buttons button { font-size: 20px }
}

102
app/javascript/styles/mastodon-material-dark/theme/modal.scss Normal file
View File

@ -0,0 +1,102 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.confirmation-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
&__container {
text-align: left;
padding: 24px;
}
&__action-bar {
justify-content: flex-end;
background: $card-background-color;
padding: 8px;
}
&__secondary-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.actions-modal {
background: $card-background-color;
border-radius: $card-radius;
ul li:not(:empty) a {
color: $ui-text-color;
font-size: 16px;
&:hover {
background: $card-background-hover-color;
color: $ui-text-color;
}
}
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
background: $card-background-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
&__avatar {
left: 12px;
top: 12px;
}
}
}
.report-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__target {
padding: 24px;
text-align: left;
font-weight: bold;
}
&__container {
border-top: none;
}
&__comment {
border-right: none;
.setting-text-label { color: $ui-text-color }
}
}
.embed-modal .embed-modal__container {
padding: 0 24px 24px 24px;
.hint {
margin-bottom: 16px;
color: $secondary-text-color;
}
}

94
app/javascript/styles/mastodon-material-dark/theme/responsive.scss Normal file
View File

@ -0,0 +1,94 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.tabs-bar {
background: $top-bar-color;
&__link {
padding: 16px 16px 12px 16px;
color: $top-bar-icon-color;
border-bottom: 4px solid transparent;
&.active {
border-bottom: 4px solid $tab-indicator-active-color;
color: $tab-indicator-active-color;
}
.fa { font-size: 20px }
span {
margin-left: 8px;
vertical-align: text-bottom;
}
}
&__wrapper {
@include shadow-4dp;
background: transparent;
}
}
#tabs-bar__portal { overflow-y: hidden }
.floating-action-button {
@include shadow-6dp;
background: $floating-action-button-color;
color: $floating-action-button-icon-color;
font-size: 24px;
&:hover { background: $floating-action-button-hover-color }
&:active,
&:focus { background: $floating-action-button-active-color }
}
.columns-area--mobile {
.column { margin: 0 !important }
.search__input { padding: 16px 46px }
.search__icon {
.fa {
top: 16px;
left: 16px;
}
.fa-times-circle.active { left: unset }
}
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper {
padding-top: 0;
.tabs-bar { margin-bottom: 0 }
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
}
}

185
app/javascript/styles/mastodon-material-dark/theme/statuses.scss Normal file
View File

@ -0,0 +1,185 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.status {
padding: 12px 12px 12px 70px;
border-bottom: 1px solid $border-color;
&__expand { width: 70px }
&__info {
font-size: $name-font-size;
padding-right: 4px;
}
&__relative-time { color: $info-text-color }
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__avatar {
left: 12px;
top: 12px;
}
&__content {
font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
a {
color: $link-text-color;
&.unhandled-link { color: $link-text-color }
}
.status__content__spoiler-link {
background: transparent;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
&__spoiler-link {
border: 0;
color: $text-button-color;
}
&__read-more-button {
font-size: 14px;
color: $text-button-color;
border-radius: $button-radius;
padding: 4px 6px;
&:hover {
background: $text-button-hover-color;
text-decoration: none;
}
&:focus { background: $text-button-focus-color }
}
}
&__action-bar {
&__counter__label {
font-size: 14px;
color: $info-text-color;
}
}
&__prepend {
color: $secondary-text-color;
margin-left: 64px;
.status__display-name strong { color: $secondary-text-color }
}
&.status-direct:not(.read) {
background: transparent;
border-bottom-color: $border-color;
}
}
.status-card {
color: $icon-color;
border-color: $border-color;
outline: none;
&__image {
background: transparent;
&>.fa {
font-size: 26px;
}
}
&__title {
color: $primary-text-color;
margin-bottom: 6px;
}
&__description { color: $secondary-text-color }
&__actions {
&>div {
background: $media-icon-background-color;
border-radius: $button-radius;
}
button,
a {
color: $media-icon-color;
font-size: 20px;
}
a { bottom: auto }
}
&.compact {
border-color: $border-color;
outline: none;
background: transparent;
.status-card {
&__content { padding: 12px }
&__image { flex: 0 0 64px }
}
&:hover { background-color: transparent !important }
}
&:hover { background-color: $card-background-color }
}
// Detailed status in mobile
.status.light {
.status {
&__display-name { color: $primary-text-color }
&__relative-time { color: $info-text-color }
&__content { color: $primary-text-color }
}
.display-name { color: $secondary-text-color }
.display-name strong { color: $primary-text-color }
}
.detailed-status {
background: $card-background-color;
padding: 16px;
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__meta {
margin-top: 16px;
color: $info-text-color;
}
&__action-bar {
background: $card-background-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
}
&__button {
.icon-button { font-size: 20px !important }
}
}
// search user trends
.display-name {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}

4
app/javascript/styles/mastodon-material-dark/theme/theme.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';

7
app/javascript/styles/mastodon-material-dark/theme/variables.scss Normal file
View File

@ -0,0 +1,7 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.link-button { color: $link-text-color }

2
app/javascript/styles/mastodon-material-light.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'application';
@import 'mastodon-material-light/loader';

135
app/javascript/styles/mastodon-material-light/color/black.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #000000;
$menu-background-color: #121212;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #121212;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #000000;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #121212;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9baec8;
$ui-text-color: #fff;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #606984;
$tips-text-color: #6d7889;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4ea2df;
$menu-text-color: #282c37;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #191b22;
$menu-background-color: #d9e1e8;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #313543;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #282c37;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #9baec8;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: lighten($background-color, 14%);
$icon-background-active-color: lighten($background-color, 18%);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #fff;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.7);
$text-button-focus-color: transparentize($text-button-color, 0.6);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($primary-color, 18%);
// Border color
$border-color: #393f4f;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 16%);
$scroll-bar-thumb-hover-color: lighten($background-color, 26%);
$scroll-bar-thumb-active-color: lighten($background-color, 32%);
// App bar color
$top-bar-color: #313543;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: #d9e1e8;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: #1f232b;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $tab-indicator-color;
$text-tab-indicator-active-color: $tab-indicator-active-color;
$text-tab-background-color: $tab-background-color;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

134
app/javascript/styles/mastodon-material-light/color/mastodon-light.scss Normal file
View File

@ -0,0 +1,134 @@
@charset "UTF-8";
// Base color
$primary-color: #2b90d9;
$secondary-color: #2b90d9;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #217aba;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #eff3f5;
$menu-background-color: $background-color;
$menu-background-hover-color: darken($background-color, 6%);
$menu-background-active-color: darken($background-color, 10%);
$menu-background-active-hover-color: darken($background-color, 16%);
$card-background-color: #ffffff;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #282c37;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: darken($background-color, 4%);
$icon-background-active-color: darken($background-color, 8%);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $icon-hover-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: lighten($text-button-color, 36%);
$text-button-focus-color: lighten($text-button-color, 30%);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: $primary-color;
$toggle-track-active-color: lighten($primary-color, 26%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: #ccd7e0;
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #ffffff;
$search-bar-color: #d9e1e8;
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: #e6ebf0;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $tab-indicator-color;
$text-tab-indicator-active-color: $tab-indicator-active-color;
$text-tab-background-color: $tab-background-color;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

134
app/javascript/styles/mastodon-material-light/color/plus-classic.scss Normal file
View File

@ -0,0 +1,134 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #fafafa;
$menu-background-color: #ffffff;
$menu-background-hover-color: darken($menu-background-color, 6%);
$menu-background-active-color: darken($menu-background-color, 10%);
$menu-background-active-hover-color: darken($menu-background-color, 16%);
$card-background-color: #ffffff;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: transparentize(#000000, 0.9);
$icon-background-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $secondary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: darken($background-color, 20%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #db4437;
$search-bar-color: darken($background-color, 6%);
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-background-color: #ffffff;
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

134
app/javascript/styles/mastodon-material-light/color/v1-dark.scss Normal file
View File

@ -0,0 +1,134 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #303030;
$menu-background-color: #424242;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #424242;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #424242;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($background-color, 30%);
$scroll-bar-thumb-active-color: lighten($background-color, 38%);
// App bar color
$top-bar-color: #1565C0;
$search-bar-color: lighten($background-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-background-color: #424242;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-light/color/v1-light.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $inverted-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #fafafa;
$menu-background-color: #ffffff;
$menu-background-hover-color: darken($menu-background-color, 6%);
$menu-background-active-color: darken($menu-background-color, 10%);
$menu-background-active-hover-color: darken($menu-background-color, 16%);
$card-background-color: #ffffff;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: #ffffff;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: transparentize(#000000, 0.9);
$icon-background-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: darken($top-bar-icon-color, 10%);
$top-bar-icon-active-color: darken($top-bar-icon-color, 18%);
$top-bar-unread-icon-color: darken($primary-color, 30%);
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: darken($background-color, 20%);
$scroll-bar-thumb-hover-color: darken($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: darken($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #2196f3;
$search-bar-color: darken($background-color, 6%);
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $top-bar-color;
$text-tab-background-color: #ffffff;
$text-tab-indicator-background-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-background-focus-color: transparentize(#000000, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-light/color/v2-dark.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #121212;
$menu-background-color: #1e1e1e;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #1e1e1e;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #1e1e1e;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #2e2e2e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #272727;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #1e1e1e;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

135
app/javascript/styles/mastodon-material-light/color/v2-light.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #000000;
$secondary-text-color: #5f6368;
$ui-text-color: #202124;
$inverted-text-color: #ffffff;
$section-text-color: $primary-color;
$info-text-color: #5e5e5e;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $primary-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #ffffff;
$menu-background-color: $background-color;
$menu-background-hover-color: darken($menu-background-color, 6%);
$menu-background-active-color: darken($menu-background-color, 10%);
$menu-background-active-hover-color: darken($menu-background-color, 16%);
$card-background-color: $background-color;
$card-background-hover-color: darken($card-background-color, 6%);
$card-background-inactive-color: darken($card-background-color, 10%);
$list-background-color: $background-color;
$list-background-hover-color: darken($list-background-color, 6%);
$list-background-active-color: darken($list-background-color, 10%);
$list-background-inactive-color: darken($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #757575;
$icon-hover-color: darken($icon-color, 30%);
$icon-background-hover-color: transparentize(#000000, 0.9);
$icon-background-active-color: transparentize(#000000, 0.8);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: #ffffff;
$floating-action-button-hover-color: darken($floating-action-button-color, 6%);
$floating-action-button-active-color: darken($floating-action-button-color, 10%);
$floating-action-button-icon-color: $primary-color;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #dadce0;
$border-active-color: darken($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: darken($background-color, 20%);
$scroll-bar-thumb-hover-color: darken($background-color, 30%);
$scroll-bar-thumb-active-color: darken($background-color, 38%);
// App bar color
$top-bar-color: $background-color;
$search-bar-color: darken($background-color, 6%);
$search-bar-focus-color: $background-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #ffffff;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

4
app/javascript/styles/mastodon-material-light/custom_color.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

5
app/javascript/styles/mastodon-material-light/custom_config.scss Normal file
View File

@ -0,0 +1,5 @@
@charset "UTF-8";
// Add your settings below
@import 'color/mastodon-light';

4
app/javascript/styles/mastodon-material-light/custom_layout.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
// Add your customization below

26
app/javascript/styles/mastodon-material-light/icon_config.scss Normal file
View File

@ -0,0 +1,26 @@
// Favorite icon settings
$favorite-icon: "star"; $favorite-icon-border: "star_border"; // Star
//$favorite-icon: "favorite"; $favorite-icon-border: "favorite_border"; // Heart
//$favorite-icon: "plus_one"; $favorite-icon-border: "plus_one"; // +1
$favorite-icon-color: #ffd600; // Star
//$favorite-icon-color: #ff4081; // Heart
//$favorite-icon-color: #db4437; // +1
//$favorite-icon-color: #ffffff; // inverted +1
// Reply icon settings
$reply-icon: "reply";
//$reply-icon: "comment"; // blooming
// Material Design Icon settings
// If you want to use self-hosting font, please place MaterialIcons-Regular.woff2 file in '../../fonts' folder and configure below.
@font-face {
font-family: "Material Icons";
src:
local("Material Icons"),
//url("https://raw.githubusercontent.com/google/material-design-icons/master/iconfont/MaterialIcons-Regular.woff2"); // GitHub
//url("https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2"); // Google Fonts
url("../fonts/MaterialIcons-Regular.woff2"); // Self-hosting
}

45
app/javascript/styles/mastodon-material-light/layout/material-v1.scss Normal file
View File

@ -0,0 +1,45 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 2px;
// Search bar radius
$search-bar-radius: 2px;
// Bar radius settings
$bar-radius: 0;
// Button radius settings
$button-radius: 2px;
// Card radius settings
$card-radius: 2px;
// Dialog radius settings
$dialog-radius: 2px;
// Menu radius settings
$menu-radius: 2px;
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
// Button shadow
// If you want to use material v2 styled non-shadow button, please comment out this section.
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

60
app/javascript/styles/mastodon-material-light/layout/material-v2.scss Normal file
View File

@ -0,0 +1,60 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
// Search bar radius
$search-bar-radius: 8px;
// Bar radius settings
$bar-radius: 0;
//$bar-radius: 8px;
// Button radius settings
$button-radius: 8px;
// Card radius settings
$card-radius: 8px;
// Dialog radius settings
$dialog-radius: 8px;
// Menu radius settings
$menu-radius: 8px;
// Navigation drawer item settings
$nav-drawer-item-radius: 8px; // corner rounded
//$nav-drawer-item-radius: 32px; // full rounded
//$nav-drawer-item-radius: 32px 0 0 32px; // left rounded
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 8px // Material v2 square
// Chip settings
// If you want to use contained-chip, please comment out below.
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
&:hover { background: $outlined-chip-hover-color !important }
}
// Button shadow
// If you want to use material v2 styled non-shadow button, please comment out this section.
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }

7
app/javascript/styles/mastodon-material-light/loader.scss Normal file
View File

@ -0,0 +1,7 @@
@import 'theme/theme';
@import 'theme/material-icons';
// Plugins
//@import 'plugins/cards';
//@import 'plugins/dense';
//@import 'plugins/plus';

38
app/javascript/styles/mastodon-material-light/plugins/cards.scss Normal file
View File

@ -0,0 +1,38 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import '../theme/mixins';
.column {
box-shadow: none !important;
margin: 2px 0 !important;
padding: 8px !important;
> .scrollable { background: $background-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
background: $card-background-color;
&__prepend { padding: 8px 8px 2px 0 }
}
.account { border-bottom: 0 !important }
.status__wrapper.status__wrapper,
.notification.notification {
@include shadow-1dp;
margin: 8px 2px;
border-radius: $card-radius;
background: $card-background-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
.notification__filter-bar {
@include non-overflow-shadow-4dp;
}

65
app/javascript/styles/mastodon-material-light/plugins/dense.scss Normal file
View File

@ -0,0 +1,65 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.drawer {
&__tab { margin: 8px auto 8px }
}
.column { margin: 10px 5px }
.column-header {
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
}
.column-subheading { padding: 8px 16px }
.column-link { padding: 12px 16px }
.notification__filter-bar button { padding: 12px 0 }
.getting-started__footer {
padding: 12px 16px;
p { margin-bottom: 12px }
}
.compose-form {
.compose-form__publish { padding-top: 8px }
}
.status {
padding: 8px 8px 8px 66px;
&__expand { width: 66px }
&__info { padding-right: 0 }
&__avatar {
left: 8px;
top: 10px;
}
&__content { padding-top: 2px }
}
.detailed-status {
padding: 14px;
&__meta { margin-top: 14px }
&__action-bar { padding: 10px 0 }
}
.reply-indicator { padding: 8px }
.button.button--block { margin: 6px 0 }

33
app/javascript/styles/mastodon-material-light/plugins/plus.scss Normal file
View File

@ -0,0 +1,33 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.status__action-bar-button {
background: #eeeeee;
width: 28px !important;
height: 28px !important;
.fa { vertical-align: bottom }
}
// favorite icon
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { background: #db4437 }
.notification__favourite-icon-wrapper {
left: -34px;
.star-icon {
border-radius: 50%;
width: 28px;
height: 28px;
vertical-align: baseline;
font-size: 18px;
&.fa-fw::before { vertical-align: middle }
}
}

8
app/javascript/styles/mastodon-material-light/theme/_functions.scss Normal file
View File

@ -0,0 +1,8 @@
@charset "UTF-8";
@use "sass:string";
// convert hex color code to svg styled ascii color code
@function svg-color ($color) {
@return '%23' + string.slice(inspect($color), 2, 7);
}

25
app/javascript/styles/mastodon-material-light/theme/_mixins.scss Normal file
View File

@ -0,0 +1,25 @@
@charset "UTF-8";
$shadow-color-1: rgba(0,0,0,.2);
$shadow-color-2: rgba(0,0,0,.14);
$shadow-color-3: rgba(0,0,0,.12);
@mixin shadow-1dp { box-shadow: 0 2px 1px -1px $shadow-color-1, 0 1px 1px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 }
@mixin shadow-2dp { box-shadow: 0 3px 1px -2px $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 }
@mixin shadow-3dp { box-shadow: 0 3px 3px -2px $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 8px 0 $shadow-color-3 }
@mixin shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 }
@mixin shadow-5dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 5px 8px 0 $shadow-color-2, 0 1px 14px 0 $shadow-color-3 }
@mixin shadow-6dp { box-shadow: 0 3px 5px -1px $shadow-color-1, 0 6px 10px 0 $shadow-color-2, 0 1px 18px 0 $shadow-color-3 }
@mixin shadow-7dp { box-shadow: 0 4px 5px -2px $shadow-color-1, 0 7px 10px 1px $shadow-color-2, 0 2px 16px 1px $shadow-color-3 }
@mixin shadow-8dp { box-shadow: 0 5px 5px -3px $shadow-color-1, 0 8px 10px 1px $shadow-color-2, 0 3px 14px 2px $shadow-color-3 }
@mixin shadow-9dp { box-shadow: 0 5px 6px -3px $shadow-color-1, 0 9px 12px 1px $shadow-color-2, 0 3px 16px 2px $shadow-color-3 }
@mixin shadow-10dp { box-shadow: 0 6px 6px -3px $shadow-color-1, 0 10px 14px 1px $shadow-color-2, 0 4px 18px 3px $shadow-color-3 }
@mixin shadow-11dp { box-shadow: 0 6px 7px -4px $shadow-color-1, 0 11px 15px 1px $shadow-color-2, 0 4px 20px 3px $shadow-color-3 }
@mixin shadow-12dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 12px 17px 2px $shadow-color-2, 0 5px 22px 4px $shadow-color-3 }
@mixin shadow-13dp { box-shadow: 0 7px 8px -4px $shadow-color-1, 0 13px 19px 2px $shadow-color-2, 0 5px 24px 4px $shadow-color-3 }
@mixin shadow-14dp { box-shadow: 0 7px 9px -4px $shadow-color-1, 0 14px 21px 2px $shadow-color-2, 0 5px 26px 4px $shadow-color-3 }
@mixin shadow-15dp { box-shadow: 0 8px 9px -5px $shadow-color-1, 0 15px 22px 2px $shadow-color-2, 0 6px 28px 5px $shadow-color-3 }
@mixin shadow-16dp { box-shadow: 0 8px 10px -5px $shadow-color-1, 0 16px 24px 2px $shadow-color-2, 0 6px 30px 5px $shadow-color-3 }
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}

153
app/javascript/styles/mastodon-material-light/theme/account.scss Normal file
View File

@ -0,0 +1,153 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
border-bottom: 1px solid $border-color;
.account__display-name { color: $primary-text-color }
.account__display-name strong { color: $secondary-text-color }
&__avatar {
border-radius: $avater-radius;
width: 40px;
height: 40px;
&-overlay {
&-base {
border-radius: 50%;
width: 44px;
height: 44px;
background-size: 44px;
}
&-overlay { border-radius: $avater-radius }
}
}
&__header {
&__bar {
background: $card-background-color;
padding: 8px;
border-bottom: 1px solid $border-color;
.avatar .account__avatar { border: none }
}
&__tabs {
padding: 8px;
&__name {
padding: 8px;
h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
&__buttons {
.icon-button {
border: none;
border-radius: 50%;
padding: 0;
}
}
}
&__extra {
margin-top: 0;
&__links {
color: $secondary-text-color;
padding: 10px 0;
a {
color: $secondary-text-color;
padding: 4px 12px;
strong { color: $ui-text-color }
}
}
}
&__bio {
margin: 0;
.account__header {
&__content {
color: $primary-text-color;
padding: 8px;
}
&__fields {
border: 1px solid $border-color;
border-radius: 4px;
.verified {
border: none;
background: $verified-background-color;
a,
&__mark { color: $primary-text-color }
}
dl {
border-bottom: 1px solid $border-color;
&:first-child .verified { border-radius: 0 }
&:last-child { border-bottom: 0 }
}
dt {
color: $primary-text-color;
background: $list-background-inactive-color;
}
dd { color: $primary-text-color }
}
}
}
&__content { color: $secondary-text-color }
}
&__section-headline {
background: $text-tab-background-color;
border-bottom: 1px solid $border-color;
a {
padding: 16px 0;
color: $text-tab-indicator-color;
&.active {
color: $text-tab-indicator-active-color;
border-bottom: 4px solid $text-tab-indicator-active-color;
&::before,
&:after { border: none }
&:focus { background: $text-tab-indicator-background-focus-color }
}
&:hover { background: $text-tab-indicator-background-hover-color }
}
}
}
.account-role {
padding: 4px 8px;
border-radius: 17px;
color: $ui-text-color;
background-color: $contained-chip-color;
}
.accounts-table__count {
color: $ui-text-color;
small { color: $secondary-text-color }
}

34
app/javascript/styles/mastodon-material-light/theme/base_config.scss Normal file
View File

@ -0,0 +1,34 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../config.scss".
// Color scheme
@import '../color/v1-light';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'color/v2-light';
// Layout profile
@import '../layout/material-v1';
// Note: If you change this section in custom_config.scss, you have to write like below. Be careful about relative path.
// @import 'layout/material-v2';
// Search bar hover settings
// You can enable/disable search bar floating.
/*.search__input:hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}*/
// Status font size in timeline
$status-font-size: 15px; // mastodon default
//$status-font-size: 16px; // compatible with material design
// Name font size in timeline status
$name-font-size: 15px; // mastodon default
//$name-font-size: 16px; // compatible with material design

26
app/javascript/styles/mastodon-material-light/theme/basics.scss Normal file
View File

@ -0,0 +1,26 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
body { background: $background-color }
// Chrome & Safari scroll bar
::-webkit-scrollbar-thumb {
background: $scroll-bar-thumb-color;
&:hover { background: $scroll-bar-thumb-hover-color }
&:active { background: $scroll-bar-thumb-active-color }
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:hover,
::-webkit-scrollbar-track:active {
background: transparent !important;
}
// Firefox scroll bar
html {
scrollbar-color: $scroll-bar-thumb-color transparent;
}

97
app/javascript/styles/mastodon-material-light/theme/button.scss Normal file
View File

@ -0,0 +1,97 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.icon-button {
color: $icon-button-color;
border-radius: 50%;
&.active {
color: $icon-button-active-color;
&:hover { color: $icon-button-active-hover-color }
}
&.disabled { color: $disabled-icon-color }
&.inverted {
color: $icon-button-color;
&:hover {
color: $icon-button-hover-color;
background-color: $icon-background-hover-color;
}
}
&.overlayed {
border-radius: 50%;
background: $media-icon-background-color;
color: $media-icon-color;
&:hover {
background: $media-icon-background-color;
color: $media-icon-hover-color;
}
}
&:hover {
color: $icon-button-hover-color;
background-color: $icon-background-hover-color;
}
&:active,
&:focus { background-color: transparent }
}
.text-icon-button {
color: $icon-button-color;
border-radius: 50%;
font-size: 12px;
&:hover {
background-color: $icon-background-hover-color;
color: $icon-button-hover-color;
}
}
.button,
.button:active,
.button:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
.button.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover { background: $contained-button-hover-color }
.button--destructive:hover { background: $contained-button-hover-color }
}
.button.button--block { margin: 8px 0 }
.button.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
.spoiler-button__overlay__label {
background: $media-icon-background-color;
border-radius: $button-radius;
color: $media-icon-color;
}

474
app/javascript/styles/mastodon-material-light/theme/columns.scss Normal file
View File

@ -0,0 +1,474 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.column {
@include shadow-1dp;
padding: 0;
margin: 10px 8px;
border-radius: $card-radius;
&>.scrollable { background: $list-background-color }
&:last-child { box-shadow: none }
}
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
> button {
padding: 16px 0 16px 16px;
color: $top-bar-text-color;
}
&>.column-header__back-button { color: $top-bar-icon-color }
&.active {
.column-header__icon {
color: $top-bar-unread-icon-color;
text-shadow: none;
}
}
&__icon {
margin-right: 16px;
color: $top-bar-icon-color;
font-size: 20px;
}
&__buttons { height: 56px }
&__button {
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px 12px;
border-radius: 50%;
&.active {
color: $top-bar-icon-active-color;
background: $icon-background-active-color;
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-background-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-background-hover-color;
}
}
&__setting-btn {
color: $icon-button-color;
padding: 8px 0;
&:hover {
color: $icon-button-hover-color;
text-decoration: none;
}
.fa { font-size: 20px }
span { vertical-align: middle }
}
&__setting-arrows {
font-size: 16px;
border-bottom: 8px;
.column-header__setting-btn {
padding: 8px;
border-radius: 50%;
&:last-child { padding-right: 8px }
}
}
&__wrapper {
@include shadow-4dp;
border-radius: $bar-radius;
.announcements { border-top: 1px solid $border-color }
&.active {
@include shadow-4dp;
&::before { background: transparent }
}
}
&__collapsible {
color: $ui-text-color;
background: $card-background-color;
border-top: 1px solid $border-color;
&-inner {
background: $card-background-color;
padding: 16px;
}
&.collapsed { border-top: none }
}
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 8px;
margin: auto 0;
border-radius: 50%;
span { display: none }
}
}
.column-subheading {
color: $section-text-color;
background: $background-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
background: $background-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
&:hover { background: $list-background-hover-color }
&:active,
&:focus { background: $list-background-active-color }
&__icon {
margin-right: 32px;
font-size: 20px;
}
&--transparent {
&.active {
color: $ui-text-color;
background: $menu-background-active-color;
&:hover { background: $menu-background-active-hover-color }
.fa { color: $icon-color }
}
&:hover {
color: $ui-text-color;
.fa { color: $icon-color }
}
}
.fa { color: $icon-color }
}
.column-settings {
&__section {
color: $section-text-color;
margin-bottom: 0;
margin-top: 8px;
}
&__row .text-btn { margin-bottom: 0 }
}
.column-back-button {
@include shadow-4dp;
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 16px;
span { visibility: hidden } // hide "back" string
}
.column-inline-form {
padding: 16px 0 16px 16px;
background: $card-background-color;
.icon-button { margin: 0 16px }
}
.setting-text {
color: $primary-text-color;
background: $text-field-background-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
}
.empty-column-indicator {
color: $secondary-text-color;
background: $card-background-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
background: $list-background-inactive-color;
&--unread {
background: $list-background-color;
.conversation__content__relative-time { color: $info-text-color }
}
&__unread { background: $primary-color }
&__avatar { padding: 0 16px 0 0 }
&__content {
padding: 0;
&__relative-time {
font-size: 14px;
color: $info-text-color;
}
&__names,
&__names a {
color: $primary-text-color;
font-size: 16px;
}
}
}
// read status in notification column
.muted {
.status {
&__content {
color: $read-primary-text-color;
p { color: $read-primary-text-color }
a { color: $read-secondary-text-color }
}
&__display-name strong { color: $read-primary-text-color }
}
.poll {
color: $read-primary-text-color;
&__chart {
background: $read-poll-bar-color;
&.leading { background: $read-poll-bar-leading-color }
}
&__footer,
&__link { color: $read-ui-text-color }
}
}
.load-gap { border-bottom: 1px solid $border-color }
.load-more {
color: $icon-color;
padding: 16px;
&:hover { background: $menu-background-hover-color }
}
.getting-started {
background: $background-color;
color: $ui-text-color;
&__wrapper {
background: $background-color;
height: auto !important;
border-bottom: 1px solid $border-color;
}
&__footer {
padding: 16px;
p {
color: $secondary-text-color;
font-size: 12px;
margin-bottom: 16px;
}
a { color: $ui-text-color }
p a { color: $link-text-color }
}
&__trends {
background: $background-color;
margin-bottom: 0;
h4 {
color: $section-text-color;
padding: 12px 16px;
border-top: 1px solid $border-color;
border-bottom: none;
}
}
}
.trends {
&__header {
color: $section-text-color;
background: transparent;
border-bottom: 1px solid $border-color;
padding: 16px;
.fa { margin-right: 8px }
}
&__item {
padding: 16px;
border-bottom: none;
&__name {
color: $secondary-text-color;
font-size: 12px;
a { color: $primary-text-color }
}
&__current {
padding-right: 16px;
margin-left: 4px;
color: $secondary-text-color;
}
&__sparkline path {
stroke: $primary-color;
fill: $primary-color;
fill-opacity: 0.5;
}
}
}
.setting-toggle {
&__label {
color: $ui-text-color;
margin: 8px 8px 8px 14px;
}
}
.announcements {
background: $card-background-color;
padding: 0;
&__container { color: $primary-text-color }
&__item {
padding: 16px;
font-size: 16px;
&__unread { background: $badge-color }
}
&__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
}
}
}
.react-swipeable-view-container { transition: transform .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, height 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s !important }
.reactions-bar {
.emoji-button {
color: $icon-button-color;
font-size: 20px;
&:hover { color: $icon-button-hover-color }
&:active { color: $icon-button-active-color }
}
&__item {
background: $contained-chip-color;
border-radius: 17px;
margin: 2px 4px;
&.active {
background-color: $contained-chip-selected-color;
.reactions-bar__item__count { color: $ui-text-color }
}
&__emoji {
width: 24px;
height: 24px;
margin: 4px 0 4px 2px;
}
&__count {
font-size: 16px;
margin: 0 8px;
color: $secondary-text-color;
}
&:hover { background: $contained-chip-hover-color }
}
}
.notification {
&__filter-bar {
background: $tab-background-color;
border-bottom: 1px solid $border-color;
z-index: 1;
button {
background: $tab-background-color;
color: $tab-indicator-color;
font-size: 16px;
span { font-size: 14px }
&.active {
color: $tab-indicator-active-color;
border-bottom: 4px solid $tab-indicator-active-color;
&::before,
&:after { border: none }
&:focus { background: $tab-indicator-background-focus-color }
}
&:hover { background: $tab-indicator-background-hover-color }
}
}
&__message {
color: $secondary-text-color;
margin: 0 16px 0 70px;
font-size: 16px;
}
&__display-name:hover { color: inherit }
}
.notification-favourite .status.status-direct {
.icon-button.disabled { color: $disabled-icon-color }
}
.relationship-tag {
color: $ui-text-color;
background-color: $relationship-tag-color;
font-size: 12px;
border-radius: 17px;
padding: 4px 8px;
opacity: 1;
}
.attachment-list__list a { color: $secondary-text-color }

534
app/javascript/styles/mastodon-material-light/theme/components.scss Normal file
View File

@ -0,0 +1,534 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.drawer {
&__header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
a { transition: none }
a:hover {
background: $icon-background-hover-color;
border-radius: 50%;
}
}
&__tab {
color: $top-bar-icon-color;
font-size: 20px;
margin: 10px auto 10px;
padding: 8px;
flex: none;
height: 20px;
width: 20px;
border-bottom: none;
text-align: justify;
&:hover { color: $top-bar-icon-hover-color }
}
&__pager {
@include shadow-1dp;
border-radius: $card-radius;
}
&__inner {
background: $card-background-color;
&.darker {
background: $card-background-color;
position: inherit;
}
&__mastodon { background: $card-background-color }
}
}
.search {
&__input {
background: $search-bar-color;
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
color: $search-bar-text-color;
}
&::placeholder { color: $tips-text-color }
}
&__icon {
.fa {
color: $icon-color;
font-size: 20px;
top: 12px;
right: unset;
left: 12px;
height: 6px;
transition: none;
&.active { opacity: 1 }
&-search {
transform: none;
opacity: 1;
}
&-times-circle.active {
right: 16px;
left: unset;
transform: none;
}
}
}
}
.search-popout {
@include shadow-2dp;
background: $search-bar-focus-color;
border-radius: 0px $bar-radius;
border-top: 1px solid $border-color;
margin-top: 0;
color: $tips-text-color;
h4 {
color: $secondary-text-color;
}
em {
color: $search-bar-text-color;
}
}
.search-results {
&__header {
color: $secondary-text-color;
background-color: $card-background-color;
padding: 16px;
.fa { margin-right: 8px }
}
&__section {
h5 {
background: $card-background-color;
border-bottom: 1px solid $border-color;
padding: 16px;
color: $section-text-color;
.fa { margin-right: 8px }
}
}
}
.navigation-bar {
color: $secondary-text-color;
padding: 14px;
strong {
color: $ui-text-color;
}
}
.navigation-panel hr {
border-top: 1px solid $border-color;
margin: 8px 0;
}
.dropdown-menu {
@include shadow-8dp;
background: $menu-background-color;
padding: 8px 0;
border-radius: $menu-radius;
&__arrow { visibility: hidden }
&__item a {
font-size: 14px;
padding: 8px 16px;
background: $menu-background-color;
color: $menu-text-color;
&:hover, &:active {
background: $menu-background-hover-color;
color: $menu-text-color;
}
}
&__separator {
margin: 8px 0;
border-bottom: 1px solid $border-color;
}
}
.compose-form {
.autosuggest-textarea {
&__textarea {
background: $text-field-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&::placeholder { color: $tips-text-color }
}
&__suggestions {
@include shadow-1dp;
background: $menu-background-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
padding: 8px 0;
&__item {
padding: 8px;
border-radius: 0;
&:hover { background: $menu-background-hover-color }
&.selected,
&:focus,
&:active { background: $menu-background-active-color }
}
}
}
.spoiler-input__input {
color: $ui-text-color;
background: $card-background-color;
&::placeholder { color: $tips-text-color }
}
.compose-form {
&__warning {
@include shadow-1dp;
color: $secondary-text-color;
background: $card-background-color;
padding: 16px;
a { color: $link-text-color }
}
&__modifiers {
background: $card-background-color;
color: $tips-text-color;
}
&__buttons-wrapper {
background: $card-background-color;
color: $tips-text-color;
}
&__poll-wrapper {
border-top: 1px solid $border-color;
ul { padding: 16px 12px 16px 0 }
select {
color: $ui-text-color;
background-color: $background-color;
border: 0;
&:focus { border-color: $border-active-color }
}
.button.button-secondary {
box-shadow: none;
color: $outlined-button-color;
border-color: $outlined-button-color;
&:hover { background-color: $outlined-button-hover-color }
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
}
}
&__utilBtns { padding-top: 0 }
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
.no-reduce-motion .spoiler-input {
transition-duration: .2s, .2s;
}
.poll {
&__input {
border: 2px solid $control-border-color;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin: 8px;
&.checkbox { border-radius: 2px }
&:focus,
&:hover { border: 2px solid $control-border-color }
}
&__text input[type=text] {
color: $ui-text-color;
background: $text-field-background-color;
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
}
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-background-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
&__chart {
border-radius: 0;
background: $poll-bar-color;
&.leading { background: $poll-bar-leading-color }
}
&__footer {
padding-top: 8px;
padding-bottom: 0;
color: $ui-text-color;
}
&__link { color: $ui-text-color }
}
.privacy-dropdown {
&.active .privacy-dropdown__value.active {
background: $icon-background-hover-color;
border-radius: 50%;
box-shadow: none;
.icon-button { color: $icon-button-active-color }
}
&__dropdown {
@include shadow-8dp;
background: $menu-background-color;
border-radius: $dialog-radius;
}
&__option {
color: $icon-color;
padding: 8px 16px;
&__icon {
font-size: 20px;
margin-right: 12px;
}
&__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&.active {
background: $menu-background-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&:hover {
background: $menu-background-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
&:hover {
background: $menu-background-hover-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
}
.character-counter {
color: $secondary-text-color;
}
.reply-indicator {
box-shadow: none;
border: 1px solid $border-color;
border-radius: $card-radius;
background: $card-background-color;
padding: 16px;
&__header { margin-bottom: 4px }
&__display {
&-name {
color: $primary-text-color;
padding-right: 24px;
}
&-avatar { margin-right: 8px }
}
&__content { color: $primary-text-color }
}
.attachment-list {
&__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color }
}
.block-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.load-more {
color: $ui-text-color;
&:hover { background: transparent }
}
.autosuggest-hashtag {
&__name { color: $menu-text-color }
}
.filter-form {
background: $background-color;
color: $ui-text-color;
&__column { padding: 8px 16px }
}
.directory {
&__card {
@include shadow-1dp;
margin: 8px 4px;
border-radius: $card-radius;
&__img { border-radius: $card-radius $card-radius 0 0 }
&__bar {
background: $card-background-color;
padding: 8px 16px;
.display-name {
margin-left: 16px;
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-background-color;
border-radius: 0 0 $card-radius $card-radius;
.account__header__content {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
}
.accounts-table__count { padding: 16px 0 }
}
}
}
.mute-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-background-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
.setting-toggle {
margin-top: 16px;
margin-bottom: 16px;
&__label {
color: $ui-text-color;
margin: 0 0 0 12px;
}
}
}

71
app/javascript/styles/mastodon-material-light/theme/control.scss Normal file
View File

@ -0,0 +1,71 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.react-toggle {
width: 36px;
height: 16px;
border-radius: 15px;
&-track {
background-color: $toggle-track-color;
margin: 4px;
width: 36px;
height: 16px;
&-check { visibility: hidden }
&-x { visibility: hidden }
}
&-thumb {
@include shadow-1dp;
width: 20px;
height: 20px;
border: 0;
background-color: $toggle-thumb-color;
}
&--checked {
.react-toggle{
&-track { background-color: $toggle-track-active-color }
&-thumb {
background-color: $toggle-thumb-active-color;
left: 22px;
}
}
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-active-color !important }
}
&:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: $toggle-track-color }
}
.radio-button {
padding: 8px 0;
&__input {
border: 2px solid $border-color;
&.checked {
border-color: $icon-button-active-color;
background: $icon-button-active-color;
padding: 3px;
background-clip: content-box;
}
}
}
.compose-form__sensitive-button .checkbox {
border: 2px solid $border-color;
border-radius: 2px;
&.active {
border-color: $primary-color;
background: $primary-color;
}
}

92
app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss Normal file
View File

@ -0,0 +1,92 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.emoji-picker-dropdown {
&__menu {
@include shadow-8dp;
background: $menu-background-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
background: $menu-background-color;
border-radius: $menu-radius;
button {
padding: 8px;
}
}
}
.emoji-mart {
width: 388px !important;
font-size: 14px;
color: $menu-text-color;
&-bar {
border: 0 solid $border-color;
&:first-child {
background: $menu-background-color;
}
}
&-anchors {
color: $icon-button-color;
padding: 0;
}
&-anchor {
padding: 10px 4px;
&-selected {
color: $icon-button-active-color;
}
&-bar {
background-color: $tab-indicator-active-color;
}
&:hover {
color: $icon-button-hover-color;
}
}
&-search {
background: $menu-background-color;
input {
outline: none;
padding: 8px;
background: $search-bar-color;
color: $ui-text-color;
border: 0;
border-radius: $search-bar-radius;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
}
}
}
&-scroll {
padding: 0 8px 8px;
background: $menu-background-color;
}
&-category-label span {
padding: 4px 6px;
background: $menu-background-color;
}
&-emoji:hover::before {
background-color: $icon-background-hover-color;
}
&-no-results { color: $secondary-text-color }
}

44
app/javascript/styles/mastodon-material-light/theme/icons.scss Normal file
View File

@ -0,0 +1,44 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.fa.fa-users.column-link,
.fa.fa-globe.column-link,
.fa.fa-address-book.column-link,
.fa.fa-bullhorn.column-link,
.fa.fa-envelope.column-link,
.fa.fa-bookmark.column-link,
.fa.fa-star.column-link,
.fa.fa-list-ul.column-link {
&__icon.fa-fw { color: $icon-color }
}
.fa { vertical-align: sub } // adjust material icon font baseline to other font
.fa.fa-times,
.fa.fa-eraser,
.fa.fa-plus { vertical-align: middle } // adjustment exception
.fa.fa-check { vertical-align: initial }
.fa.fa-lock { text-transform: none }
.fa-fw { width: 16px }
// icon in tab settings
.fa.fa-chevron-left.column-back-button__icon.fa-fw,
.text-btn.column-header__setting-btn .fa.fa-eraser {
font-size: 20px;
margin-right: 16px;
}
.icon-with-badge__badge {
background: $badge-color;
border: none;
padding: 2px 6px;
border-radius: 12px;
}

159
app/javascript/styles/mastodon-material-light/theme/material-icons.scss Normal file
View File

@ -0,0 +1,159 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config', '../icon_config';
@import '../custom_color', '../custom_layout';
@import 'functions';
.fa {
&.fa-bars,
&.fa-navicon,
&.fa-reorder,
&.fa-globe,
&.fa-cog,
&.fa-cogs,
&.fa-gears,
&.fa-sign-out,
&.fa-search,
&.fa-times,
&.fa-times-circle,
&.fa-close,
&.fa-remove,
&.fa-chevron-down,
&.fa-ellipsis-v,
&.fa-paperclip,
&.fa-tasks,
&.fa-plus,
&.fa-unlock,
&.fa-lock,
&.fa-envelope,
&.fa-home,
&.fa-bullhorn,
&.fa-sliders,
&.fa-chevron-left,
&.fa-chevron-right,
&.fa-reply,
&.fa-reply-all,
&.fa-share-alt,
&.fa-star,
&.fa-bookmark,
&.fa-ellipsis-h,
&.fa-bell,
&.fa-eraser,
&.fa-users,
&.fa-file-text,
&.fa-user-plus,
&.fa-address-book,
&.fa-address-book-o,
&.fa-list,
&.fa-list-ul,
&.fa-eye,
&.fa-eye-slash,
&.fa-pencil,
&.fa-trash,
&.fa-play,
&.fa-external-link,
&.fa-retweet,
&.fa-link,
&.fa-pause,
&.fa-volume-up,
&.fa-volume-off,
&.fa-expand,
&.fa-download,
&.fa-arrows-alt,
&.fa-compress,
&.fa-user-times,
&.fa-check,
&.fa-quote-right {
font-family: "Material Icons";
}
}
.fa {
&.fa-bars::before, &.fa-navicon::before,&.fa-reorder::before { content: "menu" }
&.fa-globe::before { content: "public" }
&.fa-cog::before, &.fa-cogs::before, &.fa-gears::before { content: "settings" }
&.fa-sign-out::before { content: "exit_to_app" }
&.fa-search::before { content: "search" }
&.fa-times::before, &.fa-times-circle::before, &.fa-close::before, &.fa-remove::before { content: "close" }
&.fa-chevron-down::before, &.fa-ellipsis-v::before { content: "more_vert" }
&.fa-paperclip::before { content: "attach_file" }
&.fa-tasks::before { content: "poll" }
&.fa-plus::before { content: "add" }
&.fa-unlock::before { content: "lock_open" }
&.fa-lock::before { content: "lock" }
&.fa-envelope::before { content: "mail" }
&.fa-home::before { content: "home" }
&.fa-bullhorn::before { content: "announcement" }
&.fa-sliders::before { content: "tune" }
&.fa-chevron-left::before { content: "arrow_back" }
&.fa-chevron-right::before { content: "arrow_forward" }
&.fa-reply::before { content: $reply-icon }
&.fa-reply-all::before { content: "reply_all" }
&.fa-share-alt::before { content: "share" }
&.fa-star::before { content: $favorite-icon }
&.fa-bookmark::before { content: "bookmark" }
&.fa-ellipsis-h::before { content: "more_horiz" }
&.fa-bell::before { content: "notifications" }
&.fa-eraser::before { content: "clear_all" }
&.fa-users::before { content: "people" }
&.fa-file-text::before { content: "web" }
&.fa-user-plus::before { content: "person_add" }
&.fa-address-book::before { content: "explore" }
&.fa-address-book-o::before { content: "explore" }
&.fa-list::before { content: "list" }
&.fa-list-ul::before { content: "list" }
&.fa-eye::before { content: "visibility" }
&.fa-eye-slash::before { content : "visibility_off" }
&.fa-pencil::before { content: "create" }
&.fa-trash::before { content: "delete" }
&.fa-play::before { content: "play_arrow" }
&.fa-external-link::before { content: "open_in_new" }
&.fa-retweet::before { content: "repeat" }
&.fa-link::before { content: "link" }
&.fa-pause::before { content: "pause" }
&.fa-volume-up::before { content: "volume_up" }
&.fa-volume-off::before { content: "volume_off" }
&.fa-expand::before { content: "web_asset" }
&.fa-download::before { content: "file_download" }
&.fa-arrows-alt::before { content: "fullscreen" }
&.fa-compress::before { content: "fullscreen_exit" }
&.fa-user-times::before { content: "delete" }
&.fa-check::before { content: "check" }
&.fa-quote-right::before { content: "format_quote" }
}
// bookmark icon
.status__action-bar-button.icon-button,
.bookmark-icon.icon-button {
.fa.fa-bookmark::before { content: "bookmark_border" }
&.active .fa.fa-bookmark::before { content: "bookmark" }
}
// favorite icon
.status__action-bar-button.star-icon.icon-button,
.star-icon.icon-button {
.fa.fa-star::before { content: $favorite-icon-border }
&.active,
&.active.activate {
.fa.fa-star::before { content: $favorite-icon }
}
}
// favorite icon color
.star-icon.active,
.star-icon.icon-button.active.active,
.notification__favourite-icon-wrapper .star-icon,
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
.no-reduce-motion button.icon-button i.fa-retweet {
height: 18px;
width: 18px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
// dropdown icon
.compose-form__poll-wrapper select { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($icon-color)}" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/auto 16px}

105
app/javascript/styles/mastodon-material-light/theme/media.scss Normal file
View File

@ -0,0 +1,105 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.media-gallery {
border-radius: 0;
&__item { border-radius: 0 }
}
.media-modal__close {
align-content: center;
&.icon-button {
background: transparent;
color: $media-icon-color;
text-align: center !important;
font-size: 24px !important;
width: 48px !important;
height: 48px !important;
border: 12px;
&:hover {
background: $media-icon-background-hover-color;
color: $media-icon-hover-color;
}
.fa-fw { width: 24px }
}
}
.media-modal {
&__nav {
background: $media-icon-background-color;
color: $media-icon-color;
height: 48px;
width: 48px;
margin: auto 16px;
padding: 8px;
border-radius: 50%;
.fa { width: 32px }
}
&__button {
background-color: $media-page-indicator-color;
&--active { background-color: $media-page-indicator-active-color }
}
}
.video-player {
&__controls {
background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 60%,transparent);
padding: 0 12px;
}
&__seek {
&::before {
background: rgba(255,255,255,.2);
border-radius: 0;
}
&__buffer {
background: rgba(255,255,255,.4);
border-radius: 0;
}
&__progress {
background: $primary-color;
border-radius: 0;
}
&__handle {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
background-color: $primary-color;
box-shadow: none;
}
}
&__volume {
&::before {
background: rgba(255,255,255,.4);
border-radius: 0;
}
&__current {
background: $primary-color;
border-radius: 0;
}
&__handle {
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
background-color: $primary-color;
box-shadow: none;
}
}
&__time-current { margin-left: 68px }
&__buttons button { font-size: 20px }
}

102
app/javascript/styles/mastodon-material-light/theme/modal.scss Normal file
View File

@ -0,0 +1,102 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.confirmation-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
&__container {
text-align: left;
padding: 24px;
}
&__action-bar {
justify-content: flex-end;
background: $card-background-color;
padding: 8px;
}
&__secondary-button {
box-shadow: none !important;
color: $text-button-color;
background: transparent;
margin: 0 8px;
&:hover {
color: $text-button-color;
background: $text-button-hover-color;
}
&:focus,
&:active {
color: $text-button-color;
background-color: $text-button-focus-color;
}
}
}
.actions-modal {
background: $card-background-color;
border-radius: $card-radius;
ul li:not(:empty) a {
color: $ui-text-color;
font-size: 16px;
&:hover {
background: $card-background-hover-color;
color: $ui-text-color;
}
}
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
background: $card-background-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
&__avatar {
left: 12px;
top: 12px;
}
}
}
.report-modal {
background: $card-background-color;
color: $ui-text-color;
border-radius: $card-radius;
&__target {
padding: 24px;
text-align: left;
font-weight: bold;
}
&__container {
border-top: none;
}
&__comment {
border-right: none;
.setting-text-label { color: $ui-text-color }
}
}
.embed-modal .embed-modal__container {
padding: 0 24px 24px 24px;
.hint {
margin-bottom: 16px;
color: $secondary-text-color;
}
}

94
app/javascript/styles/mastodon-material-light/theme/responsive.scss Normal file
View File

@ -0,0 +1,94 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.tabs-bar {
background: $top-bar-color;
&__link {
padding: 16px 16px 12px 16px;
color: $top-bar-icon-color;
border-bottom: 4px solid transparent;
&.active {
border-bottom: 4px solid $tab-indicator-active-color;
color: $tab-indicator-active-color;
}
.fa { font-size: 20px }
span {
margin-left: 8px;
vertical-align: text-bottom;
}
}
&__wrapper {
@include shadow-4dp;
background: transparent;
}
}
#tabs-bar__portal { overflow-y: hidden }
.floating-action-button {
@include shadow-6dp;
background: $floating-action-button-color;
color: $floating-action-button-icon-color;
font-size: 24px;
&:hover { background: $floating-action-button-hover-color }
&:active,
&:focus { background: $floating-action-button-active-color }
}
.columns-area--mobile {
.column { margin: 0 !important }
.search__input { padding: 16px 46px }
.search__icon {
.fa {
top: 16px;
left: 16px;
}
.fa-times-circle.active { left: unset }
}
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
margin-bottom: 0;
&__wrapper {
padding-top: 0;
.tabs-bar { margin-bottom: 0 }
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
}
}
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-background-hover-color;
border-bottom-color: $tab-background-color;
}
&:active,
&:focus {
background: $tab-indicator-background-focus-color;
border-bottom-color: $tab-background-color;
}
}
}

185
app/javascript/styles/mastodon-material-light/theme/statuses.scss Normal file
View File

@ -0,0 +1,185 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.status {
padding: 12px 12px 12px 70px;
border-bottom: 1px solid $border-color;
&__expand { width: 70px }
&__info {
font-size: $name-font-size;
padding-right: 4px;
}
&__relative-time { color: $info-text-color }
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__avatar {
left: 12px;
top: 12px;
}
&__content {
font-size: $status-font-size;
padding-top: 4px;
color: $primary-text-color;
a {
color: $link-text-color;
&.unhandled-link { color: $link-text-color }
}
.status__content__spoiler-link {
background: transparent;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
&__spoiler-link {
border: 0;
color: $text-button-color;
}
&__read-more-button {
font-size: 14px;
color: $text-button-color;
border-radius: $button-radius;
padding: 4px 6px;
&:hover {
background: $text-button-hover-color;
text-decoration: none;
}
&:focus { background: $text-button-focus-color }
}
}
&__action-bar {
&__counter__label {
font-size: 14px;
color: $info-text-color;
}
}
&__prepend {
color: $secondary-text-color;
margin-left: 64px;
.status__display-name strong { color: $secondary-text-color }
}
&.status-direct:not(.read) {
background: transparent;
border-bottom-color: $border-color;
}
}
.status-card {
color: $icon-color;
border-color: $border-color;
outline: none;
&__image {
background: transparent;
&>.fa {
font-size: 26px;
}
}
&__title {
color: $primary-text-color;
margin-bottom: 6px;
}
&__description { color: $secondary-text-color }
&__actions {
&>div {
background: $media-icon-background-color;
border-radius: $button-radius;
}
button,
a {
color: $media-icon-color;
font-size: 20px;
}
a { bottom: auto }
}
&.compact {
border-color: $border-color;
outline: none;
background: transparent;
.status-card {
&__content { padding: 12px }
&__image { flex: 0 0 64px }
}
&:hover { background-color: transparent !important }
}
&:hover { background-color: $card-background-color }
}
// Detailed status in mobile
.status.light {
.status {
&__display-name { color: $primary-text-color }
&__relative-time { color: $info-text-color }
&__content { color: $primary-text-color }
}
.display-name { color: $secondary-text-color }
.display-name strong { color: $primary-text-color }
}
.detailed-status {
background: $card-background-color;
padding: 16px;
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__meta {
margin-top: 16px;
color: $info-text-color;
}
&__action-bar {
background: $card-background-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
}
&__button {
.icon-button { font-size: 20px !important }
}
}
// search user trends
.display-name {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}

4
app/javascript/styles/mastodon-material-light/theme/theme.scss Normal file
View File

@ -0,0 +1,4 @@
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';

7
app/javascript/styles/mastodon-material-light/theme/variables.scss Normal file
View File

@ -0,0 +1,7 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.link-button { color: $link-text-color }

68
app/javascript/styles/mastodon/components.scss
View File

@ -703,10 +703,29 @@
justify-content: flex-end;
min-width: 0;
flex: 0 0 auto;
padding-top: 10px;
.compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 10px;
button {
display: inline-block;
width: auto;
margin-right: 0.5em;
}
button:last-child {
margin-right: auto;
}
}
}
.compose-form__utilBtns {
padding-top: 10px;
* {
margin-bottom: 1em;
}
}
}
@ -2021,7 +2040,7 @@ a.account__display-name {
}
&__inner {
position: fixed;
position: static;
width: 285px;
pointer-events: auto;
height: 100%;
@ -2390,6 +2409,7 @@ a.account__display-name {
}
.getting-started__wrapper,
.getting-started__trends,
.search {
margin-bottom: 10px;
}
@ -2496,24 +2516,13 @@ a.account__display-name {
margin-bottom: 10px;
height: calc(100% - 20px);
overflow-y: auto;
display: flex;
flex-direction: column;
& > a {
flex: 0 0 auto;
}
hr {
flex: 0 0 auto;
border: 0;
background: transparent;
border-top: 1px solid lighten($ui-base-color, 4%);
margin: 10px 0;
}
.flex-spacer {
background: transparent;
}
}
.drawer__pager {
@ -2904,10 +2913,8 @@ a.account__display-name {
}
&__trends {
background: $ui-base-color;
flex: 0 1 auto;
opacity: 1;
animation: fade 150ms linear;
margin-top: 10px;
h4 {
font-size: 12px;
@ -2933,15 +2940,11 @@ a.account__display-name {
@media screen and (max-height: 670px) {
display: none;
}
}
.trends__item {
border-bottom: 0;
padding: 10px;
&__current {
color: $darker-text-color;
}
}
&__scrollable {
max-height: 100%;
overflow-y: auto;
}
}
@ -6178,6 +6181,12 @@ noscript {
}
}
.embed-modal__qrcode {
display: block;
margin-left: auto;
margin-right: auto;
}
.account__moved-note {
padding: 14px 10px;
padding-bottom: 16px;
@ -6730,7 +6739,7 @@ noscript {
font-size: 24px;
line-height: 36px;
font-weight: 500;
text-align: right;
text-align: center;
padding-right: 15px;
margin-left: 5px;
color: $secondary-text-color;
@ -6740,12 +6749,7 @@ noscript {
flex: 0 0 auto;
width: 50px;
path:first-child {
fill: rgba($highlight-text-color, 0.25) !important;
fill-opacity: 1 !important;
}
path:last-child {
path {
stroke: lighten($highlight-text-color, 6%) !important;
fill: none !important;
}

2
app/javascript/styles/material-auto.scss Normal file
View File

@ -0,0 +1,2 @@
@use 'material-dark';
@media (prefers-color-scheme: light) { @import 'material-light'; }

2
app/javascript/styles/material-black.scss Normal file
View File

@ -0,0 +1,2 @@
@import 'application';
@import 'material-black/loader';

135
app/javascript/styles/material-black/color/black.scss Normal file
View File

@ -0,0 +1,135 @@
@charset "UTF-8";
// Base color
$primary-color: #4285f4;
$secondary-color: #db4437;
$error-color: #B00020;
$verified-color: #4caf50;
// Text color
$primary-text-color: #ffffff;
$secondary-text-color: #9aa0a6;
$ui-text-color: #e8eaed;
$inverted-text-color: #000000;
$section-text-color: $primary-color;
$info-text-color: #9aa0a6;
$tips-text-color: #c0c0c0;
$disabled-text-color: rgba(0,0,0,.54);
$link-text-color: #4285f4;
$menu-text-color: $ui-text-color;
$top-bar-text-color: $ui-text-color;
$search-bar-text-color: $inverted-text-color;
$contained-button-text-color: #ffffff;
// Background-color
$background-color: #000000;
$menu-background-color: #121212;
$menu-background-hover-color: lighten($menu-background-color, 6%);
$menu-background-active-color: lighten($menu-background-color, 10%);
$menu-background-active-hover-color: lighten($menu-background-color, 16%);
$card-background-color: #121212;
$card-background-hover-color: lighten($card-background-color, 6%);
$card-background-inactive-color: lighten($card-background-color, 10%);
$list-background-color: #000000;
$list-background-hover-color: lighten($list-background-color, 6%);
$list-background-active-color: lighten($list-background-color, 10%);
$list-background-inactive-color: lighten($list-background-color, 10%);
$text-field-background-color: $card-background-color;
$verified-background-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
// Badge color
$badge-color: $primary-color;
//$badge-color: $secondary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-background-hover-color: transparentize(#ffffff, 0.8);
$icon-background-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
$top-bar-unread-icon-color: $secondary-color;
$media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-background-color: transparentize(#000000, 0.5);
$media-icon-background-hover-color: transparentize(#000000, 0.8);
$control-border-color: $icon-color;
// Button color
$icon-button-color: $icon-color;
$icon-button-hover-color: $icon-hover-color;
$icon-button-active-color: $primary-color;
$icon-button-active-hover-color: lighten($icon-button-active-color, 10%);
$contained-button-color: $primary-color;
$contained-button-hover-color: lighten($contained-button-color, 10%);
$outlined-button-color: $primary-color;
$outlined-button-hover-color: lighten($primary-color, 36%);
$outlined-button-active-color: lighten($primary-color, 30%);
$text-button-color: $primary-color;
$text-button-hover-color: transparentize($text-button-color, 0.8);
$text-button-focus-color: transparentize($text-button-color, 0.7);
$floating-action-button-color: $primary-color;
$floating-action-button-hover-color: lighten($floating-action-button-color, 6%);
$floating-action-button-active-color: lighten($floating-action-button-color, 10%);
$floating-action-button-icon-color: #ffffff;
// Toggle color
$toggle-thumb-color: #ffffff;
$toggle-track-color: darken($toggle-thumb-color, 18%);
$toggle-thumb-active-color: #1a73e8;
$toggle-track-active-color: lighten($toggle-thumb-active-color, 18%);
// Border color
$border-color: #1e1e1e;
$border-active-color: lighten($border-color, 30%);
// Scroll bar color
$scroll-bar-thumb-color: lighten($background-color, 20%);
$scroll-bar-thumb-hover-color: lighten($scroll-bar-thumb-color, 10%);
$scroll-bar-thumb-active-color: lighten($scroll-bar-thumb-color, 18%);
// App bar color
$top-bar-color: #1e1e1e;
$search-bar-color: lighten($top-bar-color, 6%);
$search-bar-focus-color: #ffffff;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-background-color: $top-bar-color;
$tab-indicator-background-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-background-focus-color: transparentize($tab-indicator-active-color, 0.8);
$text-tab-indicator-color: $secondary-text-color;
$text-tab-indicator-active-color: $ui-text-color;
$text-tab-background-color: #121212;
$text-tab-indicator-background-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-background-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Poll chart color
$poll-bar-leading-color: $primary-color;
$poll-bar-color: lighten($poll-bar-leading-color, 30%);
// Contents color in read status
$read-primary-text-color: transparentize($primary-text-color, 0.3);
$read-secondary-text-color: transparentize($secondary-text-color, 0.3);
$read-ui-text-color: transparentize($ui-text-color, 0.3);
$read-poll-bar-leading-color: transparentize($poll-bar-leading-color, 0.3);
$read-poll-bar-color: transparentize($poll-bar-color, 0.3);

Some files were not shown because too many files have changed in this diff Show More