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

Merge branch 'features/material-theme' into 3.3.0

Browse Source
This commit is contained in:
YorimiMochida 2020-12-27 18:03:28 +09:00 committed by GitHub
commit f72c892051
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
269 changed files with 27288 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile
View File

@ -103,6 +103,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

@ -482,6 +482,7 @@ GEM
rdf-normalize (0.4.0)
rdf (~> 3.1)
redis (4.2.5)
redcarpet (3.4.0)
redis-actionpack (5.2.0)
actionpack (>= 5, < 7)
redis-rack (>= 2.1.0, < 3)
@ -774,6 +775,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.8)
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.ttf 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

@ -121,6 +121,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');
}
@ -324,6 +332,7 @@ class StatusActionBar extends ImmutablePureComponent {
<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);

28
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
@ -61,6 +66,8 @@ class ComposeForm extends ImmutablePureComponent {
showSearch: PropTypes.bool,
anyMedia: PropTypes.bool,
singleColumn: PropTypes.bool,
onGojiSubmit: PropTypes.func.isRequired,
onHarukinSubmit: PropTypes.func.isRequired
};
static defaultProps = {
@ -86,7 +93,7 @@ class ComposeForm extends ImmutablePureComponent {
const fulltext = this.getFulltextForCharacterCounting();
const isOnlyWhitespace = fulltext.length !== 0 && fulltext.trim().length === 0;
return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 500 || (isOnlyWhitespace && !anyMedia));
return !(isSubmitting || isUploading || isChangingUpload || length(fulltext) > 2048 || (isOnlyWhitespace && !anyMedia));
}
handleSubmit = () => {
@ -185,6 +192,10 @@ 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 } = this.props;
const disabled = this.props.isSubmitting;
@ -249,11 +260,22 @@ class ComposeForm extends ImmutablePureComponent {
<PrivacyDropdownContainer />
<SpoilerButtonContainer />
</div>
<div className='character-counter__wrapper'><CharacterCounter max={500} text={this.getFulltextForCharacterCounting()} /></div>
<div className='character-counter__wrapper'><CharacterCounter max={2048} text={this.getFulltextForCharacterCounting()} /></div>
</div>
<div className='compose-form__publish'>
<div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={!this.canSubmit()} block /></div>
<div className='compose-form__publish-button-wrapper'>
<Button text={publishText} onClick={this.handleSubmit} disabled={!this.canSubmit()} 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']),
@ -61,6 +66,18 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(insertEmojiCompose(position, data, needsSpace));
},
onRisaSubmit (textarea) {
dispatch(submitRisa(textarea));
},
onGojiSubmit (textarea) {
dispatch(submitGoji(textarea));
},
onHarukinSubmit (textarea) {
dispatch(submitHarukin(textarea));
},
});
export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);

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} />

7
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' },
@ -107,9 +108,10 @@ class GettingStarted extends ImmutablePureComponent {
if (profile_directory) {
navItems.push(
<ColumnLink key='directory' icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
<ColumnLink key='infomation' 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='directory' icon='address-book' text={intl.formatMessage(messages.profile_directory)} to='/directory' />,
<ColumnLink key='infomation' icon='bullhorn' text={intl.formatMessage(messages.admin_notifications)} to='/timelines/tag/Yづinfo' />,
);
height += 48;
height += 48*2;
}
if (multiColumn && !columns.find(item => item.get('id') === 'HOME')) {

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

@ -71,7 +71,7 @@
"column.lists": "リスト",
"column.mutes": "ミュートしたユーザー",
"column.notifications": "通知",
"column.pins": "固定されたトゥート",
"column.pins": "固定された投稿",
"column.public": "連合タイムライン",
"column_back_button.label": "戻る",
"column_header.hide_settings": "設定を隠す",
@ -89,7 +89,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}",
@ -104,6 +104,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": "ブロック",
@ -185,7 +187,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} を除く)",
@ -195,6 +198,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": "返信表示",
@ -293,7 +297,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": "ログアウト",
@ -303,7 +308,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}さんがあなたに返信しました",
@ -362,6 +372,7 @@
"privacy.unlisted.long": "誰でも閲覧可、公開TLに非表示",
"privacy.unlisted.short": "未収載",
"refresh": "更新",
"qr_modal.description": "QRコードを読み取って簡単にプロフィールにアクセスしましょう。",
"regeneration_indicator.label": "読み込み中…",
"regeneration_indicator.sublabel": "ホームタイムラインは準備中です！",
"relative_time.days": "{number}日前",
@ -433,6 +444,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';

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #000000;
$menu-bg-color: #121212;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #121212;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #000000;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #121212;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #191b22;
$menu-bg-color: #d9e1e8;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #313543;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #282c37;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: lighten($bg-color, 14%);
$icon-bg-active-color: lighten($bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-color, 16%);
$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
$scroll-bar-thumb-active-color: lighten($bg-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-bg-color: #1f232b;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: $tab-bg-color;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,143 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #eff3f5;
$menu-bg-color: $bg-color;
$menu-bg-hover-color: darken($bg-color, 6%);
$menu-bg-active-color: darken($bg-color, 10%);
$menu-bg-active-hover-color: darken($bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: darken($bg-color, 4%);
$icon-bg-active-color: darken($bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: #e6ebf0;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: $tab-bg-color;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,143 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #fafafa;
$menu-bg-color: #ffffff;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,143 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #303030;
$menu-bg-color: #424242;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #424242;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #424242;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-color, 20%);
$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
// App bar color
$top-bar-color: #1565C0;
$search-bar-color: lighten($bg-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-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #424242;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #fafafa;
$menu-bg-color: #ffffff;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #121212;
$menu-bg-color: #1e1e1e;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #1e1e1e;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #1e1e1e;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #1e1e1e;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #ffffff;
$menu-bg-color: $bg-color;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: $bg-color;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: $bg-color;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-color, 20%);
$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
$scroll-bar-thumb-active-color: darken($bg-color, 38%);
// App bar color
$top-bar-color: $bg-color;
$search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-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

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

@ -0,0 +1,28 @@
// 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 (for plus plugin)
// 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.
//$icon-font-source: google; // Google Fonts
//$icon-font-source: github; // GitHub
$icon-font-source: self; // Self-hosting
// Material Icon style settings
$icon-font-style: filled;
//$icon-font-style: outlined;
//$icon-font-style: round;
//$icon-font-style: sharp;
//$icon-font-style: two-tone;

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

@ -0,0 +1,55 @@
@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;
// Media radius settings
$media-radius: 0;
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
// Chip settings
$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;

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

@ -0,0 +1,64 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
//$nav-bar-radius: 28px; // full radius
// Search bar radius
$search-bar-radius: 8px;
//$search-bar-radius: 21px; // full rounded
// 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;
// Media radius settings
$media-radius: 0;
//$media-radius: 2px;
// 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
$outlined-chip: true; // Material v2 styled outlined chip
//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: false; // Material v2 styled colored button without shadow
//$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini

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: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
background: $card-bg-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-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
.notification__filter-bar {
@include non-overflow-shadow-4dp;
}

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

@ -0,0 +1,66 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.drawer {
&__header { height: 48px }
&__tab { margin: 6px auto 6px }
}
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }
&__button { margin: 6px }
}
.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 4px 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 }

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

