Merge branch 'features/mild-master' into 3.1.0rc2

Gemfile

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

Gemfile.lock

@@ -492,6 +492,7 @@ GEM
       link_header (~> 0.0, >= 0.0.8)
     rdf-normalize (0.4.0)
       rdf (~> 3.1)
+    redcarpet (3.4.0)
     redis (4.1.3)
     redis-actionpack (5.0.2)
       actionpack (>= 4.0, < 6)
@@ -757,6 +758,7 @@ DEPENDENCIES
   rails-i18n (~> 5.1)
   rails-settings-cached (~> 0.6)
   rdf-normalize (~> 0.4)
+  redcarpet (~> 3.4.0)
   redis (~> 4.1)
   redis-namespace (~> 1.7)
   redis-rails (~> 5.0)

app/javascript/mastodon/actions/UtilBtns.js

@@ -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
+  }
+}

app/javascript/mastodon/components/announcement_icon_button.js

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

app/javascript/mastodon/components/status_action_bar.js

@@ -129,6 +129,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');
   }
@@ -329,6 +337,7 @@ class StatusActionBar extends ImmutablePureComponent {
         <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
         {shareButton}
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
         <div className='status__action-bar-dropdown'>
           <DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} />

app/javascript/mastodon/features/compose/components/announcements.js

@@ -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);

app/javascript/mastodon/features/compose/components/compose_form.js

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

app/javascript/mastodon/features/compose/components/user_counter.js

@@ -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>
+    );
+  }
+}

app/javascript/mastodon/features/compose/containers/announcements_container.js

@@ -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);

app/javascript/mastodon/features/compose/containers/compose_form_container.js

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

app/javascript/mastodon/features/compose/index.js

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

app/javascript/mastodon/features/getting_started/index.js

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

app/javascript/mastodon/features/ui/components/navigation_panel.js

@@ -16,6 +16,8 @@ const NavigationPanel = () => (
     <NavLink className='column-link column-link--transparent' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>
     <NavLink className='column-link column-link--transparent' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><Icon className='column-link__icon' id='globe' fixedWidth /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>
     <NavLink className='column-link column-link--transparent' to='/timelines/direct'><Icon className='column-link__icon' id='envelope' fixedWidth /><FormattedMessage id='navigation_bar.direct' defaultMessage='Direct messages' /></NavLink>
+    <NavLink className='column-link column-link--transparent' to='/timelines/tag/Yづinfo'><Icon className='colmun-link__icon' id='bullhorn' fixedWidth /><FormattedMessage id='tabs_bar.admin_notifications' defaultMessage='Admin Notification' /></NavLink>
+    <NavLink className='column-link column-link--transparent' to='/bookmarks'><Icon className='colmun-link__icon' id='bookmark' fixedWidth /><FormattedMessage id='navigation_bar.bookmarks' defaultMessage='Bookmark' /></NavLink>
     <NavLink className='column-link column-link--transparent' to='/favourites'><Icon className='column-link__icon' id='star' fixedWidth /><FormattedMessage id='navigation_bar.favourites' defaultMessage='Favourites' /></NavLink>
     <NavLink className='column-link column-link--transparent' to='/bookmarks'><Icon className='column-link__icon' id='bookmark' fixedWidth /><FormattedMessage id='navigation_bar.bookmarks' defaultMessage='Bookmarks' /></NavLink>
     <NavLink className='column-link column-link--transparent' to='/lists'><Icon className='column-link__icon' id='list-ul' fixedWidth /><FormattedMessage id='navigation_bar.lists' defaultMessage='Lists' /></NavLink>

app/javascript/mastodon/locales/ja.json

@@ -64,7 +64,7 @@
   "column.lists": "リスト",
   "column.mutes": "ミュートしたユーザー",
   "column.notifications": "通知",
-  "column.pins": "固定されたトゥート",
+  "column.pins": "固定された投稿",
   "column.public": "連合タイムライン",
   "column_back_button.label": "戻る",
   "column_header.hide_settings": "設定を隠す",
@@ -80,7 +80,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}",
@@ -95,6 +95,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": "ブロック",
@@ -171,7 +173,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} を除く)",
@@ -181,6 +184,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": "返信表示",
@@ -269,7 +273,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": "ログアウト",
@@ -279,7 +284,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}さんがあなたに返信しました",
@@ -326,6 +336,7 @@
   "privacy.unlisted.long": "公開TLで表示しない",
   "privacy.unlisted.short": "未収載",
   "refresh": "更新",
+  "qr_modal.description": "QRコードを読み取って簡単にプロフィールにアクセスしましょう。",
   "regeneration_indicator.label": "読み込み中…",
   "regeneration_indicator.sublabel": "ホームタイムラインは準備中です！",
   "relative_time.days": "{number}日前",
@@ -396,6 +407,7 @@
   "status.unpin": "プロフィールへの固定を解除",
   "suggestions.dismiss": "隠す",
   "suggestions.header": "興味あるかもしれません…",
+  "tabs_bar.admin_notifications": "Adminからのお知らせ",
   "tabs_bar.federated_timeline": "連合",
   "tabs_bar.home": "ホーム",
   "tabs_bar.local_timeline": "ローカル",

app/javascript/styles/application.scss

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

app/javascript/styles/astarte.scss

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

app/javascript/styles/contrast.scss

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

app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss

@@ -0,0 +1,24 @@
+/**
+ * Google+ Theme for Mastodon v1.1
+ * Copyright (C) 2018-2019 Genbu Project
+ */
+
+@charset "UTF-8";
+
+// @import 'application';
+@import 'application';
+@import 'dark-gplus-theme-for-mastodon-dev/basics';
+@import 'dark-gplus-theme-for-mastodon-dev/components';
+@import 'dark-gplus-theme-for-mastodon-dev/emoji-picker';
+@import 'dark-gplus-theme-for-mastodon-dev/tables';
+@import 'dark-gplus-theme-for-mastodon-dev/columns';
+@import 'dark-gplus-theme-for-mastodon-dev/lists';
+@import 'dark-gplus-theme-for-mastodon-dev/accounts';
+@import 'dark-gplus-theme-for-mastodon-dev/statuses';
+@import 'dark-gplus-theme-for-mastodon-dev/notifications';
+@import 'dark-gplus-theme-for-mastodon-dev/searches';
+@import 'dark-gplus-theme-for-mastodon-dev/settings';
+@import 'dark-gplus-theme-for-mastodon-dev/icons';
+@import 'dark-gplus-theme-for-mastodon-dev/profile';
+@import 'dark-gplus-theme-for-mastodon-dev/about';
+@import 'dark-gplus-theme-for-mastodon-dev/explore';

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_functions.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+
+
+@function adjust-lightness ($color, $lightness) {
+	@if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) {
+		@return lighten($color, $lightness);
+	}
+
+	@if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) {
+		@return darken($color, $lightness);
+	}
+
+	@return change-color($color, $lightness: $lightness);
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_mixins.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
+@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
+@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
+@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
+@mixin material-border { border-radius: 4px }
+@mixin material-card-radius { border-radius: 2px }
+@mixin material-icon-large { font-size: 20px }

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/_variables.scss

@@ -0,0 +1,99 @@
+@charset "UTF-8";
+
+
+
+// Base colors
+$active-color: #db4437;
+$accent-color: #fbbc04;
+$valid-color: #4285f4;
+$error-color: #d50000;
+$checked-color: #4285f4;
+$verified-color: #4caf50;
+
+
+// Text colors
+$primary-text-color: #ffffff;
+$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
+$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
+$secondary-text-color: #2196F3; // ex: リンク
+$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
+$light-text-color: #000000;
+$light-darker1-text-color: darken($light-text-color, 15%);
+$active-text-color: $active-color;
+$error-text-color: $error-color;
+
+
+// Icon colors
+$icon-color: #BDBDBD;
+$icon-active-color: $active-color;
+
+
+// Background colors
+$base-color: #121212;
+$base-lighter1-color: #2d2d2d;
+$base-darker1-color: #000000;
+
+$column-header-color: $base-lighter1-color;
+$column-header-hover-color: change-color($color: $column-header-color, $lightness: 10%);
+
+$status-color: $base-lighter1-color;
+$status-direct-color: darken($status-color, 5%);
+$status-actionbar-color: darken($status-color, 2%);
+
+$account-color: $base-lighter1-color;
+$account-foreground-color: $base-darker1-color;
+
+$card-color: $base-lighter1-color;
+$card-hover-color: $column-header-hover-color;
+$card-image-color: $base-color;
+$warning-card-color: #26a69a;
+
+$form-color: rgba(0, 0, 0, 0.1);
+$form-focused-color: lighten($form-color, 20%);
+$trend-color: $base-lighter1-color;
+
+$setting-base-color: $base-color;
+$setting-lists-selected-color: darken($base-color, 2%);
+$setting-lists-hover-color: darken($base-color, 5%);
+$setting-content-base-color: $base-lighter1-color;
+
+$setting-toggle-color: #b9b9b9;
+$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
+$setting-toggle-thumb-color: #fafafa;
+$setting-toggle-thumb-checked-color: $checked-color;
+
+$setting-emphasis-color: $verified-color;
+
+$dashboard-counters-base-color: $base-color;
+$dashboard-counters-hover-color: lighten($base-color, 2%);
+
+$log-entry-color: $base-lighter1-color;
+$log-entry-extra-color: $base-color;
+$log-entry-extra--neutral-color: $valid-color;
+$log-entry-extra--old-color: $active-color;
+$log-entry-extra--new-color: $verified-color;
+
+$explore-header-color: lighten($accent-color, 16%);
+$explore-directory-color: $base-lighter1-color;
+
+$active-button-color: $valid-color; //文字入りボタン
+$non-active-button-color: lighten($base-color, 20%);
+
+$floating-acton-button-hover-color: lighten($active-color, 10%);
+
+
+// Shadow colors
+$column-header-shadow-color: rgba(0, 0, 0, 0.3);
+$status-shadow-color: rgba(0, 0, 0, 0.14);
+$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
+$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
+$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
+$button-shadow-color: rgba(0, 0, 0, 0.4);
+
+
+// Separation colors
+$base-separation-color: rgba(0, 0, 0, 0.14);
+
+
+//Border colors
+$non-elevated-card-boader : #e0e0e0;

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/about.scss

