Changes & Adoptions made so far

app/javascript/flavours/glitch/actions/compose.js

@@ -60,6 +60,7 @@ export const COMPOSE_UPLOAD_CHANGE_SUCCESS     = 'COMPOSE_UPLOAD_UPDATE_SUCCESS'
 export const COMPOSE_UPLOAD_CHANGE_FAIL        = 'COMPOSE_UPLOAD_UPDATE_FAIL';
 
 export const COMPOSE_DOODLE_SET        = 'COMPOSE_DOODLE_SET';
+export const COMPOSE_GIPHY_SET         = 'COMPOSE_GIPHY_SET';
 
 export const COMPOSE_POLL_ADD             = 'COMPOSE_POLL_ADD';
 export const COMPOSE_POLL_REMOVE          = 'COMPOSE_POLL_REMOVE';
@@ -154,7 +155,7 @@ export function submitCompose(routerHistory) {
 
     dispatch(submitComposeRequest());
     if (getState().getIn(['compose', 'advanced_options', 'do_not_federate'])) {
-      status = status + ' 👁️';
+      status = status + ' :tree:';
     }
     api(getState).post('/api/v1/statuses', {
       status,
@@ -237,6 +238,13 @@ export function doodleSet(options) {
   };
 };
 
+export function giphySet(options) {
+   return {
+     type: COMPOSE_GIPHY_SET,
+     options: options,
+   };
+};
+
 export function uploadCompose(files) {
   return function (dispatch, getState) {
     const uploadLimit = 4;

app/javascript/flavours/glitch/features/compose/components/compose_form.js

@@ -360,6 +360,8 @@ class ComposeForm extends ImmutablePureComponent {
           privacy={privacy}
           sideArm={sideArm}
         />
+
+        <div id="motd"></div>
       </div>
     );
   }

app/javascript/flavours/glitch/features/compose/components/options.js

@@ -34,6 +34,14 @@ const messages = defineMessages({
     defaultMessage: 'Draw something',
     id: 'compose.attach.doodle',
   },
+  gif: {
+    defaultMessage: 'Embed GIF',
+    id: 'compose.attach.gif',
+  },
+  jitsi: {
+    defaultMessage: 'Start call',
+    id: 'compose.attach.jitsi',
+  },
   html: {
     defaultMessage: 'HTML',
     id: 'compose.content-type.html',
@@ -97,6 +105,8 @@ class ComposerOptions extends ImmutablePureComponent {
     onChangeContentType: PropTypes.func,
     onTogglePoll: PropTypes.func,
     onDoodleOpen: PropTypes.func,
+    onEmbedJitsi: PropTypes.func,
+    onEmbedGiphy: PropTypes.func,
     onModalClose: PropTypes.func,
     onModalOpen: PropTypes.func,
     onToggleSpoiler: PropTypes.func,
@@ -119,7 +129,7 @@ class ComposerOptions extends ImmutablePureComponent {
   //  Handles attachment clicks.
   handleClickAttach = (name) => {
     const { fileElement } = this;
-    const { onDoodleOpen } = this.props;
+    const { onDoodleOpen, onEmbedJitsi, onEmbedGiphy } = this.props;
 
     //  We switch over the name of the option.
     switch (name) {
@@ -133,6 +143,16 @@ class ComposerOptions extends ImmutablePureComponent {
         onDoodleOpen();
       }
       return;
+    case 'jitsi':
+      if (onEmbedJitsi) {
+        onEmbedJitsi();
+      }
+      return;
+    case 'gif':
+      if (onEmbedGiphy) {
+        onEmbedGiphy();
+      }
+      return;
     }
   }
 
@@ -211,6 +231,16 @@ class ComposerOptions extends ImmutablePureComponent {
               name: 'doodle',
               text: <FormattedMessage {...messages.doodle} />,
             },
+            {
+              icon: 'video-camera',
+              name: 'jitsi',
+              text: <FormattedMessage {...messages.jitsi} />,
+            },
+            {
+              icon: 'file-image-o',
+              name: 'gif',
+              text: <FormattedMessage {...messages.gif} />,
+            }
           ]}
           onChange={this.handleClickAttach}
           onModalClose={onModalClose}

app/javascript/flavours/glitch/features/compose/containers/options_container.js

@@ -3,6 +3,7 @@ import Options from '../components/options';
 import {
   changeComposeAdvancedOption,
   changeComposeContentType,
+  changeCompose,
   addPoll,
   removePoll,
 } from 'flavours/glitch/actions/compose';
@@ -49,6 +50,15 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(openModal('DOODLE', { noEsc: true }));
   },
 
+  onEmbedJitsi() {
+    var x = Math.floor((Math.random() * 10000000000000000) + 1);
+    dispatch(changeCompose("https://meet.jit.si//"+x));
+  },
+
+  onEmbedGiphy() {
+    dispatch(openModal('GIPHY', { noEsc: true }));
+  },
+
   onModalClose() {
     dispatch(closeModal());
   },

app/javascript/flavours/glitch/features/compose/gif_modal.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'flavours/glitch/components/button';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { giphySet, uploadCompose } from 'flavours/glitch/actions/compose';
+import IconButton from 'flavours/glitch/components/icon_button';
+import { debounce, mapValues } from 'lodash';
+import classNames from 'classnames';
+import ReactGiphySearchbox from 'react-giphy-searchbox'
+import { changeCompose } from 'flavours/glitch/actions/compose';
+
+// Utility for converting base64 image to binary for upload
+// https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
+function dataURLtoFile(dataurl, filename) {
+   let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+   while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+   return new File([u8arr], filename, { type: mime });
+}
+
+const mapStateToProps = state => ({
+   options: state.getIn(['compose', 'giphy']),
+});
+
+const mapDispatchToProps = dispatch => ({
+   /** Set options in the redux store */
+   setOpt: (opts) => dispatch(giphySet(opts)),
+   /** Submit GIF for upload */
+   submit: (file) => dispatch(uploadCompose([file])),
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+class GIFModal extends ImmutablePureComponent {
+
+   static propTypes = {
+        options: ImmutablePropTypes.map,
+        onClose: PropTypes.func.isRequired,
+        setOpt: PropTypes.func.isRequired,
+        submit: PropTypes.func.isRequired,
+      };
+
+   componentDidMount() {
+        //If component mounted
+      }
+
+   onDoneButton = (item) => {
+        const url = item["images"]["original"]["url"];
+        var modal = this;
+        fetch(url).then(function(response) {
+               return response.blob();
+             }).then(function(blob) {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(blob); 
+                    reader.onloadend = function() {
+                             var dataUrl = reader.result;
+                             console.log(dataUrl);
+                             const file = dataURLtoFile(dataUrl, 'giphy.gif');
+                             modal.props.submit(file);
+                             modal.props.onClose(); // close dialog
+                           };
+                  });
+      };
+
+   handleClick = () => {
+        this.props.onClose();
+      }
+
+   handleCancel = () => {
+        this.props.onClose();
+      }
+
+   setRef = (c) => {
+        this.button = c;
+      }
+
+   toggleNotifications = () => {
+        this.props.onToggleNotifications();
+      }
+
+   changeMuteDuration = (e) => {
+        this.props.onChangeMuteDuration(e);
+      }
+
+   render () {
+
+        return (
+               <div className='modal-root__modal mute-modal'>
+                 <div className='mute-modal__container'>
+                   <ReactGiphySearchbox
+                     apiKey="1ttK05MF98dLllFFknTAVo0U4CGcQb4J"
+                     onSelect={item => this.onDoneButton(item)}
+                     masonryConfig={[
+                                    { columns: 2, imageWidth: 190, gutter: 5 },
+                                    { mq: "700px", columns: 2, imageWidth: 210, gutter: 5 }
+                                  ]}
+                   />
+                 </div>
+               </div>
+             );
+      }
+
+}

app/javascript/flavours/glitch/features/emoji_picker/index.js

@@ -444,7 +444,7 @@ class EmojiPickerDropdown extends React.PureComponent {
           {button || <img
             className={classNames('emojione', { 'pulse-loading': active && loading })}
             alt='🙂'
-            src={`${assetHost}/emoji/1f602.svg`}
+            src={`${assetHost}/emoji/1f984.svg`}
           />}
         </div>
 

app/javascript/flavours/glitch/features/getting_started/index.js

@@ -177,6 +177,16 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
             <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
             { preferencesLink !== undefined && <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
             <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={openSettings} />
+	    <hr />
+	     <p><audio style={{width: "285px"}} controls><source src="https://stream.radyoodtu.com.tr/canli"></source></audio></p>
+            <p><FormattedMessage id='navigation_bar.radiostation' defaultMessage='Current radio station' />: <a id="current-radio" className='column-link--transparent' href='https://radyoodtu.com.tr/' target='_blank'>Radyo ODTÜ</a></p>
+	    <hr />
+	     <p><audio style={{width: "285px"}} controls><source src="https://sc.vargonen.net:5001/;stream.mp3"></source></audio></p>
+            <p><FormattedMessage id='navigation_bar.radiostation' defaultMessage='Current radio station' />: <a id="current-radio" className='column-link--transparent' href='https://www.futuregeneration.net/' target='_blank'>FG</a></p>
+	    <hr />
+
+	    <p><FormattedMessage id='navigation_bar.weekly' defaultMessage='Join our' /> <a id="discord-server" className='column-link--transparent' href='https://discord.gg/p3j8H73Z6s' target='_blank'>Discord Server</a></p>
+
           </div>
 
           <LinkFooter />

app/javascript/flavours/glitch/features/ui/components/gif_modal.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { giphySet, uploadCompose } from 'flavours/glitch/actions/compose';
+import IconButton from 'flavours/glitch/components/icon_button';
+import ReactGiphySearchbox from 'react-giphy-searchbox'
+import { defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+   search:    { id: 'giphy.search', defaultMessage: 'Search for GIFs' },
+   error:     { id: 'giphy.error', defaultMessage: 'Oops! Something went wrong. Please, try again.' },
+   loading:   { id: 'giphy.loading', defaultMessage: 'Loading...'},
+   nomatches: { id: 'giphy.nomatches', defaultMessage: 'No matches found.' },
+   close:     { id: 'settings.close', defaultMessage: 'Close' },
+});
+
+// Utility for converting base64 image to binary for upload
+// https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
+function dataURLtoFile(dataurl, filename) {
+   let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+   while(n--){
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+   return new File([u8arr], filename, { type: mime });
+}
+
+const mapStateToProps = state => ({
+   options: state.getIn(['compose', 'giphy']),
+});
+
+const mapDispatchToProps = dispatch => ({
+   /** Set options in the redux store */
+   setOpt: (opts) => dispatch(giphySet(opts)),
+   /** Submit GIF for upload */
+   submit: (file) => dispatch(uploadCompose([file])),
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class GIFModal extends ImmutablePureComponent {
+
+   static propTypes = {
+        intl: PropTypes.object.isRequired,
+        options: ImmutablePropTypes.map,
+        onClose: PropTypes.func.isRequired,
+        setOpt: PropTypes.func.isRequired,
+        submit: PropTypes.func.isRequired,
+      };
+
+   onDoneButton = (item) => {
+        const url = item["images"]["original"]["mp4"];
+        var modal = this;
+        fetch(url).then(function(response) {
+          return response.blob();
+        }).then(function(blob) {
+          const reader = new FileReader();
+          reader.readAsDataURL(blob); 
+          reader.onloadend = function() {
+            var dataUrl = reader.result;
+            const file = dataURLtoFile(dataUrl, 'giphy.mp4');
+            modal.props.submit(file);
+            modal.props.onClose(); // close dialog
+       };
+     });
+   };
+
+   render () {
+
+     const { intl } = this.props;
+
+     return (
+       <div className='modal-root__modal mute-modal'>
+         <div className='mute-modal__container'>
+           <IconButton title={intl.formatMessage(messages.close)} icon="close" size="16" onClick={this.props.onClose}  style={{float: "right"}} /><br />
+           <ReactGiphySearchbox
+             apiKey="Id56al7DqONG4s5UiiKZZaZbegKNV1EC"
+             onSelect={item => this.onDoneButton(item)}
+             masonryConfig={[
+               { columns: 2, imageWidth: 190, gutter: 5 },
+               { mq: "700px", columns: 2, imageWidth: 210, gutter: 5 }
+             ]}
+             autoFocus="true"
+             searchPlaceholder={intl.formatMessage(messages.search)}
+             messageError={intl.formatMessage(messages.error)}
+             messageLoading={intl.formatMessage(messages.loading)}
+             messageNoMatches={intl.formatMessage(messages.nomatches)}
+             wrapperClassName="giphy-modal__searchbox"
+           />
+         </div>
+       </div>
+    );
+  }
+
+}

app/javascript/flavours/glitch/features/ui/components/link_footer.js

@@ -58,7 +58,7 @@ class LinkFooter extends React.PureComponent {
         <p>
           <FormattedMessage
             id='getting_started.open_source_notice'
-            defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
+            defaultMessage='Metu.Life is open source software forked from {Mastodon}. You can contribute or report issues on GitHub at {github}.'
             values={{
               github: <span><a href='https://github.com/glitch-soc/mastodon' rel='noopener noreferrer' target='_blank'>glitch-soc/mastodon</a> (v{version})</span>,
               Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener noreferrer' target='_blank'>Mastodon</a> }}

app/javascript/flavours/glitch/features/ui/components/modal_root.js

@@ -12,6 +12,7 @@ import BoostModal from './boost_modal';
 import FavouriteModal from './favourite_modal';
 import AudioModal from './audio_modal';
 import DoodleModal from './doodle_modal';
+import GIFModal from './gif_modal';
 import ConfirmationModal from './confirmation_modal';
 import FocalPointModal from './focal_point_modal';
 import {
@@ -34,6 +35,7 @@ const MODAL_COMPONENTS = {
   'BOOST': () => Promise.resolve({ default: BoostModal }),
   'FAVOURITE': () => Promise.resolve({ default: FavouriteModal }),
   'DOODLE': () => Promise.resolve({ default: DoodleModal }),
+  'GIPHY': () => Promise.resolve({ default: GIFModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,
   'BLOCK': BlockModal,
@@ -70,7 +72,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'BOOST', 'FAVOURITE', 'DOODLE', 'GIPHY', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {

app/javascript/flavours/glitch/features/ui/components/navigation_panel.js

@@ -29,6 +29,21 @@ const NavigationPanel = ({ onOpenSettings }) => (
     <a className='column-link column-link--transparent' href='#' onClick={onOpenSettings}><Icon className='column-link__icon' id='cogs' fixedWidth /><FormattedMessage id='navigation_bar.app_settings' defaultMessage='App settings' /></a>
     {!!relationshipsLink && <a className='column-link column-link--transparent' href={relationshipsLink} target='_blank'><Icon className='column-link__icon' id='users' fixedWidth /><FormattedMessage id='navigation_bar.follows_and_followers' defaultMessage='Follows and followers' /></a>}
 
+    <hr />
+
+    <p><audio style={{width: "285px"}} controls><source src="https://stream.radyoodtu.com.tr/canli"></source></audio></p>
+    <p><FormattedMessage id='navigation_bar.radiostation' defaultMessage='Current radio station' />: <a id="current-radio" className='column-link--transparent' href='https://radyoodtu.com.tr/' target='_blank'>Radyo ODTÜ</a></p>
+
+    <hr />
+
+    <p><audio style={{width: "285px"}} controls><source src="https://sc.vargonen.net:5001/;stream.mp3"></source></audio></p>
+    <p><FormattedMessage id='navigation_bar.radiostation' defaultMessage='Current radio station' />: <a id="current-radio" className='column-link--transparent' href='https://www.futuregeneration.net/' target='_blank'>FG</a></p>
+    <hr />
+
+    <p><FormattedMessage id='navigation_bar.weekly' defaultMessage='Join our' /> <a id="discord-server" className='column-link--transparent' href='https://discord.gg/p3j8H73Z6s' target='_blank'>Discord Server</a></p>
+
+    <hr />
+
     {showTrends && <div className='flex-spacer' />}
     {showTrends && <TrendsContainer />}
   </div>

app/javascript/flavours/glitch/locales/en.js

@@ -1,7 +1,7 @@
 import inherited from 'mastodon/locales/en.json';
 
 const messages = {
-  'getting_started.open_source_notice': 'Glitchsoc is free open source software forked from {Mastodon}. You can contribute or report issues on GitHub at {github}.',
+  'getting_started.open_source_notice': 'Metu Life is free open source software forked from {Mastodon}.', /* You can contribute or report issues on GitHub at {github}.' */
   'layout.auto': 'Auto',
   'layout.current_is': 'Your current layout is:',
   'layout.desktop': 'Desktop',
@@ -53,6 +53,7 @@ const messages = {
 
   'compose.attach.upload': 'Upload a file',
   'compose.attach.doodle': 'Draw something',
+  'compose.attach.gif': 'Embed GIF',
   'compose.attach': 'Attach...',
 
   'advanced_options.local-only.short': 'Local-only',

app/javascript/flavours/glitch/locales/tr.js

@@ -2,6 +2,9 @@ import inherited from 'mastodon/locales/tr.json';
 
 const messages = {
   //  No translations available.
+  'compose.attach.jitsi': 'Arama başlat',
+  'compose.attach.doodle': 'Çizim yap',
+  'compose.attach.gif': 'GIF yükle',
 };
 
 export default Object.assign({}, inherited, messages);

app/javascript/flavours/glitch/reducers/compose.js

@@ -35,6 +35,7 @@ import {
   COMPOSE_UPLOAD_CHANGE_SUCCESS,
   COMPOSE_UPLOAD_CHANGE_FAIL,
   COMPOSE_DOODLE_SET,
+  COMPOSE_GIPHY_SET,
   COMPOSE_RESET,
   COMPOSE_POLL_ADD,
   COMPOSE_POLL_REMOVE,
@@ -97,6 +98,7 @@ const initialState = ImmutableMap({
   resetFileKey: Math.floor((Math.random() * 0x10000)),
   idempotencyKey: null,
   tagHistory: ImmutableList(),
+  giphy: null,
   doodle: ImmutableMap({
     fg: 'rgb(  0,    0,    0)',
     bg: 'rgb(255,  255,  255)',
@@ -500,6 +502,8 @@ export default function compose(state = initialState, action) {
       }));
   case COMPOSE_DOODLE_SET:
     return state.mergeIn(['doodle'], action.options);
+  case COMPOSE_GIPHY_SET:
+    return state.mergeIn(['giphy'], action.options);
   case REDRAFT:
     const do_not_federate = action.status.get('local_only', false);
     let text = action.raw_text || unescapeHTML(expandMentions(action.status));

app/javascript/flavours/glitch/styles/accounts.scss

@@ -327,3 +327,23 @@
     margin-top: 10px;
   }
 }
+
+
+.bg-profile {
+  display: block;
+  filter: blur(12px);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+
+  .bg-profile-img {
+    background-size: cover;
+    background-position: 50%;
+    height: calc(100% + 30px);
+    margin: -15px;
+    width: calc(100% + 30px);
+  }
+}

app/javascript/flavours/glitch/styles/basics.scss

@@ -130,8 +130,8 @@ body {
       margin: 20px;
 
       img {
-        display: block;
-        max-width: 470px;
+        display: auto;
+        max-width: 128px;
         width: 100%;
         height: auto;
         margin-top: -120px;

app/javascript/flavours/glitch/styles/components/composer.scss

@@ -226,7 +226,7 @@
     }
 
     a {
-      color: $lighter-text-color;
+      color: $lighter-text-color !important;
       text-decoration: none;
 
       &:hover { text-decoration: underline }

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -200,7 +200,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: lighten($ui-base-color, 13%);
+  background: none; /*lighten($ui-base-color, 13%);*/
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -233,16 +233,11 @@
   }
 
   > .mastodon {
-    display: block;
     width: 100%;
     height: 100%;
     border: 0;
     cursor: inherit;
   }
-
-  @media screen and (min-height: 640px) {
-    display: block;
-  }
 }
 
 .pseudo-drawer {
@@ -260,21 +255,3 @@
   height: 100%;
   background: rgba($base-overlay-background, 0.5);
 }
-
-@for $i from 0 through 3 {
-  .mbstobon-#{$i} .drawer__inner__mastodon {
-    @if $i == 3 {
-      background: url('~flavours/glitch/images/wave-drawer.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
-    } @else {
-      background: url('~flavours/glitch/images/wave-drawer-glitched.png') no-repeat bottom / 100% auto, lighten($ui-base-color, 13%);
-    }
-
-    & > .mastodon {
-      background: url("~flavours/glitch/images/mbstobon-ui-#{$i}.png") no-repeat left bottom / contain;
-
-      @if $i != 3 {
-        filter: contrast(50%) brightness(50%);
-      }
-    }
-  }
-}

app/javascript/flavours/glitch/styles/components/giphy.scss

@@ -0,0 +1,13 @@
+.giphy-modal {
+  @extend .boost-modal;
+  width: 500px;
+}
+
+.giphy-modal__container {
+  text-align: center;
+  padding: 20px;
+}
+
+.giphy-modal__searchbox {
+  width: 450px !important;
+}

app/javascript/flavours/glitch/styles/components/index.scss

@@ -906,6 +906,14 @@
 .getting-started__wrapper {
   position: relative;
   overflow-y: auto;
+
+  p, audio {
+    padding-left: 10px;
+  }
+
+  audio {
+    padding-top: 10px;
+  }
 }
 
 .flex-spacer {
@@ -1684,6 +1692,7 @@ noscript {
 @import 'search';
 @import 'emoji';
 @import 'doodle';
+@import 'giphy';
 @import 'drawer';
 @import 'media';
 @import 'sensitive';

app/javascript/flavours/glitch/styles/components/media.scss

@@ -742,3 +742,11 @@
     max-height: 80vh;
   }
 }
+
+/* Tuan's edit */
+
+.video-player__buttons-bar button {
+   background: none !important;
+   border: none !important;
+   color: rgba(255,255,255,0.5) !important;
+}

app/javascript/flavours/glitch/styles/extras.scss

@@ -0,0 +1,7 @@
+.mention {
+    color: $ui-primary-color !important
+}
+
+.mention.hashtag, .status__content a.unhandled-link {
+    color: $highlight-text-color
+}

app/javascript/flavours/glitch/styles/flatClean.scss

@@ -0,0 +1,9 @@
+@import 'mfc/variables';
+@import 'index';
+@import 'mfc/clean';
+@import 'mfc/1-foreground';
+@import 'mfc/2-background';
+@import 'mfc/3-highlights';
+@import 'mfc/5-material';
+@import 'mfc/6-actions';
+@import 'mfc/fix';

app/javascript/flavours/glitch/styles/flatDroid.scss

@@ -0,0 +1,9 @@
+@import 'mfc/variables';
+@import 'index';
+@import 'mfc/droid';
+@import 'mfc/1-foreground';
+@import 'mfc/2-background';
+@import 'mfc/3-highlights';
+@import 'mfc/5-material';
+@import 'mfc/6-actions';
+@import 'mfc/fix';

app/javascript/flavours/glitch/styles/flatFlamingo.scss

@@ -0,0 +1,9 @@
+@import 'mfc/variables';
+@import 'index';
+@import 'mfc/flamingo';
+@import 'mfc/1-foreground';
+@import 'mfc/2-background';
+@import 'mfc/3-highlights';
+@import 'mfc/5-material';
+@import 'mfc/6-actions';
+@import 'mfc/fix';

app/javascript/flavours/glitch/styles/flatTwitter.scss

@@ -0,0 +1,9 @@
+@import 'mfc/variables';
+@import 'index';
+@import 'mfc/twitter';
+@import 'mfc/1-foreground';
+@import 'mfc/2-background';
+@import 'mfc/3-highlights';
+@import 'mfc/5-material';
+@import 'mfc/6-actions';
+@import 'mfc/fix';

app/javascript/flavours/glitch/styles/index.scss

@@ -23,3 +23,10 @@
 @import 'accessibility';
 @import 'rtl';
 @import 'dashboard';
+@import 'extras';
+@import 'motd';
+
+@import '../../../../../css-plugins/gettingstarted';
+@import '../../../../../css-plugins/logo';
+@import '../../../../../css-plugins/stickers';
+@import '../../../../../css-plugins/translation';

app/javascript/flavours/glitch/styles/mfc/1-foreground.css

@@ -0,0 +1,271 @@
+/*------------------------------------------------------------------------------
+* FOREGROUND COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/*----------------------
+base background and text
+----------------------*/
+
+/* status columns */
+.column>.scrollable,
+.status,
+    .status__content,
+.detailed-status,
+    .detailed-status__action-bar,
+    .focusable:focus .detailed-status,
+    .focusable:focus .detailed-status__action-bar,
+.setting-text,
+    .setting-text:active,
+    .setting-text:focus,
+.status-direct .status__content .status__content__spoiler-link,
+.column-link,
+    .getting-started a.column-link,
+    .getting-started__trends .trends__item__current,
+.account__header__content,
+.account__header__bio .account__header__content,
+.account--panel,
+.account__header__bar,
+.account__header__account-note textarea,
+.follow_requests-unlocked_explanation,
+.account-authorize,
+.trends__header,
+/* new conversations */
+.conversation--unread,
+.conversation__content__names,
+/* search */
+.search__input,
+    .search__input:focus,
+.search-results .account,
+.trends__item,
+    .trends__item__name a,
+    .trends__item__current,
+/* compose form */
+.reply-indicator__content, /* in reply to */
+.compose-form .spoiler-input__input, /* cw */
+.compose-form .autosuggest-textarea__textarea, /* post */
+.compose-form .compose-form__modifiers, /* image uploads */
+.compose-form .compose-form__buttons-wrapper, /* buttons */
+/* settings page */
+.simple_form textarea,
+    .simple_form textarea:active,
+    .simple_form textarea:focus,
+.simple_form input[type=email],
+    .simple_form input[type=email]:active,
+    .simple_form input[type=email]:focus,
+.simple_form input[type=number],
+    .simple_form input[type=number]:active,
+    .simple_form input[type=number]:focus,
+.simple_form input[type=password],
+    .simple_form input[type=password]:active,
+    .simple_form input[type=password]:focus,
+.simple_form input[type=text],
+    .simple_form input[type=text]:active,
+    .simple_form input[type=text]:focus,
+.table td,
+    .table th,
+    .table.inline-table>tbody>tr:nth-child(odd)>td,
+    .table.inline-table>tbody>tr:nth-child(odd)>th,
+    .table>tbody>tr:nth-child(odd)>td,
+    .table>tbody>tr:nth-child(odd)>th,
+    .batch-table__row,
+    .batch-table__row:nth-child(2n),
+    .batch-table__row:hover,
+.column-inline-form label,
+.dashboard__counters > div > div, .dashboard__counters > div > a,
+.log-entry,
+    .log-entry__header,
+/* modals */
+.actions-modal,
+    .actions-modal .status,
+    .actions-modal ul li:not(:empty) a,
+    .status.light .display-name strong, .status.light .status__content,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+    .block-modal .setting-toggle__label, .mute-modal .setting-toggle__label,
+.report-modal,
+    .report-modal__statuses .status__content p,
+    .report-modal__comment .setting-toggle__label,
+.list-editor,
+    .list-editor .drawer__inner,
+    .list-editor .drawer__inner.backdrop,
+.account__moved-note,
+.introduction__pager,
+.introduction__text p,
+.reactions-bar__item,
+/* profile cards */
+.card__bar,
+    .card>a:active .card__bar,
+    .card>a:focus .card__bar,
+    .card>a:hover .card__bar,
+.directory__card__bar,
+    .directory__card__extra,
+    .accounts-table__count,
+    .directory__card__img,
+/* public pages */
+#new_user .lead,
+.landing .hero-widget__footer,
+    .landing .simple_form .user_agreement .label_input > label,
+    .landing .hero-widget h4,
+    .hero-widget__counter,
+    .landing .hero-widget__counter span,
+    .directory__tag > a, .directory__tag > div,
+.activity-stream .entry,
+.landing-page #mastodon-timeline,
+    .landing-page #mastodon-timeline p,
+    .landing-page__forms,
+    .landing-page__information,
+    .landing-page li,
+    .landing-page p,
+    .directory__tag h4 small,
+    .directory__tag h4 .fa,
+    .landing-page .features-list .features-list__row .text,
+    .landing-page .features-list .features-list__row .visual .fa,
+    .landing-page__short-description h1,
+    .landing-page .separator-or span,
+.box-widget,
+    .contact-widget,
+    .landing-page__information.contact-widget,
+.rich-formatting li,
+    .rich-formatting p,
+.public-layout .public-account-bio .account__header__content,
+    .public-layout .public-account-bio .roles,
+    .public-layout .public-account-bio__extra,
+    .public-layout .public-account-bio,
+.public-layout .public-account-header__bar::before,
+.account__header__fields dt,
+.account__header__fields dd,
+.hero-widget__text,
+.load-more,
+.button.button-secondary,
+.simple_form__overlay-area__overlay
+{
+background: var(--bg);
+color: var(--text)
+}
+
+/*--------------------
+override for bold text
+--------------------*/
+
+/* primary elements */
+.account__display-name strong,
+    .status__display-name strong,
+    .detailed-status__display-name strong,
+    .card__bar .display-name strong,
+    .directory__card__bar .display-name strong,
+    .account__header__tabs__name h1,
+    .account__header__extra__links a strong,
+.account__action-bar__tab strong, /* profile counters */
+.conversation__content__names a,
+.conversation--unread .conversation__content__relative-time,
+/* settings page*/
+.dashboard__counters__num, .dashboard__counters__text,
+.log-entry a,
+    .log-entry .username,
+    .log-entry .target,
+/* public pages */
+#new_user .lead strong,
+.landing-page h3,
+    .landing-page h4,
+    .landing-page em,
+    .landing-page h5,
+    .landing-page h6,
+    .directory__tag h4,
+.rich-formatting h3,
+    .rich-formatting h4,
+.public-layout .public-account-header__tabs__tabs .counter .counter-number,
+.account__header__fields dt
+{
+color: var(--textBold)
+}
+
+/*---------------------
+override for muted text
+---------------------*/
+
+/* secondary elements */
+.display-name__account,
+    .account .account__display-name,
+    .card__bar .display-name span,
+    .directory__card__bar .display-name span,
+    .accounts-table__count small,
+    .account__header__tabs__name h1 small,
+    .account__header__extra__links a,
+    .account__header__account-note label,
+    .account__header__account-note textarea::placeholder,
+    .account__header__extra__links,
+.detailed-status__meta,
+.status__relative-time,
+.status__action-bar__counter__label,
+.status__prepend,
+    .status__prepend .status__display-name strong,
+.account__moved-note__message,
+.attachment-list.compact .fa,
+.icon-button,
+    .icon-button.disabled,
+    .icon-button.active:hover,
+.account__action-bar__tab>span,
+.compose-form .icon-button.inverted,
+    .compose-form .text-icon-button,
+    .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter,
+.upload-progress,
+.search__icon .fa,
+    .search__icon .fa-times-circle,
+    .trends__item__name,
+.search__input::placeholder,
+.notification__message,
+.muted .status__content,
+    .muted .status__content a,
+    .muted .status__content p,
+    .muted .status__display-name strong,
+.attachment-list__list a,
+a.table-action-link,
+    .table a.table-action-link,
+    button.table-action-link,
+.status__wrapper--filtered,
+.conversation__content__relative-time,
+/* settings page */
+.dashboard__counters__label,
+.log-entry__timestamp,
+/* public pages */
+.landing-page__short-description h1 small,
+    .landing-page__short-description h1 small span,
+.simple_form p.hint.subtle-hint,
+.public-layout .public-account-bio .roles,
+    .public-layout .public-account-bio__extra,
+    .public-layout .public-account-header__tabs__tabs .counter,
+.load-more,
+.account__disclaimer
+{
+color: var(--textMuted)
+}
+
+/* fix announcement reactions */
+.reactions-bar__item__count {color: inherit}
+
+/* fix for conversations font weight */
+.conversation--unread .conversation__content__info {font-weight: 400}
+
+/* fix for border colors */
+.account--panel,
+.account__header__bar,
+.account__header__bio .account__header__fields,
+.status,
+.detailed-status__action-bar,
+.public-layout .public-account-header__tabs__tabs .counter,
+.account__header__fields,
+.account__header__fields dl,
+.account__header__bio .account__header__fields,
+.account,
+.directory__card__extra .account__header__content,
+.account__section-headline, .notification__filter-bar,
+.actions-modal .dropdown-menu__separator, .actions-modal .status
+{border-color: var(--textMuted)}
+
+.account__header__account-note,
+.announcements-list
+{border-color: transparent}
+
+.account__section-headline a.active::after, .account__section-headline button.active::after, .notification__filter-bar a.active::after, .notification__filter-bar button.active::after
+{border-color: transparent transparent var(--bg)}

app/javascript/flavours/glitch/styles/mfc/2-background.css

@@ -0,0 +1,242 @@
+/*------------------------------------------------------------------------------
+* BACKGROUND COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/*----------------------
+base background and text
+----------------------*/
+
+/* background and drawer */
+body.app-body,
+.ui,
+.drawer__tab,
+.drawer__inner,
+.drawer__inner.darker,
+.drawer__inner__mastodon,
+.tabs-bar,
+.tabs-bar__wrapper,
+.getting-started,
+.search-results__section h5,
+.account__section-headline,
+    .account__section-headline button,
+.notification__filter-bar,
+    .notification__filter-bar button,
+.timeline-hint,
+.introduction,
+.account__header__account-note textarea:focus,
+.flex-spacer, .getting-started, .getting-started__wrapper,
+/* DMs */
+.status.status-direct,
+    .status.status-direct:not(.read),
+    .focusable:focus .status.status-direct,
+    .status-direct .status__content,
+    .notification-favourite .status.status-direct,
+/* column preferences */
+.column-settings__section,
+    .column-header__collapsible,
+    .column-header__collapsible-inner,
+    .column-header__button.active,
+    .setting-meta__label,
+    .setting-toggle__label,
+.column-subheading,
+.content-wrapper,
+.media-spoiler,
+    .video-player__spoiler,
+    .video-player__spoiler.active:active,
+    .video-player__spoiler.active:focus,
+.react-toggle-track,
+.filter-form,
+/* in reply to */
+.reply-indicator,
+.reply-indicator__display-name,
+.reply-indicator__content,
+.reply-indicator__cancel .icon-button.inverted,
+.reply-indicator__content .status__content__spoiler-link,
+/* cw show more */
+.status__content .status__content__spoiler-link,
+.compose__action-bar .icon-button,
+/* settings page */
+.admin-wrapper .sidebar-wrapper,
+    .admin-wrapper .sidebar-wrapper__inner,
+    .admin-wrapper .sidebar ul a,
+    .admin-wrapper .sidebar ul a.selected,
+    .admin-wrapper .sidebar ul ul a,
+    .admin-wrapper .content h2,
+    .admin-wrapper .content h6,
+/* modals */
+.boost-modal__action-bar,
+    .confirmation-modal__action-bar,
+    .mute-modal__action-bar,
+.confirmation-modal__action-bar .confirmation-modal__cancel-button,
+    .confirmation-modal__action-bar .mute-modal__cancel-button,
+    .mute-modal__action-bar .confirmation-modal__cancel-button,
+    .mute-modal__action-bar .mute-modal__cancel-button,
+.error-column,
+    .regeneration-indicator,
+    .empty-column-indicator,
+.report-modal__comment .setting-text,
+.introduction__text p code,
+.list-editor .search__input,
+.announcements__item,
+/* opengraph previews */
+.status-card__image,
+.status-card__content,
+.status-card__description,
+.button:disabled,
+/* public pages */
+body.theme-default,
+.button.button-alternative,
+    .button.button-alternative-2,
+.landing-page__call-to-action,
+.public-layout .header,
+.public-layout .header .nav-link,
+.public-layout .header .nav-button,
+.nothing-here,
+.brand__tagline,
+.table-of-contents
+{
+background: var(--bgPage);
+color: var(--textPage)
+}
+
+
+/*--------------------
+override for bold text
+--------------------*/
+
+/* strong elements */
+.navigation-bar strong,
+.status-card__title,
+.status-direct .display-name strong,
+.reply-indicator__display-name strong,
+.admin-wrapper .content>p strong,
+.simple_form strong,
+.regeneration-indicator__label strong,
+.account__section-headline a.active,
+    .account__section-headline button.active,
+    .notification__filter-bar a.active,
+    .notification__filter-bar button.active,
+/* public pages */
+.information-board__section,
+    .information-board__section span:last-child,
+.endorsements-widget .display-name__html,
+    .endorsements-widget h4,
+.pagination .page,
+    .pagination .gap,
+    .pagination .newer,
+    .pagination .older,
+    .pagination a
+{
+color: var(--textPageBold)
+}
+
+/*---------------------
+override for muted text
+---------------------*/
+
+/* de-emphasized elements */
+.navigation-bar,
+.navigation-panel hr,
+.getting-started,
+    .getting-started p,
+    .getting-started__footer p,
+.column-subheading,
+.account__section-headline a,
+.status-direct .icon-button,
+    .status-direct .display-name,
+    .status-direct .status__relative-time,
+    .status-direct .status__action-bar__counter__label,
+.status-direct.muted .status__content p,
+    .status-direct.muted .status__content a,
+    .status-direct.muted .display-name strong,
+.notification-favourite .status.status-direct .icon-button.disabled,
+.simple_form p.hint,
+    .simple_form span.hint,
+    .admin-wrapper .content .muted-hint,
+    .admin-wrapper .content>p,
+.status-card__host,
+.button:disabled,
+.loading-indicator,
+.list-editor .search__input::placeholder,
+    .list-editor .search__icon .fa,
+    .list-editor .search__icon .fa-times-circle,
+/* settings page */
+body .neutral-hint, .admin-wrapper .content .neutral-hint,
+/* public pages */
+.endorsements-widget .display-name__account,
+.public-layout .footer h4,
+    .public-layout .footer ul a,
+    .public-layout .footer ul li,
+    .public-layout .footer .grid .column-2 h4 a,
+    .public-layout .header .nav-button,
+/* log in, sign up, forgot passwd */
+.form-footer a,
+.lighter .simple_form p.hint.subtle-hint
+{
+color: var(--textPageMuted)
+}
+
+/* border color fix */
+.status.status-direct:not(.read),
+.table-of-contents li a
+{border-color: var(--textPageMuted)}
+
+/* Tuan's fix*/
+body {
+background: var(--bgPage);
+}
+code {
+background: var(--bg);
+}
+.page-header {
+background: var(--bgPage);
+}
+.tabs-bar__link {   
+border-bottom: 2px solid var(--bg);
+}
+.tabs-bar__link.active {
+border-bottom: 2px solid var(--bgHead);
+}
+@media screen and (min-width: 631px) {
+.auto-columns .tabs-bar__link:active, .auto-columns .tabs-bar__link:focus, .auto-columns .tabs-bar__link:hover {
+	background: var(--bg);
+	border-bottom-color: var(--accent);
+	}
+}
+.drawer--results {
+background: var(--bgPage);
+}
+.trends__item {
+box-shadow: 0 0 2px #000;
+border-radius: 2px;
+margin: 8px;
+padding: 15px;
+border-bottom: 1px solid #393f4f;
+}
+.drawer--results>.search-results__contents>section h5 {
+box-shadow: 0 0 2px #000;
+border-radius: 2px;
+margin: 8px;
+background: var(--bg);
+border-bottom: 1px solid var(--bgPage);
+padding: 15px;
+color: var(--textBold);
+}
+.drawer--results>.search-results__contents {
+background: var(--bgPage);
+}
+.drawer--results>header {
+color: var(--textHead);
+background: var(--bgHead);
+border-radius: 2px;
+box-shadow: 0 0 2px #000;
+margin-bottom: 8px;
+}
+.status__content {
+line-height: 20px;
+}
+.status__content .emojione {
+width: 30px;
+height: 30px;
+margin: 0px 0 0;
+}

app/javascript/flavours/glitch/styles/mfc/3-highlights.css

@@ -0,0 +1,224 @@
+/*------------------------------------------------------------------------------
+* HIGHLIGHTS COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/* scrollbar fix */
+html {scrollbar-color: var(--bg) var(--bgPage)}
+
+/*------------------
+headers and warnings
+------------------*/
+
+/* columns view */
+    .column-header,
+        .column-header__button,
+        .column-header__back-button,
+        .column-header__button:hover,
+        .column-header__back-button:hover,
+        .column-back-button,
+        .column-header>.column-header__back-button,
+        .column-header.active .column-header__icon,
+    .search-results__header,
+    .keyboard-shortcuts kbd,
+    .compose-form__warning,
+        .compose-form .compose-form__warning,
+    .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track,
+    .column-link__badge,
+    .column-link--transparent.active,
+/* settings pages */
+    .list-editor h4,
+    .admin-wrapper .content h4,
+        .admin-wrapper .sidebar ul ul a.selected,
+    .flash-message,
+        .flash-message.notice,
+    .column-inline-form,
+        .column-inline-form .icon-button,
+        .simple_form .warning,
+        .table-form .warning,
+    .pagination .current,
+    .account-role,
+    .batch-table__toolbar
+{
+    background: var(--bgHead);
+    color: var(--textHead)
+}
+
+/*--------------
+accented buttons
+--------------*/
+
+/* primary buttons */
+.directory__tag > a:hover, .directory__tag > a:active, .directory__tag > a:focus,
+    .button,
+        .button:active,
+        .button:focus,
+        .button:hover,
+    .icon-button.overlayed:hover,
+    .floating-action-button,
+    .simple_form button,
+        .simple_form button:active,
+        .simple_form button:focus,
+        .simple_form button:hover,
+        .simple_form .button,
+            .simple_form .button:active,
+            .simple_form .button:focus,
+            .simple_form .button:hover,
+        .simple_form .block-button,
+            .simple_form .block-button:active,
+            .simple_form .block-button:focus,
+            .simple_form .block-button:hover,
+    .button.button-alternative:hover,
+        .button.button-alternative-2:hover,
+    .column-link:hover,
+        .getting-started a.column-link:hover,
+    .column-header__button:hover,
+        .column-header__button.active:hover,
+        .column-header__back-button:hover,
+        .column-back-button:hover,
+    .drawer__header a:hover,
+    .react-toggle--checked .react-toggle-track,
+    .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
+    .privacy-dropdown.active .privacy-dropdown__value.active,
+        .privacy-dropdown__option:hover,
+        .privacy-dropdown__option.active,
+        .privacy-dropdown__option.active:hover,
+    .admin-wrapper .sidebar ul a:hover,
+        .admin-wrapper .sidebar ul ul a.selected:hover,
+    .reply-indicator__content .status__content__spoiler-link:hover,
+        .status__content .status__content__spoiler-link:hover,
+    .load-more:hover,
+    .conversation__unread,
+/* modals */
+    .confirmation-modal__action-bar .confirmation-modal__cancel-button:active,
+        .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus,
+        .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover,
+    .confirmation-modal__action-bar .mute-modal__cancel-button:active,
+        .confirmation-modal__action-bar .mute-modal__cancel-button:focus,
+        .confirmation-modal__action-bar .mute-modal__cancel-button:hover,
+    .mute-modal__action-bar .confirmation-modal__cancel-button:active,
+        .mute-modal__action-bar .confirmation-modal__cancel-button:focus,
+        .mute-modal__action-bar .confirmation-modal__cancel-button:hover,
+    .mute-modal__action-bar .mute-modal__cancel-button:active,
+        .mute-modal__action-bar .mute-modal__cancel-button:focus,
+        .mute-modal__action-bar .mute-modal__cancel-button:hover,
+    .upload-progress__tracker,
+    .radio-button__input.checked,
+/* public pages */
+    .public-layout .header .nav-button:hover,
+        .public-layout .header .brand:active,
+        .public-layout .header .brand:focus,
+        .public-layout .header .brand:hover,
+    .button.button-secondary:hover,
+/* settings pages */
+    .pagination .page.current:hover,
+    .introduction__dot.active,
+    .dashboard__counters > div > a:hover,
+        .dashboard__counters > div > a:focus,
+        .dashboard__counters > div > a:active,
+        .dashboard__counters > div > a:hover .dashboard__counters__label,
+        .dashboard__counters > div > a:focus .dashboard__counters__label,
+        .dashboard__counters > div > a:active .dashboard__counters__label,
+/* video player ui */
+    .video-player__seek__buffer,
+    .video-player__seek__progress,
+    .video-player__volume__current,
+    .video-player__volume__handle,
+/* announcements */
+    .icon-with-badge__badge,
+    .announcements__item__unread,
+    .reactions-bar__item:hover
+{
+    background: var(--accent);
+    color: var(--accentText);
+}
+
+/*------------
+accented links
+------------*/
+
+/* status links */
+    .status__content a,
+        .status__content a.unhandled-link,
+    .getting-started a,
+        .getting-started p a,
+        .getting-started__footer a,
+        .getting-started__footer p a,
+    .reply-indicator__content a,
+        .reply-indicator__content a.unhandled-link,
+        .reply-indicator__cancel .icon-button.inverted:hover,
+    .status__content__read-more-button,
+    .icon-button.active,
+        .icon-button:focus,
+        .icon-button:hover,
+    .search__icon .fa:hover,
+    .account__header__bio .account__header__fields a,
+    .notification-follow .account .icon-button:hover,
+    .notification__message .fa,
+    .notification__display-name:hover,
+    .admin-wrapper .content .muted-hint a,
+    .table a,
+        a.table-action-link:hover,
+        button.table-action-link:hover,
+    .media-spoiler:active,
+        .media-spoiler:focus,
+        .media-spoiler:hover,
+        .video-player__spoiler.active:hover,
+    .column-header__setting-btn:hover,
+        .column-inline-form .icon-button:hover,
+    .empty-column-indicator a, .error-column a,
+    .timeline-hint a,
+/* post options */
+    .compose-form .text-icon-button:hover,
+        .text-icon-button.active,
+        .drawer__inner .icon-button:hover,
+        .icon-button.inverted.active.disabled,
+    .navigation-bar__profile-edit:hover,
+        .navigation-bar__profile-account:hover,
+        .account__action-bar-dropdown .icon-button:hover,
+        .account__section-headline a:hover,
+    .compose-form .compose-form__warning a,
+/* modals */
+    .list-editor .account .icon-button:hover,
+        .list-editor .account .icon-button:active,
+        .list-editor .account .icon-button:focus,
+/* public pages */
+    .simple_form .input.boolean label a,
+    .landing-page__short-description p a,
+        .landing-page #mastodon-timeline p a,
+    .simple_form p.hint.subtle-hint a,
+    .contact-widget__mail a,
+    .public-layout .footer ul a:hover,
+        .public-layout .footer .grid .column-2 h4 a:hover,
+        .public-layout .public-account-bio .account__header__fields a,
+        .form-footer a:hover,
+/* settings pages */
+    .pagination a:hover,
+        .pagination .newer:hover,
+        .pagination .older:hover,
+    .filters .filter-subset a.selected,
+    .simple_form .hint a,
+/* mobile elements */
+    .tabs-bar__link.active
+{
+    color: var(--accent) !important
+}
+
+/* border fix */
+.react-toggle--checked .react-toggle-thumb,
+.radio-button__input.checked,
+.icon-with-badge__badge,
+.filters .filter-subset a.selected,
+.introduction__dot,
+.public-layout .public-account-header__tabs__tabs .counter.active::after
+{border-color: var(--accent)}
+
+/* trends fix */
+.trends__item__sparkline path:first-child {fill: transparent !important}
+.trends__item__sparkline path:last-child {stroke: var(--accent) !important}
+
+/* focus fix */
+.focusable:focus
+{
+  background: transparent;
+  border: 2px solid var(--accent);
+}

app/javascript/flavours/glitch/styles/mfc/5-material.css

@@ -0,0 +1,72 @@
+/*-----------------------
+material design overrides
+-----------------------*/
+
+/* turn statuses into cards */
+.drawer__inner darker {filter: drop-shadow(0 0 2px black)}
+.status,
+.conversation,
+.account-authorize__wrapper,
+.follow_requests-unlocked_explanation
+{
+    box-shadow: 0px 0px 2px black;
+    background: var(--bg);
+    margin: 8px;
+    border-radius: 2px;
+    border: 0
+}
+.status__wrapper--filtered {border: none}
+.detailed-status__wrapper {margin: 8px;} /*might look weird in older versions pre-2.6?*/
+
+/* recolors */
+.column>.scrollable,
+.landing-page #mastodon-timeline,
+.activity-stream .entry
+    {background: none !important}
+.account-timeline__header,
+.account,
+.conversation
+    {background: var(--bg)}
+.notification .account,
+.load-more
+    {background: var(--bgPage)}
+.status__prepend,
+.notification__message,
+.status__prepend .status__display-name strong,
+.keyboard-shortcuts
+    {color: var(--textPage) !important}
+.notification-follow .display-name__html
+    {color: var(--textPageBold)}
+.notification-follow .display-name__account,
+.notification-follow .account .icon-button,
+.status__wrapper--filtered,
+.load-more
+    {color: var(--textPageMuted)}
+
+/* borders */
+.account__section-headline, .notification__filter-bar,
+.account--panel, .account__header__bar, .account__header__bio .account__header__fields, .status, .detailed-status__action-bar, .account__header__fields dl, .account__header__bio .account__header__fields, .account, .directory__card__extra .account__header__content, .account__section-headline, .notification__filter-bar,
+.conversation,
+.account__header__fields,
+.account__header__account-note,
+.public-layout .public-account-header__tabs__tabs .counter
+
+{border-color: transparent}
+
+/* triangle tab indicator */
+.account__section-headline a.active:after,
+.account__section-headline a.active:before,
+.community-timeline__section-headline a.active:after,
+.community-timeline__section-headline a.active:before,
+.public-timeline__section-headline a.active:after,
+.public-timeline__section-headline a.active:before,
+.notification__filter-bar button.active::before,
+.notification__filter-bar button.active::after
+{
+    border-color: transparent transparent var(--bgHead)
+}
+
+/* fix rounding on end toots in stream */
+.activity-stream .entry:first-child .status,
+.activity-stream .entry:last-child .status
+{border-radius: 2px}

app/javascript/flavours/glitch/styles/mfc/clean.css

@@ -0,0 +1,65 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+* 
+* Foreground Colors:
+*            --bg: | Background for foreground elements.
+*          --text: | A color that stands out against bg.
+*      --textBold: | A color that stands out strongly against bg.
+*     --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+*        --bgPage: | Background for non-foreground elements.
+*      --textPage: | A color that stands out against bgPage.
+*  --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+*        --bgHead: | Background for column headers.
+*      --textHead: | A color that stands out (strongly) against bgHead.
+*        --accent: | An accent color for links and buttons.
+*    --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+*   - Consider using an off-white or off-black for text tones,
+*     but not necessary as long as there is sufficient contrast.
+*   - Bold colors are highly recommended to be strong colors,
+*     like pure white or pure black.
+*   - Muted colors can be off-grey or any mid-tone with slight contrast.
+*   - It might be best to base the background palette on a slightly
+*     darker or lighter version of the foreground palette, but
+*     this is no longer strictly necessary; you may use mixed palettes.
+*     It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* copy and paste the desired palette at the end of this section,
+* or you can delete the ones you don't want, or comment them out.
+*/
+
+
+/* Clean Slate:
+* white columns on a light-grey page, with dark grey headers and blue accent.
+*/
+:root {
+--bg: #fff;
+--text: #123;
+--textBold: #000;
+--textMuted: #666;
+
+--bgPage: #ddd;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: #fff;
+--accent: #09f;
+--accentText: var(--textHead);
+}

app/javascript/flavours/glitch/styles/mfc/droid.css

@@ -0,0 +1,65 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+* 
+* Foreground Colors:
+*            --bg: | Background for foreground elements.
+*          --text: | A color that stands out against bg.
+*      --textBold: | A color that stands out strongly against bg.
+*     --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+*        --bgPage: | Background for non-foreground elements.
+*      --textPage: | A color that stands out against bgPage.
+*  --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+*        --bgHead: | Background for column headers.
+*      --textHead: | A color that stands out (strongly) against bgHead.
+*        --accent: | An accent color for links and buttons.
+*    --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+*   - Consider using an off-white or off-black for text tones,
+*     but not necessary as long as there is sufficient contrast.
+*   - Bold colors are highly recommended to be strong colors,
+*     like pure white or pure black.
+*   - Muted colors can be off-grey or any mid-tone with slight contrast.
+*   - It might be best to base the background palette on a slightly
+*     darker or lighter version of the foreground palette, but
+*     this is no longer strictly necessary; you may use mixed palettes.
+*     It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* copy and paste the desired palette at the end of this section,
+* or you can delete the ones you don't want, or comment them out.
+*/
+
+
+/* Droid/Flamingo:
+* dark neutral-grey page, with either Android Green or Flamingo accent.
+*/
+:root {
+--bg: #222;
+--text: #ddd;
+--textBold: #fff;
+--textMuted: #777;
+
+--bgPage: #111;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: var(--textBold);
+--accent: #a4c639;
+--accentText: var(--textHead);
+}

app/javascript/flavours/glitch/styles/mfc/fix.css

@@ -0,0 +1,7 @@
+#premotd {
+    background: var(--bg) !important;
+}
+
+#motd #premotd a {
+    color: var(--accent) !important;
+}

app/javascript/flavours/glitch/styles/mfc/flamingo.css

@@ -0,0 +1,65 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+* 
+* Foreground Colors:
+*            --bg: | Background for foreground elements.
+*          --text: | A color that stands out against bg.
+*      --textBold: | A color that stands out strongly against bg.
+*     --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+*        --bgPage: | Background for non-foreground elements.
+*      --textPage: | A color that stands out against bgPage.
+*  --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+*        --bgHead: | Background for column headers.
+*      --textHead: | A color that stands out (strongly) against bgHead.
+*        --accent: | An accent color for links and buttons.
+*    --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+*   - Consider using an off-white or off-black for text tones,
+*     but not necessary as long as there is sufficient contrast.
+*   - Bold colors are highly recommended to be strong colors,
+*     like pure white or pure black.
+*   - Muted colors can be off-grey or any mid-tone with slight contrast.
+*   - It might be best to base the background palette on a slightly
+*     darker or lighter version of the foreground palette, but
+*     this is no longer strictly necessary; you may use mixed palettes.
+*     It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* copy and paste the desired palette at the end of this section,
+* or you can delete the ones you don't want, or comment them out.
+*/
+
+
+/* Droid/Flamingo:
+* dark neutral-grey page, with either Android Green or Flamingo accent.
+*/
+:root {
+--bg: #222;
+--text: #ddd;
+--textBold: #fff;
+--textMuted: #777;
+
+--bgPage: #111;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: var(--textBold);
+--accent: #f09;
+--accentText: var(--textHead);
+}

app/javascript/flavours/glitch/styles/mfc/twitter.css

@@ -0,0 +1,65 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+* 
+* Foreground Colors:
+*            --bg: | Background for foreground elements.
+*          --text: | A color that stands out against bg.
+*      --textBold: | A color that stands out strongly against bg.
+*     --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+*        --bgPage: | Background for non-foreground elements.
+*      --textPage: | A color that stands out against bgPage.
+*  --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+*        --bgHead: | Background for column headers.
+*      --textHead: | A color that stands out (strongly) against bgHead.
+*        --accent: | An accent color for links and buttons.
+*    --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+*   - Consider using an off-white or off-black for text tones,
+*     but not necessary as long as there is sufficient contrast.
+*   - Bold colors are highly recommended to be strong colors,
+*     like pure white or pure black.
+*   - Muted colors can be off-grey or any mid-tone with slight contrast.
+*   - It might be best to base the background palette on a slightly
+*     darker or lighter version of the foreground palette, but
+*     this is no longer strictly necessary; you may use mixed palettes.
+*     It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* copy and paste the desired palette at the end of this section,
+* or you can delete the ones you don't want, or comment them out.
+*/
+
+
+/* Midnight Blue:
+* a dark blue palette based loosely on Twitter's night mode.
+*/
+:root {
+--bg: #123;
+--text: #d0d8e0;
+--textBold: #fff;
+--textMuted: #808890;
+
+--bgPage: #051119;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #357;
+--textHead: var(--textBold);
+--accent: #09f;
+--accentText: var(--textBold);
+}

app/javascript/flavours/glitch/styles/mfc/variables.scss

@@ -0,0 +1,11 @@
+/* define scss variables in palette.scss of subtheme */
+:root {
+--bgPage: $bgPage;
+--bg: $bg;
+--bgHead: $bgHead;
+--text: $text;
+--textBold: $textBold;
+--textMuted: $textMuted;
+--textHead: $textHead;
+--accent: $accent;
+}

app/javascript/flavours/glitch/styles/motd.scss

@@ -0,0 +1,12 @@
+#premotd {
+    background:$ui-base-color;
+    padding:7px;
+    color: $primary-text-color;
+    margin-top: 30px;
+    border-radius:6px;
+}
+
+#motd #premotd a {
+    color:$highlight-text-color;
+    font-family:monospace;
+}

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

@@ -256,6 +256,8 @@ class ComposeForm extends ImmutablePureComponent {
         <div className='compose-form__publish'>
           <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={!this.canSubmit()} block /></div>
         </div>
+
+        <div id="motd"></div>
       </div>
     );
   }

app/javascript/skins/glitch/cyberpunk/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      cyberpunk: Cyberpunk
+

app/javascript/skins/glitch/flat-clean/common.scss

@@ -0,0 +1 @@
+@import 'flavours/glitch/styles/flatClean';

app/javascript/skins/glitch/flat-clean/names.yml

@@ -0,0 +1,8 @@
+en:
+  skins:
+    glitch:
+      mastodonFlat: Clean Flat 
+es:
+  skins:
+    glitch:
+      mastodonFlat: Flat

app/javascript/skins/glitch/flat-droid/common.scss

@@ -0,0 +1 @@
+@import 'flavours/glitch/styles/flatDroid';

app/javascript/skins/glitch/flat-droid/names.yml

@@ -0,0 +1,8 @@
+en:
+  skins:
+    glitch:
+      mastodonFlat: Droid Flat 
+es:
+  skins:
+    glitch:
+      mastodonFlat: Flat

app/javascript/skins/glitch/flat-flamingo/common.scss

@@ -0,0 +1 @@
+@import 'flavours/glitch/styles/flatFlamingo';

app/javascript/skins/glitch/flat-flamingo/names.yml

@@ -0,0 +1,8 @@
+en:
+  skins:
+    glitch:
+      mastodonFlat: Flamingo Flat 
+es:
+  skins:
+    glitch:
+      mastodonFlat: Flat

app/javascript/skins/glitch/flat-twitter/common.scss

@@ -0,0 +1 @@
+@import 'flavours/glitch/styles/flatTwitter';

app/javascript/skins/glitch/flat-twitter/names.yml

@@ -0,0 +1,8 @@
+en:
+  skins:
+    glitch:
+      mastodonFlat: Midnight Flat 
+es:
+  skins:
+    glitch:
+      mastodonFlat: Flat

app/javascript/skins/glitch/kafuka/common.scss

@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'flavours/glitch/styles/index';

app/javascript/skins/glitch/kafuka/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      kafuka: Minty Blend
+

app/javascript/skins/glitch/kafuka/variables.scss

@@ -0,0 +1,62 @@
+// Commonly used web colors
+$black: #000000;            // Black
+$white: #ffffff;            // White
+$success-green: #79bd9a;    // Padua
+$error-red: #df405a;        // Cerise
+$warning-red: #ff5050;      // Sunset Orange
+$gold-star: #ca8f04;        // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Kafuka Theme Unique Colors. Color names may come later.
+$classic-base-color: #111;
+$classic-primary-color: #9bc8ae;
+$classic-secondary-color: #edfcf5;
+$classic-highlight-color: #17bf63;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+// Avatar border size (8% default, 100% for rounded avatars)
+$ui-avatar-border-size: 8%;
+
+// More variables
+$dismiss-overlay-width: 4rem;

app/javascript/skins/glitch/koyuspace/common.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'overrides';
+@import 'flavours/glitch/styles/index';

app/javascript/skins/glitch/koyuspace/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      koyuspace: koyu.space
+

app/javascript/skins/glitch/koyuspace/overrides.scss

@@ -0,0 +1,83 @@
+.fa-bell:before,
+.fa-bell-o:before {
+    content: "\f0e7" !important;
+}
+
+.fa-home:before {
+    content: "\f10c" !important;
+}
+
+.fa-unlock:before {
+    content: "" !important;
+}
+
+.fa-at::before {
+    content: "" !important;
+}
+
+@font-face {
+    font-family: 'Titan One';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Titan One'), local('TitanOne'), url(https://koyu.space/fonts/titan-one.woff2) format('woff2');
+}
+
+.fa {
+    font-family:'FontAwesome' !important;
+}
+
+.form_admin_settings_closed_registrations_message textarea,
+.form_admin_settings_custom_css textarea,
+.form_admin_settings_site_description textarea,
+.form_admin_settings_site_extended_description textarea,
+.form_admin_settings_site_short_description textarea,
+.form_admin_settings_site_terms textarea {
+    font-family: "mastodon-font-monospace",monospace !important;
+}
+
+*,
+*:before,
+*:after {
+    box-shadow: none !important;
+    border: none !important;
+}
+
+.endorsements-widget,
+.placeholder-widget,
+.public-account-bio {
+    background: #223 !important;
+    border-radius: 4px;
+    word-break: break-all;
+}
+
+.public-layout .public-account-header__bar {
+    background: #223;
+    border-radius: 0 0 4px 4px;
+    padding-top: 15px;
+}
+
+.public-layout .footer {
+    background: #223;
+    padding-left: 20px;
+    padding-bottom: 30px !important;
+    margin-top: 30px;
+    border-radius: 20px 20px 0 0;
+}
+
+@media(min-width:800px) {
+    .search__input,
+    .drawer--header,
+    .drawer__inner {
+        border-radius: 5px;
+    }
+
+    .column-header {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+    }
+
+    .column > .scrollable {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+}

app/javascript/skins/glitch/koyuspace/variables.scss

@@ -0,0 +1,61 @@
+// Commonly used web colors
+$black: #000000;            // Black
+$white: #ffffff;            // White
+$success-green: #79bd9a;    // Padua
+$error-red: #df405a;        // Cerise
+$warning-red: #ff5050;      // Sunset Orange
+$gold-star: #ca8f04;        // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+$classic-base-color: #223;
+$classic-primary-color: #ccc;
+$classic-secondary-color: #f5f5f5;
+$classic-highlight-color: #fe53e0;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+// Avatar border size (8% default, 100% for rounded avatars)
+$ui-avatar-border-size: 8%;
+
+// More variables
+$dismiss-overlay-width: 4rem;

app/javascript/skins/glitch/pitchpink/common.scss

@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'flavours/glitch/styles/index';

app/javascript/skins/glitch/pitchpink/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      pitchpink: Pitch Pink
+

app/javascript/skins/glitch/pitchpink/variables.scss

@@ -0,0 +1,62 @@
+// Commonly used web colors
+$black: #000000;            // Black
+$white: #ffffff;            // White
+$success-green: #79bd9a;    // Padua
+$error-red: #df405a;        // Cerise
+$warning-red: #ff5050;      // Sunset Orange
+$gold-star: #ca8f04;        // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+// Kafuka Theme Unique Colors. Color names may come later.
+$classic-base-color: #111;
+$classic-primary-color: #c89bb7;
+$classic-secondary-color: #fcedf6;
+$classic-highlight-color: #bf178d;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+// Avatar border size (8% default, 100% for rounded avatars)
+$ui-avatar-border-size: 8%;
+
+// More variables
+$dismiss-overlay-width: 4rem;

app/javascript/skins/glitch/pumpkin/common.scss

@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'flavours/glitch/styles/index';

app/javascript/skins/glitch/pumpkin/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      pumpkin: Pumpkin
+

app/javascript/skins/glitch/pumpkin/variables.scss

@@ -0,0 +1,61 @@
+// Commonly used web colors
+$black: #000000;            // Black
+$white: #ffffff;            // White
+$success-green: #79bd9a;    // Padua
+$error-red: #df405a;        // Cerise
+$warning-red: #ff5050;      // Sunset Orange
+$gold-star: #ca8f04;        // Dark Goldenrod
+
+$red-bookmark: $warning-red;
+
+$classic-base-color: #000;
+$classic-primary-color: #ccc;
+$classic-secondary-color: #cabdb5;
+$classic-highlight-color: #d35400;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $ui-primary-color !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$media-modal-media-max-height: 80%;
+
+$no-gap-breakpoint: 415px;
+
+$font-sans-serif: 'mastodon-font-sans-serif' !default;
+$font-display: 'mastodon-font-display' !default;
+$font-monospace: 'mastodon-font-monospace' !default;
+
+// Avatar border size (8% default, 100% for rounded avatars)
+$ui-avatar-border-size: 8%;
+
+// More variables
+$dismiss-overlay-width: 4rem;

app/javascript/skins/glitch/safari/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      safari: Safari
+

app/javascript/skins/glitch/summertime/common.scss

@@ -0,0 +1,364 @@
+@import 'flavours/glitch/styles/mastodon-light';
+
+/* 背景色と文字色の設定 */
+/* 全体 */
+.ui{
+  -webkit-background-size: 128px 128px;
+  -moz-background-size: 128px 128px;
+  background-size: 128px 128px;
+  background-color: #fffbe7;
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #08bec6), color-stop(.5, transparent), to(transparent));
+  background-image: -moz-linear-gradient(left, #08bec6 50%, transparent 50%, transparent);
+  background-image: -o-linear-gradient(left, #08bec6 50%, transparent 50%, transparent);
+  background-image: linear-gradient(left, #08bec6 50%, transparent 50%, transparent);
+}
+/* drawer */
+.drawer__inner,
+.drawer__inner strong,
+.navigation-bar__profile{
+  background-color: #ffe4ad !important;
+  color: #20455a;
+}
+.navigation-bar__profile a:hover{
+  text-decoration: underline;
+}
+.reply-indicator,
+.reply-indicator strong{
+  background-color: #fac578 !important;
+}
+.compose-form__buttons-wrapper,
+.announcements li,
+.trend-tags__sparkline.normal,
+.trend-tags__sparkline.normal svg{
+  background-color: #ebfaf8 !important;
+}
+.privacy-dropdown__value.active,
+.privacy-dropdown__value,
+.text-icon-button.active{
+  background-color: #63dbdb !important;
+}
+.navigation-bar,
+.navigation-bar__profile,
+.navigation-bar__profile strong,
+.compose__extra__header{
+  background-color: #fac578 !important;
+  padding: 6px;
+  border-radius: 4px;
+}
+.compose__extra,
+.compose__extra__body li,
+.compose__extra__body li a,
+.favourite-tags__icon,
+.favourite-tags__lock{
+  background-color: #ffe4ad !important;
+}
+.drawer__inner__mastodon{
+  background-color: #ffe4ad !important;
+  background-image: none;
+}
+/* ヘッダー */
+.column-header,
+.column-header *,
+.getting-started__wrapper,
+.getting-started__wrapper *,
+.column-icon,
+.tabs-bar,
+.drawer__header,
+.drawer__header *,
+.column-back-button,
+.search-results__header,
+.favourite-tags *,
+.trend-tags__header,
+.column-header__collapsible-inner{
+  background-color: #520021;
+  color: #ffffff;
+}
+/* スタートカラム */
+.column-subheading{
+  background-color: #f77163 !important;
+  color: #520021 !important;
+}
+.getting-started__wrapper,
+.column-link,
+.getting-started__footer{
+  background-color: #ffb2c6 !important;
+  color: #520021 !important;
+  margin: 1px;
+}
+.getting-started.getting-started__footer{
+  background-color: #fff3ef !important;
+}
+.getting-started__footer a span{
+      color: #7b3484 !important;
+}
+.getting-started__footer span{
+      color: #520021 !important;
+}
+.getting-started__footer p span a{
+      color: #7b3484 !important;
+}
+/* トゥートカラム */
+.scrollable,
+.drawer__inner.darker,
+.search-results__section *,
+.status.status-direct,
+.tabs-bar__link :hover,
+.drawer__header>a:hover,
+.drawer__header>a:hover *,
+.empty-column-indicator,
+.suggestion-tags__body>ul>li,
+.suggestion-tags__body>ul>li *{
+  background-color: #f7fbff !important;
+  color: #2f0016 !important;
+}
+/* 通知カラム */
+.notification__filter-bar button{
+  background-color: #e9f1f8;
+  color: #383a3c;
+}
+.notification__filter-bar button.active{
+  background-color: #cbdbe9;
+  color: #131313 !important;
+}
+/* ボタン */
+.status__content a,
+.status__content a>span,
+span.ellipsis,
+.active,
+.search__icon *{
+  color: #067193 !important;
+}
+.compose-form__buttons .active{
+  background-color: #282c37;
+}
+.button{
+  opacity: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+  display: inline-block;
+  padding: 0.5em 1em;
+  text-decoration: none;
+  border-radius: 4px;
+  color: #ffffff;
+  background-image: -webkit-linear-gradient(#08c3c6 0%, #0086c6 100%);
+  background-image: linear-gradient(#08c3c6 0%, #0086c6 100%);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
+  border-bottom: solid 3px #0869b5;
+}
+.button:hover{
+  color: #ffffff;
+  background-image: -webkit-linear-gradient(#bd9ade 0%, #ad559c 100%);
+  background-image: linear-gradient(#bd9ade 0%, #ad559c 100%);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
+  border-bottom: solid 3px #6b3073;
+}
+.button:active{
+  -ms-transform: translateY(2px);
+  -webkit-transform: translateY(2px);
+  transform: translateY(2px);
+  box-shadow: 2px 0px 0px rgba(0, 0, 0, 0.2);
+  border-bottom: none;
+}
+.button.confirmation-modal__cancel-button,
+.button.mute-modal__cancel-button{
+  color: #ffffff;
+}
+.button.confirmation-modal__cancel-button:hover,
+.button.mute-modal__cancel-button:hover{
+  color: #2a1b0a;
+}
+.spoiler-button.spoiler-button--visible:hover,
+.icon-button.overlayed:hover{
+  background-color: #fff28a;
+}
+
+/* 未収載トゥートの色分け */
+.status-unlisted{
+  background: #ffd7df;
+}
+
+/* 角を丸くする */
+/* 全体 */
+.column .scrollable,
+.drawer__pager,
+.privacy-dropdown__value,
+.compose-form__sensitive-button__icon{
+  border-radius: 4px;    /* CSS3草案 */  
+  -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
+  -moz-border-radius: 4px;    /* Firefox用 */
+}
+/* ヘッダーとボタン */
+.drawer__header,
+.drawer__tab,
+.column-header__wrapper,
+.column-header,
+.column-header__button,
+.column-header__buttons,
+.column-header__collapsible,
+.column-back-button{
+  border-radius: 8px;    /* CSS3草案 */  
+  -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
+  -moz-border-radius: 8px;    /* Firefox用 */
+}
+/* トゥートカラム */
+.compose__extra,
+.compose__extra__header{
+  border-radius: 0 4px 4px 0;   /* CSS3草案 */  
+  -webkit-border-radius: 0 4px 4px 0;    /* Safari,Google Chrome用 */  
+  -moz-border-radius: 0 4px 4px 0;    /* Firefox用 */
+}
+.compose__extra__header{
+  border-radius: 0 4px 0 0;   /* CSS3草案 */  
+  -webkit-border-radius: 0 4px 0 0;    /* Safari,Google Chrome用 */  
+  -moz-border-radius: 0 4px 0 0;    /* Firefox用 */
+}
+.compose__extra__body,
+.compose__extra__body li{
+  border-radius: 0 0 4px 0;   /* CSS3草案 */  
+  -webkit-border-radius: 0 0 4px 0;    /* Safari,Google Chrome用 */  
+  -moz-border-radius: 0 0 4px 0;    /* Firefox用 */
+}
+/* スタートカラム */
+.getting-started__wrapper,
+.getting-started__footer,
+.column-subheading,
+.column-link{
+  border-radius: 4px;    /* CSS3草案 */  
+  -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
+  -moz-border-radius: 4px;    /* Firefox用 */
+}
+
+/* スクロールバーの設定 */
+/* 全体 */
+::-webkit-scrollbar,
+::-webkit-scrollbar-track-piece{
+  background: #fff3ef;
+  border-radius: 4px;
+  width: 8px;
+  -webkit-border-radius: 4px;
+}
+::-webkit-scrollbar:hover,
+::-webkit-scrollbar-track-piece:hover{
+  background: #fff39c;
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:hover{
+  background: #ffb2b5;
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track{
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+}
+.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar,
+.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-track-piece{
+  background: #ffe4ad;
+  border-radius: 4px;
+  width: 8px;
+  -webkit-border-radius: 4px;
+}
+.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar:hover,
+.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-track-piece:hover{
+  background: #ffe4ad;
+}
+.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-thumb,
+.compose__extra .scrollable.optionally-scrollable::-webkit-scrollbar-thumb:hover{
+  background: #916d4a;
+}
+/* ヘッダー */
+.column-header__collapsible::-webkit-scrollbar,
+.column-header__collapsible::-webkit-scrollbar-track-piece{
+  background: #ffffff;
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+}
+.column-header__collapsible::-webkit-scrollbar:hover,
+.column-header__collapsible::-webkit-scrollbar-track-piece:hover{
+  background: #ffffff;
+}
+.column-header__collapsible::-webkit-scrollbar-thumb,
+.column-header__collapsible::-webkit-scrollbar-thumb:hover{
+  background: #3e0d1d;
+}
+.column-header__collapsible::-webkit-scrollbar-thumb,
+.column-header__collapsible::-webkit-scrollbar-track{
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+}
+/* スタートカラム */
+.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar,
+.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-track-piece{
+  background: #ff9790;
+  border-radius: 0 4px 4px 0;
+  -webkit-border-radius: 0 4px 4px 0;
+}
+.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar:hover,
+.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-track-piece:hover{
+  background: #ff9790;
+}
+.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-thumb,
+.getting-started__footer.scrollable.optionally-scrollable::-webkit-scrollbar-thumb:hover{
+  background: #b92e4e;
+}
+/* トゥートカラム */
+.drawer__pager .drawer__inner{    /* スクロールバーを常時表示したくない場合はこの行全体を削除またはコメントアウトしてください */
+  overflow-y: scroll;    /* スクロールバーを常時表示したくない場合はこの行全体を削除またはコメントアウトしてください */
+}    /* スクロールバーを常時表示したくない場合はこの行全体を削除またはコメントアウトしてください */
+.drawer__pager .drawer__inner::-webkit-scrollbar,
+.drawer__pager .drawer__inner::-webkit-scrollbar-track-piece{
+  background: #fac578;
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+}
+.drawer__pager .drawer__inner::-webkit-scrollbar:hover,
+.drawer__pager .drawer__inner::-webkit-scrollbar-track-piece:hover{
+  background: #fac578;
+}
+.drawer__pager .drawer__inner::-webkit-scrollbar-thumb,
+.drawer__pager .drawer__inner::-webkit-scrollbar-thumb:hover{
+  background: #794a2f;
+}
+/* .compose__extra .scrollable.optionally-scrollable{ */
+/*     overflow: hidden; */
+/* } */
+
+.getting-started__trends {
+background: #ff9790;
+border-radius: 4px;
+}
+
+.getting-started__footer {
+margin-bottom: 7px;
+}
+
+.column-link--transparent.active {
+color: #000 !important;
+}
+
+.status-card__actions button {
+color: #ccc;
+}
+
+.status-card__actions button:hover {
+color: #fff;
+}
+
+.navigation-panel hr {
+border-top: 0;
+}
+
+.glitch.local-settings__navigation__item {
+border-bottom: 0;
+}
+
+.account__avatar,
+.account__avatar-overlay-base,
+.account__avatar-overlay-overlay {
+border-radius: 50% !important;
+}
+
+/* Metu Life edits */
+.icon-button.active {
+     color: #ff5050 !important;
+}

app/javascript/skins/glitch/summertime/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      summertime: Summertime
+

app/javascript/skins/glitch/witches/common.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'flavours/glitch/styles/index';
+@import 'fixes';

app/javascript/skins/glitch/witches/fixes.scss

@@ -0,0 +1,3 @@
+.status__content .status__content__text, .reply-indicator__content .status__content__text {
+    display: block;
+}

app/javascript/skins/glitch/witches/names.yml

@@ -0,0 +1,5 @@
+en:
+  skins:
+    glitch:
+      witches: Witches (unstable)
+

app/javascript/skins/vanilla/win95/common.scss

@@ -1 +0,0 @@
-@import 'styles/win95';

app/javascript/skins/vanilla/win95/names.yml

@@ -1,4 +0,0 @@
-en:
-  skins:
-    vanilla:
-      win95: Ｍａｓｔｏ95

app/javascript/styles/linernotes_dark.scss

@@ -0,0 +1,17 @@
+@import 'application';
+
+@import 'mfc/mastodonFlat';
+@import 'linernotes_dark/palette';
+@import 'linernotes_dark/overrides';
+
+@import 'mods/display_breakname';
+@import 'mods/display_fullname';
+@import 'mods/display_browserfont';
+@import 'mods/display_circleavatar';
+@import 'mods/display_collapsedinteractions';
+@import 'mods/display_fadedinteractions';
+@import 'mods/display_transparentmedia';
+@import 'mods/layout_1600px';
+@import 'mods/layout_elefriend';
+@import 'mods/layout_widercolumns';
+@import 'mods/layout_mobile_bottombar';

app/javascript/styles/linernotes_dark/overrides.scss

@@ -0,0 +1,15 @@
+/*---------
+MISC TWEAKS
+---------*/
+
+/* replace elephant friend with vinyl */
+.drawer__inner__mastodon {background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 488.2 488.2' style='enable-background:new 0 0 488.2 488.2;' xml:space='preserve'%3E%3Ccircle style='fill:%232A3332;' cx='244.1' cy='244.2' r='244'/%3E%3Cpath style='fill:%23121C1B;' d='M71.3,71.4c95.2-95.2,249.6-95.2,344.8,0s95.2,249.6,0,344.8'/%3E%3Ccircle style='fill:%23F74D19;' cx='244.1' cy='244.2' r='104.8'/%3E%3Cpath style='fill:%23FF7A17;' d='M139.3,244.2c0-57.6,47.2-104.8,104.8-104.8s104.8,47.2,104.8,104.8'/%3E%3Cpath style='fill:%23E0360E;' d='M263.3,229l-36.8,36.8l69.6,69.6c8-4.8,15.2-10.4,22.4-16.8c5.6-5.6,11.2-12.8,15.2-19.2L263.3,229z' /%3E%3Ccircle style='fill:%23D3DEE2;' cx='244.1' cy='244.2' r='29.6'/%3E%3Cpath style='fill:%23EBF0F2;' d='M244.1,273.8c-16,0-29.6-13.6-29.6-29.6s12.8-29.6,29.6-29.6'/%3E%3Cg%3E%3Cpath style='fill:%23726C6A;' d='M244.1,448.2c-112.8,0-204-91.2-204-204c0-4,3.2-8,8-8c4,0,8,3.2,8,8c-0.8,104,84,188.8,188,188.8 c4,0,8,3.2,8,8C252.1,445,248.1,448.2,244.1,448.2z'/%3E%3Cpath style='fill:%23726C6A;' d='M440.9,252.2c-4,0-8-3.2-8-8c0-104-84.8-188.8-188.8-188.8c-4,0-8-3.2-8-8c0-4,3.2-8,8-8 c112.8,0,204,92,204,204C448.1,248.2,444.9,252.2,440.9,252.2z'/%3E%3Cpath style='fill:%23726C6A;' d='M244.1,401c-86.4,0-156.8-70.4-156.8-156.8c0-4,3.2-8,8-8c4,0,8,3.2,8,8 c0,77.6,63.2,141.6,141.6,141.6c4,0,8,3.2,8,8C252.1,397.8,248.1,401,244.1,401z'/%3E%3Cpath style='fill:%23726C6A;' d='M392.9,252.2c-4,0-8-3.2-8-8c0-77.6-63.2-141.6-141.6-141.6c-4,0-8-3.2-8-8c0-4,3.2-8,8-8 c86.4,0,156.8,70.4,156.8,156.8C400.9,248.2,397.7,252.2,392.9,252.2z'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat bottom center / contain !important;}
+.drawer__inner__mastodon > img {display: none;}
+
+/* repeating musical notes in background */
+.columns-area {background: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='75.000000pt' height='100.000000pt' viewBox='0 0 456.000000 599.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate%280.000000,599.000000%29 scale%280.100000,-0.100000%29' fill='%2300000022' stroke='none'%3E%3Cpath d='M2261 5576 c-51 -226 -189 -845 -306 -1376 -254 -1146 -404 -1813 -410 -1819 -3 -2 -40 18 -82 45 -133 83 -256 142 -380 183 -149 50 -254 65 -397 58 -197 -9 -328 -66 -461 -201 -128 -129 -193 -275 -217 -484 -28 -253 33 -443 192 -603 108 -108 221 -176 365 -222 341 -107 706 -24 1038 237 154 120 139 89 213 442 35 170 78 370 94 444 285 1311 472 2165 475 2168 3 4 1446 -1016 1495 -1056 20 -17 20 -18 -134 -712 -198 -890 -315 -1402 -320 -1408 -3 -2 -45 20 -93 51 -397 248 -767 304 -1063 161 -113 -55 -232 -178 -294 -305 -52 -106 -71 -174 -87 -304 -11 -91 -6 -227 12 -300 48 -196 209 -374 433 -481 351 -166 755 -105 1122 169 37 29 92 74 122 102 l53 50 464 2009 463 2010 -24 18 c-214 169 -1623 1180 -1929 1385 -104 69 -213 137 -236 145 -13 5 -30 -60 -108 -406z m1037 -967 c406 -293 741 -536 746 -540 8 -8 -34 -235 -54 -292 -5 -15 -131 71 -760 519 -415 295 -757 538 -759 540 -2 2 11 74 29 159 26 121 37 155 48 150 7 -3 345 -244 750 -536z'/%3E%3C/g%3E%3C/svg%3E") space 0 0;}
+
+/* vignette on headers and dropdowns */
+.column-header {box-shadow: inset 0 0 8px 8px rgba(0,0,0,0.3);}
+.column-header__button {background: transparent !important;}
+.column-header__collapsible-inner {box-shadow: inset 0 0 10em 10em rgba(0,0,0,0.3);}

app/javascript/styles/linernotes_dark/palette.scss

@@ -0,0 +1,59 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+* 
+* Foreground Colors:
+*            --bg: | Background for foreground elements.
+*          --text: | A color that stands out against bg.
+*      --textBold: | A color that stands out strongly against bg.
+*     --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+*        --bgPage: | Background for non-foreground elements.
+*      --textPage: | A color that stands out against bgPage.
+*  --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+*        --bgHead: | Background for column headers.
+*      --textHead: | A color that stands out (strongly) against bgHead.
+*        --accent: | An accent color for links and buttons.
+*    --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+*   - Consider using an off-white or off-black for text tones,
+*     but not necessary as long as there is sufficient contrast.
+*   - Bold colors are highly recommended to be strong colors,
+*     like pure white or pure black.
+*   - Muted colors can be off-grey or any mid-tone with slight contrast.
+*   - It might be best to base the background palette on a slightly
+*     darker or lighter version of the foreground palette, but
+*     this is no longer strictly necessary; you may use mixed palettes.
+*     It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* linernotes dark */
+
+:root {
+--bg: rgb(26,21,21);
+--text: rgb(225,225,225);
+--textBold: rgb(255,255,255);
+--textMuted: rgb(153,157,156);
+
+--bgPage: rgb(42,38,37);
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: rgb(255,122,23);
+--textHead: var(--textBold);
+--accent: rgb(3, 180, 0);
+--accentText: var(--textBold);
+}

app/javascript/styles/mfc/0-palette.css

@@ -0,0 +1,127 @@
+/*------------------------------------------------------------------------------
+* DEFINE COLOR PALETTE
+*
+* Choose the CSS Variables that will be applied to recolor elements.
+* The current format is to use hex codes, e.g. #00FF00.
+*
+* A future refactor to use rgb() instead may allow transparency mods
+* via using these variables with rgba(). Hex codes currently do not
+* work with rgba(), so no transparency mods are included except for
+* those defined in absolute terms (i.e., non-variable colors).
+* 
+* Foreground Colors:
+*            --bg: | Background for foreground elements.
+*          --text: | A color that stands out against bg.
+*      --textBold: | A color that stands out strongly against bg.
+*     --textMuted: | A color that stands out slightly against bg.
+*
+* Background Colors:
+*        --bgPage: | Background for non-foreground elements.
+*      --textPage: | A color that stands out against bgPage.
+*  --textPageBold: | A color that stands out strongly against bgPage.
+* --textPageMuted: | A color that stands out slightly against bgPage.
+*
+* Highlights Colors:
+*        --bgHead: | Background for column headers.
+*      --textHead: | A color that stands out (strongly) against bgHead.
+*        --accent: | An accent color for links and buttons.
+*    --accentText: | A color that stands out (strongly) against accent.
+*
+* Palette advisories for choosing colors:
+*   - Consider using an off-white or off-black for text tones,
+*     but not necessary as long as there is sufficient contrast.
+*   - Bold colors are highly recommended to be strong colors,
+*     like pure white or pure black.
+*   - Muted colors can be off-grey or any mid-tone with slight contrast.
+*   - It might be best to base the background palette on a slightly
+*     darker or lighter version of the foreground palette, but
+*     this is no longer strictly necessary; you may use mixed palettes.
+*     It is now possible to use a dark bgPage and light bg, or vice-versa.
+------------------------------------------------------------------------------*/
+
+/* copy and paste the desired palette at the end of this section,
+* or you can delete the ones you don't want, or comment them out.
+*/
+
+
+/* Clean Slate:
+* white columns on a light-grey page, with dark grey headers and blue accent.
+*/
+:root {
+--bg: #fff;
+--text: #123;
+--textBold: #000;
+--textMuted: #666;
+
+--bgPage: #ddd;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: #fff;
+--accent: #09f;
+--accentText: var(--textHead);
+}
+
+/* Droid/Flamingo:
+* dark neutral-grey page, with either Android Green or Flamingo accent.
+*/
+:root {
+--bg: #222;
+--text: #ddd;
+--textBold: #fff;
+--textMuted: #777;
+
+--bgPage: #111;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #333;
+--textHead: var(--textBold);
+--accent: #a4c639;  /* flamingo: #f09 */
+--accentText: var(--textHead);
+}
+
+/* Midnight Blue:
+* a dark blue palette based loosely on Twitter's night mode.
+*/
+:root {
+--bg: #123;
+--text: #d0d8e0;
+--textBold: #fff;
+--textMuted: #808890;
+
+--bgPage: #051119;
+--textPage: var(--text);
+--textPageBold: var(--textBold);
+--textPageMuted: var(--textMuted);
+
+--bgHead: #357;
+--textHead: var(--textBold);
+--accent: #09f;
+--accentText: var(--textBold);
+}
+
+/*  
+* Testing palette:
+* light grey columns, slate grey background, turquoise headers, orange accents.
+* (a bit garish, but sufficiently "different" to catch any unthemed elements.)
+*/
+:root {
+--bg: #d9e1e8;
+--text: #234;
+--textBold: #000000;
+--textMuted: #579;
+
+--bgPage: #345;
+--textPage: #ddd;
+--textPageBold: #fff;
+--textPageMuted: #aaa;
+
+--bgHead: darkturquoise;
+--textHead: #345;
+--accent: #ff3e00;
+--accentText: var(--textPageBold);
+}

app/javascript/styles/mfc/1-foreground.css

@@ -0,0 +1,271 @@
+/*------------------------------------------------------------------------------
+* FOREGROUND COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/*----------------------
+base background and text
+----------------------*/
+
+/* status columns */
+.column>.scrollable,
+.status,
+    .status__content,
+.detailed-status,
+    .detailed-status__action-bar,
+    .focusable:focus .detailed-status,
+    .focusable:focus .detailed-status__action-bar,
+.setting-text,
+    .setting-text:active,
+    .setting-text:focus,
+.status-direct .status__content .status__content__spoiler-link,
+.column-link,
+    .getting-started a.column-link,
+    .getting-started__trends .trends__item__current,
+.account__header__content,
+.account__header__bio .account__header__content,
+.account--panel,
+.account__header__bar,
+.account__header__account-note textarea,
+.follow_requests-unlocked_explanation,
+.account-authorize,
+.trends__header,
+/* new conversations */
+.conversation--unread,
+.conversation__content__names,
+/* search */
+.search__input,
+    .search__input:focus,
+.search-results .account,
+.trends__item,
+    .trends__item__name a,
+    .trends__item__current,
+/* compose form */
+.reply-indicator__content, /* in reply to */
+.compose-form .spoiler-input__input, /* cw */
+.compose-form .autosuggest-textarea__textarea, /* post */
+.compose-form .compose-form__modifiers, /* image uploads */
+.compose-form .compose-form__buttons-wrapper, /* buttons */
+/* settings page */
+.simple_form textarea,
+    .simple_form textarea:active,
+    .simple_form textarea:focus,
+.simple_form input[type=email],
+    .simple_form input[type=email]:active,
+    .simple_form input[type=email]:focus,
+.simple_form input[type=number],
+    .simple_form input[type=number]:active,
+    .simple_form input[type=number]:focus,
+.simple_form input[type=password],
+    .simple_form input[type=password]:active,
+    .simple_form input[type=password]:focus,
+.simple_form input[type=text],
+    .simple_form input[type=text]:active,
+    .simple_form input[type=text]:focus,
+.table td,
+    .table th,
+    .table.inline-table>tbody>tr:nth-child(odd)>td,
+    .table.inline-table>tbody>tr:nth-child(odd)>th,
+    .table>tbody>tr:nth-child(odd)>td,
+    .table>tbody>tr:nth-child(odd)>th,
+    .batch-table__row,
+    .batch-table__row:nth-child(2n),
+    .batch-table__row:hover,
+.column-inline-form label,
+.dashboard__counters > div > div, .dashboard__counters > div > a,
+.log-entry,
+    .log-entry__header,
+/* modals */
+.actions-modal,
+    .actions-modal .status,
+    .actions-modal ul li:not(:empty) a,
+    .status.light .display-name strong, .status.light .status__content,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+    .block-modal .setting-toggle__label, .mute-modal .setting-toggle__label,
+.report-modal,
+    .report-modal__statuses .status__content p,
+    .report-modal__comment .setting-toggle__label,
+.list-editor,
+    .list-editor .drawer__inner,
+    .list-editor .drawer__inner.backdrop,
+.account__moved-note,
+.introduction__pager,
+.introduction__text p,
+.reactions-bar__item,
+/* profile cards */
+.card__bar,
+    .card>a:active .card__bar,
+    .card>a:focus .card__bar,
+    .card>a:hover .card__bar,
+.directory__card__bar,
+    .directory__card__extra,
+    .accounts-table__count,
+    .directory__card__img,
+/* public pages */
+#new_user .lead,
+.landing .hero-widget__footer,
+    .landing .simple_form .user_agreement .label_input > label,
+    .landing .hero-widget h4,
+    .hero-widget__counter,
+    .landing .hero-widget__counter span,
+    .directory__tag > a, .directory__tag > div,
+.activity-stream .entry,
+.landing-page #mastodon-timeline,
+    .landing-page #mastodon-timeline p,
+    .landing-page__forms,
+    .landing-page__information,
+    .landing-page li,
+    .landing-page p,
+    .directory__tag h4 small,
+    .directory__tag h4 .fa,
+    .landing-page .features-list .features-list__row .text,
+    .landing-page .features-list .features-list__row .visual .fa,
+    .landing-page__short-description h1,
+    .landing-page .separator-or span,
+.box-widget,
+    .contact-widget,
+    .landing-page__information.contact-widget,
+.rich-formatting li,
+    .rich-formatting p,
+.public-layout .public-account-bio .account__header__content,
+    .public-layout .public-account-bio .roles,
+    .public-layout .public-account-bio__extra,
+    .public-layout .public-account-bio,
+.public-layout .public-account-header__bar::before,
+.account__header__fields dt,
+.account__header__fields dd,
+.hero-widget__text,
+.load-more,
+.button.button-secondary,
+.simple_form__overlay-area__overlay
+{
+background: var(--bg);
+color: var(--text)
+}
+
+/*--------------------
+override for bold text
+--------------------*/
+
+/* primary elements */
+.account__display-name strong,
+    .status__display-name strong,
+    .detailed-status__display-name strong,
+    .card__bar .display-name strong,
+    .directory__card__bar .display-name strong,
+    .account__header__tabs__name h1,
+    .account__header__extra__links a strong,
+.account__action-bar__tab strong, /* profile counters */
+.conversation__content__names a,
+.conversation--unread .conversation__content__relative-time,
+/* settings page*/
+.dashboard__counters__num, .dashboard__counters__text,
+.log-entry a,
+    .log-entry .username,
+    .log-entry .target,
+/* public pages */
+#new_user .lead strong,
+.landing-page h3,
+    .landing-page h4,
+    .landing-page em,
+    .landing-page h5,
+    .landing-page h6,
+    .directory__tag h4,
+.rich-formatting h3,
+    .rich-formatting h4,
+.public-layout .public-account-header__tabs__tabs .counter .counter-number,
+.account__header__fields dt
+{
+color: var(--textBold)
+}
+
+/*---------------------
+override for muted text
+---------------------*/
+
+/* secondary elements */
+.display-name__account,
+    .account .account__display-name,
+    .card__bar .display-name span,
+    .directory__card__bar .display-name span,
+    .accounts-table__count small,
+    .account__header__tabs__name h1 small,
+    .account__header__extra__links a,
+    .account__header__account-note label,
+    .account__header__account-note textarea::placeholder,
+    .account__header__extra__links,
+.detailed-status__meta,
+.status__relative-time,
+.status__action-bar__counter__label,
+.status__prepend,
+    .status__prepend .status__display-name strong,
+.account__moved-note__message,
+.attachment-list.compact .fa,
+.icon-button,
+    .icon-button.disabled,
+    .icon-button.active:hover,
+.account__action-bar__tab>span,
+.compose-form .icon-button.inverted,
+    .compose-form .text-icon-button,
+    .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter,
+.upload-progress,
+.search__icon .fa,
+    .search__icon .fa-times-circle,
+    .trends__item__name,
+.search__input::placeholder,
+.notification__message,
+.muted .status__content,
+    .muted .status__content a,
+    .muted .status__content p,
+    .muted .status__display-name strong,
+.attachment-list__list a,
+a.table-action-link,
+    .table a.table-action-link,
+    button.table-action-link,
+.status__wrapper--filtered,
+.conversation__content__relative-time,
+/* settings page */
+.dashboard__counters__label,
+.log-entry__timestamp,
+/* public pages */
+.landing-page__short-description h1 small,
+    .landing-page__short-description h1 small span,
+.simple_form p.hint.subtle-hint,
+.public-layout .public-account-bio .roles,
+    .public-layout .public-account-bio__extra,
+    .public-layout .public-account-header__tabs__tabs .counter,
+.load-more,
+.account__disclaimer
+{
+color: var(--textMuted)
+}
+
+/* fix announcement reactions */
+.reactions-bar__item__count {color: inherit}
+
+/* fix for conversations font weight */
+.conversation--unread .conversation__content__info {font-weight: 400}
+
+/* fix for border colors */
+.account--panel,
+.account__header__bar,
+.account__header__bio .account__header__fields,
+.status,
+.detailed-status__action-bar,
+.public-layout .public-account-header__tabs__tabs .counter,
+.account__header__fields,
+.account__header__fields dl,
+.account__header__bio .account__header__fields,
+.account,
+.directory__card__extra .account__header__content,
+.account__section-headline, .notification__filter-bar,
+.actions-modal .dropdown-menu__separator, .actions-modal .status
+{border-color: var(--textMuted)}
+
+.account__header__account-note,
+.announcements-list
+{border-color: transparent}
+
+.account__section-headline a.active::after, .account__section-headline button.active::after, .notification__filter-bar a.active::after, .notification__filter-bar button.active::after
+{border-color: transparent transparent var(--bg)}

app/javascript/styles/mfc/2-background.css

@@ -0,0 +1,181 @@
+/*------------------------------------------------------------------------------
+* BACKGROUND COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/*----------------------
+base background and text
+----------------------*/
+
+/* background and drawer */
+body.app-body,
+.ui,
+.drawer__tab,
+.drawer__inner,
+.drawer__inner.darker,
+.drawer__inner__mastodon,
+.tabs-bar,
+.tabs-bar__wrapper,
+.getting-started,
+.search-results__section h5,
+.account__section-headline,
+    .account__section-headline button,
+.notification__filter-bar,
+    .notification__filter-bar button,
+.timeline-hint,
+.introduction,
+.account__header__account-note textarea:focus,
+.flex-spacer, .getting-started, .getting-started__wrapper,
+/* DMs */
+.status.status-direct,
+    .status.status-direct:not(.read),
+    .focusable:focus .status.status-direct,
+    .status-direct .status__content,
+    .notification-favourite .status.status-direct,
+/* column preferences */
+.column-settings__section,
+    .column-header__collapsible,
+    .column-header__collapsible-inner,
+    .column-header__button.active,
+    .setting-meta__label,
+    .setting-toggle__label,
+.column-subheading,
+.content-wrapper,
+.media-spoiler,
+    .video-player__spoiler,
+    .video-player__spoiler.active:active,
+    .video-player__spoiler.active:focus,
+.react-toggle-track,
+.filter-form,
+/* in reply to */
+.reply-indicator,
+.reply-indicator__display-name,
+.reply-indicator__content,
+.reply-indicator__cancel .icon-button.inverted,
+.reply-indicator__content .status__content__spoiler-link,
+/* cw show more */
+.status__content .status__content__spoiler-link,
+.compose__action-bar .icon-button,
+/* settings page */
+.admin-wrapper .sidebar-wrapper,
+    .admin-wrapper .sidebar-wrapper__inner,
+    .admin-wrapper .sidebar ul a,
+    .admin-wrapper .sidebar ul a.selected,
+    .admin-wrapper .sidebar ul ul a,
+    .admin-wrapper .content h2,
+    .admin-wrapper .content h6,
+/* modals */
+.boost-modal__action-bar,
+    .confirmation-modal__action-bar,
+    .mute-modal__action-bar,
+.confirmation-modal__action-bar .confirmation-modal__cancel-button,
+    .confirmation-modal__action-bar .mute-modal__cancel-button,
+    .mute-modal__action-bar .confirmation-modal__cancel-button,
+    .mute-modal__action-bar .mute-modal__cancel-button,
+.error-column,
+    .regeneration-indicator,
+    .empty-column-indicator,
+.report-modal__comment .setting-text,
+.introduction__text p code,
+.list-editor .search__input,
+.announcements__item,
+/* opengraph previews */
+.status-card__image,
+.status-card__content,
+.status-card__description,
+.button:disabled,
+/* public pages */
+body.theme-default,
+.button.button-alternative,
+    .button.button-alternative-2,
+.landing-page__call-to-action,
+.public-layout .header,
+.public-layout .header .nav-link,
+.public-layout .header .nav-button,
+.nothing-here,
+.brand__tagline,
+.table-of-contents
+{
+background: var(--bgPage);
+color: var(--textPage)
+}
+
+/*--------------------
+override for bold text
+--------------------*/
+
+/* strong elements */
+.navigation-bar strong,
+.status-card__title,
+.status-direct .display-name strong,
+.reply-indicator__display-name strong,
+.admin-wrapper .content>p strong,
+.simple_form strong,
+.regeneration-indicator__label strong,
+.account__section-headline a.active,
+    .account__section-headline button.active,
+    .notification__filter-bar a.active,
+    .notification__filter-bar button.active,
+/* public pages */
+.information-board__section,
+    .information-board__section span:last-child,
+.endorsements-widget .display-name__html,
+    .endorsements-widget h4,
+.pagination .page,
+    .pagination .gap,
+    .pagination .newer,
+    .pagination .older,
+    .pagination a
+{
+color: var(--textPageBold)
+}
+
+/*---------------------
+override for muted text
+---------------------*/
+
+/* de-emphasized elements */
+.navigation-bar,
+.navigation-panel hr,
+.getting-started,
+    .getting-started p,
+    .getting-started__footer p,
+.column-subheading,
+.account__section-headline a,
+.status-direct .icon-button,
+    .status-direct .display-name,
+    .status-direct .status__relative-time,
+    .status-direct .status__action-bar__counter__label,
+.status-direct.muted .status__content p,
+    .status-direct.muted .status__content a,
+    .status-direct.muted .display-name strong,
+.notification-favourite .status.status-direct .icon-button.disabled,
+.simple_form p.hint,
+    .simple_form span.hint,
+    .admin-wrapper .content .muted-hint,
+    .admin-wrapper .content>p,
+.status-card__host,
+.button:disabled,
+.loading-indicator,
+.list-editor .search__input::placeholder,
+    .list-editor .search__icon .fa,
+    .list-editor .search__icon .fa-times-circle,
+/* settings page */
+body .neutral-hint, .admin-wrapper .content .neutral-hint,
+/* public pages */
+.endorsements-widget .display-name__account,
+.public-layout .footer h4,
+    .public-layout .footer ul a,
+    .public-layout .footer ul li,
+    .public-layout .footer .grid .column-2 h4 a,
+    .public-layout .header .nav-button,
+/* log in, sign up, forgot passwd */
+.form-footer a,
+.lighter .simple_form p.hint.subtle-hint
+{
+color: var(--textPageMuted)
+}
+
+/* border color fix */
+.status.status-direct:not(.read),
+.table-of-contents li a
+{border-color: var(--textPageMuted)}

app/javascript/styles/mfc/3-highlights.css

@@ -0,0 +1,224 @@
+/*------------------------------------------------------------------------------
+* HIGHLIGHTS COLOR PALETTE =====================================================
+------------------------------------------------------------------------------*/
+
+/* scrollbar fix */
+html {scrollbar-color: var(--bg) var(--bgPage)}
+
+/*------------------
+headers and warnings
+------------------*/
+
+/* columns view */
+    .column-header,
+        .column-header__button,
+        .column-header__back-button,
+        .column-header__button:hover,
+        .column-header__back-button:hover,
+        .column-back-button,
+        .column-header>.column-header__back-button,
+        .column-header.active .column-header__icon,
+    .search-results__header,
+    .keyboard-shortcuts kbd,
+    .compose-form__warning,
+        .compose-form .compose-form__warning,
+    .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track,
+    .column-link__badge,
+    .column-link--transparent.active,
+/* settings pages */
+    .list-editor h4,
+    .admin-wrapper .content h4,
+        .admin-wrapper .sidebar ul ul a.selected,
+    .flash-message,
+        .flash-message.notice,
+    .column-inline-form,
+        .column-inline-form .icon-button,
+        .simple_form .warning,
+        .table-form .warning,
+    .pagination .current,
+    .account-role,
+    .batch-table__toolbar
+{
+    background: var(--bgHead);
+    color: var(--textHead)
+}
+
+/*--------------
+accented buttons
+--------------*/
+
+/* primary buttons */
+.directory__tag > a:hover, .directory__tag > a:active, .directory__tag > a:focus,
+    .button,
+        .button:active,
+        .button:focus,
+        .button:hover,
+    .icon-button.overlayed:hover,
+    .floating-action-button,
+    .simple_form button,
+        .simple_form button:active,
+        .simple_form button:focus,
+        .simple_form button:hover,
+        .simple_form .button,
+            .simple_form .button:active,
+            .simple_form .button:focus,
+            .simple_form .button:hover,
+        .simple_form .block-button,
+            .simple_form .block-button:active,
+            .simple_form .block-button:focus,
+            .simple_form .block-button:hover,
+    .button.button-alternative:hover,
+        .button.button-alternative-2:hover,
+    .column-link:hover,
+        .getting-started a.column-link:hover,
+    .column-header__button:hover,
+        .column-header__button.active:hover,
+        .column-header__back-button:hover,
+        .column-back-button:hover,
+    .drawer__header a:hover,
+    .react-toggle--checked .react-toggle-track,
+    .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track,
+    .privacy-dropdown.active .privacy-dropdown__value.active,
+        .privacy-dropdown__option:hover,
+        .privacy-dropdown__option.active,
+        .privacy-dropdown__option.active:hover,
+    .admin-wrapper .sidebar ul a:hover,
+        .admin-wrapper .sidebar ul ul a.selected:hover,
+    .reply-indicator__content .status__content__spoiler-link:hover,
+        .status__content .status__content__spoiler-link:hover,
+    .load-more:hover,
+    .conversation__unread,
+/* modals */
+    .confirmation-modal__action-bar .confirmation-modal__cancel-button:active,
+        .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus,
+        .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover,
+    .confirmation-modal__action-bar .mute-modal__cancel-button:active,
+        .confirmation-modal__action-bar .mute-modal__cancel-button:focus,
+        .confirmation-modal__action-bar .mute-modal__cancel-button:hover,
+    .mute-modal__action-bar .confirmation-modal__cancel-button:active,
+        .mute-modal__action-bar .confirmation-modal__cancel-button:focus,
+        .mute-modal__action-bar .confirmation-modal__cancel-button:hover,
+    .mute-modal__action-bar .mute-modal__cancel-button:active,
+        .mute-modal__action-bar .mute-modal__cancel-button:focus,
+        .mute-modal__action-bar .mute-modal__cancel-button:hover,
+    .upload-progress__tracker,
+    .radio-button__input.checked,
+/* public pages */
+    .public-layout .header .nav-button:hover,
+        .public-layout .header .brand:active,
+        .public-layout .header .brand:focus,
+        .public-layout .header .brand:hover,
+    .button.button-secondary:hover,
+/* settings pages */
+    .pagination .page.current:hover,
+    .introduction__dot.active,
+    .dashboard__counters > div > a:hover,
+        .dashboard__counters > div > a:focus,
+        .dashboard__counters > div > a:active,
+        .dashboard__counters > div > a:hover .dashboard__counters__label,
+        .dashboard__counters > div > a:focus .dashboard__counters__label,
+        .dashboard__counters > div > a:active .dashboard__counters__label,
+/* video player ui */
+    .video-player__seek__buffer,
+    .video-player__seek__progress,
+    .video-player__volume__current,
+    .video-player__volume__handle,
+/* announcements */
+    .icon-with-badge__badge,
+    .announcements__item__unread,
+    .reactions-bar__item:hover
+{
+    background: var(--accent);
+    color: var(--accentText);
+}
+
+/*------------
+accented links
+------------*/
+
+/* status links */
+    .status__content a,
+        .status__content a.unhandled-link,
+    .getting-started a,
+        .getting-started p a,
+        .getting-started__footer a,
+        .getting-started__footer p a,
+    .reply-indicator__content a,
+        .reply-indicator__content a.unhandled-link,
+        .reply-indicator__cancel .icon-button.inverted:hover,
+    .status__content__read-more-button,
+    .icon-button.active,
+        .icon-button:focus,
+        .icon-button:hover,
+    .search__icon .fa:hover,
+    .account__header__bio .account__header__fields a,
+    .notification-follow .account .icon-button:hover,
+    .notification__message .fa,
+    .notification__display-name:hover,
+    .admin-wrapper .content .muted-hint a,
+    .table a,
+        a.table-action-link:hover,
+        button.table-action-link:hover,
+    .media-spoiler:active,
+        .media-spoiler:focus,
+        .media-spoiler:hover,
+        .video-player__spoiler.active:hover,
+    .column-header__setting-btn:hover,
+        .column-inline-form .icon-button:hover,
+    .empty-column-indicator a, .error-column a,
+    .timeline-hint a,
+/* post options */
+    .compose-form .text-icon-button:hover,
+        .text-icon-button.active,
+        .drawer__inner .icon-button:hover,
+        .icon-button.inverted.active.disabled,
+    .navigation-bar__profile-edit:hover,
+        .navigation-bar__profile-account:hover,
+        .account__action-bar-dropdown .icon-button:hover,
+        .account__section-headline a:hover,
+    .compose-form .compose-form__warning a,
+/* modals */
+    .list-editor .account .icon-button:hover,
+        .list-editor .account .icon-button:active,
+        .list-editor .account .icon-button:focus,
+/* public pages */
+    .simple_form .input.boolean label a,
+    .landing-page__short-description p a,
+        .landing-page #mastodon-timeline p a,
+    .simple_form p.hint.subtle-hint a,
+    .contact-widget__mail a,
+    .public-layout .footer ul a:hover,
+        .public-layout .footer .grid .column-2 h4 a:hover,
+        .public-layout .public-account-bio .account__header__fields a,
+        .form-footer a:hover,
+/* settings pages */
+    .pagination a:hover,
+        .pagination .newer:hover,
+        .pagination .older:hover,
+    .filters .filter-subset a.selected,
+    .simple_form .hint a,
+/* mobile elements */
+    .tabs-bar__link.active
+{
+    color: var(--accent)
+}
+
+/* border fix */
+.react-toggle--checked .react-toggle-thumb,
+.radio-button__input.checked,
+.icon-with-badge__badge,
+.filters .filter-subset a.selected,
+.introduction__dot,
+.public-layout .public-account-header__tabs__tabs .counter.active::after
+{border-color: var(--accent)}
+
+/* trends fix */
+.trends__item__sparkline path:first-child {fill: transparent !important}
+.trends__item__sparkline path:last-child {stroke: var(--accent) !important}
+
+/* focus fix */
+.focusable:focus
+{
+  background: transparent;
+  border: 2px solid var(--accent);
+}

app/javascript/styles/mfc/5-material.css

@@ -0,0 +1,72 @@
+/*-----------------------
+material design overrides
+-----------------------*/
+
+/* turn statuses into cards */
+.drawer__inner darker {filter: drop-shadow(0 0 2px black)}
+.status,
+.conversation,
+.account-authorize__wrapper,
+.follow_requests-unlocked_explanation
+{
+    box-shadow: 0px 0px 2px black;
+    background: var(--bg);
+    margin: 8px;
+    border-radius: 2px;
+    border: 0
+}
+.status__wrapper--filtered {border: none}
+.detailed-status__wrapper {margin: 8px;} /*might look weird in older versions pre-2.6?*/
+
+/* recolors */
+.column>.scrollable,
+.landing-page #mastodon-timeline,
+.activity-stream .entry
+    {background: none !important}
+.account-timeline__header,
+.account,
+.conversation
+    {background: var(--bg)}
+.notification .account,
+.load-more
+    {background: var(--bgPage)}
+.status__prepend,
+.notification__message,
+.status__prepend .status__display-name strong,
+.keyboard-shortcuts
+    {color: var(--textPage) !important}
+.notification-follow .display-name__html
+    {color: var(--textPageBold)}
+.notification-follow .display-name__account,
+.notification-follow .account .icon-button,
+.status__wrapper--filtered,
+.load-more
+    {color: var(--textPageMuted)}
+
+/* borders */
+.account__section-headline, .notification__filter-bar,
+.account--panel, .account__header__bar, .account__header__bio .account__header__fields, .status, .detailed-status__action-bar, .account__header__fields dl, .account__header__bio .account__header__fields, .account, .directory__card__extra .account__header__content, .account__section-headline, .notification__filter-bar,
+.conversation,
+.account__header__fields,
+.account__header__account-note,
+.public-layout .public-account-header__tabs__tabs .counter
+
+{border-color: transparent}
+
+/* triangle tab indicator */
+.account__section-headline a.active:after,
+.account__section-headline a.active:before,
+.community-timeline__section-headline a.active:after,
+.community-timeline__section-headline a.active:before,
+.public-timeline__section-headline a.active:after,
+.public-timeline__section-headline a.active:before,
+.notification__filter-bar button.active::before,
+.notification__filter-bar button.active::after
+{
+    border-color: transparent transparent var(--bgHead)
+}
+
+/* fix rounding on end toots in stream */
+.activity-stream .entry:first-child .status,
+.activity-stream .entry:last-child .status
+{border-radius: 2px}

app/javascript/styles/mfc/mastodonFlat.scss

@@ -0,0 +1,6 @@
+@import '0-palette';
+@import '1-foreground';
+@import '2-background';
+@import '3-highlights';
+@import '5-material';
+@import '6-actions';

app/javascript/styles/mfc/variables.scss

@@ -0,0 +1,11 @@
+/* define scss variables in palette.scss of subtheme */
+:root {
+--bgPage: $bgPage;
+--bg: $bg;
+--bgHead: $bgHead;
+--text: $text;
+--textBold: $textBold;
+--textMuted: $textMuted;
+--textHead: $textHead;
+--accent: $accent;
+}

app/javascript/styles/mods/deprecated/display_bettersearch.css

@@ -0,0 +1,10 @@
+/*
+Make search results look better:
+- adds contrast to search icon
+- overlay-style shadowed background
+
+author: trwnh
+license: Public Domain
+*/
+.search__icon .fa.active {opacity: 1}
+.drawer__inner.darker {background: rgba(0,0,0,0.5)}

app/javascript/styles/mods/display_breakname.css

@@ -0,0 +1,9 @@
+/*
+Add a line break between display name and account handle:
+- this allows user/display names to expand more by default.
+- it also makes names look better in general.
+
+author: trwnh
+license: Public Domain
+*/
+.display-name__html {display: block;}

app/javascript/styles/mods/display_browserfont.css

@@ -0,0 +1,20 @@
+/*
+Use browser default font:
+- override mastodon-font-sans-serif with sans-serif
+- note: this is not the same as "use system default font"
+  in mastodon's preferences! that option uses a font that
+  would be *expected to load on that system*, and ignores
+  your browser's settings entirely. for example, if you
+  are running ms windows, you will see segoe ui, even if
+  your browser's default font is something else!
+
+author: trwnh
+license: Public Domain
+*/
+body,
+.landing-page #mastodon-timeline,
+.landing-page li,
+.landing-page p
+{
+    font-family: sans-serif
+}

app/javascript/styles/mods/display_circleavatar.css

@@ -0,0 +1,15 @@
+/*
+* Rounded avatars:
+* - adjust the border radius around all avatar elements.
+* - default override is 50% (i.e. turn squares into circles),
+*   but you can set it to whatever you want.
+*
+* author: trwnh
+* license: Public Domain
+*/
+.card .avatar img,
+.activity-stream .status.light .status__avatar img,
+.account__avatar,
+    .account__avatar-overlay-base,
+    .account__avatar-overlay-overlay
+{border-radius: 50%}

app/javascript/styles/mods/display_collapsedinteractions.css

@@ -0,0 +1,37 @@
+/*
+Collapse fave/boost/poll notifications
+- limits display to just a few lines (~3), so you can at least identify it
+- hides the display name on fave/boost, because you already know you posted it
+- tighter margins, remove space between CW and content
+- hides the buttons, but you can expand a status to interact with it
+
+author: trwnh
+license: Public Domain
+*/
+
+.notification-favourite .status,
+.notification-reblog .status,
+.notification-poll .status{
+    max-height: 4em;
+    overflow: hidden;
+}
+
+.notification-favourite .display-name,
+.notification-reblog .display-name {
+    display: none;
+}
+
+.notification-favourite .status__content,
+.notification-reblog .status__content {
+    margin-top: -4px;
+}
+
+.notification-favourite .status__content p,
+.notification-reblog .status__content p {
+    margin-bottom: 0px;
+}
+
+.notification-favourite .status__action-bar,
+.notification-reblog .status__action-bar {
+    display: none;
+}

app/javascript/styles/mods/display_emojizoom.css

@@ -0,0 +1,23 @@
+  /*
+  Emoji hover zoom:
+  - makes emoji grow in size when moused over
+  
+  author: noiob
+  license: CC0 - Public Domain
+  source: https://userstyles.org/styles/150165
+  */
+  
+  .emojione:hover
+  {
+    width: 50px !important;
+ /* set the width and height of the expanded emojo here */
+    height: 50px !important;
+    transition: all 0.3s ease-in-out !important;
+    /* the 0.3s is the animation time for growing the emojo, it can be set to 0 */;
+  }
+
+  .emojione
+  {
+    transition: all 0.2s ease-in-out;
+    /* the 0.2s is the animation time for shrinking the emojo, it can be set to 0 */;
+  }

app/javascript/styles/mods/display_fadedinteractions.css

@@ -0,0 +1,9 @@
+/*
+Fade out faved/boosted toots in notifications:
+- for "x favourited your toot" / "x boosted your toot",
+  make the faved/boosted toot half-transparent.
+
+author: trwnh
+license: Public Domain
+*/
+.status.muted {opacity: 0.5}

app/javascript/styles/mods/display_fullmedia.css

@@ -0,0 +1,31 @@
+/*
+Full-height media previews:
+- normal media previews are forced to be 16:9 for consistency
+- use this if you prefer to see the aspect ratio unchanged
+
+author: Kevin
+license: CC0 - Public Domain
+source: https://userstyles.org/styles/167207 [in part]
+*/
+
+.media-gallery {
+    max-height: 100% !important;
+    height: 100% !important;
+}
+
+.media-gallery__item-gifv-thumbnail, .media-gallery__item-gifv-thumbnail img {
+    transform: translateY(0%) !important;
+    max-height: 100% !important;
+}
+
+.media-gallery__item-thumbnail, .media-gallery__item-thumbnail img, .media-gallery__gifv {
+    max-height: 100% !important;
+}
+
+.media-gallery__item {
+    width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    inset: 0 !important;
+    margin-bottom: 4px;
+}

app/javascript/styles/mods/display_fullname.css

@@ -0,0 +1,11 @@
+/*
+Always show full name and handle:
+- this removes the `...` and allows text to overflow past the column.
+- this can look worse, but it can also prevent having to mouse over
+  to see the full name or handle.
+- by default, it will also break long names onto a new line.
+
+author: trwnh
+license: Public Domain
+*/
+.display-name {overflow: visible; white-space: normal; word-wrap: break-word}

app/javascript/styles/mods/display_hidefollowcounts.css

@@ -0,0 +1,10 @@
+/*
+Hide the following and follower counters on profiles.
+- full counts are still available by hovering over the text, though
+author: trwnh
+license: Public Domain
+*/
+.account__header__extra__links a:not(:first-child) strong
+{display: none}
+.details-counters .counter:not(:first-child) .counter-number
+{visibility: hidden}

app/javascript/styles/mods/display_hidereplycounts.css

@@ -0,0 +1,7 @@
+/*
+Hide the 0/1/1+ counters of replies.
+
+author: trwnh
+license: Public Domain
+*/
+.status__action-bar__counter__label {display: none}

app/javascript/styles/mods/display_starstohearts.css

@@ -0,0 +1,16 @@
+/*
+Turn stars into hearts:
+- similar to twitter's change
+
+author: numimyon
+license: CC0 - Public Domain
+source: https://userstyles.org/styles/151233
+*/
+
+.notification__favourite-icon-wrapper .star-icon,
+.star-icon.active,
+.star-icon:hover,
+.star-icon:active
+{color: crimson !important;}
+
+.fa-star:before {content: "";}

app/javascript/styles/mods/display_transparentmedia.css

@@ -0,0 +1,10 @@
+/*
+Remove the checker-board background from the media modal:
+- this makes transparent images actually transparent
+
+author: trwnh
+license: Public Domain
+*/
+.media-modal canvas,
+.media-modal img
+{background: none}