@ -0,0 +1,32 @@
@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.activate,
.notification__favourite-icon-wrapper .star-icon { 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);
}

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

@ -0,0 +1,199 @@
@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
@mixin search-bar-hover {
@if $search-bar-hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}
}
@mixin outlined-chip {
@if $outlined-chip {
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $outlined-chip-selected-border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
&:hover { background: $outlined-chip-hover-color !important }
}
}
}
@mixin button-shadow {
@if $button-shadow {
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@if $icon-font-style == round { font-family: "Material Icons Round" }
@if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
@if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
}
@mixin icon-font {
@if $icon-font-source == github {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons Round"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}
@if $icon-font-source == google {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons Round"),
url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
}
}
}
@if $icon-font-source == self {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}
}

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

@ -0,0 +1,196 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
.account__display-name,
.account__display-name strong { color: $primary-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 }
}
}
&__avatar-wrapper {
margin-left: 0;
margin-right: 16px;
}
&__header {
&__bar {
background: $card-bg-color;
padding: 8px;
border-bottom: none;
.avatar .account__avatar { border: none }
}
&__tabs {
padding: 8px;
&__name {
padding: 8px;
h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
&__buttons {
.icon-button {
@include icon-button;
border: none;
border-radius: 50%;
padding: 8px;
margin-left: 8px;
}
}
}
&__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-bg-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-bg-inactive-color;
}
dd { color: $primary-text-color }
}
}
}
&__account-note {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
label {
color: $ui-text-color;
margin-bottom: 8px;
}
textarea {
color: $primary-text-color;
padding: 8px 16px;
border-radius: 0;
&:focus { background: transparent }
&::placeholder { color: $tips-text-color }
}
}
&__content { color: $secondary-text-color }
}
&__section-headline {
background: $text-tab-bg-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-bg-focus-color }
}
&:hover { background: $text-tab-indicator-bg-hover-color }
}
}
&__relationship {
padding: 0;
height: auto;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
.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 }
}
.account-gallery {
&__item { border-radius: 0 }
}

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

@ -0,0 +1,46 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_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-bar-hover: false;
// 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
// Background image
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";
// Columns transparency settings
$bar-transparency: 1.0; // opacity
//$bar-transparency: 0.8; // semi-transparent
$column-transparency: 1.0; // opacity
//$column-transparency: 0.8; // semi-transparent

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: $bg-color }
.focusable:focus { background: transparent }
// 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 }

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