@@ -0,0 +1,138 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+// from mastodon/about.scss
+$column-breakpoint: 700px;
+
+
+
+.landing-page {
+	h3, h4, h5, h6 { color: $primary-lighter2-text-color }
+	p { color: $primary-lighter1-text-color }
+	em { color: $primary-text-color }
+
+	.column-0 { background: $base-darker1-color }
+	.column-2 {
+		.landing-page {
+			&__information { padding: 0 }
+
+			&__short-description {
+				& > .row:first-child {
+					background: $base-darker1-color;
+					padding: 10px 20px;
+				}
+
+				& > * {
+					padding-left: 40px; padding-right: 40px;
+					&:last-child { padding-bottom: 45px }
+
+					@media screen and (max-width: $column-breakpoint) {
+						padding-left: 20px; padding-right: 20px;
+						&:last-child { padding-bottom: 25px }
+					}
+				}
+			}
+		}
+	}
+
+	&__forms,
+	&__information,
+	&__call-to-action {
+		@include status-shadow;
+		background: $column-header-color;
+	}
+
+	&__forms {
+		padding: 0;
+
+		& > *:first-child { margin: inherit }
+		& > * { margin-left: 20px; margin-right: 20px; }
+
+		.brand { background: $base-darker1-color }
+
+		form {
+			& > .input input {
+				background: $form-color;
+
+				&:focus { background: $form-focused-color }
+			}
+		}
+
+		.separator-or {
+			margin-left: 20px; margin-right: 20px;
+			
+			span {
+				color: $primary-lighter1-text-color;
+				background: $column-header-color;
+			}
+		}
+
+		@media screen and (max-width: $column-breakpoint) {
+			background: inherit;
+			box-shadow: none;
+
+			.separator-or span { background: $base-color }
+		}
+	}
+
+	&__information {
+		color: $primary-lighter1-text-color;
+
+		&.contact-widget {
+			@include status-shadow;
+			background: $column-header-color;
+
+			.contact-widget {
+				&__mail {
+					a { color: $primary-text-color }
+				}
+			}
+		}
+
+		strong { color: inherit }
+
+		.row:first-child {
+			h1 small {
+				color: $light-darker1-text-color;
+
+				span { color: $light-text-color }
+			}
+		}
+	}
+
+	&__call-to-action {
+		.row__information-board {
+			.information-board__section {
+				color: $primary-lighter2-text-color;
+
+				& > span:last-child { color: $primary-lighter1-text-color }
+			}
+		}
+	}
+
+	&__features {
+		.features-list {
+			.features-list__row {
+				.text { color: $primary-lighter1-text-color }
+				.visual .fa { color: $icon-color }
+			}
+		}
+	}
+
+	&__footer { color: $primary-lighter1-text-color }
+
+	#mastodon-timeline {
+		color: $primary-text-color;
+		background: transparent;
+
+		p {
+			color: $primary-text-color;
+
+			a { color: $secondary-text-color }
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/accounts.scss

@@ -0,0 +1,194 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.account {
+	background: $account-color;
+	border-color: $base-separation-color;
+
+	.account {
+		&__display-name {
+			color: $secondary-text-color;
+			strong { color: $primary-text-color }
+		}
+	}
+
+	&-role {
+		color: $primary-lighter2-text-color;
+		background-color: rgba($base-separation-color, 0.1);
+		border-color: rgba($base-separation-color, 0.5);
+	}
+}
+
+.column {
+	> .column-back-button {
+		@include column-shadow;
+		background: $column-header-color;
+	}
+}
+
+.account-timeline__header {
+	.account__header {
+		background-color: $account-foreground-color;
+
+		> div { background-color: inherit } // -> v2.7.4
+
+		.account__header {
+			&__username { color: $secondary-lighter1-text-color }
+			&__fields { @extend .account__header__fields; }
+
+			&__image { // v2.8.0 ->
+				&::after {
+					content: "";
+
+					position: absolute;
+					top: auto;
+					left: 0;
+					bottom: 0;
+	
+					width: 100%;
+					height: 30%;
+					background: $account-header-image-shadow-color;
+					box-shadow: none;
+				}
+
+				> img:not([src]),
+				> img[src$="/headers/original/missing.png"] {
+					content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
+				}
+			}
+
+			&__bar { // v2.8.0 ->
+				background-color: $base-lighter1-color;
+
+				.account__header {
+					&__tabs {
+						.avatar {
+							.account__avatar {
+								border-color: $base-lighter1-color;
+								border-radius: 50%;
+							}
+						}
+
+						&__buttons {
+							.icon-button { 
+								border: 0;
+								border-radius: 50%;
+							}
+						}
+
+						&__name {
+							h1 { color: $primary-text-color }
+							small { color: $secondary-text-color }
+						}
+					}
+
+					&__bio {
+						.account__header {
+							&__content { color: $primary-text-color }
+							&__fields { border-color: $base-separation-color }
+						}
+					}
+
+					&__extra {
+						&__links {
+							&, a { color: $primary-lighter1-text-color }
+							strong { color: $primary-lighter2-text-color }
+						}
+					}
+				}
+			}
+		}
+
+		.account--action-button {
+			.icon-button:not(.active) {
+				color: darken($light-text-color, 7%);
+
+				&:active,
+				&:focus,
+				&:hover {
+					color: $light-text-color;
+				}
+			}
+		}
+	}
+
+	.account {
+		&__disclaimer,
+		&__action-bar,
+		&__section-headline {
+			background: $base-lighter1-color;
+			border-color: $base-separation-color;
+		}
+
+		&__action-bar {
+			&__tab {
+				border-color: $base-separation-color;
+				&.active { border-bottom-color: $active-color }
+	
+				> span { color: $primary-lighter1-text-color }
+			}
+		}
+	
+		&__section-headline {
+			a {
+				color: $primary-text-color;
+	
+				&.active {
+					color: $active-color;
+	
+					&::before { border-color: transparent transparent $base-separation-color }
+					&::after { border-color: transparent transparent $status-color }
+				}
+			}
+		}
+	}
+}
+
+.account-authorize__wrapper {
+	@include status-shadow;
+	background: $base-lighter1-color;
+
+	&:focus { @include status-focus-shadow; }
+
+	.account {
+		&__header__content {
+			color: $primary-lighter2-text-color;
+		}
+	
+		&--panel {
+			background: $account-color;
+			border-color: $base-separation-color;
+		}
+	}
+}
+
+.account__header__fields {
+	dl {
+		border-color: $base-separation-color;
+		
+		dt,
+		dd {
+			color: $primary-text-color;
+			background: $base-lighter1-color;
+		}
+
+		dd {
+			&.verified {
+				border-color: transparentize($valid-color, 0.5);
+				background: transparentize($valid-color, 0.75);
+
+				a { color: lighten($verified-color, 20%) }
+			}
+		}
+	}
+
+	a { color: $secondary-text-color }
+}
+
+.account__action-bar__tab {
+	strong { color: $primary-text-color }
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/basics.scss

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+body {
+	&,
+	.ui {
+		color: $primary-text-color;
+		background: $base-color;
+	}
+}
+
+.focusable {
+	&:focus {
+		background: inherit;
+
+		.status {
+			@include status-focus-shadow;
+
+			&.status-direct { background: $status-direct-color }
+		}
+
+		.detailed-status {
+			& { background: $status-color }
+			&__action-bar { background: $status-actionbar-color }
+		}
+	}
+}
+
+::-webkit-scrollbar-thumb {
+	background: darken($base-lighter1-color, 12%);
+
+	&:hover { background: darken($base-lighter1-color, 16%) }
+	&:active { background: darken($base-lighter1-color, 12%) }
+}
+
+::-webkit-scrollbar-track {
+	background: $base-color;
+
+	&:hover,
+	&:active {
+		background: darken($base-lighter1-color, 8%);
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/columns.scss

@@ -0,0 +1,335 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.tabs-bar {
+	margin: 0;
+	background: $column-header-color;
+	position: relative;
+
+	.tabs-bar {
+		&__link {
+			color: $icon-color;
+			border-bottom: 4px solid $column-header-color;
+			padding: 15px 10px 11px 10px;
+			
+			&.active {
+				border-bottom: 4px solid $active-color;
+			}
+
+			.fa {
+				@include material-icon-large;
+				vertical-align: top;
+			}
+		}
+	}
+}
+
+.drawer {
+	.drawer {
+		&__header {
+			@include column-shadow;
+			background: $column-header-color;
+	
+			.drawer__tab {
+				@include material-icon-large;
+				color: $icon-color;
+			}
+	
+			a {
+				&:hover { background: $column-header-hover-color }
+			}
+		}
+	
+		&__pager {
+			@include status-shadow;
+			@include material-card-radius;
+			
+			.drawer__inner {
+				background: $column-header-color;
+		
+				&__mastodon { display: none }
+			}
+		}
+	}
+}
+
+.navigation-bar {
+	color: $secondary-text-color;
+	background: $column-header-color;
+
+	.navigation-bar {
+		&__profile {
+			strong { color: $primary-text-color }
+			&-edit { color: $secondary-text-color }
+		}
+	}
+}
+
+
+.compose-form {
+	.compose-form {
+		&__buttons-wrapper {
+			background: $column-header-color;
+
+			&.character-counter__wrapper {
+				.character-counter { color: $primary-lighter1-text-color }
+			}
+		}
+
+		&__warning {
+			background-color: $warning-card-color;
+		}
+
+		&__publish { border-top: 1px solid $base-separation-color }
+		&__modifiers { background-color: $base-lighter1-color }
+	}
+
+	.autosuggest-textarea__textarea {
+		background-color: $base-lighter1-color;
+		color: $primary-text-color;
+	}
+
+	.character-counter {
+		color: $icon-color
+	}
+}
+
+.column {
+	.column-header {
+		@include column-shadow;
+		background: $column-header-color;
+
+		&.active {
+			.column-header__icon {
+				color: $icon-active-color;
+				text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
+			}
+		}
+
+		* { background: inherit }
+
+		&__icon {
+			@include material-icon-large;
+			color: $icon-color;
+			vertical-align: bottom;
+			margin-right: 10px;
+		}
+
+		&__buttons {
+			height: 50px;
+
+			.column-header {
+				&__back-button {
+					.column-back-button__icon { vertical-align: bottom }
+				}
+
+				&__button {
+					&.active {
+						color: $icon-active-color;
+						background: inherit;
+					}
+		
+					.fa { vertical-align: unset }
+				}
+			}
+		}
+
+		&__button {
+			color: $icon-color;
+			padding: 0 16px;
+		}
+
+		&__collapsible {
+			color: $secondary-text-color;
+			border-bottom: 1px solid $base-separation-color;
+
+			&-inner { background: $column-header-color }
+		}
+	}
+
+	.column-back-button {
+		background-color: $column-header-color;
+		color: $secondary-text-color;
+
+		&__icon {
+			@include material-icon-large;
+			vertical-align: bottom;
+			margin-right: 8px;
+		}
+	}
+
+	.column {
+		&-subheading,
+		&-link__badge {
+			background: $base-color;
+			color: $secondary-text-color;
+		}
+	
+		&-link {
+			color: $primary-text-color;
+			background: $base-color;
+	
+			&__icon {
+				@include material-icon-large;
+				color: $icon-color;
+				vertical-align: bottom;
+				margin-right: 8px;
+			}
+		}
+	}
+
+	.scrollable {
+		background: transparent;
+
+		*[role="feed"] {
+			article {
+				margin: 1em 0;
+				&:first-of-type { margin: 0 }
+
+				&:focus { outline: none }
+			}
+		}
+
+		div[tabindex="-1"] { margin-bottom: 1em }
+	}
+
+	.notification__filter-bar {
+		background: $column-header-color;
+		border-bottom-color: $base-separation-color;
+
+		button {
+			color: $icon-color;
+			background: $column-header-color;
+
+			&.active {
+				color: $icon-active-color;
+
+				&::before { border-color: transparent transparent $base-separation-color }
+				&::after { border-color: transparent transparent $column-header-color }
+			}
+		}
+	}
+
+	.empty-column-indicator {
+		flex-direction: column;
+		background: $base-color;
+
+		&::before {
+			content: "";
+			display: block;
+
+			width: 100px;
+			height: 100px;
+			margin-bottom: 1em;
+
+			background: none center / contain no-repeat;
+			background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
+		}
+	}
+}
+
+// v2.9.0以降に対応
+.column-header {
+	@include column-shadow;
+	background: $column-header-color;
+
+	&.active {
+		.column-header__icon {
+			color: $icon-active-color;
+			text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
+		}
+	}
+
+	* { background: inherit }
+
+	&__icon {
+		@include material-icon-large;
+		color: $icon-color;
+		vertical-align: bottom;
+		margin-right: 10px;
+	}
+
+	&__buttons {
+		height: 50px;
+
+		.column-header {
+			&__back-button {
+				.column-back-button__icon { vertical-align: bottom }
+			}
+
+			&__button {
+				&.active {
+					color: $icon-active-color;
+					background: inherit;
+				}
+	
+				.fa { vertical-align: unset }
+			}
+		}
+	}
+
+	&__button {
+		color: $icon-color;
+		padding: 0 16px;
+	}
+
+	&__collapsible {
+		color: $secondary-text-color;
+		border-bottom: 1px solid $base-separation-color;
+
+		&-inner { background: $column-header-color }
+	}
+}
+.column-back-button {
+	background-color: $column-header-color;
+	color: $secondary-text-color;
+
+	&__icon {
+		@include material-icon-large;
+		vertical-align: bottom;
+		margin-right: 8px;
+	}
+}
+
+.getting-started {
+	&__wrapper,
+	& {
+		background: $base-color;
+	}
+
+	& {
+		border-top: 1px solid $base-separation-color;
+
+		a { color: $primary-text-color }
+	}
+}
+
+.load {
+	&-more,
+	&-gap {
+		background: transparent;
+
+		&:hover { background: darken($column-header-color, 10%) }
+	}
+
+	&-gap { border: 0 }
+}
+
+.confirmation-modal {
+	@include material-card-radius;
+	color: $primary-text-color;
+	background-color: $base-lighter1-color;
+
+	&__action-bar {
+		background-color: $base-lighter1-color;
+	}
+
+	&__cancel-button {
+		color: $primary-lighter1-text-color;
+		box-shadow: 0 2px 5px 0 transparent;
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-button.scss

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.floating-action-button {
+	font-size: 24px;
+	background-color: $active-color;
+	width: 3.6rem;
+	height: 3.6rem;
+
+	&:active {
+		background-color: $active-color;
+	}
+
+	&:hover {
+		background-color: $floating-acton-button-hover-color;
+	}
+}
+
+.button {
+	@include button-shadow;
+	@include material-card-radius;
+	background-color: $active-button-color;
+
+	.text-icon-button {
+		color: $primary-lighter1-text-color;
+		border-radius: 50%;
+	}
+
+	.button--block { @include button-shadow }
+
+	.button-secondary {
+		background-color: $primary-lighter1-text-color;
+		border: 0px;
+	}
+}
+
+.modal-root {
+	&__modal {
+		.media-modal {
+			&__close.icon-button {
+				font-size: 40px;
+				width: 40px;
+				height: 40px;
+
+				&:hover {
+					background-color: darken($base-lighter1-color, 40%);
+				}
+			}
+		}
+	}
+}
+
+// DOM操作によりpaddingが調整できないもの
+.privacy-dropdown__value-icon.icon-button.inverted,
+.compose-form__poll-button-icon.icon-button.inverted,
+.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-card.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.card {
+	//border: 1px solid $base-separation-color;
+	//不要(?)
+
+	> a {
+		@include status-shadow;
+
+		&:hover,
+		&:focus,
+		&:active {
+			.card__bar {
+				background: initial;
+
+				.display-name strong { color: $secondary-text-color }
+			}
+		}
+
+		.card__img { background: $card-image-color }
+		.card__bar {
+			background: $card-color;
+	
+			.avatar {
+				img { background: transparent }
+			}
+	
+			.display-name {
+				strong { color: $primary-text-color }
+				span { color: $primary-lighter2-text-color }
+			}
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-dropdown.scss

@@ -0,0 +1,71 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+.dropdown-menu {
+	background-color: $column-header-color;
+
+		&__arrow {
+			&.top { border-top-color: $column-header-color }
+			&.bottom { border-bottom-color: $column-header-color }
+		}
+
+		&__separator { margin: 4px 0 }
+}
+
+.dropdown-menu,
+.actions-modal {
+	@include material-card-radius;
+
+	& > ul {
+		background: $base-lighter1-color;
+
+		.dropdown-menu {
+			&__item {
+				a {
+					color: $primary-lighter2-text-color;
+
+					padding: 16px 16px;
+					background: $column-header-color;
+
+					&:active,
+					&:focus,
+					&:hover {
+						color: $primary-text-color;
+						background: $column-header-hover-color;
+					}
+				}
+			}
+
+			&__separator { border-bottom-color: $base-separation-color }
+		}
+
+		& > li:not(:empty) {
+			@extend .dropdown-menu__item;
+
+			a {
+				padding: 12px 16px;
+				color: $primary-text-color;
+
+				&:hover {
+					color: $primary-text-color;
+					background-color: $column-header-hover-color;
+				}
+			}
+		}
+	}
+
+	.status {
+		background-color: $base-lighter1-color;
+		padding-top: 16px;
+		padding-bottom: 16px;
+		padding-right: 16px;
+		padding-left: 74px;
+
+		&__avatar {
+			top: 16px;
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components-status-card.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.status-card {
+	color: $primary-lighter1-text-color;
+	&__title, &__description { color: $primary-lighter2-text-color }
+
+	&__image { background: transparent }
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/components.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@import 'components-button';
+@import 'components-card';
+@import 'components-dropdown';
+@import 'components-status-card';

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/emoji-picker.scss

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.emoji-mart {
+    &-bar {
+        border: 0 solid $base-separation-color;
+
+        &:first-child {
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            background-color: $base-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-color;
+    }
+    &-anchor {
+        &-selected {
+            color: $icon-active-color;
+
+            &:hover {
+                color: $icon-active-color;
+            }
+        }
+
+        &-bar {
+            background-color: $icon-active-color;
+        }
+    }
+
+    &-search {
+        background-color: $base-lighter1-color;
+    }
+    &-search input {
+        color: $primary-text-color;
+        background-color: $form-color;
+        border: 0px solid #ffffff00;
+    }
+
+    &-category-label span {
+        color: $primary-text-color;
+        background-color: $base-lighter1-color;
+    }
+
+    &-scroll {
+        background-color: $base-lighter1-color;
+    }
+}
+
+.emoji-picker-dropdown {
+    &__modifiers {
+        &__menu {
+            @include status-shadow;
+            @include material-card-radius;
+            background-color: $base-lighter1-color;
+        }
+    }
+
+    &__menu {
+        @include column-shadow;
+        background-color: $base-lighter1-color;
+    }
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/explore.scss

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.public-layout {
+	.page-header {
+		background: $explore-header-color;
+
+		h1 { color: $primary-text-color }
+		p { color: $primary-lighter2-text-color }
+	}
+
+	.directory,
+	.notice-widget { @include column-shadow; }
+
+	.directory {
+		background: $explore-directory-color;
+
+		.accounts-table {
+			&__count {
+				color: $primary-lighter2-text-color;
+				small { color: $primary-lighter1-text-color }
+			}
+		}
+
+		&__tag {
+			& > a {
+				@include status-shadow;
+				background: $explore-directory-color;
+			}
+
+			h4 { color: $primary-lighter2-text-color }
+			.fa, small { color: $primary-lighter1-text-color }
+			.trends__item__current { color: $primary-text-color }
+		}
+	}
+
+	.notice-widget {
+		color: $primary-lighter1-text-color;
+		background: $explore-directory-color;
+
+		a { color: $secondary-text-color }
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.keyboard-shortcuts {
+	kbd {
+		@include status-shadow;
+
+		color: $primary-text-color;
+		background-color: $base-lighter1-color;
+		border-color: $base-darker1-color;
+
+		margin: 0 0.25em;
+
+		&:first-child { margin-left: 0 }
+		&:last-child { margin-right: 0 }
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/lists.scss

@@ -0,0 +1,55 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.column {
+	.column-back-button { background: inherit }
+
+	.column-inline-form {
+		background: $column-header-color;
+
+		label input {
+			color: $secondary-text-color;
+			&:focus { color: $primary-text-color }
+		}
+	}
+
+	.column-inline-form ~ .scrollable {
+		article { margin: 0 }
+	}
+}
+
+.modal-root {
+	.column-inline-form {
+		background: $column-header-color;
+		
+		.setting-text {
+			color: $primary-text-color;
+			&:active, &:focus { color: $primary-lighter2-text-color }
+		}
+	}
+
+	.list-editor {
+		background: $base-color;
+		h4 { background: $column-header-color }
+
+		.drawer__pager {
+			.drawer__inner { background: $column-header-color }
+		}
+	}
+
+	.list-adder {
+		background: $base-color;
+
+		.column-inline-form { border-bottom: 1px solid $base-separation-color }
+
+		&__account,
+		&__lists { background: $column-header-color }
+
+		&__lists {
+			.list { border-color: $base-separation-color }
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/notifications.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.notification {
+	&.notification-favourite {
+		.status {
+			&.status-direct { background: transparent }
+		}
+	}
+
+	> .notification__message {
+		color: $primary-lighter2-text-color;
+		font-size: 13px;
+		padding: 8px 0;
+
+		.notification__display-name {
+			&:hover { color: inherit }
+		}
+
+		.notification__favourite-icon-wrapper {
+			.star-icon { color: $icon-active-color }
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/profile.scss

@@ -0,0 +1,232 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.public-layout {
+	a.button {
+		@include button-shadow;
+
+		color: $primary-text-color;
+		background: $base-lighter1-color;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background: darken($base-lighter1-color, 8%);
+		}
+	}
+
+	.logo-button {
+		svg path {
+			/* Only for Itabashi-don */
+			&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
+			&#Mastodon { fill: $base-lighter1-color !important }
+		}
+	}
+
+	.public-account-header {
+		@include status-shadow;
+
+		&__image {
+			background: $base-lighter1-color;
+
+			@media screen and (min-width: 600px) { height: 500px }
+
+			&::after {
+				content: "";
+				
+				position: absolute;
+				top: auto;
+				left: 0;
+				bottom: 0;
+
+				width: 100%;
+				height: 30%;
+				background: $account-header-image-shadow-color;
+				box-shadow: none;
+			}
+
+			> img:not([src]),
+			> img[src="/headers/original/missing.png"] {
+				content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
+			}
+		}
+
+		&__bar {
+			@media screen and (max-width: 600px) {
+				flex-direction: column;
+				background: $base-color;
+			}
+			
+			@media screen and (min-width: 600px) { margin-top: -140px }
+
+			&::before { background: $base-lighter1-color }
+
+			.avatar {
+				@media screen and (max-width: 600px) {
+					position: relative;
+					bottom: 30px;
+
+					display: initial;
+					width: 60px;
+					height: 60px;
+					margin: 0 auto;
+					padding: 0;
+				}
+
+				img {
+					border: 2px solid $base-lighter1-color;
+					border-radius: 50%;
+					background: transparent;
+				}
+			}
+		}
+
+		&__tabs {
+			@media screen and (max-width: 600px) {
+				flex-wrap: wrap;
+				margin-left: 0;
+
+				&__name {
+					width: 100%;
+					text-align: center;
+
+					h1 {
+						color: $primary-text-color;
+
+						small { color: $primary-lighter1-text-color }
+					}
+				}
+
+				&__tabs {
+					justify-content: center;
+					flex: auto;
+
+					.spacer { display: none }
+
+					a.button.logo-button {
+						color: $light-text-color;
+						background: $secondary-text-color;
+
+						svg path {
+							/* Only for Itabashi-don */
+							&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
+							&#Mastodon { fill: $secondary-text-color !important }
+						}
+					}
+				}
+			}
+
+			.details-counters {
+				.counter {
+					color: $light-text-color;
+					border-right: 0;
+
+					&::after { border-bottom-color: $base-color }
+
+					&.active {
+						&::after { border-bottom-color: $active-color }
+					}
+				}
+			}
+		}
+
+		&__extra {
+			.public-account-bio {
+				.account__header__content { text-align: center }
+			}
+
+			&__links {
+				color: $primary-text-color;
+
+				a {
+					&, strong { color: $primary-text-color }
+				}
+			}
+		}
+	}
+
+	.public-account-bio,
+	.endorsements-widget,
+	.hero-widget { @include status-shadow; }
+
+	.public-account-bio {
+		background: $base-lighter1-color;
+		
+		.account__header__content { color: $primary-text-color }
+		&__extra { color: $primary-lighter1-text-color }
+	}
+
+	.endorsements-widget {
+		padding-bottom: 0;
+		border-radius: 4px;
+
+		h4 {
+			color: $primary-lighter1-text-color;
+			background: $base-lighter1-color;
+		}
+	}
+
+	.hero-widget {
+		&__img { background: $base-color }
+		&__text {
+			background: $base-lighter1-color;
+
+			&, em { color: $primary-lighter2-text-color }
+			a { color: $secondary-text-color }
+		}
+	}
+
+	.account__section-headline {
+		background: $base-lighter1-color;
+		border-bottom-color: $base-separation-color;
+
+		a {
+			color: $primary-lighter1-text-color;
+
+			&.active {
+				color: $primary-lighter2-text-color;
+
+				&::before { border-color: transparent transparent $base-separation-color }
+				&::after { border-color: transparent transparent $status-color }
+			}
+		}
+	}
+
+	.activity-stream {
+		box-shadow: none;
+
+		.entry {
+			margin: 1em 0;
+			background: transparent;
+
+			&:first-of-type { margin: 0 }
+		}
+	}
+
+	.nothing-here {
+		@include status-shadow;
+
+		color: $primary-lighter1-text-color;
+		background: $base-lighter1-color;
+	}
+
+	.footer {
+		h4 { color: $primary-lighter1-text-color }
+
+		ul {
+			a { color: $primary-lighter2-text-color }
+		}
+
+		.brand {
+			svg path {
+				/* Only for Itabashi-don */
+				&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
+				&#Mastodon { fill: $base-lighter1-color !important }
+			}
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/searches.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.search {
+	.search {
+		&__input {
+			@include material-border;
+
+			color: $primary-text-color;
+			background: $form-color;
+	
+			&:focus { background: $form-focused-color }
+		}
+	
+		&__icon {
+			.fa { color: $icon-color }
+		}
+	}
+
+	&-results {
+		> .search-results {
+			&__header { background: $base-color }
+			&__section {
+				> h5 { background: darken($base-color, 10%) }
+			}
+		}
+	}
+}
+
+.trends__item {
+	background: $trend-color;
+
+	.trends__item {
+		&__name a { color: $secondary-text-color }
+		&__current { color: lighten($secondary-text-color, 10%) }
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-account.scss

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.edit_account {
+	@media screen and (min-width: 415px) {
+		.card {
+			> a {
+				position: relative;
+
+				.card__img {
+					border-bottom: 1px solid $base-separation-color;
+
+					> img:not([src]),
+					> img[src="/headers/original/missing.png"] {
+						content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
+					}
+				}
+				
+				.card__bar {
+					position: static;
+					padding-top: 30%;
+			
+					.avatar {
+						position: absolute;
+						left: 0;
+						bottom: 0;
+
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 100%;
+						height: 100%;
+
+						img {
+							width: 128px;
+							height: 128px;
+
+							border-radius: 50%;
+						}
+					}
+			
+					.display-name {
+						flex: auto;
+						margin-left: 0;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-dashboard.scss

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.dashboard {
+	&__counters {
+		& > div {
+			& > div, & > a { background: $dashboard-counters-base-color }
+			
+			& > a {
+				&:hover,
+				&:focus,
+				&:active {
+					background: $dashboard-counters-hover-color;
+				}
+			}
+		}
+
+		&__text,
+		&__num { color: $primary-text-color }
+		
+		&__label { color: $primary-lighter1-text-color }
+	}
+
+	&__widgets {
+		a:not(.name-tag) { color: $primary-lighter2-text-color }
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-directory_tag.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.admin-wrapper {
+	.content {
+		.directory__tag {
+			& > a,
+			& > div { background: $setting-base-color }
+
+			h4 {
+				& { color: $primary-lighter2-text-color }
+				.fa, small { color: $primary-lighter1-text-color }
+			}
+
+			.trends__item__current { color: $primary-text-color }
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-log.scss

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.log-entry {
+	.log-entry {
+		&__header {
+			color: $primary-lighter2-text-color;
+			background: $log-entry-color;
+
+			.username,
+			.target,
+			a { color: $secondary-text-color }
+		}
+
+		&__timestamp { color: $primary-lighter1-text-color }
+		&__icon { color: $icon-color }
+
+		&__extras {
+			color: $primary-text-color;
+			background: $log-entry-extra-color;
+
+			.diff-neutral { color: $log-entry-extra--neutral-color }
+			.diff-old { color: $log-entry-extra--old-color }
+			.diff-new { color: $log-entry-extra--new-color }
+		}
+	}
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings-report.scss

@@ -0,0 +1,75 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.report-card {
+	background: $setting-content-base-color;
+
+	&__profile__stats {
+		color: $primary-lighter2-text-color;
+
+		a {
+			&:focus,
+			&:hover,
+			&:active {
+				color: lighten($primary-lighter2-text-color, 8%);
+			}
+		}
+	}
+
+	&__summary {
+		&__item {
+			border-top-color: $base-separation-color;
+
+			&:hover { background: $column-header-hover-color }
+
+			&__reported-by,
+			&__assigned {
+				color: $primary-lighter2-text-color;
+			}
+
+			&__content {
+				&__icon { color: $icon-color }
+				a { color: $primary-lighter2-text-color }
+			}
+		}
+	}
+}
+
+.batch-table {
+	&__toolbar {
+		background: $base-lighter1-color;
+		border-color: $base-separation-color;
+	}
+
+	&__row {
+		&, &:nth-child(2n) { background: $base-lighter1-color }
+		&:hover, &:nth-child(2n):hover { background: $column-header-hover-color }
+
+		border-color: $base-separation-color;
+
+		&__content {
+			.status__content { color: $primary-text-color }
+			.detailed-status__meta { color: $primary-lighter1-text-color }
+
+
+			.accounts-table { // v2.8.0 ->
+				.accounts-table {
+					&__count {
+						& {color: $primary-text-color }
+						small { color: $primary-lighter1-text-color }
+					}
+				}
+
+				td .account { background: inherit }
+			}
+		}
+	}
+}
+
+.speech-bubble {
+	&__bubble { color: $primary-text-color }
+	a { color: $secondary-text-color }
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/settings.scss

@@ -0,0 +1,245 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+@import 'settings-account';
+@import 'settings-report';
+@import 'settings-log';
+@import 'settings-dashboard';
+@import 'settings-directory_tag';
+
+
+
+body.admin {
+	color: $primary-text-color;
+	background: $setting-base-color;
+	
+	.sidebar {
+		&-wrapper { background: inherit }
+
+		ul {
+			border-radius: 0;
+
+			a {
+				color: $primary-lighter2-text-color;
+				border-radius: 0;
+
+				&:hover {
+					color: $primary-text-color;
+					background: $setting-lists-hover-color;
+				}
+
+				&.selected {
+					color: $primary-text-color;
+					background: $setting-lists-selected-color;
+				}
+
+				i.fa {
+					@include material-icon-large;
+					margin-right: 8px;
+					vertical-align: bottom;
+				}
+			}
+
+			ul { background: darken($setting-base-color, 4%) }
+
+			.simple-navigation-active-leaf a {
+				color: $icon-active-color;
+				background: initial;
+
+				&:hover { background: $setting-lists-hover-color }
+			}
+		}
+	}
+
+	.content {
+		@include column-shadow;
+		background: $setting-content-base-color;
+
+		h2, h3, h4, h6 { color: $primary-text-color }
+
+		p {
+			color: $primary-text-color;
+			strong { color: $primary-text-color }
+		}
+
+		h2, h4, hr { border-bottom-color: $base-separation-color }
+		.muted-hint { color: $primary-lighter1-text-color }
+	}
+}
+
+.simple_form {
+	.input {
+		&.boolean,
+		&.with_label,
+		&.with_floating_label {
+			.label_input > label { color: $primary-text-color }
+		}
+
+		&.with_block_label {
+			& > label { color: $primary-text-color }
+		}
+
+		&.radio_buttons{
+			.radio label { color: $primary-text-color }
+		}
+
+		&-copy {
+			background: $base-color;
+			border-color: $base-separation-color;
+		}
+	}
+
+	.check_boxes {
+		.checkbox {
+			label { color: $primary-text-color }
+		}
+	}
+
+	input[type=text],
+	input[type=number],
+	input[type=email],
+	input[type=password],
+	textarea {
+		color: $primary-text-color;
+		background: $setting-content-base-color;
+		border-color: $base-separation-color;
+
+		&:hover {
+			border-color: $base-separation-color;
+		}
+
+		&:active,
+		&:focus {
+			background: darken($setting-content-base-color, 8%);
+		}
+	}
+
+	select {
+		color: $primary-text-color;
+		background-color: $setting-content-base-color;
+		border-color: $base-separation-color;
+	}
+
+	.input.field_with_errors {
+		label,
+		.error {
+			color: $error-text-color;
+		}
+	}
+
+	.hint, p.hint {
+		color: $primary-lighter1-text-color !important;
+
+		code {
+			color: $light-text-color;
+			background: $setting-emphasis-color;
+		}
+	}
+
+	.recommended {
+		color: $verified-color;
+		background-color: transparentize($verified-color, 0.75);
+		border-color: $verified-color;
+	}
+
+	.label_input {
+		&__append { color: $primary-lighter1-text-color }
+	}
+
+	button {
+		@include button-shadow;
+		background-color: $active-button-color;
+	}
+}
+
+.simple_form,
+.table-form {
+	.warning { background: change-color($color: $error-color, $alpha: 0.8) }
+}
+
+.quick-nav {
+	a {
+		color: $secondary-text-color;
+
+		&:hover,
+		&:focus,
+		&:active {
+			color: lighten($secondary-text-color, 8%);
+		}
+	}
+}
+
+.pagination {
+	.page,
+	a {
+		color: $primary-text-color;
+	}
+
+	.page {
+		&.current {
+			background: $icon-active-color;
+			color: $light-text-color;
+		}
+	}
+}
+
+.filters {
+	.filter-subset {
+		strong { color: $primary-text-color }
+
+		a {
+			color: $primary-lighter2-text-color;
+
+			&:hover { color: $primary-text-color }
+
+			&.selected {
+				color: $active-text-color;
+				border-bottom-color: $active-text-color;
+			}
+		}
+	}
+}
+
+.new_form_two_factor_confirmation {
+	.qr-wrapper {
+		.qr-code { box-shadow: none }
+		.qr-alternative { color: $secondary-lighter1-text-color }
+	}
+}
+
+label,
+select#user_setting_default_privacy {
+	&[for=user_setting_default_privacy_public],
+	&[for=user_setting_default_privacy_unlisted],
+	option[value="public"],
+	option[value="unlisted"] { color: $active-text-color !important }
+}
+
+.column-header__collapsible__extra {
+	.column-settings__section { color: $primary-text-color }
+
+	.setting-toggle {
+		.react-toggle {
+			&.react-toggle--checked {
+				> .react-toggle-track { background: $setting-toggle-checked-color }
+
+				> .react-toggle-thumb {
+					border-color: $setting-toggle-checked-color;
+					background-color: $setting-toggle-thumb-checked-color;
+				}
+			}
+
+			> .react-toggle-track { background: $setting-toggle-color }
+
+			> .react-toggle-thumb {
+				border-color: $setting-toggle-color;
+				background-color: $setting-toggle-thumb-color;
+			}
+		}
+
+		.setting-toggle__label { color: $primary-text-color }
+	}
+
+	.setting-meta__label { color: $primary-lighter1-text-color }
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/statuses.scss

@@ -0,0 +1,123 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.status {
+	@include status-shadow;
+	@include material-card-radius;
+	border-bottom: 0;
+
+	transition: box-shadow 0.1s 0s ease-out;
+
+	&.light {
+		.status {
+			&__relative-time { color: $primary-lighter1-text-color }
+			&__display-name {
+				color: $primary-text-color;
+
+				.display-name__account { color: $primary-lighter1-text-color }
+			}
+
+			&__content { color: $primary-text-color }
+		}
+
+		.display-name strong { color: $primary-text-color }
+	}
+
+	&.status-direct {
+		background: $status-direct-color;
+
+		&:not(.read) {
+			background: inherit;
+			border-bottom-color: initial;
+		}
+	}
+
+	&.muted {
+		.status__content {
+			p { color: lighten($primary-text-color, 20%) }
+		}
+	}
+
+	.status {
+		&__info {
+			.status__display-name {
+				color: $primary-lighter1-text-color;
+	
+				strong { color: $primary-text-color }
+			}
+	
+			.status__relative-time { color: $primary-lighter1-text-color }
+		}
+	}
+
+	&__action-bar__counter__label { color: $primary-lighter1-text-color }
+}
+
+.detailed-status {
+	&__display-name {
+		color: $secondary-text-color;
+
+		strong { color: $primary-text-color }
+	}
+
+	&__meta {
+		.detailed-status__datetime { color: $primary-lighter1-text-color }
+
+		.detailed-status__link {
+			.fa.fa-star { vertical-align: middle }
+		}
+	}
+	
+	&__wrapper {
+		@include status-shadow;
+		
+		.detailed-status { @extend .detailed-status; }
+		.detailed-status__action-bar {
+			background: $status-actionbar-color;
+			border-color: $base-separation-color;
+		}
+	}
+}
+
+.status,
+.detailed-status {
+	background: $status-color;
+
+	.status__content {
+		color: $primary-text-color;
+
+		a { color: $secondary-text-color }
+
+		.status__content__spoiler-link {
+			color: $primary-text-color;
+			background: $base-color;
+		}
+	}
+}
+
+a.status-card,
+a.status-card.compact {
+	&:hover { background: initial }
+}
+
+.status-card,
+.status-card.compact {
+	border-color: $non-elevated-card-boader;
+
+	&__title {
+		color : $primary-text-color;
+	}
+
+	&__host {
+		color: $primary-lighter1-text-color;
+	}
+}
+
+.name-tag,
+a.name-tag {
+	color: $secondary-text-color;
+}

app/javascript/styles/dark-gplus-theme-for-mastodon-dev/tables.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.table {
+	thead th { border-bottom-color: $base-separation-color }
+	
+	th,
+	td {
+		color: $primary-text-color;
+		background-color: $base-color;
+		border-top: 0;
+	}
+
+	& > tbody > tr:nth-child(odd) {
+		& > td, & > th { background: darken($base-color, 4%) }
+	}
+
+	a { color: $secondary-text-color }
+}
+
+a.table-action-link,
+button.table-action-link {
+	color: $secondary-text-color;
+
+	&:hover { color: darken($secondary-text-color, 8%) }
+}

app/javascript/styles/gplus-theme-for-mastodon-dev.scss

@@ -0,0 +1,24 @@
+/**
+ * Google+ Theme for Mastodon v1.1
+ * Copyright (C) 2018-2019 Genbu Project
+ */
+
+ @charset "UTF-8";
+
+ // @import 'application';
+ @import 'application';
+ @import 'gplus-theme-for-mastodon-dev/basics';
+ @import 'gplus-theme-for-mastodon-dev/components';
+ @import 'gplus-theme-for-mastodon-dev/emoji-picker';
+ @import 'gplus-theme-for-mastodon-dev/tables';
+ @import 'gplus-theme-for-mastodon-dev/columns';
+ @import 'gplus-theme-for-mastodon-dev/lists';
+ @import 'gplus-theme-for-mastodon-dev/accounts';
+ @import 'gplus-theme-for-mastodon-dev/statuses';
+ @import 'gplus-theme-for-mastodon-dev/notifications';
+ @import 'gplus-theme-for-mastodon-dev/searches';
+ @import 'gplus-theme-for-mastodon-dev/settings';
+ @import 'gplus-theme-for-mastodon-dev/icons';
+ @import 'gplus-theme-for-mastodon-dev/profile';
+ @import 'gplus-theme-for-mastodon-dev/about';
+ @import 'gplus-theme-for-mastodon-dev/explore';

app/javascript/styles/gplus-theme-for-mastodon-dev/_functions.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+
+
+@function adjust-lightness ($color, $lightness) {
+	@if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) {
+		@return lighten($color, $lightness);
+	}
+
+	@if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) {
+		@return darken($color, $lightness);
+	}
+
+	@return change-color($color, $lightness: $lightness);
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/_mixins.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
+@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
+@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
+@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
+@mixin material-border { border-radius: 4px }
+@mixin material-card-radius { border-radius: 2px }
+@mixin material-icon-large { font-size: 20px }

app/javascript/styles/gplus-theme-for-mastodon-dev/_variables.scss

@@ -0,0 +1,99 @@
+@charset "UTF-8";
+
+
+
+// Base colors
+$active-color: #db4437;
+$accent-color: #fbbc04;
+$valid-color: #4285f4;
+$error-color: #d50000;
+$checked-color: #4285f4;
+$verified-color: #4caf50;
+
+
+// Text colors
+$primary-text-color: rgba(0, 0, 0, 0.87);
+$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
+$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
+$secondary-text-color: #2962ff; // ex: リンク
+$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
+$light-text-color: #ffffff;
+$light-darker1-text-color: darken($light-text-color, 15%);
+$active-text-color: $active-color;
+$error-text-color: $error-color;
+
+
+// Icon colors
+$icon-color: #757575;
+$icon-active-color: $active-color;
+
+
+// Background colors
+$base-color: #f1f1f1;
+$base-lighter1-color: #ffffff;
+$base-darker1-color: rgba(0, 0, 0, 0.4);
+
+$column-header-color: $base-lighter1-color;
+$column-header-hover-color: darken($column-header-color, 10%);
+
+$status-color: $base-lighter1-color;
+$status-direct-color: darken($status-color, 5%);
+$status-actionbar-color: darken($status-color, 2%);
+
+$account-color: $base-lighter1-color;
+$account-foreground-color: $base-darker1-color;
+
+$card-color: $base-lighter1-color;
+$card-hover-color: $column-header-hover-color;
+$card-image-color: $base-color;
+$warning-card-color: #26a69a;
+
+$form-color: rgba(0, 0, 0, 0.1);
+$form-focused-color: lighten($form-color, 20%);
+$trend-color: $base-lighter1-color;
+
+$setting-base-color: $base-color;
+$setting-lists-selected-color: darken($base-color, 2%);
+$setting-lists-hover-color: darken($base-color, 5%);
+$setting-content-base-color: $base-lighter1-color;
+
+$setting-toggle-color: #b9b9b9;
+$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
+$setting-toggle-thumb-color: #fafafa;
+$setting-toggle-thumb-checked-color: $checked-color;
+
+$setting-emphasis-color: $verified-color;
+
+$dashboard-counters-base-color: $base-color;
+$dashboard-counters-hover-color: lighten($base-color, 2%);
+
+$log-entry-color: $base-lighter1-color;
+$log-entry-extra-color: $base-color;
+$log-entry-extra--neutral-color: $valid-color;
+$log-entry-extra--old-color: $active-color;
+$log-entry-extra--new-color: $verified-color;
+
+$explore-header-color: lighten($accent-color, 16%);
+$explore-directory-color: $base-lighter1-color;
+
+$active-button-color: $valid-color; //文字入りボタン
+$non-active-button-color: lighten($base-color, 20%);
+
+$floating-acton-button-hover-color: lighten($active-color, 10%);
+
+
+// Shadow colors
+$column-header-shadow-color: rgba(0, 0, 0, 0.3);
+$status-shadow-color: rgba(0, 0, 0, 0.14);
+$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
+$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
+$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
+$button-shadow-color: rgba(0, 0, 0, 0.4);
+
+
+// Separation colors
+$base-separation-color: rgba(0, 0, 0, 0.14);
+
+
+//Border colors
+$non-elevated-card-boader : #e0e0e0;

app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss

@@ -0,0 +1,138 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+// from mastodon/about.scss
+$column-breakpoint: 700px;
+
+
+
+.landing-page {
+	h3, h4, h5, h6 { color: $primary-lighter2-text-color }
+	p { color: $primary-lighter1-text-color }
+	em { color: $primary-text-color }
+
+	.column-0 { background: $base-darker1-color }
+	.column-2 {
+		.landing-page {
+			&__information { padding: 0 }
+
+			&__short-description {
+				& > .row:first-child {
+					background: $base-darker1-color;
+					padding: 10px 20px;
+				}
+
+				& > * {
+					padding-left: 40px; padding-right: 40px;
+					&:last-child { padding-bottom: 45px }
+
+					@media screen and (max-width: $column-breakpoint) {
+						padding-left: 20px; padding-right: 20px;
+						&:last-child { padding-bottom: 25px }
+					}
+				}
+			}
+		}
+	}
+
+	&__forms,
+	&__information,
+	&__call-to-action {
+		@include status-shadow;
+		background: $column-header-color;
+	}
+
+	&__forms {
+		padding: 0;
+
+		& > *:first-child { margin: inherit }
+		& > * { margin-left: 20px; margin-right: 20px; }
+
+		.brand { background: $base-darker1-color }
+
+		form {
+			& > .input input {
+				background: $form-color;
+
+				&:focus { background: $form-focused-color }
+			}
+		}
+
+		.separator-or {
+			margin-left: 20px; margin-right: 20px;
+			
+			span {
+				color: $primary-lighter1-text-color;
+				background: $column-header-color;
+			}
+		}
+
+		@media screen and (max-width: $column-breakpoint) {
+			background: inherit;
+			box-shadow: none;
+
+			.separator-or span { background: $base-color }
+		}
+	}
+
+	&__information {
+		color: $primary-lighter1-text-color;
+
+		&.contact-widget {
+			@include status-shadow;
+			background: $column-header-color;
+
+			.contact-widget {
+				&__mail {
+					a { color: $primary-text-color }
+				}
+			}
+		}
+
+		strong { color: inherit }
+
+		.row:first-child {
+			h1 small {
+				color: $light-darker1-text-color;
+
+				span { color: $light-text-color }
+			}
+		}
+	}
+
+	&__call-to-action {
+		.row__information-board {
+			.information-board__section {
+				color: $primary-lighter2-text-color;
+
+				& > span:last-child { color: $primary-lighter1-text-color }
+			}
+		}
+	}
+
+	&__features {
+		.features-list {
+			.features-list__row {
+				.text { color: $primary-lighter1-text-color }
+				.visual .fa { color: $icon-color }
+			}
+		}
+	}
+
+	&__footer { color: $primary-lighter1-text-color }
+
+	#mastodon-timeline {
+		color: $primary-text-color;
+		background: transparent;
+
+		p {
+			color: $primary-text-color;
+
+			a { color: $secondary-text-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss

@@ -0,0 +1,194 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.account {
+	background: $account-color;
+	border-color: $base-separation-color;
+
+	.account {
+		&__display-name {
+			color: $secondary-text-color;
+			strong { color: $primary-text-color }
+		}
+	}
+
+	&-role {
+		color: $primary-lighter2-text-color;
+		background-color: rgba($base-separation-color, 0.1);
+		border-color: rgba($base-separation-color, 0.5);
+	}
+}
+
+.column {
+	> .column-back-button {
+		@include column-shadow;
+		background: $column-header-color;
+	}
+}
+
+.account-timeline__header {
+	.account__header {
+		background-color: $account-foreground-color;
+
+		> div { background-color: inherit } // -> v2.7.4
+
+		.account__header {
+			&__username { color: $secondary-lighter1-text-color }
+			&__fields { @extend .account__header__fields; }
+
+			&__image { // v2.8.0 ->
+				&::after {
+					content: "";
+
+					position: absolute;
+					top: auto;
+					left: 0;
+					bottom: 0;
+	
+					width: 100%;
+					height: 30%;
+					background: $account-header-image-shadow-color;
+					box-shadow: none;
+				}
+
+				> img:not([src]),
+				> img[src$="/headers/original/missing.png"] {
+					content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
+				}
+			}
+
+			&__bar { // v2.8.0 ->
+				background-color: $base-lighter1-color;
+
+				.account__header {
+					&__tabs {
+						.avatar {
+							.account__avatar {
+								border-color: $base-lighter1-color;
+								border-radius: 50%;
+							}
+						}
+
+						&__buttons {
+							.icon-button { 
+								border: 0;
+								border-radius: 50%;
+							}
+						}
+
+						&__name {
+							h1 { color: $primary-text-color }
+							small { color: $secondary-text-color }
+						}
+					}
+
+					&__bio {
+						.account__header {
+							&__content { color: $primary-text-color }
+							&__fields { border-color: $base-separation-color }
+						}
+					}
+
+					&__extra {
+						&__links {
+							&, a { color: $primary-lighter1-text-color }
+							strong { color: $primary-lighter2-text-color }
+						}
+					}
+				}
+			}
+		}
+
+		.account--action-button {
+			.icon-button:not(.active) {
+				color: darken($light-text-color, 7%);
+
+				&:active,
+				&:focus,
+				&:hover {
+					color: $light-text-color;
+				}
+			}
+		}
+	}
+
+	.account {
+		&__disclaimer,
+		&__action-bar,
+		&__section-headline {
+			background: $base-lighter1-color;
+			border-color: $base-separation-color;
+		}
+
+		&__action-bar {
+			&__tab {
+				border-color: $base-separation-color;
+				&.active { border-bottom-color: $active-color }
+	
+				> span { color: $primary-lighter1-text-color }
+			}
+		}
+	
+		&__section-headline {
+			a {
+				color: $primary-text-color;
+	
+				&.active {
+					color: $active-color;
+	
+					&::before { border-color: transparent transparent $base-separation-color }
+					&::after { border-color: transparent transparent $status-color }
+				}
+			}
+		}
+	}
+}
+
+.account-authorize__wrapper {
+	@include status-shadow;
+	background: $base-lighter1-color;
+
+	&:focus { @include status-focus-shadow; }
+
+	.account {
+		&__header__content {
+			color: $primary-lighter2-text-color;
+		}
+	
+		&--panel {
+			background: $account-color;
+			border-color: $base-separation-color;
+		}
+	}
+}
+
+.account__header__fields {
+	dl {
+		border-color: $base-separation-color;
+		
+		dt,
+		dd {
+			color: $primary-text-color;
+			background: $base-lighter1-color;
+		}
+
+		dd {
+			&.verified {
+				border-color: transparentize($valid-color, 0.5);
+				background: transparentize($valid-color, 0.75);
+
+				a { color: lighten($verified-color, 20%) }
+			}
+		}
+	}
+
+	a { color: $secondary-text-color }
+}
+
+.account__action-bar__tab {
+	strong { color: $primary-text-color }
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/basics.scss

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+body {
+	&,
+	.ui {
+		color: $primary-text-color;
+		background: $base-color;
+	}
+}
+
+.focusable {
+	&:focus {
+		background: inherit;
+
+		.status {
+			@include status-focus-shadow;
+
+			&.status-direct { background: $status-direct-color }
+		}
+
+		.detailed-status {
+			& { background: $status-color }
+			&__action-bar { background: $status-actionbar-color }
+		}
+	}
+}
+
+::-webkit-scrollbar-thumb {
+	background: darken($base-lighter1-color, 12%);
+
+	&:hover { background: darken($base-lighter1-color, 16%) }
+	&:active { background: darken($base-lighter1-color, 12%) }
+}
+
+::-webkit-scrollbar-track {
+	background: $base-color;
+
+	&:hover,
+	&:active {
+		background: darken($base-lighter1-color, 8%);
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss

@@ -0,0 +1,335 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.tabs-bar {
+	margin: 0;
+	background: $column-header-color;
+	position: relative;
+
+	.tabs-bar {
+		&__link {
+			color: $icon-color;
+			border-bottom: 4px solid $column-header-color;
+			padding: 15px 10px 11px 10px;
+			
+			&.active {
+				border-bottom: 4px solid $active-color;
+			}
+
+			.fa {
+				@include material-icon-large;
+				vertical-align: top;
+			}
+		}
+	}
+}
+
+.drawer {
+	.drawer {
+		&__header {
+			@include column-shadow;
+			background: $column-header-color;
+	
+			.drawer__tab {
+				@include material-icon-large;
+				color: $icon-color;
+			}
+	
+			a {
+				&:hover { background: $column-header-hover-color }
+			}
+		}
+	
+		&__pager {
+			@include status-shadow;
+			@include material-card-radius;
+			
+			.drawer__inner {
+				background: $column-header-color;
+		
+				&__mastodon { display: none }
+			}
+		}
+	}
+}
+
+.navigation-bar {
+	color: $secondary-text-color;
+	background: $column-header-color;
+
+	.navigation-bar {
+		&__profile {
+			strong { color: $primary-text-color }
+			&-edit { color: $secondary-text-color }
+		}
+	}
+}
+
+
+.compose-form {
+	.compose-form {
+		&__buttons-wrapper {
+			background: $column-header-color;
+
+			&.character-counter__wrapper {
+				.character-counter { color: $primary-lighter1-text-color }
+			}
+		}
+
+		&__warning {
+			background-color: $warning-card-color;
+		}
+
+		&__publish { border-top: 1px solid $base-separation-color }
+		&__modifiers { background-color: $base-lighter1-color }
+	}
+
+	.autosuggest-textarea__textarea {
+		background-color: $base-lighter1-color;
+		color: $primary-text-color;
+	}
+
+	.character-counter {
+		color: $icon-color
+	}
+}
+
+.column {
+	.column-header {
+		@include column-shadow;
+		background: $column-header-color;
+
+		&.active {
+			.column-header__icon {
+				color: $icon-active-color;
+				text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
+			}
+		}
+
+		* { background: inherit }
+
+		&__icon {
+			@include material-icon-large;
+			color: $icon-color;
+			vertical-align: bottom;
+			margin-right: 10px;
+		}
+
+		&__buttons {
+			height: 50px;
+
+			.column-header {
+				&__back-button {
+					.column-back-button__icon { vertical-align: bottom }
+				}
+
+				&__button {
+					&.active {
+						color: $icon-active-color;
+						background: inherit;
+					}
+		
+					.fa { vertical-align: unset }
+				}
+			}
+		}
+
+		&__button {
+			color: $icon-color;
+			padding: 0 16px;
+		}
+
+		&__collapsible {
+			color: $secondary-text-color;
+			border-bottom: 1px solid $base-separation-color;
+
+			&-inner { background: $column-header-color }
+		}
+	}
+
+	.column-back-button {
+		background-color: $column-header-color;
+		color: $secondary-text-color;
+
+		&__icon {
+			@include material-icon-large;
+			vertical-align: bottom;
+			margin-right: 8px;
+		}
+	}
+
+	.column {
+		&-subheading,
+		&-link__badge {
+			background: $base-color;
+			color: $secondary-text-color;
+		}
+	
+		&-link {
+			color: $primary-text-color;
+			background: $base-color;
+	
+			&__icon {
+				@include material-icon-large;
+				color: $icon-color;
+				vertical-align: bottom;
+				margin-right: 8px;
+			}
+		}
+	}
+
+	.scrollable {
+		background: transparent;
+
+		*[role="feed"] {
+			article {
+				margin: 1em 0;
+				&:first-of-type { margin: 0 }
+
+				&:focus { outline: none }
+			}
+		}
+
+		div[tabindex="-1"] { margin-bottom: 1em }
+	}
+
+	.notification__filter-bar {
+		background: $column-header-color;
+		border-bottom-color: $base-separation-color;
+
+		button {
+			color: $icon-color;
+			background: $column-header-color;
+
+			&.active {
+				color: $icon-active-color;
+
+				&::before { border-color: transparent transparent $base-separation-color }
+				&::after { border-color: transparent transparent $column-header-color }
+			}
+		}
+	}
+
+	.empty-column-indicator {
+		flex-direction: column;
+		background: $base-color;
+
+		&::before {
+			content: "";
+			display: block;
+
+			width: 100px;
+			height: 100px;
+			margin-bottom: 1em;
+
+			background: none center / contain no-repeat;
+			background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
+		}
+	}
+}
+
+// v2.9.0以降に対応
+.column-header {
+	@include column-shadow;
+	background: $column-header-color;
+
+	&.active {
+		.column-header__icon {
+			color: $icon-active-color;
+			text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
+		}
+	}
+
+	* { background: inherit }
+
+	&__icon {
+		@include material-icon-large;
+		color: $icon-color;
+		vertical-align: bottom;
+		margin-right: 10px;
+	}
+
+	&__buttons {
+		height: 50px;
+
+		.column-header {
+			&__back-button {
+				.column-back-button__icon { vertical-align: bottom }
+			}
+
+			&__button {
+				&.active {
+					color: $icon-active-color;
+					background: inherit;
+				}
+	
+				.fa { vertical-align: unset }
+			}
+		}
+	}
+
+	&__button {
+		color: $icon-color;
+		padding: 0 16px;
+	}
+
+	&__collapsible {
+		color: $secondary-text-color;
+		border-bottom: 1px solid $base-separation-color;
+
+		&-inner { background: $column-header-color }
+	}
+}
+.column-back-button {
+	background-color: $column-header-color;
+	color: $secondary-text-color;
+
+	&__icon {
+		@include material-icon-large;
+		vertical-align: bottom;
+		margin-right: 8px;
+	}
+}
+
+.getting-started {
+	&__wrapper,
+	& {
+		background: $base-color;
+	}
+
+	& {
+		border-top: 1px solid $base-separation-color;
+
+		a { color: $primary-text-color }
+	}
+}
+
+.load {
+	&-more,
+	&-gap {
+		background: transparent;
+
+		&:hover { background: darken($column-header-color, 10%) }
+	}
+
+	&-gap { border: 0 }
+}
+
+.confirmation-modal {
+	@include material-card-radius;
+	color: $primary-text-color;
+	background-color: $base-lighter1-color;
+
+	&__action-bar {
+		background-color: $base-lighter1-color;
+	}
+
+	&__cancel-button {
+		color: $primary-lighter1-text-color;
+		box-shadow: 0 2px 5px 0 transparent;
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/components-button.scss

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.floating-action-button {
+	font-size: 24px;
+	background-color: $active-color;
+	width: 3.6rem;
+	height: 3.6rem;
+
+	&:active {
+		background-color: $active-color;
+	}
+
+	&:hover {
+		background-color: $floating-acton-button-hover-color;
+	}
+}
+
+.button {
+	@include button-shadow;
+	@include material-card-radius;
+	background-color: $active-button-color;
+
+	.text-icon-button {
+		color: $primary-lighter1-text-color;
+		border-radius: 50%;
+	}
+
+	.button--block { @include button-shadow }
+
+	.button-secondary {
+		background-color: $primary-lighter1-text-color;
+		border: 0px;
+	}
+}
+
+.modal-root {
+	&__modal {
+		.media-modal {
+			&__close.icon-button {
+				font-size: 40px;
+				width: 40px;
+				height: 40px;
+
+				&:hover {
+					background-color: darken($base-lighter1-color, 40%);
+				}
+			}
+		}
+	}
+}
+
+// DOM操作によりpaddingが調整できないもの
+.privacy-dropdown__value-icon.icon-button.inverted,
+.compose-form__poll-button-icon.icon-button.inverted,
+.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }

app/javascript/styles/gplus-theme-for-mastodon-dev/components-card.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.card {
+	//border: 1px solid $base-separation-color;
+	//不要(?)
+
+	> a {
+		@include status-shadow;
+
+		&:hover,
+		&:focus,
+		&:active {
+			.card__bar {
+				background: initial;
+
+				.display-name strong { color: $secondary-text-color }
+			}
+		}
+
+		.card__img { background: $card-image-color }
+		.card__bar {
+			background: $card-color;
+	
+			.avatar {
+				img { background: transparent }
+			}
+	
+			.display-name {
+				strong { color: $primary-text-color }
+				span { color: $primary-lighter2-text-color }
+			}
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/components-dropdown.scss

@@ -0,0 +1,71 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+.dropdown-menu {
+	background-color: $column-header-color;
+
+		&__arrow {
+			&.top { border-top-color: $column-header-color }
+			&.bottom { border-bottom-color: $column-header-color }
+		}
+
+		&__separator { margin: 4px 0 }
+}
+
+.dropdown-menu,
+.actions-modal {
+	@include material-card-radius;
+
+	& > ul {
+		background: $base-lighter1-color;
+
+		.dropdown-menu {
+			&__item {
+				a {
+					color: $primary-lighter2-text-color;
+
+					padding: 16px 16px;
+					background: $column-header-color;
+
+					&:active,
+					&:focus,
+					&:hover {
+						color: $primary-text-color;
+						background: $column-header-hover-color;
+					}
+				}
+			}
+
+			&__separator { border-bottom-color: $base-separation-color }
+		}
+
+		& > li:not(:empty) {
+			@extend .dropdown-menu__item;
+
+			a {
+				padding: 12px 16px;
+				color: $primary-text-color;
+
+				&:hover {
+					color: $primary-text-color;
+					background-color: $column-header-hover-color;
+				}
+			}
+		}
+	}
+
+	.status {
+		background-color: $base-lighter1-color;
+		padding-top: 16px;
+		padding-bottom: 16px;
+		padding-right: 16px;
+		padding-left: 74px;
+
+		&__avatar {
+			top: 16px;
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/components-status-card.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.status-card {
+	color: $primary-lighter1-text-color;
+	&__title, &__description { color: $primary-lighter2-text-color }
+
+	&__image { background: transparent }
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/components.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@import 'components-button';
+@import 'components-card';
+@import 'components-dropdown';
+@import 'components-status-card';

app/javascript/styles/gplus-theme-for-mastodon-dev/emoji-picker.scss

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.emoji-mart {
+    &-bar {
+        border: 0 solid $base-separation-color;
+
+        &:first-child {
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            background-color: $base-color;
+        }
+    }
+
+    &-anchors {
+        color: $icon-color;
+    }
+    &-anchor {
+        &-selected {
+            color: $icon-active-color;
+
+            &:hover {
+                color: $icon-active-color;
+            }
+        }
+
+        &-bar {
+            background-color: $icon-active-color;
+        }
+    }
+
+    &-search {
+        background-color: $base-lighter1-color;
+    }
+    &-search input {
+        color: $primary-text-color;
+        background-color: $form-color;
+        border: 0px solid #ffffff00;
+    }
+
+    &-category-label span {
+        color: $primary-text-color;
+        background-color: $base-lighter1-color;
+    }
+
+    &-scroll {
+        background-color: $base-lighter1-color;
+    }
+}
+
+.emoji-picker-dropdown {
+    &__modifiers {
+        &__menu {
+            @include status-shadow;
+            @include material-card-radius;
+            background-color: $base-lighter1-color;
+        }
+    }
+
+    &__menu {
+        @include column-shadow;
+        background-color: $base-lighter1-color;
+    }
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/explore.scss

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.public-layout {
+	.page-header {
+		background: $explore-header-color;
+
+		h1 { color: $primary-text-color }
+		p { color: $primary-lighter2-text-color }
+	}
+
+	.directory,
+	.notice-widget { @include column-shadow; }
+
+	.directory {
+		background: $explore-directory-color;
+
+		.accounts-table {
+			&__count {
+				color: $primary-lighter2-text-color;
+				small { color: $primary-lighter1-text-color }
+			}
+		}
+
+		&__tag {
+			& > a {
+				@include status-shadow;
+				background: $explore-directory-color;
+			}
+
+			h4 { color: $primary-lighter2-text-color }
+			.fa, small { color: $primary-lighter1-text-color }
+			.trends__item__current { color: $primary-text-color }
+		}
+	}
+
+	.notice-widget {
+		color: $primary-lighter1-text-color;
+		background: $explore-directory-color;
+
+		a { color: $secondary-text-color }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/keyboard_shortcuts.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.keyboard-shortcuts {
+	kbd {
+		@include status-shadow;
+
+		color: $primary-text-color;
+		background-color: $base-lighter1-color;
+		border-color: $base-darker1-color;
+
+		margin: 0 0.25em;
+
+		&:first-child { margin-left: 0 }
+		&:last-child { margin-right: 0 }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/lists.scss

@@ -0,0 +1,55 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.column {
+	.column-back-button { background: inherit }
+
+	.column-inline-form {
+		background: $column-header-color;
+
+		label input {
+			color: $secondary-text-color;
+			&:focus { color: $primary-text-color }
+		}
+	}
+
+	.column-inline-form ~ .scrollable {
+		article { margin: 0 }
+	}
+}
+
+.modal-root {
+	.column-inline-form {
+		background: $column-header-color;
+		
+		.setting-text {
+			color: $primary-text-color;
+			&:active, &:focus { color: $primary-lighter2-text-color }
+		}
+	}
+
+	.list-editor {
+		background: $base-color;
+		h4 { background: $column-header-color }
+
+		.drawer__pager {
+			.drawer__inner { background: $column-header-color }
+		}
+	}
+
+	.list-adder {
+		background: $base-color;
+
+		.column-inline-form { border-bottom: 1px solid $base-separation-color }
+
+		&__account,
+		&__lists { background: $column-header-color }
+
+		&__lists {
+			.list { border-color: $base-separation-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/notifications.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.notification {
+	&.notification-favourite {
+		.status {
+			&.status-direct { background: transparent }
+		}
+	}
+
+	> .notification__message {
+		color: $primary-lighter2-text-color;
+		font-size: 13px;
+		padding: 8px 0;
+
+		.notification__display-name {
+			&:hover { color: inherit }
+		}
+
+		.notification__favourite-icon-wrapper {
+			.star-icon { color: $icon-active-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss

@@ -0,0 +1,232 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.public-layout {
+	a.button {
+		@include button-shadow;
+
+		color: $primary-text-color;
+		background: $base-lighter1-color;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background: darken($base-lighter1-color, 8%);
+		}
+	}
+
+	.logo-button {
+		svg path {
+			/* Only for Itabashi-don */
+			&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
+			&#Mastodon { fill: $base-lighter1-color !important }
+		}
+	}
+
+	.public-account-header {
+		@include status-shadow;
+
+		&__image {
+			background: $base-lighter1-color;
+
+			@media screen and (min-width: 600px) { height: 500px }
+
+			&::after {
+				content: "";
+				
+				position: absolute;
+				top: auto;
+				left: 0;
+				bottom: 0;
+
+				width: 100%;
+				height: 30%;
+				background: $account-header-image-shadow-color;
+				box-shadow: none;
+			}
+
+			> img:not([src]),
+			> img[src="/headers/original/missing.png"] {
+				content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
+			}
+		}
+
+		&__bar {
+			@media screen and (max-width: 600px) {
+				flex-direction: column;
+				background: $base-color;
+			}
+			
+			@media screen and (min-width: 600px) { margin-top: -140px }
+
+			&::before { background: $base-lighter1-color }
+
+			.avatar {
+				@media screen and (max-width: 600px) {
+					position: relative;
+					bottom: 30px;
+
+					display: initial;
+					width: 60px;
+					height: 60px;
+					margin: 0 auto;
+					padding: 0;
+				}
+
+				img {
+					border: 2px solid $base-lighter1-color;
+					border-radius: 50%;
+					background: transparent;
+				}
+			}
+		}
+
+		&__tabs {
+			@media screen and (max-width: 600px) {
+				flex-wrap: wrap;
+				margin-left: 0;
+
+				&__name {
+					width: 100%;
+					text-align: center;
+
+					h1 {
+						color: $primary-text-color;
+
+						small { color: $primary-lighter1-text-color }
+					}
+				}
+
+				&__tabs {
+					justify-content: center;
+					flex: auto;
+
+					.spacer { display: none }
+
+					a.button.logo-button {
+						color: $light-text-color;
+						background: $secondary-text-color;
+
+						svg path {
+							/* Only for Itabashi-don */
+							&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
+							&#Mastodon { fill: $secondary-text-color !important }
+						}
+					}
+				}
+			}
+
+			.details-counters {
+				.counter {
+					color: $light-text-color;
+					border-right: 0;
+
+					&::after { border-bottom-color: $base-color }
+
+					&.active {
+						&::after { border-bottom-color: $active-color }
+					}
+				}
+			}
+		}
+
+		&__extra {
+			.public-account-bio {
+				.account__header__content { text-align: center }
+			}
+
+			&__links {
+				color: $primary-text-color;
+
+				a {
+					&, strong { color: $primary-text-color }
+				}
+			}
+		}
+	}
+
+	.public-account-bio,
+	.endorsements-widget,
+	.hero-widget { @include status-shadow; }
+
+	.public-account-bio {
+		background: $base-lighter1-color;
+		
+		.account__header__content { color: $primary-text-color }
+		&__extra { color: $primary-lighter1-text-color }
+	}
+
+	.endorsements-widget {
+		padding-bottom: 0;
+		border-radius: 4px;
+
+		h4 {
+			color: $primary-lighter1-text-color;
+			background: $base-lighter1-color;
+		}
+	}
+
+	.hero-widget {
+		&__img { background: $base-color }
+		&__text {
+			background: $base-lighter1-color;
+
+			&, em { color: $primary-lighter2-text-color }
+			a { color: $secondary-text-color }
+		}
+	}
+
+	.account__section-headline {
+		background: $base-lighter1-color;
+		border-bottom-color: $base-separation-color;
+
+		a {
+			color: $primary-lighter1-text-color;
+
+			&.active {
+				color: $primary-lighter2-text-color;
+
+				&::before { border-color: transparent transparent $base-separation-color }
+				&::after { border-color: transparent transparent $status-color }
+			}
+		}
+	}
+
+	.activity-stream {
+		box-shadow: none;
+
+		.entry {
+			margin: 1em 0;
+			background: transparent;
+
+			&:first-of-type { margin: 0 }
+		}
+	}
+
+	.nothing-here {
+		@include status-shadow;
+
+		color: $primary-lighter1-text-color;
+		background: $base-lighter1-color;
+	}
+
+	.footer {
+		h4 { color: $primary-lighter1-text-color }
+
+		ul {
+			a { color: $primary-lighter2-text-color }
+		}
+
+		.brand {
+			svg path {
+				/* Only for Itabashi-don */
+				&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
+				&#Mastodon { fill: $base-lighter1-color !important }
+			}
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/searches.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.search {
+	.search {
+		&__input {
+			@include material-border;
+
+			color: $primary-text-color;
+			background: $form-color;
+	
+			&:focus { background: $form-focused-color }
+		}
+	
+		&__icon {
+			.fa { color: $icon-color }
+		}
+	}
+
+	&-results {
+		> .search-results {
+			&__header { background: $base-color }
+			&__section {
+				> h5 { background: darken($base-color, 10%) }
+			}
+		}
+	}
+}
+
+.trends__item {
+	background: $trend-color;
+
+	.trends__item {
+		&__name a { color: $secondary-text-color }
+		&__current { color: lighten($secondary-text-color, 10%) }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/settings-account.scss

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.edit_account {
+	@media screen and (min-width: 415px) {
+		.card {
+			> a {
+				position: relative;
+
+				.card__img {
+					border-bottom: 1px solid $base-separation-color;
+
+					> img:not([src]),
+					> img[src="/headers/original/missing.png"] {
+						content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
+					}
+				}
+				
+				.card__bar {
+					position: static;
+					padding-top: 30%;
+			
+					.avatar {
+						position: absolute;
+						left: 0;
+						bottom: 0;
+
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 100%;
+						height: 100%;
+
+						img {
+							width: 128px;
+							height: 128px;
+
+							border-radius: 50%;
+						}
+					}
+			
+					.display-name {
+						flex: auto;
+						margin-left: 0;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/settings-dashboard.scss

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.dashboard {
+	&__counters {
+		& > div {
+			& > div, & > a { background: $dashboard-counters-base-color }
+			
+			& > a {
+				&:hover,
+				&:focus,
+				&:active {
+					background: $dashboard-counters-hover-color;
+				}
+			}
+		}
+
+		&__text,
+		&__num { color: $primary-text-color }
+		
+		&__label { color: $primary-lighter1-text-color }
+	}
+
+	&__widgets {
+		a:not(.name-tag) { color: $primary-lighter2-text-color }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/settings-directory_tag.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.admin-wrapper {
+	.content {
+		.directory__tag {
+			& > a,
+			& > div { background: $setting-base-color }
+
+			h4 {
+				& { color: $primary-lighter2-text-color }
+				.fa, small { color: $primary-lighter1-text-color }
+			}
+
+			.trends__item__current { color: $primary-text-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/settings-log.scss

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.log-entry {
+	.log-entry {
+		&__header {
+			color: $primary-lighter2-text-color;
+			background: $log-entry-color;
+
+			.username,
+			.target,
+			a { color: $secondary-text-color }
+		}
+
+		&__timestamp { color: $primary-lighter1-text-color }
+		&__icon { color: $icon-color }
+
+		&__extras {
+			color: $primary-text-color;
+			background: $log-entry-extra-color;
+
+			.diff-neutral { color: $log-entry-extra--neutral-color }
+			.diff-old { color: $log-entry-extra--old-color }
+			.diff-new { color: $log-entry-extra--new-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/settings-report.scss

@@ -0,0 +1,75 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.report-card {
+	background: $setting-content-base-color;
+
+	&__profile__stats {
+		color: $primary-lighter2-text-color;
+
+		a {
+			&:focus,
+			&:hover,
+			&:active {
+				color: lighten($primary-lighter2-text-color, 8%);
+			}
+		}
+	}
+
+	&__summary {
+		&__item {
+			border-top-color: $base-separation-color;
+
+			&:hover { background: $column-header-hover-color }
+
+			&__reported-by,
+			&__assigned {
+				color: $primary-lighter2-text-color;
+			}
+
+			&__content {
+				&__icon { color: $icon-color }
+				a { color: $primary-lighter2-text-color }
+			}
+		}
+	}
+}
+
+.batch-table {
+	&__toolbar {
+		background: $base-lighter1-color;
+		border-color: $base-separation-color;
+	}
+
+	&__row {
+		&, &:nth-child(2n) { background: $base-lighter1-color }
+		&:hover, &:nth-child(2n):hover { background: $column-header-hover-color }
+
+		border-color: $base-separation-color;
+
+		&__content {
+			.status__content { color: $primary-text-color }
+			.detailed-status__meta { color: $primary-lighter1-text-color }
+
+
+			.accounts-table { // v2.8.0 ->
+				.accounts-table {
+					&__count {
+						& {color: $primary-text-color }
+						small { color: $primary-lighter1-text-color }
+					}
+				}
+
+				td .account { background: inherit }
+			}
+		}
+	}
+}
+
+.speech-bubble {
+	&__bubble { color: $primary-text-color }
+	a { color: $secondary-text-color }
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss

@@ -0,0 +1,245 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+@import 'settings-account';
+@import 'settings-report';
+@import 'settings-log';
+@import 'settings-dashboard';
+@import 'settings-directory_tag';
+
+
+
+body.admin {
+	color: $primary-text-color;
+	background: $setting-base-color;
+	
+	.sidebar {
+		&-wrapper { background: inherit }
+
+		ul {
+			border-radius: 0;
+
+			a {
+				color: $primary-lighter2-text-color;
+				border-radius: 0;
+
+				&:hover {
+					color: $primary-text-color;
+					background: $setting-lists-hover-color;
+				}
+
+				&.selected {
+					color: $primary-text-color;
+					background: $setting-lists-selected-color;
+				}
+
+				i.fa {
+					@include material-icon-large;
+					margin-right: 8px;
+					vertical-align: bottom;
+				}
+			}
+
+			ul { background: darken($setting-base-color, 4%) }
+
+			.simple-navigation-active-leaf a {
+				color: $icon-active-color;
+				background: initial;
+
+				&:hover { background: $setting-lists-hover-color }
+			}
+		}
+	}
+
+	.content {
+		@include column-shadow;
+		background: $setting-content-base-color;
+
+		h2, h3, h4, h6 { color: $primary-text-color }
+
+		p {
+			color: $primary-text-color;
+			strong { color: $primary-text-color }
+		}
+
+		h2, h4, hr { border-bottom-color: $base-separation-color }
+		.muted-hint { color: $primary-lighter1-text-color }
+	}
+}
+
+.simple_form {
+	.input {
+		&.boolean,
+		&.with_label,
+		&.with_floating_label {
+			.label_input > label { color: $primary-text-color }
+		}
+
+		&.with_block_label {
+			& > label { color: $primary-text-color }
+		}
+
+		&.radio_buttons{
+			.radio label { color: $primary-text-color }
+		}
+
+		&-copy {
+			background: $base-color;
+			border-color: $base-separation-color;
+		}
+	}
+
+	.check_boxes {
+		.checkbox {
+			label { color: $primary-text-color }
+		}
+	}
+
+	input[type=text],
+	input[type=number],
+	input[type=email],
+	input[type=password],
+	textarea {
+		color: $primary-text-color;
+		background: $setting-content-base-color;
+		border-color: $base-separation-color;
+
+		&:hover {
+			border-color: $base-separation-color;
+		}
+
+		&:active,
+		&:focus {
+			background: darken($setting-content-base-color, 8%);
+		}
+	}
+
+	select {
+		color: $primary-text-color;
+		background-color: $setting-content-base-color;
+		border-color: $base-separation-color;
+	}
+
+	.input.field_with_errors {
+		label,
+		.error {
+			color: $error-text-color;
+		}
+	}
+
+	.hint, p.hint {
+		color: $primary-lighter1-text-color !important;
+
+		code {
+			color: $light-text-color;
+			background: $setting-emphasis-color;
+		}
+	}
+
+	.recommended {
+		color: $verified-color;
+		background-color: transparentize($verified-color, 0.75);
+		border-color: $verified-color;
+	}
+
+	.label_input {
+		&__append { color: $primary-lighter1-text-color }
+	}
+
+	button {
+		@include button-shadow;
+		background-color: $active-button-color;
+	}
+}
+
+.simple_form,
+.table-form {
+	.warning { background: change-color($color: $error-color, $alpha: 0.8) }
+}
+
+.quick-nav {
+	a {
+		color: $secondary-text-color;
+
+		&:hover,
+		&:focus,
+		&:active {
+			color: lighten($secondary-text-color, 8%);
+		}
+	}
+}
+
+.pagination {
+	.page,
+	a {
+		color: $primary-text-color;
+	}
+
+	.page {
+		&.current {
+			background: $icon-active-color;
+			color: $light-text-color;
+		}
+	}
+}
+
+.filters {
+	.filter-subset {
+		strong { color: $primary-text-color }
+
+		a {
+			color: $primary-lighter2-text-color;
+
+			&:hover { color: $primary-text-color }
+
+			&.selected {
+				color: $active-text-color;
+				border-bottom-color: $active-text-color;
+			}
+		}
+	}
+}
+
+.new_form_two_factor_confirmation {
+	.qr-wrapper {
+		.qr-code { box-shadow: none }
+		.qr-alternative { color: $secondary-lighter1-text-color }
+	}
+}
+
+label,
+select#user_setting_default_privacy {
+	&[for=user_setting_default_privacy_public],
+	&[for=user_setting_default_privacy_unlisted],
+	option[value="public"],
+	option[value="unlisted"] { color: $active-text-color !important }
+}
+
+.column-header__collapsible__extra {
+	.column-settings__section { color: $primary-text-color }
+
+	.setting-toggle {
+		.react-toggle {
+			&.react-toggle--checked {
+				> .react-toggle-track { background: $setting-toggle-checked-color }
+
+				> .react-toggle-thumb {
+					border-color: $setting-toggle-checked-color;
+					background-color: $setting-toggle-thumb-checked-color;
+				}
+			}
+
+			> .react-toggle-track { background: $setting-toggle-color }
+
+			> .react-toggle-thumb {
+				border-color: $setting-toggle-color;
+				background-color: $setting-toggle-thumb-color;
+			}
+		}
+
+		.setting-toggle__label { color: $primary-text-color }
+	}
+
+	.setting-meta__label { color: $primary-lighter1-text-color }
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss

@@ -0,0 +1,123 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.status {
+	@include status-shadow;
+	@include material-card-radius;
+	border-bottom: 0;
+
+	transition: box-shadow 0.1s 0s ease-out;
+
+	&.light {
+		.status {
+			&__relative-time { color: $primary-lighter1-text-color }
+			&__display-name {
+				color: $primary-text-color;
+
+				.display-name__account { color: $primary-lighter1-text-color }
+			}
+
+			&__content { color: $primary-text-color }
+		}
+
+		.display-name strong { color: $primary-text-color }
+	}
+
+	&.status-direct {
+		background: $status-direct-color;
+
+		&:not(.read) {
+			background: inherit;
+			border-bottom-color: initial;
+		}
+	}
+
+	&.muted {
+		.status__content {
+			p { color: lighten($primary-text-color, 20%) }
+		}
+	}
+
+	.status {
+		&__info {
+			.status__display-name {
+				color: $primary-lighter1-text-color;
+	
+				strong { color: $primary-text-color }
+			}
+	
+			.status__relative-time { color: $primary-lighter1-text-color }
+		}
+	}
+
+	&__action-bar__counter__label { color: $primary-lighter1-text-color }
+}
+
+.detailed-status {
+	&__display-name {
+		color: $secondary-text-color;
+
+		strong { color: $primary-text-color }
+	}
+
+	&__meta {
+		.detailed-status__datetime { color: $primary-lighter1-text-color }
+
+		.detailed-status__link {
+			.fa.fa-star { vertical-align: middle }
+		}
+	}
+	
+	&__wrapper {
+		@include status-shadow;
+		
+		.detailed-status { @extend .detailed-status; }
+		.detailed-status__action-bar {
+			background: $status-actionbar-color;
+			border-color: $base-separation-color;
+		}
+	}
+}
+
+.status,
+.detailed-status {
+	background: $status-color;
+
+	.status__content {
+		color: $primary-text-color;
+
+		a { color: $secondary-text-color }
+
+		.status__content__spoiler-link {
+			color: $primary-text-color;
+			background: $base-color;
+		}
+	}
+}
+
+a.status-card,
+a.status-card.compact {
+	&:hover { background: initial }
+}
+
+.status-card,
+.status-card.compact {
+	border-color: $non-elevated-card-boader;
+
+	&__title {
+		color : $primary-text-color;
+	}
+
+	&__host {
+		color: $primary-lighter1-text-color;
+	}
+}
+
+.name-tag,
+a.name-tag {
+	color: $secondary-text-color;
+}

app/javascript/styles/gplus-theme-for-mastodon-dev/tables.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.table {
+	thead th { border-bottom-color: $base-separation-color }
+	
+	th,
+	td {
+		color: $primary-text-color;
+		background-color: $base-color;
+		border-top: 0;
+	}
+
+	& > tbody > tr:nth-child(odd) {
+		& > td, & > th { background: darken($base-color, 4%) }
+	}
+
+	a { color: $secondary-text-color }
+}
+
+a.table-action-link,
+button.table-action-link {
+	color: $secondary-text-color;
+
+	&:hover { color: darken($secondary-text-color, 8%) }
+}

app/javascript/styles/gplus-theme-for-mastodon.scss

@@ -0,0 +1,22 @@
+/**
+ * Google+ Theme for Mastodon v1.1
+ * Copyright (C) 2018-2019 Genbu Project
+ */
+
+@charset "UTF-8";
+
+@import 'application';
+@import 'gplus-theme-for-mastodon/basics';
+@import 'gplus-theme-for-mastodon/components';
+@import 'gplus-theme-for-mastodon/tables';
+@import 'gplus-theme-for-mastodon/columns';
+@import 'gplus-theme-for-mastodon/lists';
+@import 'gplus-theme-for-mastodon/accounts';
+@import 'gplus-theme-for-mastodon/statuses';
+@import 'gplus-theme-for-mastodon/notifications';
+@import 'gplus-theme-for-mastodon/searches';
+@import 'gplus-theme-for-mastodon/settings';
+@import 'gplus-theme-for-mastodon/icons';
+@import 'gplus-theme-for-mastodon/profile';
+@import 'gplus-theme-for-mastodon/about';
+@import 'gplus-theme-for-mastodon/explore';

app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
+@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
+@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
+@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
+@mixin material-border { border-radius: 4px }

app/javascript/styles/gplus-theme-for-mastodon/_variables.scss

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+
+
+
+// Base colors
+$active-color: #db4437;
+$accent-color: #fbbc04;
+$valid-color: #4285f4;
+$error-color: #d50000;
+$checked-color: #4285f4;
+$verified-color: #4caf50;
+
+
+// Text colors
+$primary-text-color: rgba(0, 0, 0, 0.87);
+$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
+$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
+$secondary-text-color: #2962ff;
+$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
+$light-text-color: #ffffff;
+$light-darker1-text-color: darken($light-text-color, 15%);
+$active-text-color: $active-color;
+$error-text-color: $error-color;
+
+
+// Icon colors
+$icon-color: #757575;
+$icon-active-color: $active-color;
+
+
+// Background colors
+$base-color: #f1f1f1;
+$base-lighter1-color: #ffffff;
+$base-darker1-color: rgba(0, 0, 0, 0.4);
+
+$column-header-color: $base-lighter1-color;
+$column-header-hover-color: change-color($color: $column-header-color, $lightness: 90%);
+
+$status-color: $base-lighter1-color;
+$status-direct-color: darken($status-color, 5%);
+$status-actionbar-color: change-color($color: $status-color, $lightness: 98%);
+
+$account-color: $base-lighter1-color;
+$account-foreground-color: $base-darker1-color;
+
+$card-color: $base-lighter1-color;
+$card-hover-color: $column-header-hover-color;
+$card-image-color: $base-color;
+
+$form-color: rgba(0, 0, 0, 0.1);
+$form-focused-color: lighten($form-color, 20%);
+$trend-color: $base-lighter1-color;
+
+$setting-base-color: $base-color;
+$setting-lists-selected-color: darken($base-color, 2%);
+$setting-lists-hover-color: darken($base-color, 5%);
+$setting-content-base-color: $base-lighter1-color;
+
+$setting-toggle-color: #b9b9b9;
+$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
+$setting-toggle-thumb-color: #fafafa;
+$setting-toggle-thumb-checked-color: $checked-color;
+
+$dashboard-counters-base-color: $base-color;
+$dashboard-counters-hover-color: lighten($base-color, 2%);
+
+$explore-header-color: lighten($accent-color, 16%);
+$explore-directory-color: $base-lighter1-color;
+
+
+// Shadow colors
+$column-header-shadow-color: rgba(0, 0, 0, 0.3);
+$status-shadow-color: rgba(0, 0, 0, 0.14);
+$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
+$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
+$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
+$button-shadow-color: rgba(0, 0, 0, 0.4);
+
+
+// Separation colors
+$base-separation-color: rgba(0, 0, 0, 0.14);

app/javascript/styles/gplus-theme-for-mastodon/about.scss

@@ -0,0 +1,138 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+// from mastodon/about.scss
+$column-breakpoint: 700px;
+
+
+
+.landing-page {
+	h3, h4, h5, h6 { color: $primary-lighter2-text-color }
+	p { color: $primary-lighter1-text-color }
+	em { color: $primary-text-color }
+
+	.column-0 { background: $base-darker1-color }
+	.column-2 {
+		.landing-page {
+			&__information { padding: 0 }
+
+			&__short-description {
+				& > .row:first-child {
+					background: $base-darker1-color;
+					padding: 10px 20px;
+				}
+
+				& > * {
+					padding-left: 40px; padding-right: 40px;
+					&:last-child { padding-bottom: 45px }
+
+					@media screen and (max-width: $column-breakpoint) {
+						padding-left: 20px; padding-right: 20px;
+						&:last-child { padding-bottom: 25px }
+					}
+				}
+			}
+		}
+	}
+
+	&__forms,
+	&__information,
+	&__call-to-action {
+		@include status-shadow;
+		background: $column-header-color;
+	}
+
+	&__forms {
+		padding: 0;
+
+		& > *:first-child { margin: inherit }
+		& > * { margin-left: 20px; margin-right: 20px; }
+
+		.brand { background: $base-darker1-color }
+
+		form {
+			& > .input input {
+				background: $form-color;
+
+				&:focus { background: $form-focused-color }
+			}
+		}
+
+		.separator-or {
+			margin-left: 20px; margin-right: 20px;
+			
+			span {
+				color: $primary-lighter1-text-color;
+				background: $column-header-color;
+			}
+		}
+
+		@media screen and (max-width: $column-breakpoint) {
+			background: inherit;
+			box-shadow: none;
+
+			.separator-or span { background: $base-color }
+		}
+	}
+
+	&__information {
+		color: $primary-lighter1-text-color;
+
+		&.contact-widget {
+			@include status-shadow;
+			background: $column-header-color;
+
+			.contact-widget {
+				&__mail {
+					a { color: $primary-text-color }
+				}
+			}
+		}
+
+		strong { color: inherit }
+
+		.row:first-child {
+			h1 small {
+				color: $light-darker1-text-color;
+
+				span { color: $light-text-color }
+			}
+		}
+	}
+
+	&__call-to-action {
+		.row__information-board {
+			.information-board__section {
+				color: $primary-lighter2-text-color;
+
+				& > span:last-child { color: $primary-lighter1-text-color }
+			}
+		}
+	}
+
+	&__features {
+		.features-list {
+			.features-list__row {
+				.text { color: $primary-lighter1-text-color }
+				.visual .fa { color: $icon-color }
+			}
+		}
+	}
+
+	&__footer { color: $primary-lighter1-text-color }
+
+	#mastodon-timeline {
+		color: $primary-text-color;
+		background: transparent;
+
+		p {
+			color: $primary-text-color;
+
+			a { color: $secondary-text-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/accounts.scss

@@ -0,0 +1,109 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.account {
+	background: $account-color;
+	border-color: $base-separation-color;
+
+	.account {
+		&__display-name {
+			color: $secondary-text-color;
+	
+			strong { color: $primary-text-color }
+		}
+	}
+}
+
+.column {
+	> .column-back-button {
+		@include column-shadow;
+		background: $column-header-color;
+	}
+}
+
+.account-timeline__header {
+	.account__header {
+		background-color: $account-foreground-color;
+
+		> div { background-color: inherit }
+
+		.account__header {
+			&__username { color: $secondary-lighter1-text-color }
+			&__fields { @extend .account__header__fields; }
+		}
+
+		.account--action-button {
+			.icon-button:not(.active) {
+				color: darken($light-text-color, 7%);
+
+				&:active,
+				&:focus,
+				&:hover {
+					color: $light-text-color;
+				}
+			}
+		}
+	}
+
+	.account {
+		&__disclaimer,
+		&__action-bar,
+		&__section-headline {
+			background: $column-header-color;
+			border-color: $base-separation-color;
+		}
+
+		&__action-bar {
+			&__tab {
+				border-color: $base-separation-color;
+				&.active { border-bottom-color: $active-color }
+	
+				> span { color: $primary-lighter1-text-color }
+			}
+		}
+	
+		&__section-headline {
+			a {
+				color: $primary-text-color;
+	
+				&.active {
+					color: $primary-lighter1-text-color;
+	
+					&::before { border-color: transparent transparent $base-separation-color }
+					&::after { border-color: transparent transparent $status-color }
+				}
+			}
+		}
+	}
+}
+
+.account__header__fields {
+	dl {
+		border-color: $base-separation-color;
+		
+		dt,
+		dd {
+			color: $primary-text-color;
+			background: $column-header-color;
+		}
+
+		dd {
+			&.verified {
+				border-color: transparentize($valid-color, 0.5);
+				background: transparentize($valid-color, 0.75);
+
+				a { color: lighten($verified-color, 20%) }
+			}
+		}
+	}
+
+	a { color: $secondary-text-color }
+}
+
+.account__action-bar__tab {
+	strong { color: $primary-text-color }
+}

app/javascript/styles/gplus-theme-for-mastodon/basics.scss

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+body {
+	&,
+	.ui {
+		color: $primary-text-color;
+		background: $base-color;
+	}
+}
+
+.focusable {
+	&:focus {
+		background: inherit;
+
+		.status {
+			@include status-focus-shadow;
+
+			&.status-direct { background: $status-direct-color }
+		}
+
+		.detailed-status {
+			& { background: $status-color }
+			&__action-bar { background: $status-actionbar-color }
+		}
+	}
+}
+
+::-webkit-scrollbar-thumb {
+	background: darken($base-lighter1-color, 12%);
+
+	&:hover { background: darken($base-lighter1-color, 16%) }
+	&:active { background: darken($base-lighter1-color, 12%) }
+}
+
+::-webkit-scrollbar-track {
+	background: $base-color;
+
+	&:hover,
+	&:active {
+		background: darken($base-lighter1-color, 8%);
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/columns.scss

@@ -0,0 +1,197 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.tabs-bar {
+	margin: 0;
+	background: $column-header-color;
+
+	.tabs-bar {
+		&__link {
+			color: $icon-color;
+			
+			.fa { vertical-align: top }
+		}
+	}
+}
+
+.drawer {
+	.drawer {
+		&__header {
+			@include column-shadow;
+			background: $column-header-color;
+	
+			.drawer__tab { color: $icon-color }
+	
+			a {
+				&:hover { background: $column-header-hover-color }
+			}
+		}
+	
+		&__pager {
+			@include status-shadow;
+			
+			.drawer__inner {
+				background: $column-header-color;
+		
+				&__mastodon { display: none }
+			}
+		}
+	}
+}
+
+.navigation-bar {
+	color: $secondary-text-color;
+	background: $column-header-color;
+
+	.navigation-bar {
+		&__profile {
+			strong { color: $primary-text-color }
+			&-edit { color: $secondary-text-color }
+		}
+	}
+}
+
+.compose-form {
+	.compose-form {
+		&__buttons-wrapper { background: $column-header-color }
+		&__publish { border-top: 1px solid $base-separation-color }
+	}
+}
+
+.column {
+	.column-header {
+		@include column-shadow;
+		background: $column-header-color;
+
+		&.active {
+			.column-header__icon {
+				color: $icon-active-color;
+				text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
+			}
+		}
+
+		* { background: inherit }
+
+		&__icon {
+			color: $icon-color;
+			vertical-align: top;
+		}
+
+		&__buttons {
+			.column-header {
+				&__back-button {
+					.column-back-button__icon { vertical-align: unset }
+				}
+	
+				&__button {
+					&.active {
+						color: $icon-active-color;
+						background: inherit;
+					}
+		
+					.fa { vertical-align: unset }
+				}
+			}
+		}
+
+		&__collapsible {
+			color: $secondary-text-color;
+			border-bottom: 1px solid $base-separation-color;
+	
+			&-inner { background: $column-header-color }
+		}
+	}
+
+	.column-back-button {
+		&__icon { vertical-align: unset }
+	}
+
+	.column {
+		&-subheading { background: darken($base-color, 10%) }
+	
+		&-link {
+			color: $primary-text-color;
+			background: $base-color;
+	
+			&__icon {
+				color: $icon-color;
+				vertical-align: top;
+			}
+		}
+	}
+
+	.scrollable {
+		background: transparent;
+
+		*[role="feed"] {
+			article {
+				margin: 1em 0;
+				&:first-of-type { margin: 0 }
+			}
+		}
+
+		div[tabindex="-1"] { margin-bottom: 1em }
+	}
+
+	.notification__filter-bar {
+		background: $column-header-color;
+		border-bottom-color: $base-separation-color;
+
+		button {
+			color: $icon-color;
+			background: $column-header-color;
+
+			&.active {
+				color: $icon-active-color;
+
+				&::before { border-color: transparent transparent $base-separation-color }
+				&::after { border-color: transparent transparent $column-header-color }
+			}
+		}
+	}
+
+	.empty-column-indicator {
+		flex-direction: column;
+		background: $base-color;
+
+		&::before {
+			content: "";
+			display: block;
+
+			width: 100px;
+			height: 100px;
+			margin-bottom: 1em;
+
+			background: none center / contain no-repeat;
+			background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
+		}
+	}
+}
+
+.getting-started {
+	&__wrapper,
+	& {
+		background: $base-color;
+	}
+
+	& {
+		border-top: 1px solid $base-separation-color;
+
+		a { color: $primary-text-color }
+	}
+}
+
+.load {
+	&-more,
+	&-gap {
+		background: transparent;
+
+		&:hover { background: darken($column-header-color, 10%) }
+	}
+
+	&-gap { border: 0 }
+}

app/javascript/styles/gplus-theme-for-mastodon/components-button.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.floating-action-button {
+	font-size: 24px;
+	background: $active-color;
+}

app/javascript/styles/gplus-theme-for-mastodon/components-card.scss

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.card {
+	border: 1px solid $base-separation-color;
+
+	> a {
+		@include status-shadow;
+
+		&:hover,
+		&:focus,
+		&:active {
+			.card__bar {
+				background: initial;
+
+				.display-name strong { color: $secondary-text-color }
+			}
+		}
+
+		.card__img { background: $card-image-color }
+		.card__bar {
+			background: $card-color;
+	
+			.avatar {
+				img { background: transparent }
+			}
+	
+			.display-name {
+				strong { color: $primary-text-color }
+				span { color: $primary-lighter2-text-color }
+			}
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/components-dropdown.scss

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.dropdown-menu,
+.actions-modal > ul {
+	@include material-border;
+	background: $base-lighter1-color;
+
+	.dropdown-menu {
+		&__arrow {
+			&.top { border-top-color: $column-header-color }
+			&.bottom { border-bottom-color: $column-header-color }
+		}
+
+		&__item {
+			a {
+				color: $primary-lighter2-text-color;
+
+				padding: 8px 16px;
+				background: $column-header-color;
+
+				&:active,
+				&:focus,
+				&:hover {
+					background: $column-header-hover-color;
+				}
+			}
+		}
+
+		&__separator { border-bottom-color: $base-separation-color }
+	}
+
+	& > li:not(:empty) {
+		@extend .dropdown-menu__item;
+
+		a { padding: 12px 16px }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/components.scss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+
+@import 'components-button';
+@import 'components-card';
+@import 'components-dropdown';

app/javascript/styles/gplus-theme-for-mastodon/explore.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.public-layout {
+	.page-header {
+		background: $explore-header-color;
+
+		h1 { color: $primary-text-color }
+		p { color: $primary-lighter2-text-color }
+	}
+
+	.directory {
+		background: $explore-directory-color;
+
+		.accounts-table {
+			&__count {
+				color: $primary-lighter2-text-color;
+				small { color: $primary-lighter1-text-color }
+			}
+		}
+
+		&__tag {
+			a { background: $explore-directory-color }
+			h4 { color: $primary-text-color }
+			.fa, small { color: $primary-lighter1-text-color }
+		}
+	}
+
+	.notice-widget {
+		color: $primary-lighter1-text-color;
+		background: $explore-directory-color;
+
+		a { color: $secondary-text-color }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/lists.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.column {
+	.column-back-button { background: inherit }
+
+	.column-inline-form {
+		background: $column-header-color;
+
+		label input {
+			color: $secondary-text-color;
+			&:focus { color: $primary-text-color }
+		}
+	}
+
+	.column-inline-form ~ .scrollable {
+		article { margin: 0 }
+	}
+}
+
+.modal-root {
+	.list-editor {
+		background: $base-color;
+		
+		h4 { background: $column-header-color }
+
+		.drawer__pager {
+			.drawer__inner { background: $column-header-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/notifications.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.notification {
+	&.notification-favourite {
+		.status {
+			&.status-direct { background: transparent }
+		}
+	}
+
+	> .notification__message {
+		color: $primary-lighter2-text-color;
+		font-size: 13px;
+		padding: 8px 0;
+
+		.notification__display-name {
+			&:hover { color: inherit }
+		}
+
+		.notification__favourite-icon-wrapper {
+			.star-icon { color: $icon-active-color }
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/profile.scss

@@ -0,0 +1,231 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.public-layout {
+	a.button {
+		@include button-shadow;
+
+		color: $primary-text-color;
+		background: $base-lighter1-color;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background: darken($base-lighter1-color, 8%);
+		}
+	}
+
+	.logo-button {
+		svg path {
+			/* Only for Itabashi-don */
+			&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
+			&:last-child { fill: $base-lighter1-color !important }
+		}
+	}
+
+	.public-account-header {
+		@include status-shadow;
+
+		&__image {
+			background: $base-lighter1-color;
+
+			@media screen and (min-width: 600px) { height: 500px }
+
+			&::after {
+				position: absolute;
+				top: auto;
+				left: 0;
+				bottom: 0;
+
+				width: 100%;
+				height: 30%;
+				background: $account-header-image-shadow-color;
+				box-shadow: none;
+			}
+
+			> img:not([src]),
+			> img[src="/headers/original/missing.png"] {
+				content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
+			}
+		}
+
+		&__bar {
+			@media screen and (max-width: 600px) {
+				flex-direction: column;
+				background: $base-color;
+			}
+			
+			@media screen and (min-width: 600px) { margin-top: -140px }
+
+			&::before { background: $base-lighter1-color }
+
+			.avatar {
+				@media screen and (max-width: 600px) {
+					position: relative;
+					bottom: 30px;
+
+					display: initial;
+					width: 60px;
+					height: 60px;
+					margin: 0 auto;
+					padding: 0;
+				}
+
+				img {
+					border: 2px solid $base-lighter1-color;
+					border-radius: 50%;
+					background: transparent;
+				}
+			}
+		}
+
+		&__tabs {
+			@media screen and (max-width: 600px) {
+				flex-wrap: wrap;
+				margin-left: 0;
+
+				&__name {
+					width: 100%;
+					text-align: center;
+
+					h1 {
+						color: $primary-text-color;
+
+						small { color: $primary-lighter1-text-color }
+					}
+				}
+
+				&__tabs {
+					justify-content: center;
+					flex: auto;
+
+					.spacer { display: none }
+
+					a.button.logo-button {
+						color: $light-text-color;
+						background: $secondary-text-color;
+
+						svg path {
+							/* Only for Itabashi-don */
+							&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
+							&:last-child { fill: $secondary-text-color !important }
+						}
+					}
+				}
+			}
+
+			.details-counters {
+				.counter {
+					color: $light-text-color;
+					border-right: 0;
+
+					&::after { border-bottom-color: $base-color }
+
+					&.active {
+						&::after { border-bottom-color: $active-color }
+					}
+				}
+			}
+		}
+
+		&__extra {
+			.public-account-bio {
+				.account__header__content { text-align: center }
+			}
+
+			&__links {
+				color: $primary-text-color;
+
+				a {
+					&, strong { color: $primary-text-color }
+				}
+			}
+		}
+	}
+
+	.public-account-bio {
+		@include column-shadow;
+		background: $base-lighter1-color;
+		
+		.account__header__content { color: $primary-text-color }
+		&__extra { color: $primary-lighter1-text-color }
+	}
+
+	.endorsements-widget {
+		@include column-shadow;
+
+		padding-bottom: 0;
+		border-radius: 4px;
+
+		h4 {
+			color: $primary-lighter1-text-color;
+			background: $base-lighter1-color;
+		}
+	}
+
+	.hero-widget {
+		@include column-shadow;
+
+		&__img { background: $base-color }
+		&__text {
+			background: $base-lighter1-color;
+
+			&, em { color: $primary-lighter2-text-color }
+			a { color: $secondary-text-color }
+		}
+	}
+
+	.account__section-headline {
+		background: $base-lighter1-color;
+		border-bottom-color: $base-separation-color;
+
+		a {
+			color: $primary-lighter1-text-color;
+
+			&.active {
+				color: $primary-lighter2-text-color;
+
+				&::before { border-color: transparent transparent $base-separation-color }
+				&::after { border-color: transparent transparent $status-color }
+			}
+		}
+	}
+
+	.activity-stream {
+		box-shadow: none;
+
+		.entry {
+			margin: 1em 0;
+			background: transparent;
+
+			&:first-of-type { margin: 0 }
+		}
+	}
+
+	.nothing-here {
+		@include status-shadow;
+
+		color: $primary-lighter1-text-color;
+		background: $base-lighter1-color;
+	}
+
+	.footer {
+		h4 { color: $primary-lighter1-text-color }
+
+		ul {
+			a { color: $primary-lighter2-text-color }
+		}
+
+		.brand {
+			svg path {
+				/* Only for Itabashi-don */
+				&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
+				&:last-child { fill: $base-lighter1-color !important }
+			}
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/searches.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.search {
+	.search {
+		&__input {
+			@include material-border;
+
+			color: $primary-text-color;
+			background: $form-color;
+	
+			&:focus { background: $form-focused-color }
+		}
+	
+		&__icon {
+			.fa { color: $icon-color }
+		}
+	}
+
+	&-results {
+		> .search-results {
+			&__header { background: $base-color }
+			&__section {
+				> h5 { background: darken($base-color, 10%) }
+			}
+		}
+	}
+}
+
+.trends__item {
+	background: $trend-color;
+
+	.trends__item {
+		&__name a { color: $secondary-text-color }
+		&__current { color: lighten($secondary-text-color, 10%) }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/settings-account.scss

@@ -0,0 +1,44 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.edit_account {
+	@media screen and (min-width: 415px) {
+		.card {
+			> a {
+				position: relative;
+
+				.card__img { border-bottom: 1px solid $base-separation-color }
+				.card__bar {
+					position: static;
+					padding-top: 30%;
+			
+					.avatar {
+						position: absolute;
+						left: 0;
+						bottom: 0;
+
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 100%;
+						height: 100%;
+
+						img {
+							width: 128px;
+							height: 128px;
+						}
+					}
+			
+					.display-name {
+						flex: auto;
+						margin-left: 0;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/settings-dashboard.scss

@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.dashboard {
+	&__counters {
+		& > div {
+			& > div, & > a { background: $dashboard-counters-base-color }
+			
+			& > a {
+				&:hover,
+				&:focus,
+				&:active {
+					background: $dashboard-counters-hover-color;
+				}
+			}
+		}
+
+		&__num { color: $primary-text-color }
+		&__label { color: $primary-lighter1-text-color }
+	}
+
+	&__widgets {
+		a:not(.name-tag) { color: $primary-lighter2-text-color }
+	}
+}

app/javascript/styles/gplus-theme-for-mastodon/settings-report.scss

@@ -0,0 +1,63 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.report-card {
+	background: $setting-content-base-color;
+
+	&__profile__stats {
+		color: $primary-lighter2-text-color;
+
+		a {
+			&:focus,
+			&:hover,
+			&:active {
+				color: lighten($primary-lighter2-text-color, 8%);
+			}
+		}
+	}
+
+	&__summary {
+		&__item {
+			border-top-color: $base-separation-color;
+
+			&:hover { background: $column-header-hover-color }
+
+			&__reported-by,
+			&__assigned {
+				color: $primary-lighter2-text-color;
+			}
+
+			&__content {
+				&__icon { color: $icon-color }
+				a { color: $primary-lighter2-text-color }
+			}
+		}
+	}
+}
+
+.batch-table {
+	&__toolbar {
+		background: $base-lighter1-color;
+		border-color: $base-separation-color;
+	}
+
+	&__row {
+		background: $base-lighter1-color;
+		border-color: $base-separation-color;
+
+		&:hover { background: $column-header-hover-color }
+
+		&__content {
+			.status__content { color: $primary-text-color }
+			.detailed-status__meta { color: $primary-lighter1-text-color }
+		}
+	}
+}
+
+.speech-bubble {
+	&__bubble { color: $primary-text-color }
+	a { color: $secondary-text-color }
+}

app/javascript/styles/gplus-theme-for-mastodon/settings.scss

@@ -0,0 +1,208 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+@import 'settings-account';
+@import 'settings-report';
+@import 'settings-dashboard';
+
+
+
+body.admin {
+	color: $primary-text-color;
+	background: $setting-base-color;
+	
+	.sidebar {
+		&-wrapper { background: inherit }
+
+		ul {
+			border-radius: 0;
+
+			a {
+				color: $primary-lighter2-text-color;
+				border-radius: 0;
+
+				&:hover {
+					color: $primary-text-color;
+					background: $setting-lists-hover-color;
+				}
+
+				&.selected {
+					color: $primary-text-color;
+					background: $setting-lists-selected-color;
+				}
+			}
+
+			ul { background: darken($setting-base-color, 4%) }
+
+			.simple-navigation-active-leaf a {
+				color: $icon-active-color;
+				background: initial;
+
+				&:hover { background: $setting-lists-hover-color }
+			}
+		}
+	}
+
+	.content {
+		@include column-shadow;
+		background: $setting-content-base-color;
+
+		h2, h3, h4, h6 { color: $primary-text-color }
+
+		p {
+			color: $primary-text-color;
+			strong { color: $primary-text-color }
+		}
+
+		h2, h4, hr { border-bottom-color: $base-separation-color }
+		.muted-hint { color: $primary-lighter1-text-color }
+	}
+}
+
+.simple_form {
+	.input {
+		&.boolean,
+		&.with_label,
+		&.with_floating_label {
+			.label_input > label { color: $primary-text-color }
+		}
+
+		&.with_block_label {
+			& > label { color: $primary-text-color }
+		}
+
+		&.radio_buttons{
+			.radio label { color: $primary-text-color }
+		}
+
+		&-copy { background: $base-color }
+	}
+
+	.check_boxes {
+		.checkbox {
+			label { color: $primary-text-color }
+		}
+	}
+
+	input[type=text],
+	input[type=number],
+	input[type=email],
+	input[type=password],
+	textarea {
+		color: $primary-text-color;
+		background: $setting-content-base-color;
+		border-color: $base-separation-color;
+
+		&:hover {
+			border-color: $base-separation-color;
+		}
+
+		&:active,
+		&:focus {
+			background: darken($setting-content-base-color, 8%);
+		}
+	}
+
+	select {
+		color: $primary-text-color;
+		background-color: $setting-content-base-color;
+		border-color: $base-separation-color;
+	}
+
+	.input.field_with_errors {
+		label,
+		.error {
+			color: $error-text-color;
+		}
+	}
+
+	.hint, p.hint { color: $primary-lighter1-text-color !important }
+
+	.label_input {
+		&__append { color: $primary-lighter1-text-color }
+	}
+}
+
+.simple_form,
+.table-form {
+	.warning { background: change-color($color: $error-color, $alpha: 0.8) }
+}
+
+.quick-nav {
+	a {
+		color: $secondary-text-color;
+
+		&:hover,
+		&:focus,
+		&:active {
+			color: lighten($secondary-text-color, 8%);
+		}
+	}
+}
+
+.pagination {
+	.page,
+	a {
+		color: $primary-text-color;
+	}
+
+	.page {
+		&.current {
+			background: $icon-active-color;
+			color: $light-text-color;
+		}
+	}
+}
+
+.filters {
+	.filter-subset {
+		strong { color: $primary-text-color }
+
+		a {
+			color: $primary-lighter2-text-color;
+
+			&:hover { color: $primary-text-color }
+
+			&.selected {
+				color: $active-text-color;
+				border-bottom-color: $active-text-color;
+			}
+		}
+	}
+}
+
+label {
+	&[for=user_setting_default_privacy_public],
+	&[for=user_setting_default_privacy_unlisted] {
+		color: $active-text-color !important;
+	}
+}
+
+.column-header__collapsible__extra {
+	.column-settings__section { color: $primary-text-color }
+
+	.setting-toggle {
+		.react-toggle {
+			&.react-toggle--checked {
+				> .react-toggle-track { background: $setting-toggle-checked-color }
+
+				> .react-toggle-thumb {
+					border-color: $setting-toggle-checked-color;
+					background-color: $setting-toggle-thumb-checked-color;
+				}
+			}
+
+			> .react-toggle-track { background: $setting-toggle-color }
+
+			> .react-toggle-thumb {
+				border-color: $setting-toggle-color;
+				background-color: $setting-toggle-thumb-color;
+			}
+		}
+
+		.setting-toggle__label { color: $primary-text-color }
+	}
+
+	.setting-meta__label { color: $primary-lighter1-text-color }
+}

app/javascript/styles/gplus-theme-for-mastodon/statuses.scss

@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+@import 'variables';
+@import 'mixins';
+
+
+
+.status {
+	@include status-shadow;
+	border-bottom: 0;
+
+	transition: box-shadow 0.1s 0s ease-out;
+
+	&.light {
+		.status {
+			&__relative-time { color: $primary-lighter1-text-color }
+			&__display-name {
+				color: $primary-text-color;
+
+				.display-name__account { color: $primary-lighter1-text-color }
+			}
+
+			&__content { color: $primary-text-color }
+		}
+	}
+
+	&.status-direct {
+		background: $status-direct-color;
+
+		&:not(.read) {
+			background: inherit;
+			border-bottom-color: initial;
+		}
+	}
+
+	&.muted {
+		.status__content {
+			p { color: lighten($primary-text-color, 20%) }
+		}
+	}
+
+	.status {
+		&__info {
+			.status__display-name {
+				color: $primary-lighter1-text-color;
+	
+				strong { color: $primary-text-color }
+			}
+	
+			.status__relative-time { color: $primary-lighter1-text-color }
+		}
+	}
+}
+
+.detailed-status {
+	.detailed-status {
+		&__display-name {
+			color: $secondary-text-color;
+	
+			strong { color: $primary-text-color }
+		}
+	
+		&__meta {
+			.detailed-status__datetime { color: $primary-lighter1-text-color }
+	
+			.detailed-status__link {
+				.fa.fa-star { vertical-align: middle }
+			}
+		}
+	}
+	
+	&__wrapper {
+		@include status-shadow;
+		
+		.detailed-status { @extend .detailed-status; }
+		.detailed-status__action-bar {
+			background: $status-actionbar-color;
+			border-color: $base-separation-color;
+		}
+	}
+}
+
+.status,
+.detailed-status {
+	background: $status-color;
+
+	.status__content {
+		color: $primary-text-color;
+
+		a { color: $secondary-text-color }
+
+		.status__content__spoiler-link {
+			color: $primary-text-color;
+			background: $base-color;
+		}
+	}
+}
+
+a.status-card,
+a.status-card.compact {
+	&:hover { background: initial }
+}
+
+.name-tag,
+a.name-tag {
+	color: $secondary-text-color;
+}

app/javascript/styles/gplus-theme-for-mastodon/tables.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@import 'variables';
+
+
+
+.table {
+	thead th { border-bottom-color: $base-separation-color }
+	
+	th,
+	td {
+		color: $primary-text-color;
+		background-color: $base-color;
+		border-top: 0;
+	}
+
+	& > tbody > tr:nth-child(odd) {
+		& > td, & > th { background: darken($base-color, 4%) }
+	}
+
+	a { color: $secondary-text-color }
+}
+
+a.table-action-link,
+button.table-action-link {
+	color: $secondary-text-color;
+
+	&:hover { color: darken($secondary-text-color, 8%) }
+}

app/javascript/styles/markdown.scss

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

app/javascript/styles/mastodon-light.scss

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