@@ -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; | |||
@@ -360,6 +360,8 @@ class ComposeForm extends ImmutablePureComponent { | |||
privacy={privacy} | |||
sideArm={sideArm} | |||
/> | |||
<div id="motd"></div> | |||
</div> | |||
); | |||
} | |||
@@ -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} | |||
@@ -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()); | |||
}, | |||
@@ -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> | |||
); | |||
} | |||
} |
@@ -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> | |||
@@ -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 /> | |||
@@ -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> | |||
); | |||
} | |||
} |
@@ -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> }} | |||
@@ -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) => { | |||
@@ -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> | |||
@@ -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', | |||
@@ -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); |
@@ -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)); | |||
@@ -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); | |||
} | |||
} |
@@ -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; | |||
@@ -226,7 +226,7 @@ | |||
} | |||
a { | |||
color: $lighter-text-color; | |||
color: $lighter-text-color !important; | |||
text-decoration: none; | |||
&:hover { text-decoration: underline } | |||
@@ -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%); | |||
} | |||
} | |||
} | |||
} |
@@ -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; | |||
} |
@@ -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'; | |||
@@ -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; | |||
} |
@@ -0,0 +1,7 @@ | |||
.mention { | |||
color: $ui-primary-color !important | |||
} | |||
.mention.hashtag, .status__content a.unhandled-link { | |||
color: $highlight-text-color | |||
} |
@@ -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'; |
@@ -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'; |
@@ -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'; |
@@ -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'; |
@@ -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'; |
@@ -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)} |
@@ -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; | |||
} |
@@ -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); | |||
} |
@@ -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} |
@@ -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); | |||
} |
@@ -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); | |||
} |
@@ -0,0 +1,7 @@ | |||
#premotd { | |||
background: var(--bg) !important; | |||
} | |||
#motd #premotd a { | |||
color: var(--accent) !important; | |||
} |
@@ -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); | |||
} |
@@ -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); | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
} |
@@ -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> | |||
); | |||
} | |||
@@ -0,0 +1,5 @@ | |||
en: | |||
skins: | |||
glitch: | |||
cyberpunk: Cyberpunk | |||
@@ -0,0 +1 @@ | |||
@import 'flavours/glitch/styles/flatClean'; |
@@ -0,0 +1,8 @@ | |||
en: | |||
skins: | |||
glitch: | |||
mastodonFlat: Clean Flat | |||
es: | |||
skins: | |||
glitch: | |||
mastodonFlat: Flat |
@@ -0,0 +1 @@ | |||
@import 'flavours/glitch/styles/flatDroid'; |
@@ -0,0 +1,8 @@ | |||
en: | |||
skins: | |||
glitch: | |||
mastodonFlat: Droid Flat | |||
es: | |||
skins: | |||
glitch: | |||
mastodonFlat: Flat |
@@ -0,0 +1 @@ | |||
@import 'flavours/glitch/styles/flatFlamingo'; |
@@ -0,0 +1,8 @@ | |||
en: | |||
skins: | |||
glitch: | |||
mastodonFlat: Flamingo Flat | |||
es: | |||
skins: | |||
glitch: | |||
mastodonFlat: Flat |
@@ -0,0 +1 @@ | |||
@import 'flavours/glitch/styles/flatTwitter'; |
@@ -0,0 +1,8 @@ | |||
en: | |||
skins: | |||
glitch: | |||
mastodonFlat: Midnight Flat | |||
es: | |||
skins: | |||
glitch: | |||
mastodonFlat: Flat |
@@ -0,0 +1,2 @@ | |||
@import 'variables'; | |||
@import 'flavours/glitch/styles/index'; |
@@ -0,0 +1,5 @@ | |||
en: | |||
skins: | |||
glitch: | |||
kafuka: Minty Blend | |||
@@ -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; | |||