@ -0,0 +1,139 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include button-shadow;
.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;
&.active { color: $icon-button-active-color }
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
&.overlayed {
@include icon-button;
border-radius: 50%;
background: $media-icon-bg-color;
color: $media-icon-color;
padding: 4px;
line-height: 20px !important;
&:hover {
background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
@include material-transition;
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
// Checkbox with label
label.icon-button {
&.active {
color: $ui-text-color;
background-color: transparent;
}
&:hover {
@include material-transition;
background-color: transparent;
}
}
.text-icon-button {
color: $icon-button-color;
border-radius: 50%;
font-size: 14px;
&.active {
background-color: $icon-bg-hover-color;
color: $icon-button-active-color;
}
&:hover {
background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
.button {
background-color: $contained-button-color;
border-radius: $button-radius;
&:active,
&:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
&:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover { background: $contained-button-hover-color }
.button--destructive:hover { background: $contained-button-hover-color }
}
&.button--block { margin: 8px 0 }
&.button-secondary {
color: $text-button-color;
border: none;
box-shadow: none;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
}
&.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-bg-color;
border-radius: $button-radius;
color: $media-icon-color;
}

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

@ -0,0 +1,505 @@
@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-bg-color;
opacity: $column-transparency;
}
&:last-child { box-shadow: none }
}
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 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 {
@include icon-button;
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 8px;
margin: 10px;
border-radius: 50%;
box-sizing: content-box;
&.active {
color: $top-bar-icon-active-color;
background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-bg-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;
opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
&.active {
@include shadow-4dp;
&::before { background: transparent }
}
}
&__collapsible {
color: $ui-text-color;
background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
background: $card-bg-color;
padding: 16px;
}
&.collapsed { border-top: none }
}
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px;
font-size: 20px;
span { display: none }
}
}
.column-subheading {
color: $section-text-color;
background: $bg-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
&:hover { background: $list-bg-hover-color }
&:active,
&:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
font-size: 20px;
}
&--transparent {
&.active {
color: $ui-text-color;
background: $menu-bg-active-color;
&:hover { background: $menu-bg-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
&--slim-button { top: -54px }
}
.column-inline-form {
padding: 16px 0 16px 16px;
background: $card-bg-color;
.icon-button { margin: 0 16px }
}
.columns-area {
@include bg-image;
background-size: contain;
}
.setting-text {
color: $primary-text-color;
background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
}
.empty-column-indicator {
color: $secondary-text-color;
background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
background: $list-bg-inactive-color;
&--unread {
background: $list-bg-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-bg-hover-color }
}
.getting-started {
background: $bg-color;
color: $ui-text-color;
opacity: $column-transparency;
&__wrapper {
background: $bg-color;
height: auto !important;
padding-bottom: 8px;
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: $bg-color;
margin-bottom: 0;
opacity: $column-transparency;
h4 {
color: $section-text-color;
padding: 12px 16px;
margin-top: 8px;
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-bg-color;
padding: 0;
&__container { color: $primary-text-color }
&__item {
padding: 16px;
font-size: 16px;
&__unread { background: $badge-color }
}
&__pagination {
color: $ui-text-color;
padding: 16px;
bottom: 0;
.icon-button {
@include icon-button;
padding: 8px;
margin: 0 4px;
line-height: normal !important;
box-sizing: content-box;
}
span { vertical-align: super }
}
}
.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 }
@include outlined-chip;
.reactions-bar {
margin-top: 16px;
width: calc(100% - 72px);
.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: $chip-selected-text-color }
&:hover { background-color: $contained-chip-selected-color }
}
&__emoji {
width: 24px;
height: 24px;
margin: 4px 0 4px 2px;
}
&__count {
font-size: 16px;
margin: 0 12px 0 8px;
color: $secondary-text-color;
}
&:hover { background: $contained-chip-hover-color }
}
}
.notification {
&__filter-bar {
background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
opacity: $bar-transparency;
button {
background: $tab-bg-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-bg-focus-color }
}
&:hover { background: $tab-indicator-bg-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 }

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

@ -0,0 +1,629 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
opacity: $bar-transparency;
a { transition: none }
a:hover {
background: $icon-bg-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-bg-color;
opacity: $column-transparency;
&.darker {
background: $card-bg-color;
position: inherit;
}
&__mastodon { background: $card-bg-color }
}
}
.search {
&__input {
background: $search-bar-color;
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
color: $search-bar-text-color;
}
&:hover { @include search-bar-hover }
&::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-bg-color;
padding: 16px;
.fa { margin-right: 16px }
}
&__section {
h5 {
background: $card-bg-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-bar__actions .compose__action-bar .icon-button {
width: 36px !important;
height: 36px !important;
padding: 8px;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
.navigation-panel hr {
border-top: 1px solid $border-color;
margin: 8px 0;
}
.flex-spacer { margin: 8px 0 }
.dropdown-menu {
@include shadow-8dp;
background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
&__arrow { visibility: hidden }
&__item a {
font-size: 14px;
padding: 8px 16px;
background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
&__separator {
margin: 8px 0;
border-bottom: 1px solid $border-color;
}
}
.compose-form {
.autosuggest-textarea {
&__textarea {
background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&::placeholder { color: $tips-text-color }
}
&__suggestions {
@include shadow-1dp;
background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
padding: 8px 0;
&__item {
padding: 8px;
border-radius: 0;
&:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
&:active { background: $menu-bg-active-color }
}
}
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 8px }
&__input {
color: $ui-text-color;
background: $card-bg-color;
border-bottom: 1px solid $border-color;
border-radius: 0;
&::placeholder { color: $tips-text-color }
}
}
.compose-form {
&__warning {
color: $secondary-text-color;
background: $card-bg-color;
padding: 16px;
border: 1px solid $border-color;
border-radius: $card-radius;
box-shadow: none;
a { color: $link-text-color }
}
&__modifiers {
background: $card-bg-color;
color: $tips-text-color;
.compose-form {
&__upload-thumbnail { border-radius: 0 }
&__upload__actions {
@include material-transition;
.icon-button {
color: $media-icon-color;
font-size: 16px;
&:hover { background-color: transparent }
}
}
}
}
&__buttons-wrapper {
background: $card-bg-color;
color: $tips-text-color;
padding: 8px;
.icon-button {
@include icon-button;
padding: 8px;
}
.text-icon-button {
width: 20px !important;
height: 20px !important;
padding: 8px;
line-height: 20px !important;
}
}
&__poll-wrapper {
border-top: 1px solid $border-color;
ul { padding: 16px 12px 16px 0 }
select {
color: $ui-text-color;
background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
}
.button.button-secondary {
box-shadow: none;
color: $text-button-color;
&:hover { background-color: $text-button-hover-color }
&:active,
&:focus { background-color: $text-button-focus-color }
}
.poll__footer { border-top: none }
}
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
.button { margin-right: 8px }
li { margin-bottom: 0 }
&__input {
border: none;
width: 20px;
height: 20px;
flex: 0 0 20px;
padding: 18px;
margin: 0 2px;
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-color;
padding: 8px;
margin: 8px 10px;
background: none;
}
}
&__text input[type=text] {
color: $ui-text-color;
background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
}
&__option {
padding: 16px 0 8px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
}
&__chart {
border-radius: 0;
background: $progress-indicator-track-color;
&.leading { background: $progress-indicator-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-bg-hover-color;
border-radius: 50%;
box-shadow: none;
.icon-button { color: $icon-button-active-color }
}
&__dropdown {
@include shadow-8dp;
background: $menu-bg-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-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&:hover {
background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
&:hover {
background: $menu-bg-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-bg-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;
p { margin-bottom: 16px }
}
}
.attachment-list {
&__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color }
}
.block-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-bg-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: $bg-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-bg-color;
padding: 8px 16px;
.display-name {
margin-left: 16px;
strong {
font-size: 16px;
color: $primary-text-color;
}
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-bg-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 {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
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;
}
}
}
.upload-progress {
color: $ui-text-color;
&__backdrop {
border-radius: 0;
background: $progress-indicator-track-color;
margin-top: 6px;
}
&__tracker {
border-radius: 0;
background: $progress-indicator-color;
}
}

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

@ -0,0 +1,57 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.public-layout {
.header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
margin: 16px 0;
.brand:hover { background: $tab-indicator-bg-hover-color }
.nav-link,
.nav-link.optional {
color: $top-bar-text-color;
&:hover {
background: $tab-indicator-bg-hover-color;
text-decoration: none;
}
}
.nav-button {
background: transparent;
margin: 0;
border-radius: 0;
&:hover { background: $tab-indicator-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
}
.detailed-status { padding: 16px }
.footer {
padding-top: 16px;
padding-bottom: 64px;
color: $ui-text-color;
h4 { color: $ui-text-color }
ul a { color: $secondary-text-color }
.grid .column-2 h4 a { color: $ui-text-color }
.brand {
svg { fill: $icon-color }
&:hover svg { fill: $icon-hover-color }
}
}
}

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;
}
}

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

@ -0,0 +1,82 @@
@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-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
background: $menu-bg-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-bg-color;
}
}
&-anchor {
color: $text-tab-indicator-color;
padding: 10px 4px;
&-bar { background-color: $icon-tab-indicator-active-color }
&-selected { color: $icon-tab-indicator-hover-color }
&:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
background: $menu-bg-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-bg-color;
}
&-category {
&-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
}
&-no-results { color: $secondary-text-color }
}

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

@ -0,0 +1,26 @@
@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.fa-lock { text-transform: none }
.icon-with-badge__badge {
background: $badge-color;
border: none;
padding: 2px 6px;
border-radius: 12px;
}

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

@ -0,0 +1,248 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config', '../icon_config';
@import '../custom_color', '../custom_layout';
@import 'functions';
@import 'mixins';
@include icon-font;
.fa-fw {
width: 20px;
height: 20px;
font-size: 20px;
}
.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,
&.fa-upload,
&.fa-comments,
&.fa-angle-right {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
}
.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: "person_remove" }
&.fa-check::before { content: "check" }
&.fa-quote-right::before { content: "format_quote" }
&.fa-upload::before { content: "file_upload" }
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
}
// 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
button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
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="40px" width="20px"><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>');
}
button.icon-button i.fa-retweet:hover {
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="40px" width="20px"><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-hover-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>');
}
button.icon-button.disabled i.fa-retweet,
button.icon-button.disabled i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></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}
// icon in tab settings
.text-btn.column-header__setting-btn {
.fa {
vertical-align: middle;
&.fa-eraser { margin-right: 8px } // clear notification
}
}
// top bar icons align
.fa.fa-bell.column-header__icon.fa-fw,
.fa.fa-home.column-header__icon.fa-fw,
.fa.fa-users.column-header__icon.fa-fw,
.fa.fa-globe.column-header__icon.fa-fw,
.fa.fa-bars.column-header__icon.fa-fw,
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link {
.fa.fa-home.fa-fw,
.fa.fa-bell.fa-fw,
.fa.fa-users.fa-fw,
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
}
// getting-started and side bar icons
.column-link .fa,
.column-link--transparent .fa { vertical-align: text-bottom }
// uploaded media icons align
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
font-size: 20px;
vertical-align: text-bottom;
}
// search results icons align
.search-results__header .fa { vertical-align: text-bottom }
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// status detail icon
.detailed-status .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// status scope
.status__visibility-icon .fa {
font-size: 16px;
vertical-align: text-bottom;
}

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

