parent
ba22398c38
commit
2d30ca72b6
@ -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> |
||||
); |
||||
} |
||||
|
||||
} |
@ -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> |
||||
); |
||||
} |
||||
|
||||
} |
@ -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; |
||||
} |
@ -0,0 +1,7 @@ |
||||
.mention { |
||||
color: $ui-primary-color !important |
||||
} |
||||
|
||||
.mention.hashtag, .status__content a.unhandled-link { |
||||
color: $highlight-text-color |
||||
} |
File diff suppressed because one or more lines are too long
@ -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'; |
@ -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 { |
||||