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;