@ -0,0 +1,113 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.media-gallery {
border-radius: $media-radius;
&__item { border-radius: $media-radius }
}
.media-modal__close {
&.icon-button {
background: transparent;
color: $media-icon-color;
font-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 8px;
box-sizing: content-box;
line-height: normal !important;
&:hover {
background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
.fa-fw {
width: 24px;
height: 24px;
}
}
}
.media-modal {
&__nav {
background: $media-icon-bg-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 }
}
&__meta {
bottom: 24px;
a { color: $media-icon-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 {
@include material-transition;
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 {
@include material-transition;
background-color: $primary-color;
box-shadow: none;
}
}
&__time-current { margin-left: 68px }
&__buttons button { font-size: 20px }
}

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

@ -0,0 +1,103 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.confirmation-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
&__container {
text-align: left;
padding: 24px;
}
&__action-bar {
justify-content: flex-end;
background: $card-bg-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-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
color: $ui-text-color;
font-size: 16px;
&:hover {
background: $card-bg-hover-color;
color: $ui-text-color;
}
}
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
&__avatar {
left: 12px;
top: 12px;
}
}
}
.report-modal {
@include shadow-24dp;
background: $card-bg-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;
}
}

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

@ -0,0 +1,110 @@
@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;
width: $fab-size;
height: $fab-size;
bottom: 16px;
right: 16px;
&: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 }
}
}
// small size screen
@media screen and (max-width: 415px) {
.public-layout { padding-top: 64px }
}
// 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;
}
&__pane { padding: 0 16px }
}
}
//single column mode
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-bg-hover-color;
border-bottom-color: transparent;
}
&:active,
&:focus {
background: $tab-indicator-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
&.active { border-bottom-color: $tab-indicator-active-color }
}
}

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

@ -0,0 +1,280 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.status {
padding: 12px 12px 4px 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 }
}
p { margin-bottom: 16px }
.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 {
margin-top: 4px;
&__counter {
margin-right: 6px;
&__label {
font-size: 14px;
color: $info-text-color;
}
}
}
&__action-bar-button {
margin-right: 6px;
&.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
&__action-bar-dropdown {
width: 36px !important;
height: 36px !important;
box-sizing: content-box;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
&:hover {
color:$icon-hover-color;
background: $icon-bg-hover-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;
}
&__visibility-icon { color: $icon-color }
}
.status-card {
color: $icon-color;
border-color: $border-color;
outline: none;
margin-top: 16px;
&__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-bg-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 }
}
&.horizontal {
border-radius: 0;
.status-card {
&__image-preview { border-radius: 0 }
&__image-image { border-radius: 0 }
}
}
}
a.status-card {
&:hover { background-color: $card-bg-color }
}
.embed .status,
.public-layout .status { padding: 16px 16px 16px 80px }
// 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-bg-color;
padding: 16px;
&.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__meta {
margin-top: 16px;
color: $info-text-color;
}
&__action-bar {
background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 8px 0;
}
&__action-bar-dropdown {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
&__button {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
// search user trends
.display-name {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}
.activity-stream {
@include shadow-1dp;
margin-bottom: 16px;
border-radius: $card-radius;
.entry {
background: $card-bg-color;
&:first-child {
.detailed-status,
.load-more,
.status { border-radius: $card-radius $card-radius 0 0 }
}
}
}
.entry.entry-center { border-bottom: 1px solid $border-color }

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

@ -0,0 +1,10 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

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 }

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

@ -0,0 +1,32 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.hero-widget {
@include shadow-2dp;
margin-bottom: 16px;
&__img {
border-radius: $card-radius $card-radius 0 0;
background: $card-bg-color;
img { border-radius: $card-radius $card-radius 0 0 }
}
&__text {
background: $card-bg-color;
padding: 16px;
color: $primary-text-color;
border-radius: 0 0 $card-radius $card-radius;
}
}
.endorsements-widget {
padding-bottom: 8px;
margin-bottom: 8px;
}
.trends-widget h4 { color: $section-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';

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #000000;
$menu-bg-color: #121212;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #121212;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #000000;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #121212;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #191b22;
$menu-bg-color: #d9e1e8;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #313543;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #282c37;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: lighten($bg-color, 14%);
$icon-bg-active-color: lighten($bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-color, 16%);
$scroll-bar-thumb-hover-color: lighten($bg-color, 26%);
$scroll-bar-thumb-active-color: lighten($bg-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-bg-color: #1f232b;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: $tab-bg-color;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,143 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #eff3f5;
$menu-bg-color: $bg-color;
$menu-bg-hover-color: darken($bg-color, 6%);
$menu-bg-active-color: darken($bg-color, 10%);
$menu-bg-active-hover-color: darken($bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: darken($bg-color, 4%);
$icon-bg-active-color: darken($bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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: $bg-color;
// Tab color
$tab-indicator-color: #282c37;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: #e6ebf0;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: $tab-bg-color;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,143 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #fafafa;
$menu-bg-color: #ffffff;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,143 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #303030;
$menu-bg-color: #424242;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #424242;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #424242;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-color, 20%);
$scroll-bar-thumb-hover-color: lighten($bg-color, 30%);
$scroll-bar-thumb-active-color: lighten($bg-color, 38%);
// App bar color
$top-bar-color: #1565C0;
$search-bar-color: lighten($bg-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-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #424242;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #fafafa;
$menu-bg-color: #ffffff;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: #ffffff;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: #ffffff;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize(#000000, 0.9);
$text-tab-indicator-bg-focus-color: transparentize(#000000, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: dark;
// 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
$bg-color: #121212;
$menu-bg-color: #1e1e1e;
$menu-bg-hover-color: lighten($menu-bg-color, 6%);
$menu-bg-active-color: lighten($menu-bg-color, 10%);
$menu-bg-active-hover-color: lighten($menu-bg-color, 16%);
$card-bg-color: #1e1e1e;
$card-bg-hover-color: lighten($card-bg-color, 6%);
$list-bg-color: #1e1e1e;
$list-bg-hover-color: lighten($list-bg-color, 6%);
$list-bg-active-color: lighten($list-bg-color, 10%);
$list-bg-inactive-color: lighten($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: darken($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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-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-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #1e1e1e;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-color, 0.3);

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

@ -0,0 +1,144 @@
@charset "UTF-8";
$color-scheme: light;
// 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
$bg-color: #ffffff;
$menu-bg-color: $bg-color;
$menu-bg-hover-color: darken($menu-bg-color, 6%);
$menu-bg-active-color: darken($menu-bg-color, 10%);
$menu-bg-active-hover-color: darken($menu-bg-color, 16%);
$card-bg-color: $bg-color;
$card-bg-hover-color: darken($card-bg-color, 6%);
$list-bg-color: $bg-color;
$list-bg-hover-color: darken($list-bg-color, 6%);
$list-bg-active-color: darken($list-bg-color, 10%);
$list-bg-inactive-color: darken($list-bg-color, 10%);
$text-field-bg-color: $card-bg-color;
$verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// 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-bg-hover-color: transparentize(#000000, 0.9);
$icon-bg-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-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// 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($bg-color, 20%);
$scroll-bar-thumb-hover-color: darken($bg-color, 30%);
$scroll-bar-thumb-active-color: darken($bg-color, 38%);
// App bar color
$top-bar-color: $bg-color;
$search-bar-color: darken($bg-color, 6%);
$search-bar-focus-color: $bg-color;
// Tab color
$tab-indicator-color: $top-bar-icon-color;
$tab-indicator-active-color: $top-bar-icon-color;
$tab-bg-color: $top-bar-color;
$tab-indicator-bg-hover-color: transparentize($tab-indicator-active-color, 0.9);
$tab-indicator-bg-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-bg-color: #ffffff;
$text-tab-indicator-bg-hover-color: transparentize($text-tab-indicator-active-color, 0.9);
$text-tab-indicator-bg-focus-color: transparentize($text-tab-indicator-active-color, 0.8);
$icon-tab-indicator-active-color: $primary-color;
$icon-tab-indicator-hover-color: $icon-hover-color;
// Media indicator color
$media-page-indicator-color: #9e9e9e;
$media-page-indicator-active-color: #e6e6e6;
// Progress indicator color
$progress-indicator-color: $primary-color;
$progress-indicator-track-color: lighten($progress-indicator-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($progress-indicator-color, 0.3);
$read-poll-bar-color: transparentize($progress-indicator-track-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

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

@ -0,0 +1,28 @@
// 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 (for plus plugin)
// 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.
//$icon-font-source: google; // Google Fonts
//$icon-font-source: github; // GitHub
$icon-font-source: self; // Self-hosting
// Material Icon style settings
$icon-font-style: filled;
//$icon-font-style: outlined;
//$icon-font-style: round;
//$icon-font-style: sharp;
//$icon-font-style: two-tone;

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

@ -0,0 +1,55 @@
@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;
// Media radius settings
$media-radius: 0;
// Navigation drawer item settings
$nav-drawer-item-radius: 0;
// Avater cropping settings
$avater-radius: 50%; // Rounded cropping
//$avater-radius: 2px // Material v1 square
// Chip settings
$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;

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

@ -0,0 +1,64 @@
@charset "UTF-8";
@import '../theme/mixins';
// Navigation bar radius
$nav-bar-radius: 8px;
//$nav-bar-radius: 28px; // full radius
// Search bar radius
$search-bar-radius: 8px;
//$search-bar-radius: 21px; // full rounded
// 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;
// Media radius settings
$media-radius: 0;
//$media-radius: 2px;
// 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
$outlined-chip: true; // Material v2 styled outlined chip
//$outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: false; // Material v2 styled colored button without shadow
//$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini

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: $bg-color }
}
.status {
border-bottom: 0;
border-radius: $card-radius;
background: $card-bg-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-bg-color;
}
.notification .status__wrapper.status__wrapper { box-shadow: none !important }
.notification__filter-bar {
@include non-overflow-shadow-4dp;
}

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

@ -0,0 +1,66 @@
@charset "UTF-8";
@import '../theme/base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
.drawer {
&__header { height: 48px }
&__tab { margin: 6px auto 6px }
}
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }
&__button { margin: 6px }
}
.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 4px 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 }

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

@ -0,0 +1,32 @@
@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.activate,
.notification__favourite-icon-wrapper .star-icon { 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);
}

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

@ -0,0 +1,199 @@
@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 shadow-17dp { box-shadow: 0 8px 11px -5px $shadow-color-1, 0 17px 26px 2px $shadow-color-2, 0 6px 32px 5px $shadow-color-3 }
@mixin shadow-18dp { box-shadow: 0 9px 11px -5px $shadow-color-1, 0 18px 28px 2px $shadow-color-2, 0 7px 34px 6px $shadow-color-3 }
@mixin shadow-19dp { box-shadow: 0 9px 12px -6px $shadow-color-1, 0 19px 29px 2px $shadow-color-2, 0 7px 36px 6px $shadow-color-3 }
@mixin shadow-20dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 20px 31px 3px $shadow-color-2, 0 8px 38px 7px $shadow-color-3 }
@mixin shadow-21dp { box-shadow: 0 10px 13px -6px $shadow-color-1, 0 21px 33px 3px $shadow-color-2, 0 8px 40px 7px $shadow-color-3 }
@mixin shadow-22dp { box-shadow: 0 10px 14px -6px $shadow-color-1, 0 22px 35px 3px $shadow-color-2, 0 8px 42px 7px $shadow-color-3 }
@mixin shadow-23dp { box-shadow: 0 11px 14px -7px $shadow-color-1, 0 23px 36px 3px $shadow-color-2, 0 9px 44px 8px $shadow-color-3 }
@mixin shadow-24dp { box-shadow: 0 11px 15px -7px $shadow-color-1, 0 24px 38px 3px $shadow-color-2, 0 9px 46px 8px $shadow-color-3 }
@mixin non-overflow-shadow-4dp { box-shadow: 0 2px 4px -1px $shadow-color-1, 0 4px 5px -1px $shadow-color-2}
@mixin material-transition { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
@mixin search-bar-hover {
@if $search-bar-hover {
@include shadow-2dp;
background: $search-bar-focus-color;
}
}
@mixin outlined-chip {
@if $outlined-chip {
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $outlined-chip-selected-border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
&:hover { background: $outlined-chip-hover-color !important }
}
}
}
@mixin button-shadow {
@if $button-shadow {
.button,
.compose-form .compose-form__publish-button-wrapper { @include shadow-2dp }
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {
} @else { background-image: url($bg-image) }
}
@mixin icon-font-style {
@if $icon-font-style == filled { font-family: "Material Icons" }
@if $icon-font-style == outlined { font-family: "Material Icons Outlined" }
@if $icon-font-style == round { font-family: "Material Icons Round" }
@if $icon-font-style == sharp { font-family: "Material Icons Sharp" }
@if $icon-font-style == two-tone { font-family: "Material Icons Two Tone" }
}
@mixin icon-font {
@if $icon-font-source == github {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("https://raw.githubusercontent.com/google/material-design-icons/raw/master/font/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons Round"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}
@if $icon-font-source == google {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("https://fonts.gstatic.com/s/materialiconsoutlined/v25/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2") format('woff2');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons Round"),
url("https://fonts.gstatic.com/s/materialiconsround/v24/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2") format('woff2');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("https://fonts.gstatic.com/s/materialiconssharp/v25/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvR.woff2") format('woff2');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("https://fonts.gstatic.com/s/materialiconstwotone/v23/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0.woff2") format('woff2');
}
}
}
@if $icon-font-source == self {
@if $icon-font-style == filled {
@font-face {
font-family: "Material Icons";
src: local("Material Icons"),
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
}
}
@if $icon-font-style == outlined {
@font-face {
font-family: "Material Icons Outlined";
src: local("Material Icons Outlined"),
url("../fonts/MaterialIconsOutlined-Regular.otf") format('opentype');
}
}
@if $icon-font-style == round {
@font-face {
font-family: "Material Icons Round";
src: local("Material Icons"),
url("../fonts/MaterialIconsRound-Regular.otf") format('opentype');
}
}
@if $icon-font-style == sharp {
@font-face {
font-family: "Material Icons Sharp";
src: local("Material Icons Sharp"),
url("../fonts/MaterialIconsSharp-Regular.otf") format('opentype');
}
}
@if $icon-font-style == two-tone {
@font-face {
font-family: "Material Icons Two Tone";
src: local("Material Icons Two Tone"),
url("../fonts/MaterialIconsTwoTone-Regular.otf") format('opentype');
}
}
}
}

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

@ -0,0 +1,196 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
.account__display-name,
.account__display-name strong { color: $primary-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 }
}
}
&__avatar-wrapper {
margin-left: 0;
margin-right: 16px;
}
&__header {
&__bar {
background: $card-bg-color;
padding: 8px;
border-bottom: none;
.avatar .account__avatar { border: none }
}
&__tabs {
padding: 8px;
&__name {
padding: 8px;
h1 {
color: $primary-text-color;
small { color: $secondary-text-color }
}
}
&__buttons {
.icon-button {
@include icon-button;
border: none;
border-radius: 50%;
padding: 8px;
margin-left: 8px;
}
}
}
&__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-bg-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-bg-inactive-color;
}
dd { color: $primary-text-color }
}
}
}
&__account-note {
padding: 8px 16px;
border-bottom: 1px solid $border-color;
label {
color: $ui-text-color;
margin-bottom: 8px;
}
textarea {
color: $primary-text-color;
padding: 8px 16px;
border-radius: 0;
&:focus { background: transparent }
&::placeholder { color: $tips-text-color }
}
}
&__content { color: $secondary-text-color }
}
&__section-headline {
background: $text-tab-bg-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-bg-focus-color }
}
&:hover { background: $text-tab-indicator-bg-hover-color }
}
}
&__relationship {
padding: 0;
height: auto;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
.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 }
}
.account-gallery {
&__item { border-radius: 0 }
}

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

@ -0,0 +1,46 @@
@charset "UTF-8";
// [important] This file is base file. DO NOT edit this file. If you want to change this file, you should edit "../custom_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-bar-hover: false;
// 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
// Background image
// If you want to use the local image, please put it in "../"
$bg-image: none;
//$bg-image: "./image.png";
//$bg-image: "https://example.com/img/image.png";
// Columns transparency settings
$bar-transparency: 1.0; // opacity
//$bar-transparency: 0.8; // semi-transparent
$column-transparency: 1.0; // opacity
//$column-transparency: 0.8; // semi-transparent

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: $bg-color }
.focusable:focus { background: transparent }
// 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 }

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

@ -0,0 +1,139 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
@include button-shadow;
.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;
&.active { color: $icon-button-active-color }
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
&.overlayed {
@include icon-button;
border-radius: 50%;
background: $media-icon-bg-color;
color: $media-icon-color;
padding: 4px;
line-height: 20px !important;
&:hover {
background: $media-icon-bg-color;
color: $media-icon-hover-color;
}
}
&:hover {
@include material-transition;
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
// Checkbox with label
label.icon-button {
&.active {
color: $ui-text-color;
background-color: transparent;
}
&:hover {
@include material-transition;
background-color: transparent;
}
}
.text-icon-button {
color: $icon-button-color;
border-radius: 50%;
font-size: 14px;
&.active {
background-color: $icon-bg-hover-color;
color: $icon-button-active-color;
}
&:hover {
background-color: $icon-bg-hover-color;
color: $icon-button-hover-color;
}
}
.button {
background-color: $contained-button-color;
border-radius: $button-radius;
&:active,
&:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
&:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover { background: $contained-button-hover-color }
.button--destructive:hover { background: $contained-button-hover-color }
}
&.button--block { margin: 8px 0 }
&.button-secondary {
color: $text-button-color;
border: none;
box-shadow: none;
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
}
&.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-bg-color;
border-radius: $button-radius;
color: $media-icon-color;
}

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

@ -0,0 +1,505 @@
@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-bg-color;
opacity: $column-transparency;
}
&:last-child { box-shadow: none }
}
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 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 {
@include icon-button;
background: $top-bar-color;
color: $top-bar-icon-color;
padding: 8px;
margin: 10px;
border-radius: 50%;
box-sizing: content-box;
&.active {
color: $top-bar-icon-active-color;
background: $icon-bg-active-color;
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-bg-hover-color;
}
}
&:hover {
color: $top-bar-icon-hover-color;
background: $icon-bg-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;
opacity: $bar-transparency;
.announcements { border-top: 1px solid $border-color }
&.active {
@include shadow-4dp;
&::before { background: transparent }
}
}
&__collapsible {
color: $ui-text-color;
background: $card-bg-color;
border-top: 1px solid $border-color;
&-inner {
background: $card-bg-color;
padding: 16px;
}
&.collapsed { border-top: none }
}
&__back-button {
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px;
font-size: 20px;
span { display: none }
}
}
.column-subheading {
color: $section-text-color;
background: $bg-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
}
.column-link {
color: $ui-text-color;
background: $bg-color;
padding: 16px;
border-radius: $nav-drawer-item-radius;
&:hover { background: $list-bg-hover-color }
&:active,
&:focus { background: $list-bg-active-color }
&__icon {
margin-right: 32px;
font-size: 20px;
}
&--transparent {
&.active {
color: $ui-text-color;
background: $menu-bg-active-color;
&:hover { background: $menu-bg-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
&--slim-button { top: -54px }
}
.column-inline-form {
padding: 16px 0 16px 16px;
background: $card-bg-color;
.icon-button { margin: 0 16px }
}
.columns-area {
@include bg-image;
background-size: contain;
}
.setting-text {
color: $primary-text-color;
background: $text-field-bg-color;
border-radius: $bar-radius;
&::placeholder { color: $tips-text-color }
}
.empty-column-indicator {
color: $secondary-text-color;
background: $card-bg-color;
font-size: 16px;
}
.conversation {
border-bottom: 1px solid $border-color;
padding: 12px;
background: $list-bg-inactive-color;
&--unread {
background: $list-bg-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-bg-hover-color }
}
.getting-started {
background: $bg-color;
color: $ui-text-color;
opacity: $column-transparency;
&__wrapper {
background: $bg-color;
height: auto !important;
padding-bottom: 8px;
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: $bg-color;
margin-bottom: 0;
opacity: $column-transparency;
h4 {
color: $section-text-color;
padding: 12px 16px;
margin-top: 8px;
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-bg-color;
padding: 0;
&__container { color: $primary-text-color }
&__item {
padding: 16px;
font-size: 16px;
&__unread { background: $badge-color }
}
&__pagination {
color: $ui-text-color;
padding: 16px;
bottom: 0;
.icon-button {
@include icon-button;
padding: 8px;
margin: 0 4px;
line-height: normal !important;
box-sizing: content-box;
}
span { vertical-align: super }
}
}
.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 }
@include outlined-chip;
.reactions-bar {
margin-top: 16px;
width: calc(100% - 72px);
.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: $chip-selected-text-color }
&:hover { background-color: $contained-chip-selected-color }
}
&__emoji {
width: 24px;
height: 24px;
margin: 4px 0 4px 2px;
}
&__count {
font-size: 16px;
margin: 0 12px 0 8px;
color: $secondary-text-color;
}
&:hover { background: $contained-chip-hover-color }
}
}
.notification {
&__filter-bar {
background: $tab-bg-color;
border-bottom: 1px solid $border-color;
z-index: 1;
opacity: $bar-transparency;
button {
background: $tab-bg-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-bg-focus-color }
}
&:hover { background: $tab-indicator-bg-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 }

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

@ -0,0 +1,629 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
.drawer {
&__header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
justify-content: space-around;
opacity: $bar-transparency;
a { transition: none }
a:hover {
background: $icon-bg-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-bg-color;
opacity: $column-transparency;
&.darker {
background: $card-bg-color;
position: inherit;
}
&__mastodon { background: $card-bg-color }
}
}
.search {
&__input {
background: $search-bar-color;
color: $tips-text-color;
border-radius: $search-bar-radius;
padding: 12px 12px 12px 40px;
opacity: $bar-transparency;
&:focus {
@include shadow-2dp;
background: $search-bar-focus-color;
color: $search-bar-text-color;
}
&:hover { @include search-bar-hover }
&::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-bg-color;
padding: 16px;
.fa { margin-right: 16px }
}
&__section {
h5 {
background: $card-bg-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-bar__actions .compose__action-bar .icon-button {
width: 36px !important;
height: 36px !important;
padding: 8px;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
.navigation-panel hr {
border-top: 1px solid $border-color;
margin: 8px 0;
}
.flex-spacer { margin: 8px 0 }
.dropdown-menu {
@include shadow-8dp;
background: $menu-bg-color;
padding: 8px 0;
border-radius: $menu-radius;
&__arrow { visibility: hidden }
&__item a {
font-size: 14px;
padding: 8px 16px;
background: $menu-bg-color;
color: $menu-text-color;
&:hover, &:active {
background: $menu-bg-hover-color;
color: $menu-text-color;
}
}
&__separator {
margin: 8px 0;
border-bottom: 1px solid $border-color;
}
}
.compose-form {
.autosuggest-textarea {
&__textarea {
background: $text-field-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&::placeholder { color: $tips-text-color }
}
&__suggestions {
@include shadow-1dp;
background: $menu-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
font-size: 16px;
padding: 8px 0;
&__item {
padding: 8px;
border-radius: 0;
&:hover { background: $menu-bg-hover-color }
&.selected,
&:focus,
&:active { background: $menu-bg-active-color }
}
}
}
.spoiler-input {
&.spoiler-input--visible { margin-bottom: 8px }
&__input {
color: $ui-text-color;
background: $card-bg-color;
border-bottom: 1px solid $border-color;
border-radius: 0;
&::placeholder { color: $tips-text-color }
}
}
.compose-form {
&__warning {
color: $secondary-text-color;
background: $card-bg-color;
padding: 16px;
border: 1px solid $border-color;
border-radius: $card-radius;
box-shadow: none;
a { color: $link-text-color }
}
&__modifiers {
background: $card-bg-color;
color: $tips-text-color;
.compose-form {
&__upload-thumbnail { border-radius: 0 }
&__upload__actions {
@include material-transition;
.icon-button {
color: $media-icon-color;
font-size: 16px;
&:hover { background-color: transparent }
}
}
}
}
&__buttons-wrapper {
background: $card-bg-color;
color: $tips-text-color;
padding: 8px;
.icon-button {
@include icon-button;
padding: 8px;
}
.text-icon-button {
width: 20px !important;
height: 20px !important;
padding: 8px;
line-height: 20px !important;
}
}
&__poll-wrapper {
border-top: 1px solid $border-color;
ul { padding: 16px 12px 16px 0 }
select {
color: $ui-text-color;
background-color: $bg-color;
border: 0;
&:focus { border-color: $border-active-color }
}
.button.button-secondary {
box-shadow: none;
color: $text-button-color;
&:hover { background-color: $text-button-hover-color }
&:active,
&:focus { background-color: $text-button-focus-color }
}
.poll__footer { border-top: none }
}
&__publish .compose-form__publish-button-wrapper { box-shadow: none }
}
}
.no-reduce-motion .spoiler-input { transition-duration: .2s, .2s }
.poll {
.button { margin-right: 8px }
li { margin-bottom: 0 }
&__input {
border: none;
width: 20px;
height: 20px;
flex: 0 0 20px;
padding: 18px;
margin: 0 2px;
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-color;
padding: 8px;
margin: 8px 10px;
background: none;
}
}
&__text input[type=text] {
color: $ui-text-color;
background: $text-field-bg-color;
border: 1px solid $border-color;
padding: 8px 12px;
&:focus { border-color: $border-active-color }
}
&__option {
padding: 16px 0 8px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
}
&__chart {
border-radius: 0;
background: $progress-indicator-track-color;
&.leading { background: $progress-indicator-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-bg-hover-color;
border-radius: 50%;
box-shadow: none;
.icon-button { color: $icon-button-active-color }
}
&__dropdown {
@include shadow-8dp;
background: $menu-bg-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-bg-active-color;
color: $icon-hover-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
&:hover {
background: $menu-bg-active-color;
.privacy-dropdown__option__content {
color: $secondary-text-color;
strong { color: $ui-text-color }
}
}
}
&:hover {
background: $menu-bg-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-bg-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;
p { margin-bottom: 16px }
}
}
.attachment-list {
&__list a { color: $secondary-text-color }
&.compact .fa { color: $icon-color }
}
.block-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__action-bar {
background: $card-bg-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: $bg-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-bg-color;
padding: 8px 16px;
.display-name {
margin-left: 16px;
strong {
font-size: 16px;
color: $primary-text-color;
}
span { color: $secondary-text-color }
}
}
&__extra {
background: $card-bg-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 {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $card-radius;
&__container { padding: 24px }
&__explanation { margin-top: 16px }
&__action-bar {
background: $card-bg-color;
padding: 8px;
justify-content: flex-end;
}
&__cancel-button {
box-shadow: none !important;
color: $text-button-color;
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;
}
}
}
.upload-progress {
color: $ui-text-color;
&__backdrop {
border-radius: 0;
background: $progress-indicator-track-color;
margin-top: 6px;
}
&__tracker {
border-radius: 0;
background: $progress-indicator-color;
}
}

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

@ -0,0 +1,57 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.public-layout {
.header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
margin: 16px 0;
.brand:hover { background: $tab-indicator-bg-hover-color }
.nav-link,
.nav-link.optional {
color: $top-bar-text-color;
&:hover {
background: $tab-indicator-bg-hover-color;
text-decoration: none;
}
}
.nav-button {
background: transparent;
margin: 0;
border-radius: 0;
&:hover { background: $tab-indicator-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
}
.detailed-status { padding: 16px }
.footer {
padding-top: 16px;
padding-bottom: 64px;
color: $ui-text-color;
h4 { color: $ui-text-color }
ul a { color: $secondary-text-color }
.grid .column-2 h4 a { color: $ui-text-color }
.brand {
svg { fill: $icon-color }
&:hover svg { fill: $icon-hover-color }
}
}
}

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;
}
}

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

@ -0,0 +1,82 @@
@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-bg-color;
border-radius: $menu-radius;
}
&__modifiers__menu {
@include shadow-8dp;
background: $menu-bg-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-bg-color;
}
}
&-anchor {
color: $text-tab-indicator-color;
padding: 10px 4px;
&-bar { background-color: $icon-tab-indicator-active-color }
&-selected { color: $icon-tab-indicator-hover-color }
&:hover { color: $icon-tab-indicator-hover-color }
}
&-search {
background: $menu-bg-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-bg-color;
}
&-category {
&-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
}
&-no-results { color: $secondary-text-color }
}

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

@ -0,0 +1,26 @@
@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.fa-lock { text-transform: none }
.icon-with-badge__badge {
background: $badge-color;
border: none;
padding: 2px 6px;
border-radius: 12px;
}

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

@ -0,0 +1,248 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config', '../icon_config';
@import '../custom_color', '../custom_layout';
@import 'functions';
@import 'mixins';
@include icon-font;
.fa-fw {
width: 20px;
height: 20px;
font-size: 20px;
}
.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,
&.fa-upload,
&.fa-comments,
&.fa-angle-right {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
}
.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: "person_remove" }
&.fa-check::before { content: "check" }
&.fa-quote-right::before { content: "format_quote" }
&.fa-upload::before { content: "file_upload" }
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
}
// 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
button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
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="40px" width="20px"><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>');
}
button.icon-button i.fa-retweet:hover {
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="40px" width="20px"><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-hover-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>');
}
button.icon-button.disabled i.fa-retweet,
button.icon-button.disabled i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></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}
// icon in tab settings
.text-btn.column-header__setting-btn {
.fa {
vertical-align: middle;
&.fa-eraser { margin-right: 8px } // clear notification
}
}
// top bar icons align
.fa.fa-bell.column-header__icon.fa-fw,
.fa.fa-home.column-header__icon.fa-fw,
.fa.fa-users.column-header__icon.fa-fw,
.fa.fa-globe.column-header__icon.fa-fw,
.fa.fa-bars.column-header__icon.fa-fw,
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link {
.fa.fa-home.fa-fw,
.fa.fa-bell.fa-fw,
.fa.fa-users.fa-fw,
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
}
// getting-started and side bar icons
.column-link .fa,
.column-link--transparent .fa { vertical-align: text-bottom }
// uploaded media icons align
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
font-size: 20px;
vertical-align: text-bottom;
}
// search results icons align
.search-results__header .fa { vertical-align: text-bottom }
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// status detail icon
.detailed-status .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// status scope
.status__visibility-icon .fa {
font-size: 16px;
vertical-align: text-bottom;
}

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

@ -0,0 +1,113 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.media-gallery {
border-radius: $media-radius;
&__item { border-radius: $media-radius }
}
.media-modal__close {
&.icon-button {
background: transparent;
color: $media-icon-color;
font-size: 24px !important;
width: 24px !important;
height: 24px !important;
padding: 8px;
box-sizing: content-box;
line-height: normal !important;
&:hover {
background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
.fa-fw {
width: 24px;
height: 24px;
}
}
}
.media-modal {
&__nav {
background: $media-icon-bg-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 }
}
&__meta {
bottom: 24px;
a { color: $media-icon-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 {
@include material-transition;
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 {
@include material-transition;
background-color: $primary-color;
box-shadow: none;
}
}
&__time-current { margin-left: 68px }
&__buttons button { font-size: 20px }
}

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

@ -0,0 +1,103 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.confirmation-modal {
@include shadow-24dp;
background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
&__container {
text-align: left;
padding: 24px;
}
&__action-bar {
justify-content: flex-end;
background: $card-bg-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-bg-color;
border-radius: $card-radius;
ul li:not(:empty) a {
color: $ui-text-color;
font-size: 16px;
&:hover {
background: $card-bg-hover-color;
color: $ui-text-color;
}
}
.dropdown-menu__separator { border-bottom-color: $border-color }
.status {
background: $card-bg-color;
border-bottom-color: $border-color;
padding-top: 12px;
padding-bottom: 12px;
&__avatar {
left: 12px;
top: 12px;
}
}
}
.report-modal {
@include shadow-24dp;
background: $card-bg-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;
}
}

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

@ -0,0 +1,110 @@
@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;
width: $fab-size;
height: $fab-size;
bottom: 16px;
right: 16px;
&: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 }
}
}
// small size screen
@media screen and (max-width: 415px) {
.public-layout { padding-top: 64px }
}
// 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;
}
&__pane { padding: 0 16px }
}
}
//single column mode
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-bg-hover-color;
border-bottom-color: transparent;
}
&:active,
&:focus {
background: $tab-indicator-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
&.active { border-bottom-color: $tab-indicator-active-color }
}
}

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

@ -0,0 +1,280 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.status {
padding: 12px 12px 4px 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 }
}
p { margin-bottom: 16px }
.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 {
margin-top: 4px;
&__counter {
margin-right: 6px;
&__label {
font-size: 14px;
color: $info-text-color;
}
}
}
&__action-bar-button {
margin-right: 6px;
&.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
&__action-bar-dropdown {
width: 36px !important;
height: 36px !important;
box-sizing: content-box;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
&:hover {
color:$icon-hover-color;
background: $icon-bg-hover-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;
}
&__visibility-icon { color: $icon-color }
}
.status-card {
color: $icon-color;
border-color: $border-color;
outline: none;
margin-top: 16px;
&__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-bg-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 }
}
&.horizontal {
border-radius: 0;
.status-card {
&__image-preview { border-radius: 0 }
&__image-image { border-radius: 0 }
}
}
}
a.status-card {
&:hover { background-color: $card-bg-color }
}
.embed .status,
.public-layout .status { padding: 16px 16px 16px 80px }
// 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-bg-color;
padding: 16px;
&.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
&__display-name {
color: $secondary-text-color;
strong { color: $primary-text-color }
}
&__meta {
margin-top: 16px;
color: $info-text-color;
}
&__action-bar {
background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 8px 0;
}
&__action-bar-dropdown {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
&__button {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
// search user trends
.display-name {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}
.activity-stream {
@include shadow-1dp;
margin-bottom: 16px;
border-radius: $card-radius;
.entry {
background: $card-bg-color;
&:first-child {
.detailed-status,
.load-more,
.status { border-radius: $card-radius $card-radius 0 0 }
}
}
}
.entry.entry-center { border-bottom: 1px solid $border-color }

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

@ -0,0 +1,10 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

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 }

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

@ -0,0 +1,32 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.hero-widget {
@include shadow-2dp;
margin-bottom: 16px;
&__img {
border-radius: $card-radius $card-radius 0 0;
background: $card-bg-color;
img { border-radius: $card-radius $card-radius 0 0 }
}
&__text {
background: $card-bg-color;
padding: 16px;
color: $primary-text-color;
border-radius: 0 0 $card-radius $card-radius;
}
}
.endorsements-widget {
padding-bottom: 8px;
margin-bottom: 8px;
}
.trends-widget h4 { color: $section-text-color }

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